美文网首页
JavaScript 第二十七篇 性能篇

JavaScript 第二十七篇 性能篇

作者: 27亿光年中的小小尘埃 | 来源:发表于2019-11-22 23:25 被阅读0次

    避免全局查找

    可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大,因为要涉及作用域链上的查找。将在一个函数中会用到多次的全局对象存储为局部变量总是没错的。 特别是使用链式操作的时候,如果涉及到全局变量,应把全局变量赋予给局部变量

    避免 with 语句

    在性能非常重要的地方必须避免使用 with 语句。和函数类似,with 语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度。由于额外的作用域链查找,在 with 语句中执行的代码肯定会比外面执行的代码要慢。

    避免不必要的属性查找

    一般来讲,只要能减少算法的复杂度,就要尽可能减少。尽可能多地使用局部变量将属性查找替换为值查找。进一步讲,如果即可以用数字化的数组位置进行访问,也可以使用命名属性(诸如 NodeList对象),那么使用数字位置。

    优化循环

    循环是编程中最常见的结构,在JavaScript程序中同样随处可见。优化循环是性能优化过程中很重要的一个部分,由于它们会反复运行同一段代码,从而自动地增加执行时间。在其他语言中对于循环优化有大量研究,这些技术也可以应用于 JavaScript。一个循环的基本优化步骤如下所示。

    • 减值迭代:大多数循环使用一个从0开始、增加到某个特定值的迭代器。在很多情况下从最大值开始,在循环中不断减值的迭代器更加高效。
    • 简化终止条件:由于每次循环过程都会计算终止条件,所以必须保证它尽可能快。也就是说避免属性查找或其他 O(n)的操作。
    • 简化循环体:循环体是执行最多的,所以要确保其被最大限度地优化。确保没有某些可以被很容易移出循环的密集计算。
    • 使用后测试循环:最常用 for 循环和 while 循环都是前测试循环。而如 do-while 这种后测试循环,可以避免最初终止条件的计算,因此运行更快。

    Duff装置

    Duff 装置的基本概念是通过计算迭代的次数是否为8的倍数将一个循环展开为一系列语句。

    示例:

    //假设 values.length > 0
    var iterations = Math.ceil(values.length / 8);
    var startAt = values.length % 8;
    var i = 0;
    do {
         switch(startAt){
             case 0: process(values[i++]);
             case 7: process(values[i++]);
             case 6: process(values[i++]);
             case 5: process(values[i++]);
             case 4: process(values[i++]);
             case 3: process(values[i++]);
             case 2: process(values[i++]);
             case 1: process(values[i++]);
         }
         startAt = 0;
    } while (--iterations > 0); 
    

    更快的实现方法

    //credit: Speed Up Your Site (New Riders, 2003)
    var iterations = Math.floor(values.length / 8);
    var leftover = values.length % 8;
    var i = 0;
    if (leftover > 0){
         do {
            process(values[i++]);
         } while (--leftover > 0);
    }
    do {
         process(values[i++]); 
         process(values[i++]);
         process(values[i++]);
         process(values[i++]);
         process(values[i++]);
         process(values[i++]);
         process(values[i++]);
         process(values[i++]);
    } while (--iterations > 0); 
    

    性能的其他注意事项

    • 原生方法较快:只要有可能,使用原生方法而不是自己用 JavaScript 重写一个。原生方法是用诸如 C/C++之类的编译型语言写出来的,所以要比 JavaScript 的快很多很多。JavaScript 中最容易被忘记的就是可以在 Math 对象中找到的复杂的数学运算;这些方法要比任何用 JavaScript 写的同样方法如正弦、余弦快的多。
    • Switch 语句较快:如果有一系列复杂的 if-else 语句,可以转换成单个 switch 语句则可以得到更快的代码。还可以通过将case语句按照最可能的到最不可能的顺序进行组织,来进一步优化 switch 语句。
    • 位运算符较快:当进行数学运算的时候,位运算操作要比任何布尔运算或者算数运算快。选择性地用位运算替换算数运算可以极大提升复杂计算的性能。诸如取模,逻辑与和逻辑或都可以考虑用位运算来替换。

    多个变量声明合并成一个语句

    示例:

    //4 个语句——很浪费
    var count = 5;
    var color = "blue";
    var values = [1,2,3];
    var now = new Date(); 
    

    优化后:

    //一个语句
    var count = 5,
     color = "blue",
     values = [1,2,3],
     now = new Date(); 
    

    使用数组和对象字面量

    尽可能使用数组和对象字面量

    尽可能少使用现场更新

    使用 innerHTML

    使用事件代理

    相关文章

      网友评论

          本文标题:JavaScript 第二十七篇 性能篇

          本文链接:https://www.haomeiwen.com/subject/ndscwctx.html