JavaScript编程实践过程中性能的优化

Categories:  JavaScript

每种编程语言都有它的“痛点”,并且随着时间的推移,它存在的低效模式也不断发展。JavaScript提出了一些独一无二的性能挑战,这与你代码组织的方式有关,随着Web应用变得越来越高级,包含的JavaScript代码也越来越多,各种模式与反模式也逐渐出现,为了编写更高效的代码,请牢记这些编程实践:

避免多重求值(Double Evaluation)

通过避免使用eval()和function()构造器来避免双重求值带来的性能消耗,同样的,给setTimeout()和setInterval()传递函数而不是字符串作为参数。 双重求值是一项代价昂贵的操作,它比直接包含代码执行速度要慢很多。

使用Object/Array直接量

在JavaScript中创建对象和数组的方法有很多,但使用对象和数组直接量是最快的方式,而且直接量可以有助于节省代码量,以减少整个文件的尺寸。

//创建一个对象
var myObject = {
    name: "Tangwei",
    age: 21,
    count: 50
};

//创建一个数组
var myArray = ["Tangwei", 21, 50];

不要重复工作

在计算机科学领域中最主要的优化技术之一是“避免无谓的工作(work avoidance)”。 避免无谓的工作的概念有两重意思:别做无关紧要的工作别重复做已经完成的工作

延迟加载

第一种消除函数中的重复工作的方法是延迟加载(lazy loading)。延迟加载意味着在信息被使用前不会做任何操作,当一个函数在页面中不会立刻调用时候,延迟加载是最好的选择。

条件预加载

它会在脚本加载期间提前检测,而不会等到函数被调用,检测的操作依然只有一次,只是过程来得更早。条件预加载确保所有函数调用消耗的时间相同,其代价是需要脚本加载时就检测,而不是加载后,预加载适用于一个函数马上用到,并且在整个页面的生命中频繁出现的场合。

使用速度快的部分

位操作

有好几种方法来利用为创造·位操作符提升JavaScript的速度。

  • 使用运算代替纯数学操作
        //通常采用对2取模的方式实现表格颜色交换
    for (var i = 0, len = rows.length; i < len; i++) {
        if (i % 2) {
            className = "even";
        } else {
            className = "odd";
        }
    }

    //通过使用位运算的方式,比原来版本快了50%(取决于浏览器)
    for (var i = 0, len = rows.length; i < len; i++) {
        if (i & ) {
            className = "even";
        } else {
            className = "odd";
        }
    }
  
  • 使用“位掩码”
    位掩码是计数机科学中一种常用的技术,用于处理同时存在多个布尔选项的情况,其思路是使用单个数字的每一位来判定是否选项成立,从而有效地数字转换为布尔值标记组成的数组。掩码中每个选项的值都等于2的幂。 例如:
         var OPTION_A = 1;
         var OPTION_B = 2;
         var OPTION_C = 4;
         var OPTION_D = 16;
         //通过定于这些选项,你可以用按位或运算创建一个数字来包含多个设置选项
         var options = OPTION_A | OPTION_C | OPTION_D;
         //然后通过按位与操作判断一个给定的选项是否可用
         //如果该选项未设置,则结果为0,反之为1

         //选项A是否在列表中?
         if (options & OPTION_A) {
             //代码处理
         }

         //像这样掩码运算速度非常快
    

原生方法

无论你的代码如何优化,都永远比不过JavaScript引擎提供的原生方法更快。对于进行数学运算可以通过使用内置的Math对象会更快。还有对于选择器API,当原生方法可以使用时,应该尽量使用它们。

Buy Me a Coffee !
Disqus is climbing the Great Fire Wall of China, Maybe She needs a ladder.   🤦🏼‍️ 🤷🏼‍️
Read More

Ajax性能的优化

【2015-02-14】Ajax是高性能JavaScript的基础,它可以通过延迟下载体积较大的资源文件来使页面加载更快,它通过异步的方式在客户端和服务器之间传递数据,从而避免页面资源一窝蜂的下载。它甚至可以只用一个HTTP请求就获得整个页面的资源。选择合适的传输方式和最有效的数据格式,可以显著改善用户和网站的交互体验 ...