- 1、本文档共10页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
成都达内—WEB前端开发javaScript代码性能优化的方案
成都达内:WEB前端开发javaScript代码性能优化方案JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Firefox拥有目前最快的JavaScript解析器SpiderMonkey,有各种各样的让JavaScript的速度更快的努力,其中一个是asm.js. Asm.js是JavaScript是由Emscripten产生的一个子集,它为C/C++编绎成的JavaScript代码做了很多优化,编译型后的代码很难看,这就是为什么你不能自己写优化后的代码,但它运行非常快。我建议你阅读一下这篇文章。好了,我们的目标是写速度更快的JavaScript代码,这里有让你的代码跑得更快一些的小窍门,以及更好的内存效率。请注意,我不是严格讨论DOM和Web应用程序,它是关于JavaScript的,DOM只是一部分。眼见为实,我要添加为第一个添加jsperf测试用例,使用的是Firefox38和Chrome39测试。#1不要类型转换JavaScript是动态类型,但如果你想提高速度不要使用该功能。尽量保持变量的类型一致。这也适用于数组,尽管主要是由浏览器都进行了优化,但尽量不要混用不同类型的数组。这就是为何编译成JavaScript的C/C++代码使用静态类型的原因之一。{var x = 2;var y = 5;x = 2;x + y;}测试用例另外:字符串与数字类型间相互转换比方说,你必须将字符串转换为数字,parseInt与parseFloat是最好的方法吗?让我们来看看。parseFloat(100)+100//整型parseInt(100, 10)100|0100 0100 0//仅适用于正数100 0parseInt测试~ parseFloat测试Firefox对位操作进行了优化,运行的代码比parseInt和+运算速度快约99%。而Chrome显然对位运算符没有偏爱,他们比parseInt函数还慢62%。parseFloat比+运算符在两种浏览器(Firefox 28%,Chrome 39%)上都要快。因此,如果你在写Node/Chrome或Firefox的应用程序?我认为,一般使用parseInt函数是正确的。#2不要重新构造对象重组对象不便宜,应该避免它:不要使用delete运算符删除操作比分配一个null属性慢很多。分配null在两个浏览器都快99%,但它不能修改对象的结构,但删除可以。编辑:我认为这里有点误导,这并不意味着你不应该使用delete操作符,delete运算符有它自己的使用情况,它可以防止对象的内存泄漏。delete vs null不要以后再添加属性尽量不要在以后再添加属性,最好从一开始就定义对象的架构。这在Firefox中快100%,在Chrome中快89%。动态属性VS预先定义结构#3字符串联连字符串联连是一个非常昂贵的操作,但是应该用什么方法呢?当然不是Atotype.join。+=运算符似乎比+快很多,Stotype.concat和Atotype.join在两种浏览器都更快。Atotype.join是最慢的,符合市场预期。字符串连接测试#4正确的使用正则表达式使用RegEtotype.exec是没有必要,不是吗?? ?然而,RegEtotype.test和Stotype.search之间是有性能差异的,让我们来看看哪个方法更快:正则表达式的方法RegEtotype.exec比Stotype.match快了不少,但他们是不完全一样的东西,它们的区别超出了本文的范围,看这个问答。RegEtotype.test更快,可能是因为它不返回找到匹配的索引。Stotype.search应仅用于找到所需的匹配的索引。然而,你不应该使用正则表达式来查找另一个字符串的位置,你可以使用Stotype.indexOf方法。Stotype.search VS Stotype.indexOf另一个有趣的基准是Stotype.indexOf VS RegEtotype.test,我个人预计后者要快,这是在Firefox中发生的事情,但在Chrome中,事实并非如此。RegEtotype.test在Firefox中快32%,而在Chrome中Stotype.indexOf快33%。在这种情况下,你自己选择喜欢的方式吧。#5限制声明/传递变量的范围(作用域)假如你调用一个函数,浏览器必须做一些所谓的范围查找,它的昂贵程度取决于它要查找多少范围。尽量不要依辣全局/高范围的变量,尽量使局部范围变量,并将它们传递给函数。更少的范围查找,更少的牺牲速度。这个测试告诉我们,从
文档评论(0)