高性能javascript

时间：2021-06-26 12:46:21

高性能javascript开发

标签（空格分隔）： javascript

DOM访问与修改

访问DOM元素是具有代价的，修改元素代价较为昂贵，会导致浏览器重新计算页面的几何变化。

尽量减少DOM访问，做好缓存。

HTML集合&遍历DOM

操作DOM的一个消耗点是遍历DOM，在使用getElementsByTagName(),document.links等时，会收集一个类似数组的集合。这个数组处于一个"实时状态"，会自动更新。

<ul id="fruit">

    <li>apple</li>

    <li>orange</li>

    <li>banana</li>

</ul>

<script>

    var lis = document.getElementByTagName('li');

    var peach = document.createElement('li');

    peach.innerHTML = 'peach';

    document.getElementById('fruit').appendChild(peach);

    console.log(lis.length);//4

    //这里获取length会比普通数组获取length时间长很多

</script>

优先使用querySelector()和querySelectorAll()

虽然上面的两个方法不一定就比集合的方法快，但是本身的语法很好，类jquery。支持css选择器。

重绘repaint和重排，回流reflow

浏览器在下载完页面所有组件后，会解析成生成两个内部数据结构----DOM树和渲染树。

DOM树负责表示页面结构，渲染树负责表示DOM节点如何显示。

DOM树中的每一个显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素display为none在渲染树中没有对应的节点）。

渲染树中的节点被称为“帧”或“盒”,符合css盒模型的定义，理解页面元素为一个具有填充，边距，边框和位置的盒子。一旦DOM树和渲染树构建完成，浏览器就开始显示（绘制）页面元素。

重排：当DOM元素的变化影响了元素的几何属性（高或宽）时,浏览器就需要重新计算元素的几何属性，那么其他的元素的位置和几何属性也会受到影响。浏览器的渲染树部分失效，触发了浏览器重新构造渲染树。

重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕。

由于浏览器的流布局，对渲染树计算通常只需遍历一次即可。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树节点中的属性，通常花费的时间是同等元素的3倍。所以我们不用table元素布局。

发生重排就会发生重绘，但是也可能只发生重绘。

比如我们只对DOM元素操作其背景色，那么就只会发生重绘，不涉及几何元素就不会发生重排。

重绘和重排的代价会有多大？

我们用代码来说明：

var times = 15000;

console.time(1);

for (var i = 0; i < times; i++) {

	document.getElementById('div1').innerHTML += 'a';

}

console.timeEnd(1);

console.time(2);

var str = '';

for (var i = 0; i < times; i++) {

	var tmp = document.getElementById('div2').innerHTML;

	str += 'a';

}

document.getElementById('div2').innerHTML = str;

console.timeEnd(2);

console.time(3);

var str1 = '';

for (var i = 0; i < times; i++) {

	str1 += 'a';

}

document.getElementById('div3').innerHTML = str1;

console.timeEnd(3);

1: 4382.324ms

2: 6.485ms

3: 1.565ms

DOM操作其实不是很可怕，消耗的性能也不是那么大，最重要的重绘和重排。

重排什么时候发生

上面说到重排必然导致重绘，那么那些操作会导致重排？

1、添加或删除可见DOM元素；

2、元素的position位置改变；

3、元素的尺寸改变；

4、内容改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变；（这个就恶心了，页面说不定会挂掉）

怎么提升性能

浏览器队列

其实浏览器也没有那么傻，它会做很多的工作，一般来说，浏览器会做一个队列，当你要使用这些改变时，它才会去页面中改变。不然，它不会一个一个的去执行这些操作，而是会一起变化，以减小页面的重绘重排。

会刷新队列的操作比如：

1、offsetTop,offsetLeft,offsetWidth,offsetHeight

2、scrollTop，scrollLeft，scrollWidth，scrollHeight

3、clientTop，clientLeft，clientWidth，clientHeight

4、getComputedStyle(),(currentStyle in IE)

cssText

如果真的需要获取样式怎么办，我们使用cssText方法，一次性改变所有的style。

css.style.cssText，在这里需要注意CSSText会覆盖之前的style。或者使用className。

var ele = document.getElementById('div');

ele.style.cssText = ".."//这里重写css

ele.style.cssText += ""//这里添加css

ele.className = "active"

fragment文档碎片

使用fragment文档碎片也可以解决这类问题。

脱离动画流

1、使用绝对位置定位页面上的动画元素，将其脱离文档流。

总结

1、尽量不要在布局信息改变时做查询（会导致渲染队列强制刷新）

2、同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）

3、如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排（fragment元素的应用）

4、将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位

参考文献：

1、韩子迟的博客；

相关文章