Javascript优化相关

来源:互联网 发布:明源软件 编辑:程序博客网 时间:2024/06/17 03:20

(1)如果for循环的数据量很大,可以考虑采用duff装置,将for循环拆成switch case,里面一般是8个case,这样会提速

(2)能使用switch就别使用if else,将switch中case按最可能到最不可能一次排序会进一步提升性能

(3)尽量使用原生js方法,如Math中的各种数学计算方法,原生方式是c++之类的编译语言所写,会快很多

(4)多个变量声明提速:只用一个var

慢:

var count = 1;var   count = 1,

var bTrue = false;bTrue = false,

var str = "foo"str = "foo";


(5)for循环中的一个优化,应当避免多次计算长度属性

 var divs = document.getElementsByClassName("div1"); 

 for(var i=0;i<divs.length;i++){

}


应该优化为:

var divs = document.getElementsByClassName("div1"); 

 for(var i=0,len = divs.length;i<len;i++){

}


(6)代码最好压缩后保存,上线的时候,因为可以减少文件大小和提升下载速度,压缩可以省去全部注释和空白字符以及缩短变量名,


(7)如果页面上有耗时的操作,可以考虑使用web worker将计算放到后台去,这样做不会阻塞页面,因为js是单线程,而web worker在后台

创建线程并执行计算,这样虽然要等待一段时间,但是页面不会卡住,用户可以做其他操作


//单线程//页面卡住,当数字为10亿数量级以上function caculate(){    var num = document.getElementById("numberBtn").value,sum=0;    for(var i=1;i<=num;i++){        sum+=i;    }    alert(sum);}//利用webworker后台执行,在这个js中处理计算var worker = new Worker("webWorker.js");function caculateByWebWorker(){    var number = document.getElementById("numberInput").value;    var btn = document.getElementById("btn");    btn.setAttribute("disabled","disabled");    worker.postMessage(number);}
//处理后台发来的数据worker.onmessage = function(e){    alert(e.data);    var btn = document.getElementById("btn");    btn.removeAttribute("disabled");}


(8)平稳退化的例子:对于那些禁用了js的用户而言,需要对网页做出特殊处理以便能够正常访问,例如<a href="http://www.baidu.com" onclick="popUp();return false">

这里href属性加上去是为了当js禁用时仍然能够访问链接