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)