前端--性能优化【中篇】--html+css优化与图片优化

三、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、计算结果缓存

减少运算次数