成都达内︰WEB前端开发javaScript代码性能优化方案.docxVIP

达内教育—中国IT培训领导品牌 成都达内：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|0 100 0 100 0 //仅适用于正数 100 0 parseInt测试~ 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限制声明/传递变量的范围(作用域) 假如你调用一个函数，浏览器必须做一些所谓的范围查找，它的昂贵程度取决