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

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

• 测试平台：Chrome 55 on Windows 7

• 测试工具：jsPerf

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

元素选择

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

相邻元素选取

选择那些非常亲密的元素

预备 DOM

<div id="a"></div><div id="b"></div><div id="c"></div>

全局变量

b=document.getElementById("b")

代码及结果

十二次测试得出：

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

测试地址：Find Siblings

选择器选取

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

预备 DOM

<div class="like" id="number"></div>

代码及结果

五次测试得出：

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

测试地址：Native Seletors

对象与数组

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

各声明方式之间

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

代码及结果

五次测试得出：

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

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

测试地址：Array and Object Declarations

调用方式性能

调用对象快还是数组快？

全局变量

b=document.getElementById("b")

代码及结果

六次测试得出：

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

测试地址：Array and Object Calls

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

各种循环

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

循环语句的性能较量

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

代码

结果

测试的前几次，！！！最牛掰的是这个：

for (var i=0;i<a.length;i++){ //没缓存
  a[i]
}

然后，是这个：

for (var i=0,len=a.length;i<len;i++){
  a[i]
}

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

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

这就是本测试的结果

测试地址：Loops

语句对函数

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

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

别人的测试地址：forEach vs loop

等更……

谢谢阅读！