前端性能优化：减少重绘和重排：图片优化：减少重绘与重排的策略.docxVIP

PAGE1

PAGE1

前端性能优化：减少重绘和重排：图片优化：减少重绘与重排的策略

1前端性能优化基础

1.1理解浏览器渲染流程

在探讨前端性能优化之前，理解浏览器如何渲染页面是至关重要的。浏览器的渲染流程可以分为以下几个关键步骤：

解析HTML：浏览器从上到下解析HTML文档，构建DOM树。

解析CSS：同时，浏览器解析CSS样式，创建CSSOM（CSS对象模型）。

构建渲染树：将DOM树和CSSOM结合，创建渲染树，其中包含了所有可见元素及其样式。

布局：计算元素的几何信息，如位置、大小等，这个过程称为布局或回流（reflow）。

绘制：将渲染树中的信息绘制到屏幕上，这个过程称为重绘（repaint）。

复合：如果页面包含透明层或使用了CSS3D变换，浏览器会进行层的复合，将不同层的内容合并到最终的屏幕上。

1.1.1重绘与重排的概念与影响

重排（Reflow）

重排发生在布局阶段，当页面的几何信息发生变化时，如元素尺寸、位置或内容的改变。这通常是因为：

添加或删除DOM元素。

元素尺寸或位置的CSS属性改变。

内联元素的文本内容变化。

重绘（Repaint）

重绘发生在绘制阶段，当元素的视觉属性发生变化，但其几何信息保持不变时。这可能由于：

背景颜色或图像的改变。

边框颜色或样式的改变。

元素的可见性变化。

1.1.2减少重绘与重排的策略

使用CSS动画代替JavaScript动画

示例代码：

/*使用CSS动画*/

.example{

transition:background-color0.5sease;

}

//使用JavaScript动画

letelement=document.querySelector(.example);

element.style.backgroundColor=red;

解释：CSS动画和过渡可以由浏览器的GPU加速，而JavaScript动画通常需要CPU处理，这可能导致更频繁的重排和重绘。

利用will-change属性

示例代码：

.example{

will-change:transform;

}

解释：will-change属性告诉浏览器预期元素的哪些属性可能会改变，从而让浏览器提前优化这些属性的渲染。这可以减少不必要的重排和重绘。

避免使用position:absolute和position:relative

示例代码：

/*避免使用*/

.example{

position:absolute;

left:0;

top:0;

}

解释：绝对定位和相对定位的元素会触发重排，因为它们可能会影响其他元素的位置。尽量使用position:fixed或position:sticky，或者使用Flexbox和Grid布局来避免重排。

使用translate3d或translateZ

示例代码：

.example{

transform:translate3d(10px,20px,0);

}

解释：使用translate3d或translateZ可以将元素置于自己的图层上，从而避免影响其他元素的重排。这在动画元素时特别有用。

利用display:contents

示例代码：

.parent{

display:contents;

}

解释：display:contents使元素表现得像其内容直接是其父元素的子元素，这可以减少DOM树的深度，从而减少重排。

避免强制同步布局

示例代码：

letelement=document.querySelector(.example);

element.offsetWidth;//强制同步布局

解释：访问某些DOM属性，如offsetWidth、offsetHeight等，会触发浏览器的同步布局，导致页面性能下降。尽量避免在性能敏感的代码中使用这些属性。

使用requestAnimationFrame

示例代码：

letelement=document.querySelector(.example);

functionanimate(){

element.style.transform=`translateX(${Math.sin(Date.now()/1000)*50}px)`;

requestAnimationFrame(animate);

}

requestAnimationFrame(animate);

解释：requestAnimationFrame确保动画在下一帧渲染前执行，这比使用setTimeout或setInterval更高效，因为它与浏览器的刷新率同步，减少不必