麦大成,学课件,乱舞清风ui包
在讲dom操作的最佳性能实践之前，先介绍下浏览器的基本渲染原理。
分为以下四个步骤：
解析html(html parser)
构建dom树(dom tree)
渲染树构建(render tree)
绘制渲染树(painting)
浏览器请求解析（parser） html 文档，并将各标记逐个转化成 dom 节点（dom tree）。同时也会解析外部 css 文件以及样式元素中的样式数据。html 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树（render tree）。呈现树（render tree）包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。呈现树（render tree）构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制（painting） - 浏览器会遍历呈现树（render tree），由用户界面后端层将每个节点绘制出来。
需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，浏览器会力求尽快将内容显示在屏幕上。它不必等到整个 html 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，浏览器会将部分内容解析并显示出来。
repaint：可以理解为重绘或重画，当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，例如改变背景颜色 。则就叫称为重绘。
reflows：可以理解为回流、布局或者重排，当渲染树（render tree）中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流（reflow），也就是重新布局（relayout）。
回流或者重绘何时触发？
改变用于构建渲染树的任何内容都可能导致重绘或回流，例如：
1、添加，删除，更新dom节点
2、用display: none（回流和重绘）或者visibility: hidden隐藏节点（只有重绘，因为没有几何更改）
3、添加样式表，调整样式属性
4、调整窗口大小，更改字体大小
5、页面初始化的渲染
6、移动dom元素
。。。
我们来看几个例子：
我要评论 1
2 var bstyle = document.body.style; // cache
3
4 bstyle.padding = "20px"; // reflow, repaint
5
6 bstyle.border = "10px solid red"; // another reflow and a repaint
7
8 bstyle.color = "blue"; // repaint only, no dimensions changed
9
10 bstyle.backgroundcolor = "#fad"; // repaint
11
12 bstyle.fontsize = "2em"; // reflow, repaint
13
14 // new dom element - reflow, repaint
15
16 document.body.appendchild(document.createtextnode('dude!'));
我们可以想象一下，如果直接在渲染树（render tree）最后面增加或者删除一个节点，这对于浏览器渲染页面来说无伤大雅，因为只需要在渲染树（render tree）的末端重绘那一部分变动的节点。但是，如果是在页面的顶部变动一个节点，浏览器需要重新计算渲染树（render tree），导致渲染树（render tree）的一部分或全部发生变化。渲染树（render tree）重新建立后，浏览器会重新绘制页面上受影响的元素。重排的代价比重绘的代价高很多，重绘会影响部分的元素，而重排则有可能影响全部的元素。
dom操作带来的页面 repaints 和 reflows 是不可避免的，但可以遵循一些最佳实践来最大限度地减少repaints 和 reflows。如下是一些具体的实践方法：
1 2 // bad 3 4 var left = 10, 5 6 top = 10; 7 8 el.style.left = left + "px"; 9 10 el.style.top = top + "px"; 11 14 // better 15 16 el.classname += " theclassname"; 17 18 // better 19 20 el.style.csstext += "; left: " + left + "px; top: " + top + "px;";
由于与渲染树更改相关的 repaints and reflows 是代价非常高，因此现代浏览器针对频繁的 repaints and reflows 有性能的优化。 一个策略是浏览器将设置脚本所需更改的队列，并分批执行。 这样，每个需要 reflows 的几个变化将被组合，并且将仅计算一个 reflows 。 浏览器可以添加排队的更改，然后在一定时间过去或达到一定数量的更改后刷新队列（并不是所有的浏览器都存在这样的优化。推荐的方式是把dom操作尽量合并）。但有时脚本可能会阻止浏览器优化 reflows ，并使其刷新队列并执行所有批量更改。 当您请求如下样式信息时（并非包含全部），会发生这种情况。见下图：
以上所有这些基本上都是请求有关节点的样式信息，浏览器必须提供最新的值。 为了做到这一点，它需要应用所有计划的更改，刷新队列，强行回流。所以在有大批量dom操作时，应避免获取dom元素的布局信息，使得浏览器针对大批量dom操作的优化不被破坏。如果需要这些布局信息，最好是在dom操作之前就去获取。
1 //bad 2 3 var bstyle = document.body.style; 4 5 bodystyle.color = 'red'; 6 7 tmp = computed.backgroundcolor; 8 9 bodystyle.color = 'white'; 10 11 tmp = computed.backgroundimage; 12 13 bodystyle.color = 'green'; 14 15 tmp = computed.backgroundattachment; 16 17 18 //better 19 20 tmp = computed.backgroundcolor; 21 22 tmp = computed.backgroundimage; 23 24 tmp = computed.backgroundattachment; 25 26 27 bodystyle.color = 'yellow'; 28 29 bodystyle.color = 'pink'; 30 31 bodystyle.color = 'blue';
（1）使用文档片段
documentfragments 是dom节点。它们不是主dom树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到dom树。在dom树中，文档片段被其所有的孩子所代替。因为文档片段存在于内存中，并不在dom树中，所以将子元素插入到文档片段时不会引起页面回流（reflow）。当然，最后一步把文档片段附加到页面的这一步操作还是会造成回流（reflow）。
1 var fragment = document.createdocumentfragment();
2
3 // 一些基于fragment的大量dom操作
4
5 ...
6
7 document.getelementbyid('myelement').appendchild(fragment);
（2）通过设置dom元素的display样式为none来隐藏元素
原理是先隐藏元素，然后基于元素做dom操作，经过大量的dom操作后才把元素显示出来。
1 var myelement = document.getelementbyid('myelement');
2
3 myelement.style.display = 'none';
4
5 // 一些基于myelement的大量dom操作
6
7 ...
8
9 myelement.style.display = 'block';
（3）克隆dom元素到内存中
这种方式是把页面上的dom元素克隆一份到内存中，然后再在内存中操作克隆的元素，操作完成后使用此克隆元素替换页面中原来的dom元素。
1 var old = document.getelementbyid('myelement');
2 var clone = old.clonenode(true);
3 // 一些基于clone的大量dom操作
4 ...
5 old.parentnode.replacechild(clone, old);
获取dom的样式信息会有性能的损耗，所以如果存在循环调用，最佳的做法是尽量把这些值缓存在局部变量中。
1
2 // bad
3
4 function resizeallparagraphstomatchblockwidth() {
5
6 for (var i = 0; i < paragraphs.length; i++) {
7
8 paragraphs[i].style.width = box.offsetwidth + 'px';
9
10 }
11
12 }
13
14
15
16 // better
17
18 var width = box.offsetwidth;
19
20 function resizeallparagraphstomatchblockwidth() {
21
22 for (var i = 0; i < paragraphs.length; i++) {
23
24 paragraphs[i].style.width = width + 'px';
25
26 }
27
28 }
使用绝对定位使得该元素在渲染树中成为 body 下的一个直接子节点，因此当它进行动画时，它不会影响太多其他节点。
谷歌文档给的例子，链接地址如下：animation。
优化前的代码：
1 var pos = m.classlist.contains('down') ?
2
3 m.offsettop + distance : m.offsettop - distance;
4
5 if (pos < 0) pos = 0;
6
7 if (pos > maxheight) pos = maxheight;
8
9 m.style.top = pos + 'px';
10
11 if (m.offsettop === 0) {
12
13 m.classlist.remove('up');
14
15 m.classlist.add('down');
16
17 }
18
19 if (m.offsettop === maxheight) {
20
21 m.classlist.remove('down');
22
23 m.classlist.add('up');
24
25 }
优化后的代码：
1 var pos = parseint(m.style.top.slice(0, m.style.top.indexof('px')));
2
3 m.classlist.contains('down') ? pos += distance : pos -= distance;
4
5 if (pos < 0) pos = 0;
6
7 if (pos > maxheight) pos = maxheight;
8
9 m.style.top = pos + 'px';
10
11 if (pos === 0) {
12
13 m.classlist.remove('up');
14
15 m.classlist.add('down');
16
17 }
18
19 if (pos === maxheight) {
20
21 m.classlist.remove('down');
22
23 m.classlist.add('up');
24
25 }
先节流cpu，然后加多小“谷歌”图标，直到图标速度明显减慢，再点击“optimize”优化按钮，可以明显感受出差距。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论