榆次做网站,seo做的不好的网站有哪些,小型公司网络组建方案,合肥网站建设代理商回流#xff08;reflow#xff09;和 重绘#xff08;repaint#xff09;是浏览器渲染过程中的两个关键概念。 一、概念#xff1a;
回流指的是浏览器在计算文档流布局#xff08;layout#xff09;时#xff0c;重新计算元素的位置和大小的过程。当页面中的元素发生尺… 回流reflow和 重绘repaint是浏览器渲染过程中的两个关键概念。 一、概念
回流指的是浏览器在计算文档流布局layout时重新计算元素的位置和大小的过程。当页面中的元素发生尺寸变化、添加或删除元素、文本内容变化等操作时会触发回流。回流可能会导致其他元素的位置和大小也需要重新计算这可能是一个比较耗费性能的操作。重绘是指在回流之后浏览器将更新后的元素样式绘制到屏幕上的过程。当元素的外观属性如颜色、背景等发生变化时会触发重绘。重绘不涉及布局的计算所以性能上相对来说较回流开销较小。
具体的浏览器解析渲染机制如下所示 解析HTML生成DOM树解析CSS生成CSSOM树 将DOM树和CSSOM树结合生成渲染树(Render Tree) Layout(回流):根据生成的渲染树进行回流(Layout)得到节点的几何信息位置大小 Painting(重绘):根据渲染树以及回流得到的几何信息得到节点的绝对像素 Display:将像素发送给GPU展示在页面上
在页面初始渲染阶段回流不可避免的触发可以理解成页面一开始是空白的元素后面添加了新的元素使页面布局发生改变
当我们对 DOM 的修改引发了 DOM 几何尺寸的变化比如修改元素的宽、高或隐藏元素等时浏览器需要重新计算元素的几何属性然后再将计算的结果绘制出来
当我们对 DOM 的修改导致了样式的变化color或background-color却并未影响其几何属性时浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式这里就仅仅触发了重绘。
二、示例
当涉及到回流和重绘时以下是一些常见的例子
修改元素的尺寸例如通过 JavaScript 动态修改元素的宽度或高度。这会触发回流因为浏览器需要重新计算元素的布局并随后进行重绘。
// 触发回流和重绘
element.style.width 200px;
element.style.height 100px;改变字体属性如果在 CSS 中改变了元素的字体大小、字体样式等属性将会触发回流和重绘。因为文本的尺寸变化可能会导致周围元素的位置和大小发生变化。
/* 触发回流和重绘 */
.element {font-size: 16px;font-weight: bold;
}添加或删除元素当通过 JavaScript 动态添加或删除元素时会触发回流和重绘。因为浏览器需要重新计算文档流的布局并更新显示。
// 触发回流和重绘
var newElement document.createElement(div);
parentElement.appendChild(newElement);// 触发回流和重绘
var elementToRemove document.getElementById(elementId);
parentElement.removeChild(elementToRemove);修改元素的位置如果通过修改元素的定位属性如 top、left来改变其位置会触发回流和重绘。因为周围元素的布局可能会受到影响。
// 触发回流和重绘
element.style.position absolute;
element.style.top 50px;
element.style.left 100px;改变元素的背景色或边框样式当通过 CSS 修改元素的背景色、边框样式等外观属性时将触发重绘。这不会引起回流因为这些属性的更改不会影响布局。
/* 触发重绘不触发回流 */
.element {background-color: red;border: 1px solid black;
}需要注意的是不同浏览器对回流和重绘的处理方式可能略有差异。此外现代浏览器通常会对频繁的回流进行优化尽量减少性能开销。然而过多的回流和重绘仍然可能导致页面性能下降因此在编写代码时应尽量避免不必要的操作。 三、理解回流和重绘的关系可以简单如下 回流必然伴随着重绘当元素的位置和大小发生改变时不仅需要进行回流计算还需要进行重绘操作。所以每次回流都会导致重绘。 重绘不一定会引起回流当元素的外观属性发生改变时只需要进行重绘而无需重新计算布局因此不一定会引起回流。比如改变了元素的颜色、背景等样式属性。
由于回流涉及到布局的计算因此它的性能开销较大会导致页面重新渲染影响用户体验和页面性能。所以在开发过程中应尽量避免频繁的回流操作可以采取以下措施
批量修改样式将多个样式的修改集中到一起通过添加或移除 CSS 类来实现样式的批量更改减少回流次数。避免强制同步布局典型的例子是查询某些布局属性如 offsetTop、offsetWidth 等时浏览器会强制进行回流以保证获取到最新的值。如果无法避免可以尽量减少这类操作的次数。使用 transform 替代 top/left使用 CSS3 的 transform 属性进行位移操作能够避免回流并有较好的性能表现。 总之了解回流和重绘的原理能够帮助我们优化代码减少不必要的性能开销提升页面的渲染性能。 四、下面是减少回流和重绘的方法的一些优点和缺点
优点
提高页面性能减少回流和重绘可以减少浏览器的计算和渲染工作量从而提高页面的性能和响应速度。减少资源消耗回流和重绘会消耗 CPU 和 GPU 资源通过减少它们的次数可以降低系统资源的使用延长电池寿命等。改善用户体验减少回流和重绘可以减少页面加载和渲染的延迟提高用户与网页的交互体验。
缺点
可能增加代码复杂性为了减少回流和重绘可能需要对代码进行修改引入额外的逻辑从而增加代码的复杂性和维护成本。可能影响开发效率在追求性能最佳实践的同时可能需要投入更多的时间和精力来进行代码优化和测试。不适用于所有情况有时候为了实现特定的功能或效果可能无法完全避免回流和重绘。在这种情况下需要权衡性能和功能之间的平衡。 综上所述减少回流和重绘可以有效提高页面性能和用户体验但需要权衡代码复杂性和开发效率。在实际开发中需要根据具体情况做出决策选择适合的优化方法。 五、如何减少回流和重绘呢
批量修改样式尽量避免多次修改单个元素的样式而是通过添加或移除 CSS 类来一次性修改多个样式。这样可以限制回流和重绘的次数。
// 不推荐的方式多次回流和重绘
element.style.width 200px;
element.style.height 100px;// 推荐的方式一次回流和重绘
element.classList.add(new-styles);使用 transform 替代定位属性在改变元素的位置时使用 transform 属性代替 top/left 属性。因为 transform 属性只会触发重绘而不会触发回流。
// 不推荐的方式触发回流和重绘
element.style.position absolute;
element.style.top 50px;
element.style.left 100px;// 推荐的方式只触发重绘
element.style.transform translate(100px, 50px);缓存布局信息如果需要多次读取元素的布局属性如宽度、高度最好先将这些属性值缓存起来以免重复触发回流。
// 不推荐的方式重复触发回流
var width element.offsetWidth;
console.log(width);
var height element.offsetHeight;
console.log(height);// 推荐的方式缓存布局属性值
var width element.offsetWidth;
var height element.offsetHeight;
console.log(width, height);使用分离的 DOM 批处理如果需要多次对 DOM 进行修改可以将这些修改操作集中在一起然后再将它们插入到文档中。这样可以减少回流和重绘的次数。
// 不推荐的方式多次回流和重绘
for (var i 0; i 100; i) {var newElement document.createElement(div);parentElement.appendChild(newElement);
}// 推荐的方式批量插入元素减少回流和重绘
var fragment document.createDocumentFragment();
for (var i 0; i 100; i) {var newElement document.createElement(div);fragment.appendChild(newElement);
}
parentElement.appendChild(fragment);通过采用上述方法可以最大程度地减少回流和重绘的次数提高页面的性能和响应速度提高页面性能和用户体验。
