阅读器中重绘以及回流的概念解析
本篇文章给大家带来的内容是关于阅读器中重绘乃至回流的概念解析 ，有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。
1.渲染树(render tree)
1.阅读器把猎取到的HTML代码解析成一棵DOM树，HTML中的每个标签（tag）都是DOM树中的一个节点，根节点就是我们常用的document对象。DOM树里包括了HTML所有标签，包罗display：none潜藏，还有用JS动态增加的元素等；
2.阅读器把所有样式（会员定义的css和会员代理）解析成样式构造体，在解析历程中会去除阅读器不克不及识别的样式，比方IE会去除-moz开头的样式，而Firefox会去除_开头的样式；
3.DOM树和样式构造体组合后构建render tree（渲染树），render tree相似于DOM树，但不同很大，render tree 能识别样式，render tree的每一个节点都有本人的样式，并且render tree中不包括潜藏的节点（比方display：none的节点，还有head节点），由于这些节点不会用于显现，并且不会影响显现。
2.重绘与回流的定义
重绘：当前元素的样式(背景色彩、字体色彩等)发生改动的时候，我们只需要把改动的元素从新的渲染一下即可，重绘对阅读器的机能影响较小，所以 一样不思考。
发生重绘的情形：改动容器的外不雅风格等，比方background：black等。改动外不雅，不改动规划，不影响其他的dom。
回流：是指阅读器为了从新渲染部分或者全部的文档而从新运算文档中元素的位置和几何结构的历程。
由于回流大概致使整个dom树的从新结构，所以是机能的一大杀手
一个元素的回流致使了其所有子元素乃至DOM中紧随其后的祖先元素的随后的回流.
3.触发回流的操纵
1.调整窗口大小（Resizing the window）
2.改动字体（Changing the font）
3.增添或者移除样式表（Adding or removing a stylesheet）
4.内容转变，比方会员在input框中输入文字（Content changes, such as a user typing text in an input box）
5.激活 CSS 伪类，比方 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
6.操纵 class 属性（Manipulating the class attribute）
7.足本操纵 DOM（A script manipulating the DOM）
8.运算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
9.设定 style 属性的值 （Setting a property of the style attribute）
10.fixed定位的元素,在拖动滚动条的时候会不断回流
怎样幸免回流
1. 一起转变：假如要改动一个元素的样式，可以将所有样式集中在一个class上面一次转变，而不是转变几次
2. 具有动画结果请使用absolute
3. 幸免使用表格规划
4. 不要使用CSS表达式
5. 在最末改动元素
6. 动画移动时候，要操纵
比方我们拖动元素时候，我是在他x或者y坐标改动5px才操纵，这样虽说落低了平滑度，但是对机能有提高
7. 假如你想让复杂的展现发生改动，例如动画结果，那么请在这个活动线之外实现它。使用position-absolute或position-fixed来实现它。
8. 既然运算offsetWidth也会引发回流,那么就拿一个变量留存它
9. 当我们需要向文档中增加节点时，可以用文档碎片的方式去解决这个问题的，当我们需要给DOM中增加新的元素的时候，先将其放在一个容器中，然后统一增加，这样就只发生了一次回流
相关引荐：
js中自施行函数停止调取的两种办法
js中的当地对象&内置对象&宿主对象的剖析总结
以上就是阅读器中重绘乃至回流的概念解析的具体内容，更多请关注百分百源码网其它相关文章！
