JS复习整理12_优化

一.可维护性优化

1.添加注释
注释能够增强代码的可读性以及可维护性&＃xff0c;当然&＃xff0c;理想情况是满满的注释&＃xff0c;但这不太现实。所以我们只需要在一些关键的地方添上注释&＃xff1a;

函数和方法&＃xff1a;尤其是返回值&＃xff0c;因为直接看不出来

大段代码&＃xff08;功能模块&＃xff09;&＃xff1a;说明模块功能

复杂算法&＃xff1a;写出关键点&＃xff0c;方便理解

Hack&＃xff1a;说明为了修复什么问题&＃xff0c;当前方案是否完善&＃xff0c;能否改进

2.“暗示”变量类型
通过初始值来暗示&＃xff0c;例如&＃xff1a;

var found &＃61; false;
var count &＃61; 1;
var name &＃61; &＃39;&＃39;;
var student &＃61; null;


3.解耦&＃xff08;分层&＃xff09;
结构层&＃xff1a;HTML

行为层&＃xff1a;JS

表现层&＃xff1a;CSS

尽量不要“越权”&＃xff0c;如果实在是想越权&＃xff0c;也应该用文档或者注释说明。尽量不要出现紧耦合&＃xff0c;例如&＃xff1a;

JS-HTML&＃xff1a;

elem.innerHTML &＃61; &＃39;

JS-CSS&＃xff1a;

elem.style.color &＃61; &＃39;#e0e0e0&＃39;;
//最好用下面的方式代替&＃xff08;设置类&＃xff0c;不要直接设置样式&＃xff09;
//elem.className &＃61; &＃39;my_class&＃39;;


JS-JS&＃xff1a;

//逻辑耦合
elem.onclick &＃61; function(e){if(txt.value !&＃61;&＃61; null && txt.value !&＃61;&＃61; &＃39;&＃39; &&...){//DOM操作}
}
//最好用下面的方式代替&＃xff08;分离逻辑功能块&＃xff09;
function isValid(){return txt.value !&＃61;&＃61; null && txt.value !&＃61;&＃61; &＃39;&＃39; &&...;
}
function display(){//DOM操作
}
elem.onclick &＃61; function(e){if(isValid()){display();}
}


避免逻辑耦合的几条原则&＃xff1a;

不要传递event对象&＃xff0c;只传需要的数据

触发事件不应该是执行动作的唯一方式

事件处理器应该只处理事件相关数据&＃xff08;获取事件源&＃xff0c;坐标值等等&＃xff09;&＃xff0c;然后把处理转交给应用逻辑

4.编码原则
①尊重对象所有权&＃xff0c;不要随便修改别人的对象&＃xff0c;具体要求&＃xff1a;

不要给实例/原型添加属性或方法

不要重写已存在的方法

可选方案&＃xff1a;

组合&＃xff1a;创建实现了所需功能的新对象&＃xff0c;引用需要的对象

继承&＃xff1a;创建自定义类型&＃xff0c;继承需要修改的类型&＃xff0c;然后添加额外功能

②用命名空间避免全局变量&＃xff0c;例如&＃xff1a;

var mySystem &＃61; {};
mySystem.mod1 &＃61; {...};


③用常量提高可维护性&＃xff0c;例如&＃xff1a;

var Consts &＃61; {};
Consts.IMG_PATH &＃61; &＃39;../imgs/&＃39;;


注意&＃xff1a;常量包括常用的CSS类名和其它任何可能影响维护的值

二.性能优化

1.避免长作用域链查找
把需要多次引用的全局变量另存为局部变量

2.尽量不要用with语句
with语句会延长作用域&＃xff0c;存在长作用域查找的开销&＃xff0c;可以用另存局部变量来代替&＃xff08;没有with方便&＃xff0c;但多少能好一点&＃xff09;

3.避免不必要的属性查找
①尽量把重复使用的值另存为局部变量&＃xff0c;例如&＃xff1a;

//不要用下面的代码&＃xff08;6次属性查找&＃xff09;
var qs &＃61; window.location.href.substring(window.location.href.indexOf(&＃39;?&＃39;));
//应该用下面的代码&＃xff08;4次&＃xff0c;而且更具可读性&＃xff09;
var url &＃61; window.location.href;
var qs &＃61; url.substring(url.indexOf(&＃39;?&＃39;));


②优化循环

减值迭代更快&＃xff08;i–&＃xff09;

简化终止条件&＃xff0c;每次循环都会检查终止条件&＃xff0c;简化条件能提高效率

简化循环体&＃xff0c;尽量减少循环体里面的计算量

使用后测试循环&＃xff08;do…while&＃xff09;&＃xff0c;可以避免第一次循环前的判断

③展开循环

如果循环次数确定&＃xff0c;最好不要用循环&＃xff0c;因为循环存在创建循环和处理终止条件的额外开销&＃xff0c;例如&＃xff1a;

for(i &＃61; 0;i < 2;i&＃43;&＃43;){process(arr[i]);
}
//下面的比上面的快
process(arr[0]);
process(arr[1]);
process(arr[2]);


如果循环次数不能确定&＃xff0c;可以用Duff技术&＃xff08;Tom Duff发明的&＃xff09;展开一部分循环&＃xff0c;提高效率&＃xff0c;例如&＃xff1a;

//credit: Jeff Greenberg for JS implementation of Duff’s Device
//假设 values.length > 0
var iterations &＃61; Math.ceil(values.length / 8);
var startAt &＃61; values.length % 8;
var i &＃61; 0;
do {switch(startAt){case 0: process(values[i&＃43;&＃43;]);case 7: process(values[i&＃43;&＃43;]);case 6: process(values[i&＃43;&＃43;]);case 5: process(values[i&＃43;&＃43;]);case 4: process(values[i&＃43;&＃43;]);case 3: process(values[i&＃43;&＃43;]);case 2: process(values[i&＃43;&＃43;]);case 1: process(values[i&＃43;&＃43;]);}startAt &＃61; 0;
} while (--iterations > 0);
//以上代码来自&＃xff1a;http://www.cnblogs.com/kylindai/archive/2013/12/04/3458476.html


或者另一个更快的Duff方法&＃xff1a;

//credit: Speed Up Your Site (New Riders, 2003)
var iterations &＃61; Math.floor(values.length / 8);
var leftover &＃61; values.length % 8;
var i &＃61; 0;
if (leftover > 0){do {process(values[i&＃43;&＃43;]);} while (--leftover > 0);
}
do {process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);process(values[i&＃43;&＃43;]);
} while (--iterations > 0);
//以上代码来自&＃xff1a;http://www.cnblogs.com/kylindai/archive/2013/12/04/3458476.html


