前端性能优化十八：减少浏览器的回流和重绘

1. css:

①. 避免过多样式嵌套:
    a. 尽量让浏览器一次性找到样式.

②. 避免使用css表达式:
    a. 在每次css绘制的过程中都是会执行.

③. 使用绝对定位可以让动画元素脱离文档流:
    a. 给动画元素做单独定位

④. 避免使用table布局:
    a. 会引起浏览器多次重绘

⑤. 尽量不适用float布局:
    a. 可以用flex布局

⑥. 图片最好设置好width和height:
    a. 不设置等图片完全加载成功,整个页面也会重新设置width、height值.
    b. 用户会感受空白区域到突然显示的过程.
    c. 在没有加载之前,html结构中设定好图片的width、height值,当图片完全加载完成后,也不会回流和重绘.

⑦. 尽量简化浏览器不必要的任务:
    a. 任务越少,整个浏览器重绘布局的概率越小
    b. 减少页面重新布局

⑧. 使用viewpoint设置屏幕缩放级别

⑨. 避免频繁设置样式:
    a. 最好把新style属性设置完成后,进行一次性更改:
       (1). 可以放到一个class上,一次性设置多个属性值.

⑩. 避免使用引起回流的和重绘的属性:
    a. 最好把相应的变量缓存起来

---

2. js

①. 最小化回流和重排:
    a. 为了减少回流发生次数,避免频繁操作DOM,可以合并多次对DOM修改,尽量一次性批量处理:
       (1). 拿到接口的业务数据,批量生成业务结构后,一次性设置到页面上.

②. 控制绘制过程和绘制区域:
    a. 绘制过程开销比较大的属性设置应该尽量避免减少使用
    b. 减少绘制区域范围:
       (1). 整个页面加载完成后,对页面的处理控制在指定区域里
       (2). 这些区域不影响整体的结构.它的回流和重绘的次数会减少.