JavaScript 元素选择,对象与数组,各种循环,……性能测试

这篇文章能用事实助你开发高性能网页。
本文中所有的建议、结论均基于——

  • 测试平台:Chrome 55 on Windows 7

  • 测试工具:jsPerf

作者有点标题党,因为作者想不起来还有什么是需要性能测试的 想起来再更新
所以,就只有标题那三类。

元素选择

此部分包含 【相邻元素选取】、【选择器选取】两个性能测试

相邻元素选取

选择那些非常亲密的元素

预备 DOM

全局变量

b=document.getElementById("b")

代码及结果

JavaScript 元素选择,对象与数组,各种循环,……性能测试_第1张图片

十二次测试得出:

  • 我们应该使用 nextSibling, previousSibling 来选取之间没有空格、换行符的亲密元素

测试地址:Find Siblings

选择器选取

比较 Id, ClassName, TagName, querySelector 以及 querySelectorAll 五个选择器

预备 DOM

代码及结果

JavaScript 元素选择,对象与数组,各种循环,……性能测试_第2张图片

五次测试得出:

  • Id 选择器效率最高,实在不行再考虑 ClassName, TagName 或者 querySelector

测试地址:Native Seletors

对象与数组

此部分包含【对象和数组共五种声明方式】、【对象数组调用方式比较】的两个性能测试

各声明方式之间

有 2 条 way 可以创造一个对象,3 条来创造一个数组。

代码及结果

JavaScript 元素选择,对象与数组,各种循环,……性能测试_第3张图片

五次测试得出:

  • 花括号 {} 声明对象效率底下,别用它

  • 使用中括号 [] 声明数组性能极好,千万别用 new Array(1,2,3)

测试地址:Array and Object Declarations

调用方式性能

调用对象快还是数组快?

全局变量

b=document.getElementById("b")

代码及结果

JavaScript 元素选择,对象与数组,各种循环,……性能测试_第4张图片

六次测试得出:

  • 调用数组与对象并没有大的性能差距。如果一定要分个胜负,那么数组赢了。

测试地址:Array and Object Calls

综合两个测试——保存数据时,用不那么语义化的数组比对象好多了

各种循环

此部分包含【循环语句】、【调用函数循环】的两个性能测试

循环语句的性能较量

强迫症的作者很久前就想知道 - 到底哪种循环语句最牛B?

代码

JavaScript 元素选择,对象与数组,各种循环,……性能测试_第5张图片

结果

测试的前几次,!!!最牛掰的是这个:

for (var i=0;i

然后,是这个:

for (var i=0,len=a.length;i

=_=||| 作者傻了。提了个问题
有了结果:

不同的浏览器、版本、作业系统都有可能有不同的结果。有可能最快的是另一种,也有可能差异不同。
—— eyesofkids

这就是本测试的结果

测试地址:Loops

语句对函数

这个测试结果很多人都知道。就不再搞了。

  • 使用 For/While 比使用 调用函数 快得多

别人的测试地址:forEach vs loop

等更……

谢谢阅读!

你可能感兴趣的:(javascript)