回流与重绘

最新推荐文章于 2024-07-18 10:24:18 发布

YHT__

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量183

点赞数 1

分类专栏：浏览器 JS 文章标签： javascript js

本文链接：https://blog.csdn.net/Y_H_Tang/article/details/105593131

版权

JS 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

浏览器

2 篇文章 0 订阅

订阅专栏

浏览器的渲染流程

解析服务端发来的HTML文档形成DOM树
解析CSS样式表形成CSSOM树
结合DOM树和CSSOM树结合起来形成渲染树
浏览器在渲染树内对每个渲染节点进行布局（计算出每个元素在页面中的位置、大小等）
绘制显示到屏幕上

Reflow(回流)

元素的大小或位置发生了变化（页面几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染

Repaint(重绘)

元素样式发生改变（但宽高大小位置等不变）

值得注意的地方：

每一次对元素布局、样式等的改变都会引发重绘或回流
回流一定会触发重绘，而重回不一定会回流
每一次重绘回流都会消耗浏览器性能因此要尽量减少

性能优化之减少重绘与回流

读写分离(改变样式时集中处理)

浏览器内部有自己的优化机制，每次读取到需要改变样式时，会缓一缓再进行重绘与回流，如果这时连续的代码都是对样式的操作，会放到一块执行，就避免了连续重绘回流

<html>
<div id = "box"> </div>
</html>

<script>
let box = document.getElementById("box")
box.style.width = "200px"
box.style.height = "200px"
box.style.border = "1px solid red" //这三行对样式的改变将放到同一次重绘回流中进行
</script>

但是如果并没有连续改变，则将引发多次重绘与回流

<script>
box.style.width = "200px";
console.log("1");
box.style.height = "200px";
console.log("2");
box.style.border = "1px solid red" ;//这将引发多次重绘回流
</script>

利用缓存

<script>
box.style.width = box.clientWidth + 10 +"px";
box.style.height= box.clientHeight + 10 +"px"; //将引发多次重绘回

let a = box.clientWidth;
let b = box.clientHeight;
box.style.width = a + 10 +"px";
box.style.height= b + 10 +"px"; //只引发一次重绘回流
<script>

<script>
// 一、
for(let i = 0;i < 5; i++){
    let li=document.creatElement("li");
    li.innerHTML=i;
    box.appendChild(li);
}                     //这将会引发5次回流重绘

// 二、
let frg=document.createDocumentFragment(); //创建一个文档上碎片的零时容器
for(let i = 0;i < 5; i++){
    let li=document.createElement("li");
    li.innerHTML=i;
    frg.appendChild(li);
}  
box.appendChild(frg); //一次性插入 引发一次重绘回流
frg = null;  //好的编程习惯 释放不再使用的变量

// 三、
let str=``;
for(let i = 0;i < 5; i++){
    str += `<li>${i}</li>`
}
box.appendChild(str)
</script>

动画优化

应用position:absolute/relative脱离文档流形成新的层面（也会引发重绘回流，但其余元素不受影响）
尽量应用transform属性（该属性有硬件加速，规避回流）

<script>
box.style.left = "200px"; //这会引发重绘回流
box.style.transform = "translateX(200px)"; //规避重绘回流
</script>

牺牲平滑度换取速度
避免使用table布局和CSS的javascript表达式

YHT__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回流与重绘

浏览器的渲染流程解析服务端发来的HTML文档形成DOM树解析CSS样式表形成CSSOM树结合DOM树和CSSOM树结合起来形成渲染树浏览器在渲染树内对每个渲染节点进行布局（计算出每个元素在页面中的位置、大小等）绘制显示到屏幕上Reflow(回流)元素的大小或位置发生了变化（页面几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染Repaint(重绘)元素样式...
复制链接

扫一扫