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

本文主要是介绍前端性能优化十八：减少浏览器的回流和重绘，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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). 这些区域不影响整体的结构.它的回流和重绘的次数会减少.