如何改进如何改进javascript代码的性能代码的性能
在web应用中,应用了大量的Javascript,因此代码的执行效率变得尤为重要,也就是性能!为了提高JS的性
能,我们应该掌握一些基本的性能优化方式,并让它成为我们书写代码的习惯。下面介绍几种优化性能的方
式,很多初学者甚至有经验的开发者也会忽略,希望对你有帮助
本来在那片编写可维护性代码文章后就要总结这篇代码性能文章的,耽搁了几天,本来也是决定每天都要更新一篇文章的,因
为以前欠下太多东西没总结,学过的东西没去总结真的很快就忘记了,记录一下在你脑力留下更深的印象,特别是这些可维护
性代码,性能什么的,当在你脑子里形成一种习惯了,那你就牛了!这里也要给初学者一个建议:多总结你学过的东西,因为
这其实也是在学习新知识! 好,进入我们的主题:如何提高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节点的更改,后者要比前者快得多!为啥捏?
因为当我们给innerHTML赋值时,后台会创建一个HTML解析器,然后使用内部的DOM调用来创建DOM结构,而非基于
Javascript的DOM调用,由于内部方法是编译好的而非解释执行的,所以执行代码的速度要快很多!
用innerHTML改写上面的例子:
var list = document.getElementById('mylist'),
html = '', //声明一个空字符串
i;
for(i = 0; i < 10; i++){
html += '<li>item' + i + '</li>';
}
list.innerHTML = html; // 这里记得innerHTML后面的HTML四个字母都要大写!