④避免双重解释

双重解释是指&＃xff1a;用js解析js。具体是用eval()函数或者new Function(strCode)或者setTimeout(strCode)

双重解释的缺点&＃xff1a;需要再启动一个解析器来解析&＃xff0c;存在很大的开销&＃xff0c;比直接解析慢很多

⑤原生方法更快

原生方法是用用C/C&＃43;&＃43;编译好的模块&＃xff0c;所以要快得多

⑥switch比if-else快

原因不好说&＃xff0c;可以参考

⑦位运算并没有更快

在其它语言中把数学运算简化为位运算能够提升计算速度&＃xff0c;但js中没这一说&＃xff0c;因为js内部只有一种数值类型&＃xff08;double&＃xff09;&＃xff0c;所以做位运算需要折腾&＃xff1a;double – int – 做位运算 – double&＃xff0c;性能可想而知

⑧减少语句数量

用1个var声明多个变量

插入迭代值&＃xff0c;arr[i&＃43;&＃43;]一条语句搞定&＃xff0c;不用把i&＃43;&＃43;独立成一个语句

用数组/对象字面量&＃xff0c;代码行数明显变少了

⑨DOM优化

减少现场更新&＃xff0c;可以用DocumentFragment优化

用innerHTML创建DOM节点比创建一堆节点再组装要快&＃xff0c;但存在JS-HTML耦合问题&＃xff0c;慎重考虑

用事件委托

注意实时更新的集合&＃xff08;NodeList、NamedNodeMap、HTMLCollection&＃xff09;

除了把引用另存为局部变量外&＃xff0c;还要注意访问其属性也是需要重新查询的&＃xff0c;比如&＃xff1a;var imgs &＃61;
document.images;访问imgs.length也需要再查一次

三.发布优化

①用验证工具&＃xff08;如JSLint&＃xff09;检查代码&＃xff0c;发现语法错误之外的潜在问题

②去掉注释&＃xff08;出于安全性考虑&＃xff09;

③合并js文件&＃xff0c;尽量减少外部文件数量

④压缩代码&＃xff08;如YUI压缩器&＃xff09;&＃xff0c;减少代码本身大小&＃xff0c;也可以同时混淆代码&＃xff0c;提高安全性&＃xff0c;但混淆代码本身存在风险&＃xff0c;可能引发错误

⑤开启服务器压缩功能&＃xff0c;例如gzip模块