阅读 13

提升javascript运行速度的编程实践(延迟加载、条件预加载和位运算)

一、避免重复工作

在计算机领域中最主要的性能优化技术之一就是“避免无谓的工作”,避免无谓的工作有两层意思:第一是“别做无关紧要的工作”(废代码),第二是重复已完成的工作。无关紧要的工作在代码重构的过程中往往能够被发现,第二种经常难以发现和界定。

避免重复的工作,以浏览器探测为例:

function addHandler(target,eventType,handler){
   if(window.addEventListener) {
        target.addEventListener(eventType,handler,false);
   }else{
        target.attachEvent('on' + eventType,handler);
   }
}
复制代码

1、延迟加载的方式(lazy loading等到用的时候再去判断,并且永久保存)

function addHandler(target,eventType,handler){
   if(window.addEventListener) {
        addHandler = function(target,eventType,handler){
            target.addEventListener(eventType,handler,false);
        }
   }else{
        addHandler = function(target,eventType,handler){
            target.attachEvent('on' + eventType,handler);
        }
   }
   addHandler(target,eventType,handler);
}
复制代码

2、条件预加载的方式(脚本加载的时候就进行判断,并且永久保存)

var addHandler = window.addEventListener?function(target,eventType,handler){
        target.addEventListener(eventType,handler,false);
    }:function(target,eventType,handler){
        target.attachEvent('on' + eventType,handler);
    }
复制代码

二、位运算

在javascript中的数字都是以64位格式进行存储,而在位操作中,数字被转换为有符号的32位格式。尽管需要转换,位运算依然比其他的数学运算和布尔值操作快很多。通过toString方法可以数字转换成字符串的二进制表达式。位运算有四种逻辑操作符:AND(与),OR(或),XOR(亦或),NOT(非)。

1、使用位运算代替普通的数字计算(取模运算为例,就可以拥有快一倍的速度)

for(var i=0,len = 100000;i<len;i++){
    if(i&1){
        console.log('odd');    //二进制数中,最低位是1的为奇数
    }else{
        console.log('even');
    }
}
复制代码

2、位掩码运算(用于处理同时存在多个布尔值的选项)

假设存在1,2,4,8,16多种条件,可以通过AND运算来判断是否达到某条件。

    const con1 = 1,
        con2 = 2,
        con3 = 4,
        con4 = 8,
        con5 = 16;
    var options = con1|con2|con3;     //假设满足该三种条件,通过OR运算赋予
    
    //通过AND判断
    if(options&con2){
        //处理
    }
复制代码
关注下面的标签,发现更多相似文章
评论