前端体系
# 前端体系
# 1 HTML
# 2 CSS3
# 2.1 盒模型
content-box（标准盒模型）
width=内容宽度
border-box（IE盒模型）
width=border+padding+内容宽度
inherit 继承父类
# 2.1 布局问题
# 2.1.1 元素水平和垂直居中
# 2.1.2 高度已知，三栏布局，左右宽度300，中间自适应
# 2.2 布局方法
# 2.2.1 浮动布局
# 2.2.2 绝对布局
# 2.2.3 table布局
# 2.2.4 grid布局
# 2.2.5 flex布局
# 2.3 CSS解析顺序
css 选择器匹配元素是逆向解析
所以为了减少查找时间，尽量不要直接使用标签选择器。
# 2.4 开启GPU加速
接收到文档后，渲染引擎会对HTML文档进行解析生成DOM树、对CSS文件进行解析生成CSSOM树；同时执行页面中的JavaScript代码；最终根据DOM树和CSSOM树，计算样式（Caluclate Style）生成渲染树，渲染树中，只会包含即将显示在页面中的元素及其样式信息（如head元素、display为hidden的元素就不会包含在渲染树中）；根据渲染树需要进行布局（layout）来计算每个元素在页面上的位置；接下来渲染引擎开始进行绘制（paint），这一步分为若干阶段：根据渲染树将每层（layer）的各个元素绘制，然后将绘制出的若干连续图像进行栅格化（Rasterization），最后将栅格化后的图像合成（composite）为要显示在屏幕上的图像。对每一层的绘制是由浏览器来完成的；最后的合成是由GPU来完成；而栅格化过程取决于浏览器的设置，chrome默认开启GPU栅格化，否则由CPU进行。
设置了will-change属性可以开启GPU加速
# 3.Javascript
Eventloop
宏任务(marcotask)微任务(microtask)。微任务先执行，之后是宏任务。
在处理一段evenloop执行顺序的时候：
第一步确认宏任务，微任务
宏任务：script，setTimeout，setImmediate，promise中的executor 微任务：promise.then，process.nextTick
第二步解析“拦路虎”，出现async/await不要慌，他们只在标记的函数中能够作威作福，出了这个函数还是跟着大部队的潮流。
第三步，根据Promise中then使用方式的不同做出不同的判断，是链式还是分别调用。
最后一步记住一些特别事件
比如，process.nextTick优先级高于Promise.then
# 4.Vue
# 5.React
# 6.八股文
# 6.1 HTTP
http是客户端和服务器请求和应答的标准，用于超文本传输的协议。协议默认端口为80。无状态，连接简单，速度快，开销小，但是明文传输不安全。
https是以安全为目标的http通道，在http下加入了SSL。协议默认端口443。加密后可以防止数据在传输过程中被窃取、改变，确保数据的完整性（但也并非绝对安全）。但是握手阶段更费时，页面加载时间延长50%，缓存不如http高效，数据开销增加，同时协议需要ca证书，费用越高，功能越强大。
# 6.2 浏览器
# 6.3HTML&&CSS
# 6.4 JS、TS、ES6
原型
new的执行机制
1.创建空对象
2.将空对象的原型，指向构造函数的prototype属性
3.将空对象赋值给函数内部的this关键字
4.开始执行构造函数内部的代码