前端性能优化-静态资源优化7-减少浏览器回流和重绘

本文地址： https://www.cnblogs.com/veinyin/p/14274289.html

 

1 CSS

1. 避免过多样式嵌套（让浏览器一次就能找到）

2. 避免使用 CSS 表达式（表达式每次都会执行）

3. 使用绝对定位，让动画元素脱离文档流（避免影响其他元素）

4. 避免使用 table 布局（table 布局会导致浏览器多次重绘）

5. 尽量不使用 float 布局（用 flex）

6. 图片最好设置好 width 和 height（不设置时，在图片加载成功后会重新设置）

7. 尽量减少浏览器不必要的任务， 减少页面重新布局（任务越少，重新布局的概率越小）

8. 使用 viewport 设置屏幕缩放级别（设置之后，浏览器在渲染时就可以处理缩放的事情）

9. 避免频繁设置样式，最好把新 style 属性设置完成后，一次性更改（多个样式属性放在一个 class 下，改变 class）

10. 避免使用引起回流/重绘的属性，最好把相关变量缓存起来（）

2 JS

1. 避免频繁操作 DOM，可以合并多次 DOM 修改，一次性批量处理

2. 控制绘制过程和绘制区域（绘制过程开销比较大的属性尽量减少使用、减少绘制区域范围）