WEB学习进阶之路-之性能优化二

本章接上一章的内容继续讲优化之道

DOM优化

DOM和JS是相互独立的引擎实现的，相互之间通信需要高昂的代价，内存消耗和时间消耗。

吧DOM和JS比喻两座相互独立的岛屿，这两个岛之间是用一座收费的桥相互连接，每次交互都需要过桥并交过桥费（过桥费就是），所以交互次数越多，代价就越高，所以我们这里优化的方向就是减少相互之间的操作。

整理下各个浏览器DOM和JS的引擎实现

1. innerHTML和createElement优化

上代码，在chrome上运行

可以看到，在创建10万span元素的情况下，createElement和innerHTML的效率差别，简直是天上地下，所以呢：

创建dom元素的时候尽量使用innerHTML，虽然拼接看起来没有createElement那么优雅。

另外在补充一点，对于批量创建html元素，要按照上述代码的样子，将html字符串拼接好，在一次性的创建，切记。

2. 重绘(Repaints)和回流(Reflows)

我在WEB学习进阶之路二里面有提到过这个概念，大家可以在翻回去看看

为了减少这部分的性能损失，有几个以下的优化点

1. 将元素脱离标准文档流，可以使用浮动，绝对定位，固定定位三种方式

2. 先使用display:none来隐藏文档，设置好css样式之后，在显示出来

3. 使用cssText代替单个css属性的操作，比如body.cssText代替 body.paddingRight, body.paddingLeft等等，（注意，有的浏览器已经优化了单个设置的方法，不过我还是建议使用cssText，毕竟要兼容的浏览器不是每个都优化过这种操作）。

4. 创建目标元素的dom副本(cloneNode)，在修改副本之后，替换原来的dom

5. 使用createDocumentFragment创建文档片段，一次性创建元素

使用createDocumentFragment改造下第一个例子中的createElement试试看效果

可以看出，效果不错，为什么呢，因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

3. 选择器

使用querySelector | querySelectorAll代替getElementById， getElementByTagName等

4. 获取元素节点

使用新的API代替原API

本章DOM优化就结束了，加油！