duff装置对循环性能的提升

最近闲时,在阅读javascript红宝书,书买了n年之久,近期才静下心来去阅读,惭愧惭愧啊。今天在第24章:最佳实践这一章节了解到一种叫做Duff装置的技术,可以在大数据循环上提升性能。刚好想到最近在研究通过canvas提取出现最多的色彩,在色彩遍历上刚好能用到此技术,写一些demo测试一下实际性能如何。


Duff装置的基本概念时通过计算迭代的次数是否为8的倍数将一个循环展开为一些列语句。相关代码如下:


function process(n){ console.log(n)};
var data = [1,2,3,4,5,6,7,...];//so many
var iterations = Math.ceil(data.length / 32);
var startAt = (data.length / 4) % 8;
var i = 0; 
do {
   switch(startAt) {
       case 0 : process(i++);
       case 7 : process(i++);
       case 6 : process(i++);
       case 5 : process(i++);
       case 4 : process(i++);
       case 3 : process(i++);
       case 2 : process(i++);
       case 1 : process(i++);
   }
   startAt = 0;
}while(--iterations > 0);


改进型duff装置,将do-while循环分成两次单独的循环


function process(n){ console.log(n)};
var data = [1,2,3,4,5,6,7,...];//so many
var iterations = Math.ceil(data.length / 32);
var leftover = (data.length / 4) % 8;
var i = 0; 
if(leftover > 0) {
    do {
        process(i++);
    }while(--leftover > 0);
}    
do {
    process(i++);
    process(i++);
    process(i++);
    process(i++);
    process(i++);
    process(i++);
    process(i++);
    process(i++);
}while(--iterations > 0);


分别执行10次,遍历769761个像素点,得到如下结果

//for循环耗时
850.90283203125ms,
855.31982421875ms,
847.73291015625ms,
829.4521484375ms,
883.81201171875ms,
815.18505859375ms,
803.576904296875ms,
851.531982421875ms,
867.0869140625ms,
821.191162109375ms

//duff装置耗时
893.177978515625ms,
826.746826171875ms,
1548.406982421875ms,
862.466064453125ms,
824.980224609375ms,
1117.969970703125ms,
847.60302734375ms,
827.218994140625ms,
859.155029296875ms,
825.756103515625ms

//改进duff装置耗时
849.19189453125ms,
821.217041015625ms,
831.047119140625ms,
833.35107421875ms,
838.06005859375ms,
820.98291015625ms,
836.012939453125ms,
817.99609375ms,
907.16796875ms,
832.796142578125ms


测试chrome版本:Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1


对比如上结果,不知是我样本太少还是其他原因,发现duff装置在性能提升上改进性能不是很明显,而且duff装置代码阅读性不如普通for 循环,数据量小,根本没有必要使用duff装置。在duff装置的使用场景上,自己阅历不足,无法给出准确建议。


基于此,应该认识到书中的东西有时候也并非完全的准确,还是需要靠实践来检验。实践才是检验真理的唯一标准。


相关代码:github


参考:红宝书第24章 | 利用canvas提取出现最多的颜色

确认 取消