DOM缓存记忆(memoization)性能分析

标签：doc   分析   本机   tag   class   time   date()   span   return   

function getElements(name){
    if(!this.cache){
        this.cache = {}; //初始化缓存
    }
    return this.cache[name] = this.cache[name] || document.getElementsByTagName(name); //存取&返回，存取只在缓存中查询不到时发生
}
var start = new Date().getTime();

for(var i=0; i<100000; i++){
    getElements("div");
    // document.getElementsByTagName("div");
}

var elapsed = new Date().getTime() - start;
console.log(‘elapsed time:‘ + elapsed)

在本机chrome61上,进行100000次执行测试

不使用缓存（使用for循环中注释中代码）时执行时间如下(ms):

66 56 46 50 56　　avg = 54.8

使用缓存时,执行时间如下(ms):

13 13 11 16 11　　avg = 12.8

而进行10000次执行测试时

使用缓存时,执行时间如下(ms):

7 7 7 7 6　　         avg  = 6.8

不使用缓存时,执行时间如下(ms):

8 7 7 10 10            avg = 8.4

从上面的测试结果可以看出，在数量级较低情形下，使用缓存对DOM查询的性能提升并不明显。而随着量级增长，性能提升更趋明显。当数量级接近10^5时，性能有近5倍的提升。

DOM缓存记忆(memoization)性能分析

标签：doc   分析   本机   tag   class   time   date()   span   return   

原文地址：http://www.cnblogs.com/heinz-lxy/p/7745694.html