千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
P1 HTML5面试题
1、HTML5结构语义化
简单来说就是在合适的时候用正确的标签做正确的事
好处：
对于开发者：便于代码的开发和维护，可以使代码的可阅读性更强
对于浏览器：有利于SEO，搜索引擎的爬虫依赖于标签确定上下文和各个关键字的权重
方便其他设备的解析，可以提高可访问性
2、HTML5的新特性
HTML已经不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加
video、audio用于媒介回放
localStorage，用于将数据存储在本地
artice、footer、header、nav、section，语义化标签
calendar、date、time、email、url、search，表单控件
webworker、websocke、Geolocationt等新技术
对纯表现和对可用性产生负面影响的元素进行删除，如basefont、big、center、frame等
对于浏览器不支持的，可以通过document。createElement创造标签，或者是使用一些成熟的库，如html5shim
3、cookie、sessionStorage、locaStroge的区别
cookie可以在标识当前使用者的身份，始终会在同源的http请求中携带，可以在浏览器和服务器之前传递，sessionStorage、locaStroge不会将数据发送给服务器，仅在本地保存
存储大小：cookie数据大小不能超过4k，sessionStorage、locaStroge可以达到5M或者更大
有效时间：locaStroge即使关闭浏览器数据都不会丢失，除非主动删除
sessionStorage在当前浏览器窗口关闭后会自动删除
cookie在有效期之内可以一直访问，有效期过后会自动删除
4、浏览器的渲染机制
处理HTML并创建DOM树
创建css构建CSSOM树
将DOM与CSSOM合并为一个渲染树
根据渲染树进行布局，计算每一个节点的位置
调用GPU绘制，合成图层显示在屏幕上
在构建CSSOM树会阻塞页面的渲染，应该尽量避免过多层叠，当HTMl遇到js会暂停dom的渲染，js加载完成后会从暂停的地方开始重新渲染，首页应该避免加载js文件
5、重绘和回流
重绘是当节点需要更改外观但不影响布局，如改变一个div的背景颜色
回流是指布局或者几何属性需要改变（计算机需要重新计算在设备视口内的确切位置和大小）回流一定会进行重绘，但是重绘不一定会引发回流
会导致出现回流的操作：
添加或者删除可见的DOM元素
元素的位置发生变化（外边框、内边框、边框大小、宽高等）
内容发生变化（文本变化或者是图片被另一个不同尺寸的图片代替）
减少方式（页面的性能优化）
批量的修改DOM，
对于复杂的效果，使用绝对定位让其脱离文档流
6、自定义属性（data）用法及其优势
获取和设置
传统方法：getAttribute获取，setAttribute设置（没有兼容问题）
HTML5新方法：data-变量名，通过当前节点的对象.dataset.变量名获取，通过当前节点的对象.dataset.变量名="值"进行设置（有兼容问题）
优点：可以使页面拥有更好的交互体验( 不需要使用Ajax或去服务器查询数据 )
P2、CSS面试题
1、box-sizing的有效值以及对应的规则
语法：box-sizing：content | border-box | inherit
box-sizing：content(默认值) 内容+border+padding = width
box-sizing：border-box(怪异盒子模型) 设置的边框内边距是包含在width内部
box-sizing：inherit 从父元素继承值
2、移动端的适配
meat viewport（视口），移动端浏览器不进行设置视口默认为980px，通过device-width将视口的宽度设置为设备的宽度
device-width属性：initial-scale--第一次进入页面的初始比例，minimum-scale：允许缩小最小比例，maximum-scale：允许放大最大比例，user-scalable：允许使用者缩放
图片的适配：img{max-width：100%}图片会自动缩放
媒体查询：针对不同的设备提前为网页设定各种css样式，自动检测屏幕宽度，加载对应的css文件
动态rem方案（等比缩放）：px、em、rem区别
px-像素屏幕显示数据的基本点，em-相对单位（相对于父元素），rem-相对单位（相对于根元素）
P3、js高频面试题
1、如何最小化重绘和回流
需要对元素进行复杂操作时，可以先隐藏，操作完成后再显示
需要创建多个DOM节点时，使用DocumentFragment创建完成后一次性加入document
缓存Layout属性值，如：var left = elem.offssetLeft，这样多次使用left只会产生一次回流，
尽量避免table布局（table元素触发回流会导致table内部所有元素进行回流）
2、js的作用域链
全局函数无法查看局部函数的内部细节，但是局部函数可以向上查找，直到全局
如果在当前函数作用域中没用找到该属性和方法，会向上查找，直到全局
3、跨域问题和同源策略
同源策略就是浏览器的一种机制，只允许同源，也就是用协议、同域名、同端口的情况下才能进行数据交互
解决方案：
1）JSONP，主要依赖的时script标签不受同源策略的影响，src指向某一个接口地址，指定callback回调函数名称
2）CORS，依赖于服务器( 后端 )对前端请求体信息进行放行
3）请求代理，前端访问不存在跨域问题的代理服务器，代理服务器去访问目标服务器
2、原型链
如果一个对象想要访问一个属性，对象会在自己本身上找这个属性，没有会通过__proto__在其对应的构造函数中的prototype中寻找，没有就向上查找，直到Object，这个查找的过程就叫原型链
