千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
1.如何理解HTML5结构语义化？
HTML5结构语义化是指:用正确的标签做正确的事情。
对开发者:
1.便于团队的开发和维护。
2.在没有加载CSS的情况下也能呈现出较好的内容结构与代码结构，易于阅读。
对浏览器:
1.有利于seo搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
2.方便其他设备的解析，利于无障碍阅读，提高可访问性。
2.HTML5的新特新？
- HTML5已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
1.用于媒介回放的video和audio元素
2.本地离线存储localStorage长期储存数据，浏览器关闭之后数据会丢失
3.sessionStorage的数据在浏览器关闭之后自动将数据删除
4.语义化更好的内容元素有：article、footer、header、nav、section
5.表单控件：calendar、date、time、Email、url、search
6.新的技术：
(1) webworker : 子线程：web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。
(2) websocket : WebSocket 使用ws或wss协议，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
(3)Geolocation : 位置信息的获取依据
W3C定义geolocation-API实现标准解释为：接口与底层位置信息无关。常见的位置信息来源包括全球定位系统(GPS)和从网络信号推断出的位置，如IP地址、RFID、WiFi和蓝牙MAC地址、GSM/CDMA小区id，以及用户输入。不能保证API返回设备的实际位置。
规范中没有规定使用这些设备的先后顺序。在HTML5的实现中，手机等移动设备优先使用GPS定位。笔记本和部分平板，最准确的定位是WIFI。网线上网的台式机，一般就只能使用IP来定位了，IP准确度最低。
出于隐私保护考虑，标准规范获取地理位置必须得用户授权后才能得到地理位置信息，并且在HTTP协议下除locahost / 127.0.0.1，其它地址必须使用HTTPS协议才可正确获取。
- 移除的元素：
1. 纯表现的元素： basefont,big,center,font,s,strike,tt,u
2. 对可用性产生负面影响的元素：
frame,frameset,noframes
- 支持HTML5新标签：
(1)IE8、 IE7、 IE6支持通过 document.createElement方法产生的标签
(2)可以利用这一特性让这些浏览器支持HTML5新标签
(3)浏览器支持新标签后，还需要添加标签默认的样式
- 也可以使用成熟的框架：html5shim
3. 描述一下cookies,sessionStorage和localStorage的区别？
- cookie:是网站为了表示用户身份而 而存储用户本地终端上的数据(通常经过加密)
- cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器之间来回传递
- sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存
- cookie数据大小不能超过4k
- C和localStorage虽然也有存储大小的限制，但比cookie大，可以达到5M甚至更大。
- 有期时间：
- localStorage：存储持久的数据，浏览器关闭后，数据不会丢失除非主动删除数据
- sessionStorage:数据在当前浏览器窗口关闭后自动删除
- cookie设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭
4. 浏览器的渲染机制一般分为几个步骤？
- 处理HTML并构建DOM树
- 处理css 构建CSSOM树（对象模型）
- 将DOM和CSSOM合并成一个渲染树
- 根据渲染数据进行布局，计算每个节点的位置
- 调用GPU绘制，合成图层，显示在屏幕上。
注意：
- 在构建cssom树时，会阻塞渲染，直到cssom树构建完成，并且构建cssom树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的css选择器，执行的速度越慢
- 当HTML解析到script标签时，会暂停构建DOM，完成后才会从暂停的地方重新开始，也就是说，如果想让首屏渲染的越快，就不应该在首屏就加载js文件。
5.重绘(Repaint)和回流(Reflow)
- 重绘是指当节点需要更改外观而不会影响布局的，比如改变字体颜色...就称为重绘。
- 回流是指布局或者几何属性需要改变就成为回流(需要计算它们在设备视口内的确切位置和大小)
注意：回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高得多，改变深层次的节点很可能导致父节点的一系列回流。
- 可能导致性能问题：
（1）添加或者删除可见的DOM元素
（2）元素的位置发生改变
（3）元素的尺寸发生变化
（4）内容发生变化，比如文本变化或者图片被另一个不同的尺寸的图片所代替
（5）定位或者浮动
（6）浏览器的窗口发生变化(因为回流是根据视口的大小来计算元素的位置和大小的)
- 如何减少回流和重绘？
（1）批量的修改DOM
（2）对于复杂的动画效果，使用绝对定位让其脱离文档流
(3)css硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘。
