千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
1、如何理解HTML5结构语义化？
在合适的时候用合适的标签做合适的事情
段落用p标签，标题用h系列标签，边栏用aside标签，主要内容用main标签
对开发者：
①、便于团队开发和维护
②、在没有加载css的情况下也能呈现较好的内容结构与代码结构，易于阅读
对浏览器：
有利于SEO，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性
2、h5的新特性
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
① 用于媒介回放的 video 和 audio 元素
②本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
③sessionStorage 的数据在浏览器关闭后自动删除
④语意化更好的内容元素，比如 article、footer、header、nav、section
⑤表单控件，calendar（日历）、date、time、email、url、search
⑥新的技术webworker：开启一个子线程, websocket, Geolocation：获取地理位置
移除的元素:
纯表现的元素: basefont，big，center，font,s，strike，tt，u
对可用性产生负面影响的元素: frame，frameset，noframes
支持HTML5新标签
IE8/IE7/1E6支持通过document.createElemert方法产生的标签。
可以利用这一特性让这些浏览器支持HTML5新标签
浏览器支持新标签后，还需要添加标签默认的样式
3.请描述一下 cookies，sessionStorage 和localStorage 的区别?
cookie是网站为了标示用户身份而储存在用户本地终端 (Client Side) 上的数据(通常经过加密)
cookie数据始终在同源的http请求中携带 (即使不需要)，记会在浏览器和服务器间来回传递
sessionstorage和localstorage 不会自动把数据发给服务器，仅在本地保存
存储大小:
cookie数据大小不能超过4k
sessionstorage和localstorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间:
localstorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionstorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的 cookie过期时间之前一直有效，即使窗口或浏览器关闭
【cookie】：有一个无状态的http协议，每次请求，对于服务端而言并不知道你是谁，可以使用cookie来标识当前使用者的身份，所以引入了cookie。一旦被人窃取，别人有可能会模拟自己登录网站。cookie是在在本地存储的，可以理解为在浏览器下的某个文件夹中进行加密存储，document.cookie获取，cookie数据始终在同源的http请求中自动携带到服务端，服务端也可以自动设置本地的cookie，这样就可以与服务端进行交互，这是与localStorage和sessionStorage的不同之处，localStorage和sessionStorag不会自动的把数据发给服务器，仅可以在前端中对js进行设置
4、浏览器的渲染机制一般分为几个步骤
①、处理HTML并构建DOM树
浏览器开始处理HTML，根据HTML标签构建DOM树，并且实现对于DDOM树操作的api渲染完成
②、处理css构建CSSOM树
操作css的api做好了准备
③、将DOM、CSSOM合并成一个渲染树
④、根据渲染树来布局，计算每个节点的位置
⑤、调用GPU绘制，合成图层，显示在屏幕上
注意:
在构建 CSSOM 树时，会阻塞页面渲染【非常消耗性能】，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
当HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS 文件
【这种问题的另外问法【我要把一个网页渲染在浏览器端发生了什么，网页是如何被渲染在浏览器端的】】
5、重绘和回流
重绘和回流也会影响页面性能，怎样优化页面（少做回流相关的操作）
回流是指当页面中的元素发生布局或几何属性发生变化时，浏览器需要重新计算元素的几何属性和页面的布局，并重新绘制页面，这个过程就称为回流。回流的代价比较高昂，因为它会导致其他元素的布局和绘制也需要重新计算和执行，最终影响整个页面的性能。
重绘是指当页面中的元素的样式属性发生变化时，浏览器只需要重新绘制这些元素的外观，而不需要重新计算元素的几何属性和页面布局，这个过程就称为重绘。重绘的代价比较低廉，因为它只需要重新绘制元素的样式，而不需要重新计算元素的位置和大小。
回流一定发生重绘，重绘不一定发生回流，回流所需的成本比重绘高，改变深层次的节点很可能导致父节点的一系列回流
为了优化页面性能，我们应该尽量减少回流的发生。可以采取以下几种方式来减少回流的发生:
（1）、避免频繁操作样式:多次修改元素的样式会导致多次回流，可以将样式的修改集中在一起，减少回流的次数。
（2）、使用文档碎片(DocumentFragment): 将多个元素的修改先保存在文档碎片中，最后一次性添加到页面中，可以减少回流的次数。
（3）、缓存布局信息:在JavaScript中，获取元素的布局信息(如位置、大小等)会触发回流，可以将布局信息缓存起来，避免重复获取。
（4）、避免强制同步布局:在JavaScript中，使用某些方法(如offsetLeft、scrollLeft等)获取元素的布局信息时，会强制浏览器同步布局，可以使用异步的方式获取布局信息，避免强制同步布局。
（5）、批量修改DOM
（6）、对于复杂动画效果，使用绝对定位让其脱离文档流
（7）、css3硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘
