页面渲染性能控制-重绘与回流

Noodles 发布于2019-08-30 11:13 / 782人阅读

摘要：重绘只涉及样式的改变，不涉及到布局。当获取一些属性时，浏览器为了获得正确的值也会触发回流。避免多次读取等属性。将复杂的元素绝对定位或固定定位，使它脱离文档流。

浏览器解析代码过程

页面的显示过程分为以下几个阶段：

生成DOM树(包括display:none的节点)

在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点)

在render树的基础上继续渲染颜色背景色等样式

reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流
repaint:当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘

通过上述定义，可以很明显看出，重绘的代价要比回流小。重绘只涉及样式的改变，不涉及到布局。重绘就好像给人染了一个头发，而回流相当于给人做了一次整形手术

什么会引起回流

页面渲染初始化

DOM结构变化，脸上整得亲妈都认不出来了，所以会引发回流

render树变化，比如减少了padding，增加border等等，改变页面布局了

窗口resize事件触发

最复杂的一种：获取某些属性，引发回流很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。
但是除了render树的直接变化。
当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了这些属性包括

   offsetTop,     offsetLeft,     offsetWidth,     offsetHeight
   scrollTop/Left/Width/Height,
   clientTop/Left/Width/Height,
   width,height
   调用了getComputedStyle(), 或者 IE的 currentStyle

这段儿代码是抄的，哈哈，大概解释一下样式改变引起的重绘和回流

var s = document.body.style;

s.padding = "2px"; // 回流+重绘

s.border = "1px solid red"; // 再一次 回流+重绘

s.color = "blue"; // 再一次重绘

s.backgroundColor = "#ccc"; // 再一次 重绘

s.fontSize = "14px"; // 再一次 回流+重绘, 没想到吧，改变字体大小也会回流

document.body.appendChild(document.createTextNode("abc!"));  // 添加node，再一次 回流+重绘

可以看出，回流一定伴随着重绘，而重绘却可以多带带出现

回流对性能产生了一定的影响，尽管浏览器机智地帮我们进行了批处理，但是仍然存在着上述诸多阔怕的属性，一获取就回流。怎么解决？

减少回流

避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。

避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。

避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。

将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高

display:none和visibility：hidden会产生回流与重绘

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint

高性能计算页面渲染测速页面控制页面性能页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114851.html

页面渲染性能控制-重绘与回流

摘要：重绘只涉及样式的改变，不涉及到布局。当获取一些属性时，浏览器为了获得正确的值也会触发回流。避免多次读取等属性。将复杂的元素绝对定位或固定定位，使它脱离文档流。浏览器解析代码过程页面的显示过程分为以下几个阶段：生成DOM树(包括display:none的节点) 在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包...

cooxer 2019-08-23 18:12 评论0 收藏0
你应该要知道的重绘与重排

摘要：合并样式操作比如可以合并成批量修改使元素脱离文档流，再对其进行操作，然后再把元素带回文档中，这种办法可以有效减少重绘重排的次数。前言现代web框架大多都是数据驱动类的，比如 react, vue，所以开发者不需要直接接触 DOM，修改 data 便可以驱动界面更新。但是作为前端工程师，了解浏览器的重绘与重排还是很有必要的，可以帮助我们写出更好性能的 web 应用。浏览器的渲染 ...

liukai90 2019-08-23 14:41 评论0 收藏0
浏览器渲染机制与相应优化策略

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

suxier 2019-08-29 12:15 评论0 收藏0
浏览器渲染机制与相应优化策略

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

sushi 2019-08-21 15:27 评论0 收藏0