三、css+html优化
1、避免css阻塞
2、降低css选择器的复杂度
浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
- 减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用
- 避免使用通配符，对用到的元素进行匹配即可
- 利用继承，避免重复匹配和定义
- 正确使用类选择器和id选择器
也就是说，假如css选择器很复杂的话，渲染在浏览器里的CSSOM树，会呈现很高的层级，不是扁平化的，导致在查找具体选择器的时候难度增加，树的深度很高，难以快速精准定位
3、避免使用css表达式
css表达式会被频繁的进行计算
4、使用外链式的css
每次请求html文件的时候都会下载css，可以让浏览器缓存起来，减少html文件大小，减少了http请求数量
5、首屏加载优化
具体又分为九大项：
- 路由懒加载
- 组件懒加载
- 骨架屏和优化白屏时长
- 长列表虚拟滚动
- 合理使用tree-shaking
- 使用web-worker优化长任务
- 使用RequestAnimationFrame制作动画
- 优化js加载方式
- 优化图片
6、减少重绘和回流
重绘：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制
回流（重排）：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程
-
增加多个节点使用documentFragment：不是真实dom的部分，不会引起重绘和回流
-
用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个layout的时间
-
使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）；opacity代替visiability，visiability会触发重绘（paint），但opacity不会。 -
如果需要多次修改，可以先把display设置为none，之后反复进行修改，等改好了后再进行显示，这样减少触发重排（回流）
-
尽量在低层级的DOM节点进行操作
四、JS优化
1、事件委托
在事件冒泡的上一次函数中使用
2、多线程
使用webworker进行计算，避免页面假死
3、防抖节流
防抖：以五分钟为例，从第一次点击开始响应，直到五分钟结束后才会去响应下一次的点击，中间反复点击不计入，不进行响应
节流：以五分钟为例，每次点击，都会请客之前的计时，重新计时，直到最后一次点击为止，开始计时，五分钟后结束
4、尽量不使用js动画
开销大，可以采用canvas动画和css3动画·
5、计算结果缓存
减少运算次数