一、前端数据存储？
Cookie，sessionStorage，localStorage 的介绍？
1. Cookie：Cookie在HTTP请求发送Set-Cookie 的时候作为HTTP头响应`的一部分，通过name=value的形式存储。
2. sessionStorage:针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。
3.localStorage : 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。
sessionStorage 、localStorage 和 cookie 之间的区别？
1、**存储容量大小**：cookie在浏览器和服务器间来回传递，cookie数据不能超过4k，每次http请求都会携带cookie， sessionStorage和localStorage可以达到5M。
2、 **存储时间大小**：而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
sessionStorage：仅在当前浏览器窗口关闭前有效，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3、**作用域不同**，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
H5 应用程序缓存和浏览器缓存的区别？
H5引入了应用程序缓存，意味着WEB应用可进行缓存，可在没有因特网时进行访问
应用程序缓存的优势：
离线缓存：用户可在离线时使用它们
速度：加载速度更快
减少服务器负载：浏览器只从服务器下载更新的或者更改过的资源
实现借助manifest文件
二、浏览器的相关知识
浏览器兼容都有那些？
常见浏览器都有那些？
IE浏览器：Trident内核，也称为IE内核 -ms
Chrome浏览器：Webkit内核，现在是Blink内核 -webkit
Firefox浏览器：Gecko内核，俗称Firefox内核 -moz
Safari浏览器：Webkit内核
Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核； -o
360浏览器：IE+Chrome双内核
猎豹浏览器：IE+Chrome双内核
百度浏览器：IE内核
QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
css兼容：
1.不同浏览器的margin，padding不同？==解决方案：css里增加通配符*{margin：0；padding：0}
2.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题？==解决方案：设置display：inline；
3.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度？==解决方案：设置line-height的值小于你的设置高度
4..图片默认有间距==解决方案：使用float为img布局
5.IE9以下浏览器不能使用opacity?==解决方案：opacity：0.5；filter：alfha（opacity=50）；
6.两个块级元素，父元素设置了overflow：auto；子元素设置了position：relative；且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；解决方案：父级元素设置position：relative
js兼容：
1.window.event当前事件对象
IE有FF没有 function(ev){var oEvent = ev|event}
2.获取事件源
IE用srcElement获取事件源，而FF用target获取事件源
3.添加和去除事件
IE：attachEvent/detachEvent
FF：addEventListener/removeEventListener
4.标签的自定义属性
IE：div.value或div[value]或div.getAttribute('value')
FF：div.getAttribute('value')
5.innerText与textContent
FF：支持textContent
IE：支持innerText
6.计算样式
IE是computedStyle
firefox是getComputedSyle();
7. 滚动事件
IE是MouseWheel
firefox是onmousewheel
8、阻止事件冒泡
ie:ev.cancelBubble = true;
jquery : ev.stopPropagation();
9、阻止默认事件
w3c的方法是e.preventDefault()，
IE则是使用e.returnValue = false;
渐进增强：优先考虑老版本浏览器的可用性，最后才考虑新版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下，正常CSS3会覆盖前缀CSS3。
.transition { /*渐进增强写法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}优雅降级：优先考虑新版本浏览器的可用性，最后才考虑老版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下，前缀CSS3会覆盖正常的CSS3。
.transition { /*优雅降级写法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
