前端面试题总结一

1.请描述一下cookies,sessionStorage和localStorage的区别？

cookie是网站为了标示用户身份而储存在用户本地终端(client side)上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器之间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，尽在本地保存
存储大小：
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效时间：
localStorage存储池旧数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期事件之前一直有效，即使窗口或浏览器关闭

2.iframe有哪些缺点？
iframe会阻塞主页面的onload事件，搜索引擎的检索程序无法解读这种页面，不利用SEO
iframe会和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑，如果需要使用iframe，最好是通过js动态给iframe添加属性src属性值

3.如何实现浏览器内多个标签页之间的通信？
WebSocket,SharedWorker，也可以调用localStorage，cookie等本地存储方式
localStorage另一个浏览上下文里被添加，修改或者删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

4.如何在页面上实现一个圆形的可点击区域？
1）map + area或者svg
2)border-radius
3)纯js实现，需要求一个点在不在圆上的简单算法，获取鼠标坐标等

5.介绍一下标准的css的盒子模型？低版本的IE的盒子模型有什么不同？
1）有两种：IE盒子模型，W3C盒子模型
2）盒模型：内容（content），填充（padding），边界（margin），边框（border）
3）区别：IE的content部分把border和padding计算了进去

6.CSS的有线计算法如何计算？
优先级就近原则：同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为：!important>id>class>tag

7.为什么要使用CSS Sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长，请求虽然可以并发，但是如果请求太多会给服务器增加很大压力。

8.介绍一下你对浏览器内核的理解
主要分成两部分：渲染引擎和JS引擎
渲染引擎：负责取得网页的内容（HTML，XML，图像等等），整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同 ，所以渲染的效果也会不同。所有网页浏览器，电子邮件客户端以及其它需要编辑，显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JS来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

9.H5有哪些新特性？如何处理H5新标签的浏览器兼容问题？
新特性：
1）H5现在已经不是 SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
2）绘画canvas
3）用于媒体回放的video和audio元素
4）本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
5）语义化更好的内容元素，比如：article,footer,header,nav,section
6）表单控件：calendar,date,time,email,url,search
7）新的技术webworker,websocket,Geolocation
处理兼容问题：
IE8/IE7/IE6支持通过doocument.createElement方法产生的标签，可以利用这一特性来让这些浏览器支持H5的新标签，浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架，比如html5shim

10.XHTML和HTML的区别？
HTML是一种基于基本的web网页设计语言，XHTML是一个基于XML的置标语言
不同：
XHTML元素必须被正确嵌套
XHTML元素必须被关闭
标签名必须使用小写字母
XHTML文档必须拥有根元素