DOM节点循环和JS原生循环间的性能测试

测试结果是JS原生循环性能稍低一些。

JavaScript

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

// Loop over DOM nodes
function forEach(array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i]); // passes back stuff we need
    }
}

/**
 * Convert NodeList into array that we can more easily loop over with standard forEach
 * @param  {nodeList} nodeList
 * @return {array}
 */
function node2Array(nodeList) {
    return Array.prototype.slice.call(nodeList);
}

// Get initial DOM context
var boxes = document.querySelectorAll('.box');

// Measure performance of native forEach
var t0 = performance.now();
// Convert to usable array from NodeList
var array = node2Array(boxes);
array.forEach(function(value, index) {});
var t1 = performance.now();
document.querySelector('.array').innerHTML = '<strong>Native:</strong> Call to <code>forEach</code> took ' + (t1 - t0) + ' milliseconds.';

// Measure performance of custom forEach
var t2 = performance.now();
forEach(boxes, function(index, value) {});
var t3 = performance.now();
document.querySelector('.forEach').innerHTML = 'Call to custom <code>forEach</code> took ' + (t3 - t2) + ' milliseconds.';

// Show savings
var savings = (t1 - t0 - (t3 - t2)) / (t1 - t0) * -100;
document.querySelector('.result').innerHTML = 'Native is <strong>' + savings + '%</strong> faster.';

编译

CSS

html,
body {
    height: 100%;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
    letter-spacing: 0;
    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    background: -webkit-linear-gradient(0deg, #0a2688, #0072ff);
    background: linear-gradient(90deg, #0a2688, #0072ff);
}
body *,
body *:before,
body *:after {
    box-sizing: inherit;
}
.Container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    paddign: 0 16px;
}
.intro {
    margin-bottom: 48px;
}
.result {
    font-size: 20px;
    margin-top: 48px;
}

HTML

测试结果是JS原生循环性能稍低一些。

JavaScript

编辑器支持Emmet

快捷键

测试结果是JS原生循环性能稍低一些。

JavaScript

原生JavaScript做的线吊球摆动动画

循环生成SVG图形叠加出来的七彩莲花

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：