欢迎学习交流&＃xff01;&＃xff01;&＃xff01;
持续更新中…
文章目录
- 页面生成过程
- 渲染
- 重排(reflow)
- 常见引起重排的属性和方法
- 重排影响的范围
- 尽可能减少重排次数和范围
- 重绘(repaint)
- 浏览器的渲染队列
- 重排优化建议
- 减少重排范围
- 减少重排次数
- 1. 分离读写操作
- 2. 样式集中改变
- 3. 离线改变DOM
- 4. 缓存布局信息
- 5. 使用 absolute 或 fixed 脱离文档流
- 6. 优化动画
页面生成过程
- HTML 被 HTML 解析器解析成 DOM 树&＃xff1b;
- CSS 被 CSS 解析器解析成 CSSOM 树&＃xff1b;
- 结合 DOM 树和 CSSOM 树&＃xff0c;生成一棵渲染树(Render Tree)&＃xff0c;这一过程称为 Attachment&＃xff1b;
- 生成布局(flow)&＃xff0c;浏览器在屏幕上“画”出渲染树中的所有节点&＃xff1b;
- 将布局绘制(paint)在屏幕上&＃xff0c;显示出整个页面。
第四步和第五步是最耗时的部分&＃xff0c;两步合起来&＃xff0c;即通常所说的渲染。
渲染
- 网页生成的时候&＃xff0c;至少会渲染一次。
- 在用户访问的过程中&＃xff0c;还会不断重新渲染
- 重新渲染需要重复之前的第四步(重新生成布局)&＃43;第五步(重新绘制)或者只有第五个步(重新绘制)。
- 重新渲染即触发重排和重绘&＃xff0c;不管页面发生了重排还是重绘&＃xff0c;都会影响性能&＃xff0c;尤其是重排会使我们付出高额的性能代价&＃xff0c;所以应该尽量避免重排
重排与重绘的比较
重排比重绘大&＃xff1a;“大”&＃xff0c;即谁能影响谁。
- 重绘&＃xff1a;某些元素的外观被改变&＃xff0c;例如&＃xff1a;元素的填充颜色
- 重排&＃xff1a;重新生成布局&＃xff0c;重新排列元素。
单单改变元素的外观&＃xff0c;肯定不会引起网页重新生成布局&＃xff0c;但当浏览器完成重排之后&＃xff0c;将会重新绘制受到此次重排影响的部分。比如改变元素高度&＃xff0c;这个元素乃至周边dom都需要重新绘制。
即&＃xff1a;“重绘"不一定会出现"重排”&＃xff0c;“重排"必然会出现"重绘”
重排(reflow)
重排&＃xff1a;当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)&＃xff0c;浏览器需要重新计算元素的几何属性&＃xff0c;将其安放在界面中的正确位置&＃xff0c;这个过程叫做重排。
重排也叫回流&＃xff0c;简单的说就是重新生成布局&＃xff0c;重新排列元素。
回流就好比向河里(文档流)扔了一块石头(dom变化)&＃xff0c;激起涟漪&＃xff0c;然后引起周边水流受到波及&＃xff0c;所以叫做回流
常见引起重排的属性和方法
任何会改变元素几何信息(元素的位置和尺寸大小)的操作&＃xff0c;都会触发重排。
- 页面初始渲染&＃xff0c;这是开销最大的一次重排
- 添加/删除可见的DOM元素
- 改变元素位置
- 改变元素尺寸&＃xff0c;比如边距、填充、边框、宽度和高度等
- 改变元素内容&＃xff0c;比如文字数量&＃xff0c;图片大小等
- 改变元素字体大小
- 改变浏览器窗口尺寸&＃xff0c;比如resize事件发生时
- 激活CSS伪类&＃xff08;例如&＃xff1a;
:hover&＃xff09; - 设置 style 属性的值&＃xff0c;因为通过设置style属性改变结点样式的话&＃xff0c;每一次设置都会触发一次reflow
- 查询某些属性或调用某些计算方法&＃xff1a;offsetWidth、offsetHeight等&＃xff0c;除此之外&＃xff0c;当调用
getComputedStyle方法&＃xff0c;或者IE里的 currentStyle 时&＃xff0c;也会触发重排&＃xff0c;原理是一样的&＃xff0c;都为求一个“即时性”和“准确性”。
| 常见引起重排的属性和方法 | | | |
|---|
| width | height | margin | padding |
| display | border | position | overflow |
| clientWidth | clientHeight | clientTop | clientLeft |
| offsetWidth | offsetHeight | offsetTop | offsetLeft |
| scrollWidth | scrollHeight | scrollTop | scrollLeft |
| scrollIntoView() | scrollTo() | getComputedStyle() | |
| getBoundingClientRect() | scrollIntoViewIfNeeded() | | |
重排影响的范围
由于浏览器渲染界面是基于流失布局模型的&＃xff0c;所以触发重排时会对周围DOM重新排列&＃xff0c;影响的范围有两种&＃xff1a;
- 全局范围&＃xff1a;从根节点html开始对整个渲染树进行重新布局。
- 局部范围&＃xff1a;对渲染树的某部分或某一个渲染对象进行重新布局
全局范围重排&＃xff1a;
<body><div class&＃61;"hello"><h4>helloh4><p><strong>Name:strong>BDingp><h5>maleh5><ol><li>codingli><li>lovingli>ol>div>
body>
当p节点上发生reflow重排时&＃xff0c;hello和body也会重新渲染&＃xff0c;甚至h5和ol都会收到影响。
局部范围重排&＃xff1a;
用局部布局来解释这种现象&＃xff1a;把一个dom的宽高之类的几何信息定死&＃xff0c;然后在dom内部触发重排&＃xff0c;就只会重新渲染该dom内部的元素&＃xff0c;而不会影响到外界。
尽可能减少重排次数和范围
- 重排需要更新渲染树,性能花销非常大&＃xff1b;
- 重排的代价十分高昂&＃xff0c;会破坏用户体验&＃xff0c;并且让UI展示非常迟缓&＃xff0c;因此需要尽可能的减少触发重排的次数。
- 重排的性能花销和渲染树有多少节点需要重新构建有关系
- 因此应该尽量以局部布局的形式组织html结构&＃xff0c;尽可能小的影响重排的范围。
而不是像全局范围的示例代码一样一块的堆砌标签&＃xff0c;随便一个元素触发重排都会导致全局范围的重排。
重绘(repaint)
重绘&＃xff1a;当一个元素的外观发生改变&＃xff0c;但没有改变布局,重新把元素外观绘制出来的过程&＃xff0c;叫做重绘。
| 常见引起重绘的属性和方法 | | | |
|---|
| color | border-style | visibility | background |
| text-decoration | background-image | background-position | background-repeat |
| outline-color | outline | outline-style | border-radius |
| outline-width | box-shadow | background-size | |
浏览器的渲染队列
问&＃xff1a;下列代码会触发几次渲染&＃xff1f;
div.style.left &＃61; &＃39;10px&＃39;;
div.style.top &＃61; &＃39;10px&＃39;;
div.style.width &＃61; &＃39;20px&＃39;;
div.style.height &＃61; &＃39;20px&＃39;;
根据上文的定义&＃xff0c;这段代码理论上会触发4次重排&＃43;重绘&＃xff0c;因为每一次都改变了元素的几何属性&＃xff0c;实际上最后只触发了一次重排&＃xff0c;这都得益于浏览器的渲染队列机制&＃xff1b;
当修改了元素的几何属性时&＃xff0c;导致浏览器触发重排或重绘。它会把该操作放进渲染队列&＃xff0c;等到队列中的操作到了一定的数量或者到了一定的时间间隔时&＃xff0c;浏览器就会批量执行这些操作。
强制刷新队列
div.style.left &＃61; &＃39;10px&＃39;;
console.log(div.offsetLeft);
div.style.top &＃61; &＃39;10px&＃39;;
console.log(div.offsetTop);
div.style.width &＃61; &＃39;20px&＃39;;
console.log(div.offsetWidth);
div.style.height &＃61; &＃39;20px&＃39;;
console.log(div.offsetHeight);
此段代码会触发4次重排&＃43;重绘&＃xff0c;因为在console中请求的这几个样式信息&＃xff0c;无论何时浏览器都会立即执行渲染队列的任务&＃xff0c;即使该值与操作中修改的值无关联。
因为在队列中&＃xff0c;可能会有影响到这些值的操作&＃xff0c;为了给我们最精确的值&＃xff0c;浏览器会立即重排&＃43;重绘。
强制刷新队列的style样式请求
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop, scrollLeft, scrollWidth, scrollHeight
- clientTop, clientLeft, clientWidth, clientHeight
- getComputedStyle(), 或者 IE的 currentStyle
在开发中&＃xff0c;应谨慎使用以上style请求&＃xff0c;注意上下文关系&＃xff0c;避免一行代码一个重排&＃xff0c;减少性能的消耗。
重排优化建议
减少重排范围
应尽量以局部布局的形式组织html结构&＃xff0c;尽可能小的影响重排的范围。
- 尽可能在低层级的DOM节点上&＃xff0c;而不是像上述全局范围的示例代码一样&＃xff0c;如果你要改变p的样式&＃xff0c;
class就不要加在div上&＃xff0c;通过父元素去影响子元素不好。 - 尽量不要使用 table 布局&＃xff0c;可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合&＃xff0c;可以设置
table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染&＃xff0c;这种做法也是为了限制reflow的影响范围。
减少重排次数
1. 分离读写操作
DOM 的多个 读操作&＃xff08;或多个 写操作 &＃xff09;&＃xff0c;应该放在一起。不要两个 读操作 之间&＃xff0c;加入一个 写操作 。
div.style.left &＃61; div.offsetLeft &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.top &＃61; div.offsetTop &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.right &＃61; div.offsetRight &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.bottom &＃61; div.offsetBottom &＃43; 1 &＃43; &＃39;px&＃39;;
var curLeft &＃61; div.offsetLeft;
var curTop &＃61; div.offsetTop;
var curRight &＃61; div.offsetRight;
var curBottom &＃61; div.offsetBottom;div.style.left &＃61; curLeft &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.top &＃61; curTop &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.right &＃61; curRight &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.bottom &＃61; curBottom &＃43; 1 &＃43; &＃39;px&＃39;;
前文中触发4次重排&＃43;重绘的代码&＃xff0c;这次只触发了一次重排&＃xff0c;得益于前文中所提到的浏览器的渲染队列机制。
在第一个console的时候&＃xff0c;浏览器把之前上面四个写操作的渲染队列都给清空了。剩下的console&＃xff0c;因为渲染队列本来就是空的&＃xff0c;所以并没有触发重排&＃xff0c;仅仅拿值。
2. 样式集中改变
不建议示范&＃xff1a;
div.style.left &＃61; &＃39;10px&＃39;;
div.style.top &＃61; &＃39;10px&＃39;;
div.style.width &＃61; &＃39;20px&＃39;;
div.style.height &＃61; &＃39;20px&＃39;;
不要频繁的操作样式&＃xff0c;对于一个静态页面来说&＃xff0c;明智且可维护的做法是更改类名而不是修改样式&＃xff0c;对于动态改变的样式来说&＃xff0c;相较每次微小修改都直接触及元素&＃xff0c;更好的办法是统一在 cssText 变量中编辑。
虽然现在大部分现代浏览器都会有 Flush 队列进行渲染队列优化&＃xff0c;但是有些老版本的浏览器比如IE6的效率依然低下。
var left &＃61; 10;
var top &＃61; 10;
el.style.left &＃61; left &＃43; "px";
el.style.top &＃61; top &＃43; "px";
el.style.cssText &＃43;&＃61; "; left: " &＃43; left &＃43; "px; top: " &＃43; top &＃43; "px;";
el.className &＃43;&＃61; " className";
3. 离线改变DOM
“离线”意味着不在当前的 DOM 树中做修改&＃xff1a;
- 使用
display:none&＃xff0c;隐藏要操作的dom
dom.display &＃61; &＃39;none&＃39;
dom.display &＃61; &＃39;block&＃39;
一旦给元素设置 display:none 时&＃xff08;只有一次重排重绘&＃xff09;&＃xff0c;元素便不会再存在在渲染树中&＃xff0c;相当于将其从页面上“拿掉”&＃xff0c;我们之后的操作将不会触发重排和重绘&＃xff0c;添加足够多的变更后&＃xff0c;通过 display属性显示&＃xff08;另一次重排重绘&＃xff09;。通过这种方式即使大量变更也只触发两次重排。另外&＃xff0c;visibility : hidden 的元素只对重绘有影响&＃xff0c;不影响重排。
-
通过 documentFragment 创建一个 dom 碎片,在它上面批量操作 dom&＃xff0c;操作完成之后&＃xff0c;再添加到文档中&＃xff0c;这样只会触发一次重排。
-
复制节点&＃xff0c;在副本上工作&＃xff0c;然后替换它
4. 缓存布局信息
div.style.left &＃61; div.offsetLeft &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.top &＃61; div.offsetTop &＃43; 1 &＃43; &＃39;px&＃39;;
var curLeft &＃61; div.offsetLeft;
var curTop &＃61; div.offsetTop;
div.style.left &＃61; curLeft &＃43; 1 &＃43; &＃39;px&＃39;;
div.style.top &＃61; curTop &＃43; 1 &＃43; &＃39;px&＃39;;
5. 使用 absolute 或 fixed 脱离文档流
position属性为absolute或fixed的元素&＃xff0c;使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素&＃xff0c;重排开销比较小&＃xff0c;不会对其它节点造成太多影响。当在这些节点上放置这个元素时&＃xff0c;一些其它在这个区域内的节点可能需要重绘&＃xff0c;但是不需要重排。
6. 优化动画
- 可以把动画效果应用到
position属性为 absolute 或 fixed 的元素上&＃xff0c;这样对其他元素影响较小。
动画效果还应牺牲一些平滑&＃xff0c;来换取速度&＃xff0c;中间的度需要自己衡量&＃xff1a;
比如实现一个动画&＃xff0c;以1个像素为单位移动这样最平滑&＃xff0c;但是reflow就会过于频繁&＃xff0c;大量消耗CPU资源&＃xff0c;如果以3个像素为单位移动则会好很多
GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成&＃xff0c;因为 GPU 是专门为处理图形而设计&＃xff0c;所以它在速度和能耗上更有效率。
GPU 加速通常包括以下几个部分&＃xff1a;Canvas2D&＃xff0c;布局合成&＃xff0c;CSS3转换&＃xff08;transitions&＃xff09;&＃xff0c;CSS3 3D变换&＃xff08;transforms&＃xff09;&＃xff0c;WebGL和视频(video)。
div {transform: translate3d(10px, 10px, 0);}
优秀文章&＃xff1a;
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
CSS硬件加速的好与坏
京公网安备 11010802041100号