重绘、回流

CoreDump 发布于2019-08-23 14:46 / 2936人阅读

摘要：重绘回流首先了解页面的呈现流程浏览器把获取到的代码解析成一个树，中的每个都是树的个节点，根节点就是对象。重绘与回流的特征当中的一些元素的外观风格等不会影响布局的属性改变，比如，这就称为重绘。注重绘不一定会引起回流，回流一定引起重绘。

重绘、回流 首先了解页面的呈现流程

浏览器把获取到的HTML代码解析成一个DOM树，HTML中的每个tag都是DOM树的1个节点，根节点就是document对象（html tag）。用firebug或者IE Develop Toolbar等工具可看到DOM树，包括display:none隐藏，还有js动态添加的元素；

浏览器把所有样式（主要包括css和浏览器的样式设置）解析成样式结构体。在解析过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，Firefox会去掉_开头的样式；

DOM tree 和样式结构体结合后构建呈现树（render tree）。render tree中每个node都有自己的style，而render tree不包含隐藏的节点（比如display:none的节点，还有head节点），这些节点不会用于呈现，也不影响呈现，所以就不会包含在render tree中。（visibility:hidden隐藏的元素还会包含在render tree中，因为会影响布局（layout），会占有空间。根据CSS2的标准，render tree中的每个节点都称为box（Box dimensions），box的所有属性：width,height,margin,padding,left,top,border等；

render tree构建完毕后，浏览器根据render tree来绘制页面。

重绘与回流的特征

当render tree中的一些元素的外观、风格等不会影响布局的属性改变，比如bachground-color，这就称为重绘。

当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流。每个页面在第一次加载的时候就回流了一次。

注：重绘不一定会引起回流，回流一定引起重绘。任何对render tree中元素的操作都会引起回流或重绘。

如何减少回流、重绘

当元素的几个样式同时改变时定义一个新的className，不要一个一个改变元素的样式属性；

使用documentfragment或div等元素进行缓存操作；

先display:none隐藏元素，然后对元素进行所有操作，最后再显示该元素；

不要经常访问会引起浏览器flush队列的属性，如果想要访问先读取到变量中进行缓存；

会引起浏览器flush队列的属性：

offsetTop, offsetLeft, offsetWidth, offsetHeight  
 scrollTop/Left/Width/Height   
 clientTop/Left/Width/Height  
 width,height  
 请求了getComputedStyle(), 或者 ie的 currentStyle

让元素脱离动画流，减少回流的render tree的规模；

  $("#block1").animate({left:50});  
  $("#block2").animate({marginLeft:50});

尽可能在DOM树的最末端改变class（可限制回流的范围）；

避免设置多层内联样式（将样式合并在一个外部类，仅产生一次回流）；

动画效果应用到position属性为absolute或flex的元素上；

避免使用table数据；

避免使用CSS的JavaScript表达式。

超融合服务器专线服务回流js 服务器回流重绘重绘吗

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

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

浏览器的回流和重绘及其优化方式

摘要：何时发生有大量的用户行为以及潜在的改变会触发回流。这样就会让多次的回流重绘变成一次回流重绘。因为上的操作不会引发回流和重绘。参考文章回流与重绘性能让变慢参考文章浏览器的重绘与重排推荐了解的知识：基本的HTML，基本的JavaScript，以及一些css工作原理方面的知识浏览器的渲染原理 css的加载和解析不会阻塞html文档的解析 css的解析会阻塞js的执行，必须等到CSSOM...

hearaway 2019-08-01 17:39 评论0 收藏0
页面重构和回流

摘要：回流当元素的布局大小规模和显示方式发生改变时，触发的浏览器行为叫回流。而且，每个页面都会在第一次加载时触发回流。注意回流必将引起重绘，而重绘不一定伴随回流。重绘回流对的操作对不同的属性操作，影响不一样。在了解什么是重构和回流之前，我们应该先看看浏览器是怎么渲染的？浏览器的渲染过程： 1.处理HTML脚本，生成DOM树（DOM树里包含所有的HTML标签，包括display:none和...

leejan97 2019-08-02 16:02 评论0 收藏0
页面重构和回流

摘要：回流当元素的布局大小规模和显示方式发生改变时，触发的浏览器行为叫回流。而且，每个页面都会在第一次加载时触发回流。注意回流必将引起重绘，而重绘不一定伴随回流。重绘回流对的操作对不同的属性操作，影响不一样。在了解什么是重构和回流之前，我们应该先看看浏览器是怎么渲染的？浏览器的渲染过程： 1.处理HTML脚本，生成DOM树（DOM树里包含所有的HTML标签，包括display:none和...

zeyu 2019-08-30 14:17 评论0 收藏0
页面渲染性能控制-重绘与回流

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

Noodles 2019-08-30 11:13 评论0 收藏0
页面渲染性能控制-重绘与回流

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

cooxer 2019-08-23 18:12 评论0 收藏0
一次性弄懂回流和重绘

摘要：所以由此来看重绘不一定导致回流，回流一定会导致重绘前面我们说回流和重绘是会对进行修改，会消耗性能，所以我们要尽可能减少回流和重绘的次数。浏览器自己也清楚，如果每次操作都即时地反馈一次回流或重绘，那么性能上来说是扛不住的。回流（Reflow）重绘（Repaint）什么时候会触发回流或重绘呢？当我们对dom 进行修改当时候会引发它外观（样式）上的改变时，就会触发回流或重绘。这个过程本...

JerryWangSAP 2019-08-23 14:56 评论0 收藏0