js教程-javascript最佳实践性能

《js教程-javascript最佳实践性能》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JS教程-JavaScript最佳实践：性能注意作用域避免全局查找一个例子：functionupdateUI(){varimgs=document.getElementByTagName("img");for(vari=0,len=imgs.length;iimgs[i].title=document.title+"image"+i;}varmsg=document.getElementById("msg");msg.innnerHTML="Updatecomplete.";}该函数可能看上去完全正常，但是它包含了三个对于全局document对

2、象的引用。如果在页面上有多个图片，那么for循环中的document引用就会被执行多次甚至上百次，每次都会要进行作用域链查找。通过创建一个指向document对象的局部变量，就可以通过限制一次全局查找来改进这个函数的性能：functionupdateUI(){vardoc=document;varimgs=doc.getElementByTagName("img");for(vari=0,len=imgs.length;iimgs[i].title=doc.title+"image"+i;}varmsg=doc.getElementById("

3、msg");msg.innnerHTML="Updatecomplete.";}这里，首先将document对象存在本地的doc变量中;然后在余下的代码中替换原来的document。与原来的版本相比，现在的函数只有一次全局查找，肯定更快。选择正确方法1.避免不必要的属性查找获取常量值是非常高效的过程varvalue=5;varsum=10+value;alert(sum);该代码进行了四次常量值查找：数字5，变量value，数字10和变量sum。在JavaScript中访问数组元素和简单的变量查找效率一样。所以以下代码和前面的例子效率一样：va

4、rvalue=[5,10];varsum=value[0]+value[1];alert(sum);对象上的任何属性查找都比访问变量或者数组花费更长时间，因为必须在原型链中对拥有该名称的属性进行一次搜素。属性查找越多，执行时间就越长。varvalues={first:5,second:10};varsum=values.first+values.second;alert(sum);这段代码使用两次属性查找来计算sum的值。进行一两次属性查找并不会导致显著的性能问题，但是进行成百上千次则肯定会减慢执行速度。注意获取单个值的多重属性查找。例如：va

5、rquery=window.location.href.substring(window.location.href.indexOf("?"));在这段代码中，有6次属性查找：window.location.href.substring()有3次，window.location.href.indexOf()又有3次。只要数一数代码中的点的数量，就可以确定查找的次数了。这段代码由于两次用到了window.location.href，同样的查找进行了两次，因此效率特别不好。一旦多次用到对象属性，应该将其存储在局部变量中。之前的代码可以如下重写：va

6、rurl=window.locaiton.href;varquery=url.substring(url.indexOf("?"));这个版本的代码只有4次属性查找，相对于原始版本节省了33%。一般来讲，只要能减少算法的复杂度，就要尽可能减少。尽可能多地使用局部变量将属性查找替换为值查找，进一步奖，如果即可以用数字化的数组位置进行访问，也可以使用命名属性(诸如NodeList对象)，那么使用数字位置。2.优化循环一个循环的基本优化步骤如下所示。(1)减值迭代——大多数循环使用一个从0开始、增加到某个特定值的迭代器。在很多情况下，从最大值开始，在

7、循环中不断减值的迭代器更加高效。(2)简化终止条件——由于每次循环过程都会计算终止条件，所以必须保证它尽可能快。也就是说避免属性查找或其他操作。(3)简化循环体——循环是执行最多的，所以要确保其最大限度地优化，确保其他某些可以被很容易移除循环的密集计算。(4使用后测试循环——最常用for循环和while循环都是前测试循环。而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。以下是一个基本的for循环：for(vari=0;i

8、0递增到values数组中的元素总数。循环可以改为i减值，如下所示：for(vari=value.length-1;i>=0;i--){process