易搜百度贴吧排名 让客户更容易搜索到您!

立即致电:4000-340-360 体验易搜百度贴吧排名为您带来的高效服务。

当前位置:易搜网络技术公司 >> 百度排名 >> 百度贴吧排名 >> 浏览文章

技术进阶通过来javascript 性能调优进步 Web 应用性能

文章标签:技术,进阶,通过,通过来,过来,性能,进步,应用,应用性

  创业项目优选 好项目来招商 ,点击入驻!

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  前言

  如今的互联网应用中,在Web 开发中经常会碰到性能的题目,尤其是针对当今的 Web2.0 +应用。javascript 是当今使用最为广泛的 Web 开发语言,Web 应用的性能题目很大一部分都是由程序员写的 javascript 脚本性能不佳所造成的,里面包括了 javascript 语言自己的性能题目,以及其与 DOM 交互时的性能题目。本文重要来探究一下如何尽可能多的避免这类题目,从而最大限度的进步 Web 应用的性能。

  1.javascript 性能调优

  javascript 语言因为它的单线程息争释实行的两个特点,决定了它自己有许多地方有性能题目,所以可改进的地方有不少。

  1.1 eval 的题目:

  比较下述代码:

  清单 1. eval 的题目

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  有"eval"的代码比没有"eval"的代码要慢上 100 倍以上。

  重要缘故原由是:javascript 代码在实行前会进行类似"预编译"的操作:首先会创建一个当前实行环境下的运动对象,并将那些用 var 申明的变量设置为运动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为运动对象的属性,而且它们的值正是函数的定义。但是,假如你使用了"eval",则"eval"中的代码(现实上为字符串)无法预先识别其上下文,无法被提前解析和优化,即无法进行预编译的操作。所以,其性能也会大幅度降低。

  1.2 Function 的用法

  比较下述代码:

  清单 2. function 的用法

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这里类似之前提到的"eval"方法,这里"func1"的服从会比"func2"的服从差许多,所以保举使用第二种体例。

  1.3函数的作用域链(scope chain)

  javascript 代码诠释实行,在进入函数内部时,它会预先分析当前的变量,并将这些变量归入不同的层级(level),一样平常情况下:

  局部变量放入层级 1(浅),全局变量放入层级 2(深)。假如进入"with"或"try – catch"代码块,则会增长新的层级,即将"with"或"catch"里的变量放入最浅层(层 1),并将之前的层级依次加深。

  参考如下代码:

  清单 3. 函数作用域链

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这里我们可以看到,"images"牧野加工中心,"widget","combination"属于局部变量,在层 1。"document","myObj"属于全局变量,在层 2。

  变量所在的层越浅,访问(读取或修改)速度越快,层越深,访问速度越慢。所以这里对"images","widget","combination"的访问速度比"document","myObj"要快一些。所以保举尽量使用局部变量,可见如下代码:

  清单 4. 使用局部变量

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  我们用局部变量"doc"庖代全局变量"document"辽宁人事考试网,如许可以改进性能,尤其是对于大量使用全局变量的函数里面。

  再看如下代码:

  清单 5. 慎用 with

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  加上"with"关键字,我们让代码更加简洁清晰了,但是如许做性能会受影响。正如之前说的,当我们进入"with"代码块时,"combination"便从原来的层 1 变到了层 2,如许,服从会大打扣头。所以比较一下,照旧使用原来的代码:

  清单 6. 改进 with

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  但是如许并不是最好的体例,javascript 有个特点,对于 object 对象来说,其属性访问层级越深,服从越低,比如这里的"myObj"已经访问到了第 3 层,我们可以如许改进一下:

  清单 7. 缩小对象访问层级

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  我们用局部变量来代替"myObj"的第 2 层的"container"对象。假如有大量的这种对对象深层属性的访问,可以参照以上体例进步性能。

  1.4字符串(String)相干

  字符串拼接

  经常看到如许的代码:

  清单 8. 字符串简单拼接

  str += "str1" + "str2"

  这是我们拼接字符串常用的体例,但是这种体例会有一些一时变量的创建和烧毁,影响性能,所以保举使用如下体例拼接:

  清单 9. 字符串数组体例拼接

  var str_array = [];

  str_array.push("str1");

  str_array.push("str2");

  str = str_array.join("");

  这里我们行使数组(array)的"join"方法实现字符串的拼接,尤其是程序的老版本的 Internet Explore(IE6)上运行时,会有特别很是显明的性能上的改进。

  当然,最新的欣赏器(如火狐 Firefox3+,IE8+ 等等)对字符串的拼接做了优化,我们也可以如许写:

  清单 10. 字符串快速拼接

  str +="str1"

  str +="str2"

  新的欣赏器对"+="做了优化,性能略快于数组的"join"方法。在不久的未来更新版本欣赏器可能对"+"也会做优化,所以那时我们可以直接写:str += "str1" + "str2"。

  隐式类型转换

  参考如下代码:

  清单 11. 隐式类型转换

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这里我们在每个循环时都会调用字符串的"charAt"方法江苏人事考试网站,但是因为我们是将常量"12345678"赋值给"str",所以"str"这里事实上并不是一个字符串对象,当它每次调用"charAt"函数时,都会一时构造值为"12345678"的字符串对象,然后调用"charAt"方法,最后再释放这个字符串一时对象。我们可以做一些改进:

  清单 12. 避免隐式类型转换

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  如许一来,变量"str"作为一个字符串对象,就不会有这种隐式类型转换的过程了,如许一来,服从会明显进步。

  字符串匹配

  javascript 有 RegExp 对象,支撑对字符串的正则表达式匹配。是一个很好的工具,但是它的性能并不是特别很是理想。相反,字符串对象(String)自己的一些基本方法的服从是特别很是高的,比如"substring","indexOf","charAt"等等,在我们必要用正则表达式匹配字符串时,可以考虑一下:

  1)是否能够通过字符串对象自己支撑的基本方法解决题目。

  2)是否可以通过"substring"来缩小必要用正则表达式的范围。

  这些体例都能够有用的进步程序的服从。

  关于正则表达式对象,还有一点必要细致,参考如下代码:

  清单 13. 正则表达式

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这里,我们往"match"方法传入"/^s*extras/"是会影响服从的,它会构建一时值为"/^s*extras/"的正则表达式对象,实行"match"方法,然后烧毁一时的正则表达式对象。我们可以如许做:

  清单 14. 行使变量

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  如许就不会有一时对象了。

  setTimeout 和 setInterval

  "setTimeout"和"setInterval"这两个函数可以接受字符串变量seo公司,但是会带来与之前谈到的"eval"类似的性能题目,所以建议照旧直接传入函数对象自己。

  行使提前退出

  参考如下两段代码:

  清单 15. 行使提前退出

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  代码 2 多了一个对"name.indexOf( … )"的判断,这使得程序每次走到这一段时会先实行"indexOf"的判断,再实行后面的"match",在"indexOf"比"match"服从高许多的前提下,如许做会削减"match"的实行次数,从而肯定程度的进步服从。

  2. DOM 操作性能调优

  javascript 的开发离不开 DOM 的操作,所以对 DOM 操作的性能调优在 Web 开发中也是特别很是紧张的。

  2.1 Repaint 和 Reflow

  Repaint 也叫 Redraw,它指的是一种不会影响当前 DOM 的结构和布局的一种重绘动作。如下动作会产生 Repaint 动作:

  不可见到可见(visibility 样式属性)

  颜色或图片转变(background, border-color, color 样式属性)

  不改变页面元素大小,外形和位置,但改变其表面的转变

  Reflow 比起 Repaint 来讲就是一种更加明显的转变了。它重要发生在 DOM 树被操作的时候,任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时,它的所有父元素和子元素都会放生 Reflow,最后 Reflow 必然会导致 Repaint 的产生。举例说明,如下动作会产生 Repaint 动作:

  欣赏器窗口的转变

  DOM 节点的添加删除操作

  一些改变页面元素大小,外形和位置的操作的触发

  2.2 削减 Reflow

  通过 Reflow 和 Repaint 的介绍可知,每次 Reflow 比其 Repaint 会带来更多的资源消费,我们应该尽量削减 Reflow 的发生,或者将其转化为只会触发 Repaint 操作的代码。

  参考如下代码:

  清单 16. reflow 介绍

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这是我们经常接触的代码了,但是这段代码会产生 3 次 reflow。再看如下代码:

  清单 17. 削减 reflow

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这里便只有一次 reflow,所以我们保举这种 DOM 节点操作的体例。

  关于上述较少 Reflow 操作的解决方案,还有一种可以参考的模式:

  清单 18. 行使 display 削减 reflow

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  先隐蔽 pDiv,再表现,如许,隐蔽和表现之间的操作便不会产生任何的 Reflow,进步了服从。

  2.3特别测量属性和方法

  DOM 元素里面有一些特别的测量属性的访问和方法的调用,也会触发 Reflow,比较典型的就是"offsetWidth"属性和"getComputedStyle"方法。

  图 1. 特别测量属性和方法

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这些测量属性和方法大致有这些:

  · offsetLeft

  · offsetTop

  · offsetHeight

  · offsetWidth

  · scrollTop/Left/Width/Height

  · clientTop/Left/Width/Height

  · getComputedStyle()

  · currentStyle(in IE))

  这些属性和方法的访问和调用,都会触发 Reflow 的产生,我们应该尽量削减对这些属性和方法的访问和调用,参考如下代码:

  清单 19. 特别测量属性

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  这里我们可以用一时变量将"offsetWidth"的值缓存起来,如许就不用每次访问"offsetWidth"属性。这种体例在循环里面特别很是适用,可以极大地进步性能。

  2.4 样式相干

  我们一定经常见到如下的代码:

  清单 20. 样式相干

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  但是可以看到,这里的每一个样式的改变,都会产生 Reflow。必要削减这种情况的发生,我们可以如许做:

  解决方案 1:

  清单 21. className 解决方案

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  用 class 替换 style,可以将原有的所有 Reflow 或 Repaint 的次数都缩减到一个。

  解决方案 2:

  清单 22. cssText 解决方案

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  一次性设置所有样式,也是削减 Reflow 进步性能的方法。

  2.5 XPath

  一个页面上每每包含 1000 多页面元素,在定位详细元素的时候,每每必要肯定的时间。假如用 id 或 name 定位可能服从不会太慢,假如用元素的一些其他属性(比如 className 等等)定位,可能服从有不理想了。有的可能只能通过遍历所有元素(getElementsByTagName)然后过滤才能找到响应元素,这就更加低效了,这里我们保举使用 XPath 查找元素,这是许多欣赏器自己支撑的功能。

  清单 23. XPath 解决方案

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  欣赏器 XPath 的搜索引擎会优化搜索服从,大大缩短效果返回时间。

  2.6 HTMLCollection 对象

  这是一类特别的对象,它们有点像数组,但不完全是数组。下述方法的返回值一样平常都是 HTMLCollection 对象:

  · document.images, document.forms

  · getElementsByTagName()

  · getElementsByClassName()

  这些 HTMLCollection 对象并不是一个固定的值,而是一个动态的效果。它们是一些比较特别的查询的返回值,在如下情况下,它们会重新实行之前的查询而得到新的返回值(查询效果),虽然多数情况下会和前一次或几次的返回值都一样:

  · Length 属性

  · 详细的某个成员

  所以,HTMLCollection 对象对这些属性和成员的访问,比起数组来要慢许多。当然也有例外,Opera 和 Safari 对这种情况就处理的很好,不会有太大性能题目。

  参考如下代码:

  清单 24. HTMLConnection 对象

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  上述两端代码,下面的服从比起上面一段要慢许多,由于每一个循环都会有"items.length"的触发,也就会导致"document.getElementsByTagName(..)"方法的再次调用,这便是服从便会大幅度降落的缘故原由。我们可以如许解决:

  清单 25. HTMLConnection 对象解决方案

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  如许一来,服从基本与通俗数组一样。

  2.7 动态创建 script 标签

  加载并实行一段 javascript 脚本是必要肯定时间的,在我们的程序中,偶然候有些 javascript 脚本被加载后基本没有被使用过 (比如:脚本里的函数从来没有被调用等等)。加载这些脚本只会占用 CPU 时间和增长内存消费,降低 Web 应用的性能。所以保举动态的加载 javascript 脚本文件,尤其是那些内容较多,消费资源较大的脚本文件。

  清单 26. 创建 script 标签

  

技术进阶通过来javascript 性能调优进步 Web 应用性能

 

  写在最后

  这篇文章介绍了 Web 开发中关于性能方面必要细致的一些小细节,从 javascript 自己动手,介绍了 javascript 中必要避免的一些函数的使用和编程规则,比如 eval 的弊端,function scope chain 以及 String 的用法等等,也分享了一些比较保举的做法,并扩展到 javascript 对 DOM 操作的性能调优,比如行使 Repaint 和 Reflow 的机制,如何使用特别测量属性,样式相干的性能调优以及 HTMLCollection 对象的原理和使用小技巧。这些小细节我们可以在开发过程中尽量细致一下,以尽可能多的进步我们 Web 应用的性能。