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

育—中国 IT 培训领导品牌成都达内: WEB 前端开发 javaScri pt 代码性能优化方案 JavaScrip t是一种属于网络的脚本语言,已经被广泛用于 Web 应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常 JavaS cript 脚本是通过嵌入在 HTML 中来实现自身的功能的。 F irefox 拥有目前最快的 JavaScr ipt 解析器 Spid erMonkey, 有各种各样的让 Jav aScript 的速度更快的努力,其中一个是 . A s 是 Java Script 是由 Em scripten 产生的一个子集,它为 C/ C++ 编绎成的 Jav aScript 代码做了很多优化,编译型后的代码很难看,这就是为什么你不能自己写优化后的代码,但它运行非常快。我建议你阅读一下这篇文章。好了,我们的目标是写速度更快的 JavaScr ipt 代码,这里有让你的代码跑得更快一些的小窍门,以及更好的内存效率。请注意,我不是严格讨论 DOM 和 Web 应用程序,它是关于 JavaScri pt的, DOM 只是一部分。眼见为实,我要添加为第一个添加 j sperf 测试用例, 使用的是 Firefo x3 8 和 Chrome 39 测试。育—中国 IT 培训领导品牌#1 不要类型转换 JavaS cript 是动态类型,但如果你想提高速度不要使用该功能。尽量保持变量的类型一致。这也适用于数组,尽管主要是由浏览器都进行了优化,但尽量不要混用不同类型的数组。这就是为何编译成 Jav aScript 的 C/ C++ 代码使用静态类型的原因之一。{ var x= '2 '; var y= 5; x= 2;x+ y;}测试用例另外:字符串与数字类型间相互转换育—中国 IT 培训领导品牌比方说,你必须将字符串转换为数字, p arseInt 与 pa rseFloat 是最好的方法吗?让我们来看看。 parseF loat("100" ) +"100" //整型 parseI nt("100", 10) "100"| 0 "100" >> 0 "100" <<0 //仅适用于正数"100" > >> 0 parse Int 测试~ par seFloat 测试育—中国 IT 培训领导品牌 Firefox 对位操作进行了优化,运行的代码比 parseIn t和+运算速度快约 9 9% 。而 Chrome 显然对位运算符没有偏爱,他们比 parse Int 函数还慢 62% 。 parseFlo at比+运算符在两种浏览器(Firefo x 28% , Chro me 39%) 上都要快。因此,如果你在写 Node/Chro me 或 Firefox 的应用程序?我认为, 一般使用 parseI nt函数是正确的。#2 不要重新构造对象重组对象不便宜,应该避免它: 不要使用 delete 运算符删除操作比分配一个 n ull 属性慢很多。分配 null 在两个浏览器都快 99% , 但它不能修改对象的结构,但删除可以。编辑:我认为这里有点误导,这并不意味着你不应该使用 delete 操作符, delete 运算符有它自己的使用情况, 它可以防止对象的内存泄漏。 delete vs null 育—中国 IT 培训领导品牌不要以后再添加属性尽量不要在以后再添加属性,最好从一开始就定义对象的架构。这在 F irefo x 中快 10 0% ,在 Chrome 中快 89% 。动态属性 VS 预先定义结构#3 字符串联连字符串联连是一个非常昂贵的操作,但是应该用什么方法呢?当然不是 A 。+= 运算符似乎比+快很多, String .prototype .concat 和 Ar 在两种浏览器都更快。 Ar 是最慢的,符合市场预期。字符串连接测试#4正确的使用正则表达式使用 RegExp .prototype .exec 是没有必要,不是吗? 育—中国 IT 培训领导品牌然而, RegExp. prototype. test 和 Strin 之间是有性能差异的,让我们来看看哪个方法更快: 正则表达式的方法 ec 比 String. prototype. match 快了不少,但他们是不完全一样的东西,它们的区别超出了本文的范围,看这个问答。 RegEx. prototype. test 更快,可能是因为它不返回找到匹配的索引。 String .prototype .se