资讯专栏INFORMATION COLUMN

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

li21 / 2205人阅读

摘要:代码及结果五次测试得出花括号声明对象效率底下,别用它使用中括号声明数组性能极好,千万别用测试地址调用方式性能调用对象快还是数组快全局变量代码及结果六次测试得出调用数组与对象并没有大的性能差距。有可能最快的是另一种,也有可能差异不同。

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

测试平台:Chrome 55 on Windows 7

测试工具:jsPerf

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

元素选择

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

相邻元素选取

选择那些非常亲密的元素

预备 DOM
全局变量
b=document.getElementById("b")
代码及结果

十二次测试得出:

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

测试地址:Find Siblings

选择器选取

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

预备 DOM
代码及结果

五次测试得出:

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

然后,是这个:

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

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

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

这就是本测试的结果

测试地址:Loops

语句对函数

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

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

别人的测试地址:forEach vs loop

等更……

谢谢阅读!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81309.html

相关文章

  • 吹毛求疵的追求优雅高性能JavaScript

    摘要:这样优化后我们最多进行次判断即可,大大提高了代码的性能。表达式的值具有离散性, 个人博客,点击查看目录,喜欢可以关注一下. 1.从[]==![]为true来剖析JavaScript各种蛋疼的类型转换 2.吹毛求疵的追求优雅高性能JavaScript 李小龙说过:天下武功,无坚不摧,唯快不破.(真的说过吗?)我想说的是:世间网站,完美体验,唯快不破.(这个我承认我说过.) showImg...

    saucxs 评论0 收藏0
  • javascript性能优化方面的知识总结

    摘要:插入迭代器如前面两条语句可以写成使用直接量替换为替换为替换为如果要创建具有一些特性的一般对象,也可以使用字面量,如下前面的代码可用对象字面量来改写成这样使用优化多次一旦需要更新请考虑使用文档碎片来构建结构,然后再将其添加到现存的文档中。 好赞,收藏自 总结的js性能优化方面的小知识(不喜勿喷) 前言 一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对...

    BlackHole1 评论0 收藏0
  • JS 数组循环遍历方法的对比

    摘要:循环方法方法不改变原数组方法会给原数组中的每个元素都按顺序调用一次函数。筛选出过滤出数组中符合条件的项组成新数组代码方法方法为数组中的每个元素执行一次函数,直到它找到一个使返回表示可转换为布尔值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 发展至今已经发展出多种数组的循环遍...

    BlackFlagBin 评论0 收藏0
  • 前端性能优化指南

    摘要:前端性能优化指南优化缓存异步并不等于即时。操作性能问题主要有以下原因。发生在之前,所以相对来说会造成更多性能损耗。新引擎还对对象属性访问做了优化,解决方案叫,简称。代价是前置的扫描类型编译优化。数组,,闭包变量不在优化范畴之列。 前端性能优化指南 AJAX优化 缓存AJAX: 异步并不等于即时。 请求使用GET: 当使用XMLHttpRequest时,而URL长度不到2K...

    Pink 评论0 收藏0
  • 【前端性能优化】高性能JavaScript整理总结

    摘要:然后执行环境会创建一个活动对象,活动对象作为函数运行的变量对象,包含所有局部变量命名参数参数集合和,当执行环境销毁,活动对象也被销毁。 高性能JavaScript整理总结 关于前端性能优化:首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果,所以跟34 军规有很多相似之处有不当之...

    zzbo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<