|
|
|
|
移动端

浅谈编写高性能的Javascript代码

今天为大家讲解的是如何编写高性能的Javascript代码,首先要从执行效率动手,其次是一些方法上的处理。

作者:佚名来源:JavaEye|2009-06-24 15:00

人工智能+区块链的发展趋势及应用调研报告


一.Javascript代码执行效率

1. DOM

1.1 使用 DocumentFragment 优化多次 append

说明:添加多个 dom 元素时,先将元素 append 到 DocumentFragment 中,最后统一将 DocumentFragment 添加到页面。

该做法可以减少页面渲染 dom 元素的次数。经 IE 和 Fx 下测试,在 append1000 个元素时,效率能提高 10%-30% , Fx 下提升较为明显。

服用前:

  1. for (var i = 0; i < 1000; i++) {  
  2.     var el = document.createElement('p');  
  3.     el.innerHTML = i;  
  4.     document.body.appendChild(el);  

服用后:

  1. var frag = document.createDocumentFragment();  
  2. for (var i = 0; i < 1000; i++) {  
  3.     var el = document.createElement('p');  
  4.     el.innerHTML = i;  
  5.     frag.appendChild(el);  
  6. }  
  7. document.body.appendChild(frag); 

1.2 通过模板元素 clone ,替代 createElement

说明:通过一个模板 dom 对象 cloneNode ,效率比直接创建 element 高。性能提高不明显,约为 10% 左右。在低于 100 个元素 create 和 append 操作时,没有优势。

服用前:

  1. var frag = document.createDocumentFragment();  
  2. for (var i = 0; i < 1000; i++) {  
  3.     var el = document.createElement('p');  
  4.     el.innerHTML = i;  
  5.     frag.appendChild(el);  
  6. }  
  7. document.body.appendChild(frag);     

服用后:

  1. var frag = document.createDocumentFragment();  
  2. var pEl = document.getElementsByTagName('p')[0];  
  3. for (var i = 0; i < 1000; i++) {  
  4.     var el = pEl.cloneNode(false);  
  5.     el.innerHTML = i;  
  6.     frag.appendChild(el);  
  7. }  
  8. document.body.appendChild(frag); 

1.3 使用一次 innerHTML 赋值代替构建 dom 元素

说明:根据数据构建列表样式的时候,使用设置列表容器 innerHTML 的方式,比构建 dom 元素并 append 到页面中的方式,效率有数量级上的提高。

服用前:

  1. var frag = document.createDocumentFragment();  
  2. for (var i = 0; i < 1000; i++) {  
  3.     var el = document.createElement('p');  
  4.     el.innerHTML = i;  
  5.     frag.appendChild(el);  
  6. }  
  7. document.body.appendChild(frag); 

服用后:

  1. var html = [];  
  2. for (var i = 0; i < 1000; i++) {  
  3.     html.push('  
  4.  
  5. ' + i + '  
  6.  
  7. ');  
  8. }  
  9. document.body.innerHTML = html.join(''); 
1.4 使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
说明:约能获得 30%-50% 的性能提高。逆向遍历时使用 lastChild 和 previousSibling 。

服用前:

  1. var nodes = element.childNodes;  
  2. for (var i = 0l = nodes.length; i < l; i++) {  
  3. var node = nodes[i];  
  4. ……  

服用后:

  1. var node = element.firstChild;  
  2. while (node) {  
  3. ……  
  4. nodenode = node.nextSibling;  

2. 字符串

2.1 使用 Array 做为 StringBuffer ,代替字符串拼接的操作
说明: IE 在对字符串拼接的时候,会创建临时的 String 对象;经测试,在 IE 下,当拼接的字符串越来越大时,运行效率会急剧下降。 Fx 和 Opera 都 对字符串拼接操作进行了优化;经测试,在 Fx 下,使用 Array 的 join 方式执行时间约为直接字符串拼接的 1.4 倍。

服用前:

  1. var now = new Date();  
  2. var str = '';  
  3. for (var i = 0; i < 10000; i++) {  
  4.     str += '123456789123456789';  
  5. }  
  6. alert(new Date() - now); 

服用后:

  1. var now = new Date();  
  2. var strBuffer = [];  
  3. for (var i = 0; i < 10000; i++) {  
  4.     strBuffer.push('123456789123456789');  
  5. }  
  6. var str = strBuffer.join('');  
  7. alert(new Date() - now); 

3. 循环语句

3.1 将循环控制量保存到局部变量

说明:对数组和列表对象的遍历时,提前将 length 保存到局部变量中,避免在循环的每一步重复取值。

  1. 服用前:   
  2. var list = document.getElementsByTagName('p');  
  3. for (var i = 0; i < list.length; i++) {  
  4.     ……  
  5. }  
  6.  
  7. 服用后:   
  8. var list = document.getElementsByTagName('p');  
  9. for (var i = 0l = list.length; i < l; i++) {  
  10.     ……  

3.2 顺序无关的遍历时,用 while 替代 for

说明:该方法可以减少局部变量的使用。比起效率优化,更能直接看到的是字符数量的优化。该做法有程序员强迫症的嫌疑。

  1. 服用前:   
  2. var arr = [1,2,3,4,5,6,7];  
  3. var sum = 0;  
  4. for (var i = 0l = arr.length; i < l; i++) {  
  5.     sum += arr[i];  
  6. }      
  7.  
  8. 服用后:   
  9. var arr = [1,2,3,4,5,6,7];  
  10. var sum = 0l = arr.length;  
  11. while (l--) {  
  12.     sum += arr[l];  

4. 条件分支

4.1 将条件分支,按可能性顺序从高到低排列

说明:可以减少解释器对条件的探测次数。

4.2 在同一条件子的多( >2 )条件分支时,使用 switch 优于 if

说明: switch 分支选择的效率高于 if ,在 IE 下尤为明显。 4 分支的测试, IE 下 switch 的执行时间约为 if 的一半。

4.3 使用三目运算符替代条件分支
服用前:
if (a > b) {
num = a;
} else {
num = b;
}

服用后:
num = a > b ? a : b;


5. 定时器

5.1 需要不断执行的时候,优先考虑使用 setInterval

说明: setTimeout 每一次都会初始化一个定时器。 setInterval 只会在开始的时候初始化一个定时器

  1. 服用前:   
  2. var timeoutTimes = 0;  
  3. function timeout () {  
  4.     timeoutTimes++;  
  5.     if (timeoutTimes < 10) {  
  6.         setTimeout(timeout, 10);  
  7.     }  
  8. }  
  9. timeout();  
  10.  
  11. 服用后:   
  12. var intervalTimes = 0;  
  13. function interval () {  
  14.     intervalTimes++;  
  15.     if (intervalTimes >= 10) {  
  16.         clearInterval(interv);  
  17.     }  
  18. }  
  19. var interv = setInterval(interval, 10); 

5.2 使用 function 而不是 string

说明:如果把字符串作为 setTimeout 和 setInterval 的参数,浏览器会先用这个字符串构建一个 function 。

  1. 服用前:   
  2. var num = 0;  
  3. setTimeout('num++', 10);      
  4.  
  5. 服用后:   
  6. var num = 0;  
  7. function addNum () {  
  8.     num++;  
  9. }  
  10. setTimeout(addNum, 10); 


6. 其他

6.1 尽量不使用动态语法元素

说明: eval 、 Function 、 execScript 等语句会再次使用 javascript 解析引擎进行解析,需要消耗大量的执行时间。

6.2 重复使用的调用结果,事先保存到局部变量

说明:避免多次取值的调用开销。

  1. 服用前:   
  2. var h1 = element1.clientHeight + num1;  
  3. var h2 = element1.clientHeight + num2;  
  4.  
  5. 服用后:   
  6. var eleHeight = element1.clientHeight;  
  7. var h1 = eleHeight + num1;  
  8. var h2 = eleHeight + num2; 

6.3 使用直接量
说明:

  1. var a = new Array(param,param,...) -> var a = []  
  2. var foo = new Object() -> var foo = {}  
  3. var reg = new RegExp() -> var reg = /.../ 

6.4 避免使用 with

说明: with 虽然可以缩短代码量,但是会在运行时构造一个新的 scope 。
OperaDev 上还有这样的解释,使用 with 语句会使得解释器无法在语法解析阶段对代码进行优化。对此说法,无法验证。

  1. 服用前:   
  2. with (a.b.c.d) {  
  3. property1 = 1;  
  4. property2 = 2;  
  5. }  
  6.  
  7.  
  8. 服用后:   
  9. var obj = a.b.c.d;  
  10. obj.property1 = 1;  
  11. obj.property2 = 2; 


6.5 巧用 || 和 && 布尔运算符
重要程度: ★★★

  1. 服用前:   
  2. function eventHandler (e) {  
  3. if(!e) e = window.event;  
  4. }  
  5.  
  6.  
  7. 服用后:   
  8. function eventHandler (e) {  
  9. ee = e || window.event;  
  10. }  
  11.  
  12.  
  13. 服用前:   
  14. if (myobj) {  
  15. doSomething(myobj);  
  16. }  
  17.  
  18.  
  19. 服用后:   
  20. myobj && doSomething(myobj); 


6.6 类型转换

说明:

1).    数字转换成字符串,应用 "" + 1 ,性能上: ("" +) > String() > .toString() > new String() ;

2).    浮点数转换成整型,不使用 parseInt() , parseInt() 是用于将字符串转换成数字,而不是浮点数和整型之间的转换,建议使用 Math.floor() 或者 Math.round()

3).    对于自定义的对象,推荐显式调用 toString() 。内部操作在尝试所有可能性之后,会尝试对象的 toString() 方法尝试能否转化为 String 。

二.内存管理

2.1 循环引用

说明:如果循环引用中包含 DOM 对象或者 ActiveX 对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。

简单的循环引用:

  1. var el = document.getElementById('MyElement');  
  2. var func = function () {…}  
  3. el.func = func;  
  4. func.element = el;  


但是通常不会出现这种情况。通常循环引用发生在为 dom 元素添加闭包作为 expendo 的时候。

如:

  1. function init() {  
  2.     var el = document.getElementById('MyElement');  
  3. el.onclick = function () {……}  
  4. }  
  5. init(); 


init 在执行的时候,当前上下文我们叫做 context 。这个时候, context 引用了 el , el 引用了 function , function 引用了 context 。这时候形成了一个循环引用。

下面 2 种方法可以解决循环引用:

1)    置空 dom 对象

  1. 服用前:   
  2. function init() {  
  3. var el = document.getElementById('MyElement');  
  4. el.onclick = function () {……}  
  5. }  
  6. init();  
  7.  
  8.  
  9. 服用后:   
  10. function init() {  
  11. var el = document.getElementById('MyElement');  
  12. el.onclick = function () {……}  
  13. el = null;  
  14. }  
  15. init(); 


将 el 置空, context 中不包含对 dom 对象的引用,从而打断循环应用。
如果我们需要将 dom 对象返回,可以用如下方法:

  1. 服用前:   
  2. function init() {  
  3.     var el = document.getElementById('MyElement');  
  4.     el.onclick = function () {……}  
  5.     return el;  
  6. }  
  7. init();  
  8.  
  9.  
  10. 服用后:   
  11. function init() {  
  12. var el = document.getElementById('MyElement');  
  13. el.onclick = function () {……}  
  14. try{  
  15. return el;  
  16. } finally {  
  17.     el = null;  
  18. }  
  19. }  
  20. init(); 

2)    构造新的 context

  1. 服用前:   
  2. function init() {  
  3.     var el = document.getElementById('MyElement');  
  4.     el.onclick = function () {……}  
  5. }  
  6. init();  
  7.  
  8.  
  9. 服用后:   
  10. function elClickHandler() {……}  
  11. function init() {  
  12.     var el = document.getElementById('MyElement');  
  13.     el.onclick = elClickHandler;  
  14. }  
  15. init(); 

把 function 抽到新的 context 中,这样, function 的 context 就不包含对 el 的引用,从而打断循环引用。

2.2 通过 javascript 创建的 dom 对象,必须 append 到页面中

说明: IE 下,脚本创建的 dom 对象,如果没有 append 到页面中,刷新页面,这部分内存是不会回收的!

示例代码:

  1. function create () {  
  2.         var gc = document.getElementById('GC');  
  3.         for (var i = 0; i < 5000 ; i++)  
  4.         {  
  5.             var el = document.createElement('div');  
  6.             el.innerHTML = "test";  
  7.  
  8.             // 下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化   
  9.             gc.appendChild(el);  
  10.         }  
  11.     } 


2.3 释放 dom 元素占用的内存
说明:
将 dom 元素的 innerHTML 设置为空字符串,可以释放其子元素占用的内存。
在 rich 应用中,用户也许会在一个页面上停留很长时间,可以使用该方法释放积累得越来越多的 dom 元素使用的内存。

2.4 释放 javascript 对象
说明:在 rich 应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让 GC 能够回收这些内存控件。
对象: obj = null
对象属性: delete obj.myproperty
数组 item :使用数组的 splice 方法释放数组中不用的 item

2.5 避免 string 的隐式装箱
说明:对 string 的方法调用,比如 'xxx'.length ,浏览器会进行一个隐式的装箱操作,将字符串先转换成一个 String 对象。推荐对声明有可能使用 String 实例方法的字符串时,采用如下写法:
var myString = new String('Hello World');

【编辑推荐】

  1. 常用的JavaScript验证正则表达式
  2. 给JavaScript初学者的24个小窍门
  3. JavaScript中关于Cookie的详细介绍
  4. JavaScript中confirm,alert,prompt的用法
  5. 基于JavaScript的REST客户端框架
【责任编辑:彭凡 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

精通EJB 3.0

本书是关于EJB 3.0的专业技术教程,专注于EJB的概念、方法、开发过程的介绍。同时,本书还研究许多高端的EJB知识,使得开发者能够真正理解...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