前端性能优化-静态资源优化7-减少浏览器回流和重绘
-
避免过多样式嵌套(让浏览器一次就能找到)
-
避免使用 CSS 表达式(表达式每次都会执行)
-
使用绝对定位,让动画元素脱离文档流(避免影响其他元素)
-
避免使用 table 布局(table 布局会导致浏览器多次重绘)
-
尽量不使用 float 布局(用 flex)
-
图片最好设置好 width 和 height(不设置时,在图片加载成功后会重新设置)
-
尽量减少浏览器不必要的任务, 减少页面重新布局(任务越少,重新布局的概率越小)
-
使用 viewport 设置屏幕缩放级别(设置之后,浏览器在渲染时就可以处理缩放的事情)
-
避免频繁设置样式,最好把新 style 属性设置完成后,一次性更改(多个样式属性放在一个 class 下,改变 class)
-
避免使用引起回流/重绘的属性,最好把相关变量缓存起来()
2 JS
-
避免频繁操作 DOM,可以合并多次 DOM 修改,一次性批量处理
-
控制绘制过程和绘制区域(绘制过程开销比较大的属性尽量减少使用、减少绘制区域范围)
本文地址:https://www.cnblogs.com/veinyin/p/14274289.html
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。
感谢您的阅读及指正,让我们一起进步。
欢迎联系我交流:veinyin@gmail.com
作者:yuhui_yin
博客地址:https://www.cnblogs.com/veinyin/
如转载请注明出处。