这些方法都可以或许有效的进步法度榜样的效力。

清单 18. 应用 display 削减 reflow

先隐蔽 pDiv，再显示，如许，隐蔽和显示之间的操作便不会产生任何的 Reflow，进步了效力。

2.3特别测量属性和办法

DOM 元素琅绫擎有一些特别的测量属性的拜访和办法的调用，也会触发 Reflow，比较典范的就是"offsetWidth"属性和"getComputedStyle"办法。

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

str +="str2"

这些测量属性和办法大年夜致有这些：

· offsetLeft

· offsetTop

· offsetHeight

· offsetWidth

· scrollTop/Left/Width/Height

· clientTop/Left/Width/Height

· getComputedStyle()

这里我们在每个轮回时都邑调用字符串的"charAt"办法，然则因为我们是将常量"12345678"赋值给"str"，所以"str"这里事实上并不是一个字符串对象，当它每次调用"charAt"函数时，都邑临时构造值为"12345678"的字符串对象，然后调用"charAt"办法，最后再释放这个字符串临时对象。我们可以做一些改进：

· currentStyle(in IE))

这些属性和办法的拜访和调用，都邑触发 Reflow 的产生，我们应当尽量削减对这些属性和办法的拜访和调用，参考如下代码：

清单 19. 特别测量属性

关于上述较少 Reflow 操作的解决筹划，还有一种可以参考的模式：

这里我们可以用临时变量将"offsetWidth"的值缓存起来，如许就不消每次拜访"offsetWidth"属性。这种方法在轮回琅绫擎异常实用，可以极大年夜地进步机能。

2.4 样式相干

我们肯定经常见到如下的代码：

清单 20. 样式相干

然则可以看到，这里的每一个样式的改变，都邑产生 Reflow。须要削减这种情况的产生，我们可以如许做：

解决筹划 1：

清单 21. className 解决筹划

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

清单 22. cssText 解决筹划

一个页面上往往包含 1000 多页面元素，在定位具体元素的时刻，往往须要必定的时光。如不雅用 id 或 name 定位可能效力不会太慢，如不雅用元素的一些其他属性（比如 className 等等）定位，可能效力有不睬想了。有的可能只能经由过程遍历所有元素（getElementsByTagName）然后过滤才能找到响应元素，这就加倍低效了，这里我们推荐应用 XPath 查找元素，这是很多浏览器本身支撑的功能。

清单 23. XPath 解决筹划

浏览器 XPath 的搜刮引擎会优化搜刮效力，大年夜大年夜缩短结不雅返回时光。

2.6 HTMLCollection 对象

这是一类特别的对象，它们有点像数组，但不美满是数组。下述办法的返回值一般都是 HTMLCollection 对象：

· document.images, document.forms

· getElementsByTagName()

这些 HTMLCollection 对象并不是一个固定的值，而是一个动态的结不雅。它们是一些比较特别的萌芽的返回值，在如下情况下，它们会从新履行之前的萌芽而获得新的返回值（萌芽结不雅），固然多半情况下会和前一次或几回的返回值都一样：

· Length 属性

· 具体的某个成员

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

参考如下代码：

清单 24. HTMLConnection 对象

上述两端代码，下面的效力比起膳绫擎一段要慢很多，因为每一个轮回都邑有"items.length"的触发，也就会导致"document.getElementsByTagName(..)"办法的再次调用，这就是效力便会大年夜幅度降低的原因。我们可以如许解决：

　　推荐阅读

　　一文让你学会所有的python模块使用

如不雅你退出 Python 说冥器并从新进入，你做的任何定义（变量和办法）都邑损掉。是以，如不雅你想要编写一些更大年夜的法度榜样，为预备说冥器输入应用一个文本编辑器会更好，并以那个文>>>详细阅读

本文标题：技术进阶：通过来JavaScript 性能调优提高 Web 应用性能

地址：http://www.17bianji.com/lsqh/40502.html

 1/2    1