1、标签语义化和避免深层次嵌套（html的层级尽可能少，因为层级多了影响布局（layout）计算时间）
2、css层级不宜过多，CSS选择器渲染是从右到左（如.box ul li span a{color:red}这种方式层级过多，影响页面渲染，使用sass/less深层嵌套是影响性能的）
3、尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制，浏览器http请求的并发数在6-7个）
style（如果页面样式较少大概100-200行，直接使用style引入样式）
link（link引入样式放在顶部）
@import（@import引入样式放在页面底部）
4、避免阻塞的JS加载（JS放在页面底部，合理使用defer、async）
image.png
5、避免DOM的重排/回流：
重绘：元素样式的改变（但宽高、大小、位置不变）
重排(回流)：元素大小或位置发生变化（当页面布局和几何信息发生变化），触发了重新布局，导致渲染树重新布局和渲染。
注意：重排一定会触发重绘，而重绘不一定会重排
优化方案：
1）放弃传统操作DOM的时代，基于vue/react开始数据影响视图模式；
2）分离读写操作（现在的浏览器都有渲染队列机制）
3）样式集中改变
4)缓存布局信息
5）元素批量修改
6）动画效果应用到position属性为absolute或fixed的元素上（脱离文档流）
7）css硬件加速（GPU加速）
8）牺牲平滑度换取速度
9）避免table布局和使用css的javascript表达式（如width:calc(100% - 20px)这个就属于css的js表达式）
