We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1.浏览器渲染机制
浏览器使用流式布局模型；
浏览器会把html解析成DOM树，把CSS解析成CSSOM，将两者合并成为渲染树(Render Tree)；
有了Render Tree，就可以把样式添加上；
由于浏览器使用流式布局，渲染树只需要渲染一次，但是table布局可能会需要渲染三次，所以不建议使用table布局；
2.重绘
由于节点的几何属性或者样式发生改变而不会影响布局，称为重绘。例如：outline, visibility, color、background-color。重绘代价高昂，应尽量避免。
outline
visibility
color
background-color
3.回流
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
<body> <div class="error"> <h4>我的组件</h4> <p><strong>错误：</strong>错误的描述…</p> <h5>错误纠正</h5> <ol> <li>第一步</li> <li>第二步</li> </ol> </div> </body>
在上面的HTML片段中，对该段落(
标签)回流将会引发强烈的回流，因为它是一个子节点。这也导致了祖先的回流（div.error和body – 视浏览器而定）。此外，<h5>和<ol>也会有简单的回流，因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。
div.error
body
<h5>
<ol>
回流必定会发生重绘，重绘不一定会引发回流。
4.浏览器优化
现代浏览器大多都是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。
主要包括以下属性或方法：
offsetTop、offsetLeft、offsetWidth、offsetHeight
offsetTop
offsetLeft
offsetWidth
offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
scrollTop
scrollLeft
scrollWidth
scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
clientTop
clientLeft
clientWidth
clientHeight
width、height
width
height
getComputedStyle()
getBoundingClientRect()
所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。
5.减少回流与重绘
1.CSS
使用 transform 替代 top
transform
top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局
display: none
避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。
table
尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。
class
避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
<div> <a> <span></span> </a> </div> <style> span { color: red; } div > a > span { color: red; } </style>
对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的 span 标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的 span 标签，然后找到 span 标签上的 a 标签，最后再去找到 div 标签，然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。
span
a
div
将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame， 详见探讨requestAnimationFrame。
position
absolute
fixed
requestAnimationFrame
避免使用CSS表达式，可能会引发回流。
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。
will-change
video
iframe
CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。
opacity
filters
2.javascript
style
documentFragment
The text was updated successfully, but these errors were encountered:
No branches or pull requests
1.浏览器渲染机制
浏览器使用流式布局模型；
浏览器会把html解析成DOM树，把CSS解析成CSSOM，将两者合并成为渲染树(Render Tree)；
有了Render Tree，就可以把样式添加上；
由于浏览器使用流式布局，渲染树只需要渲染一次，但是table布局可能会需要渲染三次，所以不建议使用table布局；
2.重绘
由于节点的几何属性或者样式发生改变而不会影响布局，称为重绘。例如：
outline,visibility,color、background-color。重绘代价高昂，应尽量避免。3.回流
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
在上面的HTML片段中，对该段落(
标签)回流将会引发强烈的回流，因为它是一个子节点。这也导致了祖先的回流（
div.error和body– 视浏览器而定）。此外，<h5>和<ol>也会有简单的回流，因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。回流必定会发生重绘，重绘不一定会引发回流。
4.浏览器优化
现代浏览器大多都是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。
主要包括以下属性或方法：
offsetTop、offsetLeft、offsetWidth、offsetHeightscrollTop、scrollLeft、scrollWidth、scrollHeightclientTop、clientLeft、clientWidth、clientHeightwidth、heightgetComputedStyle()getBoundingClientRect()所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。
5.减少回流与重绘
1.CSS
使用
transform替代top使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局避免使用
table布局，可能很小的一个小改动会造成整个table的重新布局。尽可能在DOM树的最末端改变
class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的
span标签然后设置颜色，但是对于第二种设置样式的方式来说，浏览器首先需要找到所有的span标签，然后找到span标签上的a标签，最后再去找到div标签，然后给符合这种条件的span标签设置颜色，这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽量少的添加无意义标签，保证层级扁平。将动画效果应用到
position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择requestAnimationFrame， 详见探讨requestAnimationFrame。避免使用CSS表达式，可能会引发回流。
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如
will-change、video、iframe等标签，浏览器会自动将该节点变为图层。CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让
transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。2.javascript
style属性，或者将样式列表定义为class并一次性更改class属性。documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。The text was updated successfully, but these errors were encountered: