JavaScript高性能开发的十条建议

JavaScript高性能开发的十条建议

文/开发部 Dimmacro

编者按：javascript开发大部分程序员都做过，写出来的代码质量也千差万别，现在浏览器内嵌的解释器虽然效率已经很高了，但在客户完美体验的趋势下还是捉襟见肘，编写高性能javascript代码，无疑能带来更好的客户体验。本文的这些建议能给开发者带来一定的方向指导，值得一读。

1.使用延迟脚本，动态加载脚本，XHR脚本注入等方式加载js脚本，避免多脚本加载出现的页面长时间等待。

编辑解读：每读取一个页面，页面内容从上到下顺序加载，每遇到js文件，UI线程暂停读取页面，下载并进入js文件中进行解析，如果js文件过多过大，往往导致暂停时间过长，延长了页面加载时间。因此采用上述技术，只将需要的js加载进来，待页面完全显示后，再加载其他js，提高客户体验。

2.用临时变量存储需要多次访问的全局对象及变量，减少在作用域链中解析标识符的时间。

编辑解读：js解释器查找变量的时候，从局部作用域链到全局作用域链，如果频繁的读取一个全局变量，将其用临时变量指代，无疑会提高读取效率和代码运行效率。

3.在JS脚本里尽可能多的对元素操作完成后一次运用到元素，避免多次读取相同的元素位置，大小，偏移量等信息，用变量存储之以减少UI线程重排，重绘元素的压力。也可以采用隐藏元素再修改，文档片段修改后一次加入，和克隆副本并在操作副本后将副本取代原对象的方式，尽量减少由于JS操作带来的多次UI刷新。

编辑解读：每次js脚本对html元素进行了修改，UI线程都会对整个页面进行重绘以更新页面，减少重绘次数，提高重绘和重排效率。

4.循环遍历多采用从后往前式，较少与length比较大小再判断true或false的步骤会提高很大的性能。if-else判断时将概率大的处理放在前面。for循环利用达夫设备模式一次多执行几次操作。

编辑解读：一般人遍历数组或列表都是从前往后遍历，此种遍历方式每次都是比较当前index是否大于数组长度减1，如果采用从后往前遍历，利用js中小于0都是false的特性，减少判断。达夫设备模式是一种思路，让一次循环尽量执行多的操作，从而提高效率。其基本思想是：先遍历总次数与8的取模次，然后遍历总次数除于8取整的次数，每次处理八个相同的操作。如：

// dafu

var
iters = Math.floor(arr.length/8);

var
startIn = arr.length%8;

start
= +new Date();

do{

switch(startIn){

case
0:process();

case
7:process();

case
6:process();

case
5:process();

case
4:process();

case
3:process();

case
2:process();

case
1:process();

}

startIn
= 0;

}while(--iters);

5.递归嵌套利用Memoization，缓存之前的计算结果以较少重复计算。

编辑解读：类似多次求阶乘问题，用此方式缓存之前阶乘结果，能有效避免重复计算，提高效率。示例代码：

function memoize(fundamental,cache){

cache
= cache || {};

var
shell = function(arg){

if(!cache.hasOwnProperty(arg)){

cache[arg]
= fundamental(arg);

}

return
cache[arg];

};

return
shell;

}

6.字符串连接多用+而不是+=，并且让连接字符串中最常的一个字符串放到等号后最左的位置，如 var
newStr=longStr+other1+other2....如果是IE7及更早版本，多用数组项连接来连接字符串。

编辑解读：IE7及更早版本，对字符串连接操作采取的是全部拷贝到一块新的内存后连接在一起的方式，特别耗性能，不过随着软硬件的升级，IE7及更早版本已经要退出历史舞台了。新的IE8,9对字符串连接都做了不少优化。

7.明确正则表达式的起始匹配位置，尽量减少匹配分支，合适使用匹配量词，避免回溯混乱产生的性能问题。

编辑解读：正则匹配，每一个模糊或元字符都是一个分支，在每个分支匹配的最后，如果没有成功结果，会退回到上一个分支，因此，减少匹配分支能有效提高匹配的效率。

8.使用定时器setTimeout和setInterval将需要耗时很长的js脚本分段处理，可以避免出现页面假死现象。

编辑解读：JS解释执行与页面渲染共用一个UI线程，因此如果JS代码占用线程时间过长，必然会影响页面渲染从而造成假死的现象。解决的方式就是利用定时器函数，分开整段js代码执行，分段利用CPU，让页面渲染能有更多的机会抢到执行时间。

9.多使用浏览器支持的原生方法，而不是自己实现的方法。

编辑解读：原生的方法，现代浏览器都做了一些优化。如IE8以后对查询实现了querySelector和querySelectorAll方法，比jquery更高效，使用更方便。

10.利用脚本预处理技术，javascript压缩技术，多个脚本合并技术等，尽量减少浏览器加载时的HTTP请求次数和跳过空白和注释的次数。

编辑解读：页面加载的时候对每一个js文件都会执行一次http请求，以便将js文件的内容读入并解析，采用上述技术，可以减少http请求的次数，提高解释器解析的效率。

来自为知笔记(Wiz)