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提取出现最多的颜色