【开发必看】你真的了解回流和重绘吗？

发布时间：2019-01-29 21:31:44 所属栏目：建站来源：腾讯云加社区

导读：回流和重绘可以说是每一个web开拓者都常常听到的两个词语，然则也许有许多人不是很清晰这两步详细做了什么工作。最近有空对其举办了一些研究，看了一些博客和书本，清算了一些内容而且团结一些例子，写了这篇文章，但愿可以辅佐到各人。赏识器的渲染进程

副问题[/!--empirenews.page--]

回流和重绘可以说是每一个web开拓者都常常听到的两个词语，然则也许有许多人不是很清晰这两步详细做了什么工作。最近有空对其举办了一些研究，看了一些博客和书本，清算了一些内容而且团结一些例子，写了这篇文章，但愿可以辅佐到各人。

赏识器的渲染进程

本文先从赏识器的渲染进程来从新到尾的讲授一下回流重绘，假如各人想直接看怎样镌汰回流和重绘，优化机能，可以跳到后头。（这个渲染进程来自MDN）

【开拓必看】你真的相识回流和重绘吗？

赏识器渲染进程

添加描写

从上面这个图上，我们可以看到，赏识器渲染进程如下：

理会HTML，天生DOM树，理会CSS，天生CSSOM树
将DOM树和CSSOM树团结，天生渲染树(Render Tree)
Layout(回流):按照天生的渲染树，举办回流(Layout)，获得节点的几许信息（位置，巨细）
Painting(重绘):按照渲染树以及回流获得的几许信息，获得节点的绝对像素
Display:将像素发送给GPU，展示在页面上。（这一步着实尚有许多内容，好比会在GPU将多个合成层归并为统一个层，并展示在页面中。而css3硬件加快的道理则是新建合成层，这里我们不睁开，之后有机遇缘写一篇博客）

渲染进程看起来很简朴，让我们来详细相识下每一步详细做了什么。

天生渲染树

【开拓必看】你真的相识回流和重绘吗？

渲染树构建

为了构建渲染树，赏识器首要完成了以下事变：

从DOM树的根节点开始遍历每个可见节点。
对付每个可见的节点，找到CSSOM树中对应的法则，并应用它们。
按照每个可见节点以及其对应的样式，组合天生渲染树。

第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不行见的。不行见的节点包罗：

一些不会渲染输出的节点，好比script、meta、link等。
一些通过css举办潜匿的节点。好比display:none。留意，操作visibility和opacity潜匿的节点，照旧会表现在渲染树上的。只有display:none的节点才不会表现在渲染树上。

从上面的例子来讲，我们可以看到span标签的样式有一个display:none，因此，它最终并没有在渲染树上。

留意：渲染树只包括可见的节点

回流

前面我们通过结构渲染树，我们将可见DOM节点以及它对应的样式团结起来，然则我们还必要计较它们在装备视口(viewport)内简直切位置和巨细，这个计较的阶段就是回流。

为了弄清每个工具在网站上简直切巨细和位置，赏识器从渲染树的根节点开始遍历，我们可以以下面这个实例来暗示：

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <title>Critial Path: Hello world!</title>  
  </head>  
  <body>  
    <div style="width: 50%">  
      <div style="width: 50%">Hello world!</div>  
    </div>  
  </body>  
</html>

我们可以看到，第一个div将节点的表现尺寸配置为视口宽度的50%，第二个div将其尺寸配置为父节点的50%。而在回流这个阶段，我们就必要按照视口详细的宽度，将其转为现实的像素值。（如下图）

【开拓必看】你真的相识回流和重绘吗？

回流

重绘

最终，我们通过结构渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和详细的几许信息(位置、巨细)，那么我们就可以将渲染树的每个节点都转换为屏幕上的现实像素，这个阶段就叫做重绘节点。

既然知道了赏识器的渲染进程后，我们就来切磋下，何时会产生回流重绘。

何时产生回流重绘

我们前面知道了，回流这一阶段首要是计较节点的位置和几许信息，那么当页面机关和几许信息产生变革的时辰，就必要回流。好比以下环境：

添加或删除可见的DOM元素
元素的位置产生变革
元素的尺寸产生变革（包罗外边距、内边框、边框巨细、高度和宽度等）
内容产生变革，好比文本变革或图片被另一个差异尺寸的图片所更换。
页面一开始渲染的时辰（这必定停止不了）
赏识器的窗口尺寸变革（由于回流是按照视口的巨细来计较元素的位置和巨细的）

留意：回流必然会触发重绘，而重绘不必然会回流

按照改变的范畴和水平，渲染树中或大或小的部门必要从头计较，有些改变会触发整个页面的重排，好比，转动条呈现的时辰可能修改了根节点。

赏识器的优化机制

当代的赏识器都是很智慧的，因为每次重排城市造成特另外计较耗损，因此大大都赏识器城市通过行列化修改并批量执行来优化重排进程。赏识器会将修改操纵放入到行列里，直到过了一段时刻可能操纵到达了一个阈值，才清空行列。可是！当你获取机关信息的操纵的时辰，会逼迫行列革新，好比当你会见以部属性可能行使以下要领：

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect
详细可以会见这个网站：https://gist.github.com/pauli...

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/5

尾页

6个值得珍藏的搜索引擎	网站优化核心减少SEO污
网站seo优化三个基础知	什么时候宣布文章收录