如何改进javascript代码的性能

本来在那片编写可维护性代码文章后就要总结这篇代码性能文章的，耽搁了几天，本来也是决定每天都要更新一篇文章的，因为以前欠下太多东西没总结，学过的东西没去总结真的很快就忘记了，记录一下在你脑力留下更深的印象，特别是这些可维护性代码，性能什么的，当在你脑子里形成一种习惯了，那你就牛了！这里也要给初学者一个建议：多总结你学过的东西，因为这其实也是在学习新知识！ 好，进入我们的主题：如何提高JS代码的性能。

1.优化DOM交互

DOM与我们的页面紧密相关，浏览器渲染页面也就是在渲染解析后的DOM元素，DOM操作与交互要消耗大量的时间，因为它们往往需要重新渲染整个页面或者一部分。进一步说，看似细微的一些操作也可能需要花很多时间来执行，因为DOM要处理的信息非常多，因此我们应该尽可能地优化与DOM相关的操作，加快浏览器对页面的渲染！为什么有些DOM操作会影响页面性能，可以查看我写的一些关于浏览器原理的文章：

ok，优化DOM操作，我们主要有一些几种方式：

1.1 最小化现场更新

什么是DOM的现场更新：需要对DOM部分已经显示的页面的一部分的显示立即更新。但是，每一个更改，不管是插入单个字符，还是一处整个片段，都有一定的性能惩罚，因为浏览器需要重新计算无数尺寸以进行更新（相关知识请阅读：）。所以，现场更新进行的越多，代码执行所花的时间就越长，反之代码执行越快，如下：

var list = document.getElementById('mylist'),      item,      i;for(i = 0; i < 10; i++){  item = document.creatElement('li');  list.appendChild(item);  item.appendChild(document.creatTextNode('item' + i));}

这段代码为列表mylist添加了10个项目，没添加一个项目都要进行2次的现场更新：添加元素和添加文本节点，所以这个操作一个需要完成20个现场更新，每个更新都会损失性能，可见这样的代码运行起来是相对缓慢的。

解决的方法是使用文档碎片间接地更改DOM元素：

var list = document.getElementById('mylist'),      fragment = document.creatDocumentFragment(),      item,      i;for(i = 0; i < 10; i++){  item = document.creatElement('li');  fragment .appendChild(item);  item.appendChild(document.creatTextNode('item' + i));}list.appendChild(fragment);

像这样的代码只需进行一次的现场更新。记住，当给appendChild()传入文档碎片是，只有文档碎片中的子节点才会被添加到目标元素，碎片本身不会被添加。

现在，你应该明白你用循环直接进行DOM节点的增删查改是多么对不起浏览器的事了吧 `(∩_∩)′ 。

1.2 使用 innerHTML

除了上面代码中使用的creatElement() 和 appendChild()结合的方法创建DOM元素之外，还有通过给innerHTML赋值来创建。对于小的DOM更改而言，两种方法的效率其实差不多，但对于大量的DOM节点的更改，后者要比前者快得多！为啥捏？