JavaScript中循环语句的性能测试

For, while, do-while benchmark

js, test

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1749
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

func = {
    fo: function() {
        "use strict";
        var start = det.time(), //start time
            end,
            res,
            i = 0;
        //>>>>>>>>>>>>>>>>>>>
        for (i; i < it; i++) {
            //nothing;
        }
        //>>>>>>>>>>>>>>>>>>>
        e_1 = 1; //finish
        end = det.time(); //end time
        res = end - start; //duration
        result.push("<div class='c e'>for: <u>" + res + " ms</u></div>");
        func.wh(); //run next method
    },
    wh: function() {
        "use strict";
        var start = det.time(),
            end,
            res,
            i = 0;
        //>>>>>>>>>>>>>>>>>>>
        while (i < it) {
            i++;
        }
        //>>>>>>>>>>>>>>>>>>>
        e_2 = 1; //finish
        end = det.time(); //end time
        res = end - start; //duration
        result.push("<div class='c'>while: <u>" + res + " ms</u></div>");
        func.dw(); //run next method    
    },
    dw: function() {
        "use strict";
        var start = det.time(), //start time
            end,
            res,
            i = 0;
        //>>>>>>>>>>>>>>>>>>>
        do {
            i++;
        }
        while (i < it);
        //>>>>>>>>>>>>>>>>>>>
        e_3 = 1; //finish
        end = det.time(); //end time
        res = end - start; //duration
        result.push("<div class='c d'>do while: <u>" + res + " ms</u></div>");
    },
    //sort string based on number
    sorter: function(ar) {
        function stro(e, f) { //ascending
            return e.match(/\d+/g) - f.match(/\d+/g);
        }
        ar.sort(stro);
        ar[0] = "<div class='mark'>" + ar[0] + "</div>";
        return ar;
    },
    //**********
    check: function(a, timer) {
        var bl,
            ble;
        if (!!e_1 && !!e_2 && !!e_3) {
            //result is ready
            s_w.value = "complete!";
            //result display
            result = func.sorter(result);
            wone.innerHTML += "<div class='block'>" +
                "<a class='amark' name='" + counter + "'" +
                "href='#" + counter + "'>#" + counter + ": " + it +
                " loops test</a><div class='dot'></div>" +
                result.join("") + "</div>";
            bl = func.cl(".block");
            ble = bl.length;
            if (ble > 1) {
                bl[ble - 2].className = "block prev";
            }
            wone.scrollTop += wone.offsetHeight * ble;
            //reset variables
            a.disabled = 0;
            ctn.disabled = 0;
            inp.disabled = 0;
            a.innerHTML = "RUN";
            e_1 = 0;
            e_2 = 0;
            e_3 = 0;
            init = 0;
            result = [];
            //clear check function trigger
            clearInterval(timer);
        }
    },
    //>>>>>>>>>>>>>>>1st RUN
    run: function(a) {
        var timer,
            stopwatch;
        if (func.id("thing")) {
            wone.removeChild(func.id("thing"));
        }
        counter++;
        a.disabled = 1;
        ctn.disabled = 1;
        inp.disabled = 1;
        s_w.value = "";
        if (a.disabled && ctn.disabled && inp.disabled) {
            setTimeout(function() {
                func.fo();
            }, 100);
        }

编译

CSS

body {
    background: lightyellow;
}
.mono {
    font-size: 18px;
    padding: 10px;
    color: darkgreen;
    text-align: center;
    box-sizing: border-box;
}
.looloo,
.mono,
.amark {
    font-family: consolas, monaco, menlo, courier, monospace;
}
.wrap {
    margin-top: 10px;
    padding: 0;
    text-align: center;
}
.dark {
    color: #000;
    border-radius: 4px;
    letter-spacing: 5px;
    transform: rotate(-12deg);
    margin-left: 8px;
}
.dark:disabled {
    color: #aaa;
}
.d,
.thing {
    color: steelblue;
}
.e {
    color: darkred;
}
.c,
.looloo {
    text-align: center;
}
.jumbo,
.mini {
    font-size: 24px;
    border-radius: 4px;
    width: 250px;
    transform: rotate(3deg);
}
.mini {
    transform: none;
    font-size: 14px;
    color: white;
    border-radius: 4px;
    background: #333;
    border: 0;
    width: 300px;
    margin-top: 0;
}
.dot {
    margin: 5px auto;
    height: 0;
    border-bottom: 1px dashed #777;
    width: 200px;
}
.block {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 1px 1px 2px #333 inset;
    display: inline-block;
    margin: 5px;
}
.tr {
    transform: rotate(-25deg);
}
#result {
    max-height: 155px;
    overflow-y: auto;
    margin: 10px 0 30px 0;
}
.amark {
    color: seagreen !important;
    text-decoration: none;
}
.amark:hover,
.amark:focus {
    color: deepskyblue !important;
}
.mark {
    background: lightgreen;
}
.prev {
    background: khaki;
}

HTML

For, while, do-while benchmark

js, test

编辑器支持Emmet

快捷键

For, while, do-while benchmark

js, test

JavaScript 一个在最小值和最大值的范围中取任意3个值的有趣动画

简单Verlet算法JavaScript物理引擎

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：