千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
1.如何理解HTML5结构语义化?
就是用正确的标签做正确的事情。
- 段落用p标签
- 标题用h系列标签
- 边框用aside标签
- 主要内容用main标签.
对于开发者来说，便于团队的开发和维护，呈现出较好的内容结构和代码结构。
对浏览器来说，有利于SEO，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重,利于无障碍说读等。
2.HTML5的新特性？
html现在主要是关于图像，位置，存储，多任务等功能的增加。
(1). video和audio元素可以用于音频，视频
(2).可以使用localStorage和sessionStrage进行
本地存储
- localStorage:长期存储数据，浏览器关闭之后不会数据丢失
- sessionStrage：浏览器关闭之后自动删除数据
(3).语意化更好的内容元素 比如 article， footer，header，nav，section
(4).表单控件(自行控件)：calendar(日历)，date，time，
email，url，search
(5).新技术
- webworker：是html5中的一个API，它允许在浏览器中创建一个后台线程，以便执行消耗时的任务，而不会阻塞主线程。
- websocket：是html5中的一种通信协议，它提供了在web浏览器和服务器之间进行实时双向通信的能力。
- Geolocation：是html5中的一个API，它可以获取用户设备的地理位置信息。
支持html5新标签
- IE8/IE7/IE6 支持通过document.createElement方法产生的标签。
- 可以利用这一特征让这些浏览器支持html5新标签
- 浏览器支持新标签后，还需要添加标签默认的一些样式
可以直接使用成熟的框架
比如：html5shim
如何区分HTML5：
- doctype声明
- 新增的结构元素
- 功能元素
3.请描述一下cookies，sessionStorage和localStorage的区别？
使用上面
- cookie：是网站为了标示用户身份而存储在用户本地终端上的数据（通常经过加密）
- cookie：数据始终在同源的http请求中携带，会在浏览器和服务器之间来回传递。
- sessionStorage和localStorage不会自动把数据发给服务器，仅是在本地保存。
存储大小
- cookie：数据大小不能超过4k
- sessionStorage和localStorage虽然有存储大小的限制，但比cookie大的多，可以达到5M或者更大
有期时间
localStorage：持久存储数据(永久存储)，浏览器关闭后数据不会丢失除非主动删除数据
sessionStorage：数据在当前浏览器窗口关闭后会自动删除
cookie：设置过期时间，在有效期时间内就一直有效，即使窗口或浏览器关闭数据不会丢失。
4.浏览器的渲染机制一般分为几个步骤？
- 处理html，并构建DOM树
- 处理css构建CSSOM树
- 将DOM与CSSOM合并成一个渲染树
- 根据渲染树布局，计算每一个节点的位置
- 调用GPU绘制，合成图层，显示在屏幕上
js渲染注意的问题：
- 在构建 CSSOM 树时，会塞染，直至 CSSOM 构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
- 当HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS 文件。
5.重绘(Repaint)和回流(Reflow)
重绘是指当节点需要更改外观而不会影响布局的，比如改变字体颜色...就称为重绘。
回流是指布局或者几何属性需要改变就成为回流(需要计算它们在设备视口内的确切位置和大小)
注意：回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高得多，改变深层次的节点很可能导致父节点的一系列回流。
可能导致性能问题：
- 添加或者删除可见的DOM元素
- 元素的位置发生改变
- 元素的尺寸发生变化
- 内容发生变化，比如文本变化或者图片被另一个不同的尺寸的图片所代替
- 定位或者浮动
- 浏览器的窗口发生变化(因为回流是根据视口的大小来计算元素的位置和大小的)
如何减少回流和重绘？
- 批量的修改DOM
- 对于复杂的动画效果，使用绝对定位让其脱离文档流
- css硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘。
