前端js性能测试工具(JSLitmus)的使用

一、js下载地址

二、页面中引入js

<script src="./JSLitmus.js"></script>

三、测试数据

<div id="domTestWrap">
    <div class="dom-test-content">
        <span class="dom-test-text"></span>
    </div>
    <div class="dom-test-content">
        <span class="dom-test-text"></span>
    </div>
    <div class="dom-test-content">
        <span class="dom-test-text"></span>
    </div>
</div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

四、测试脚本

function domTestDepthOne() {
    document.getElementById('domTestWrap')
}

function domTestDepthOneQS() {
    document.querySelector('#domTestWrap')
}

function domTestDepthTwo() {
    document.getElementById('domTestWrap').getElementsByClassName('dom-test-content')
}

function domTestDepthTwoQSA() {
    document.querySelectorAll('#domTestWrap .dom-test-content')
}

function domTestDepthThree() {
    var domTestTextList = document.getElementById('domTestWrap').getElementsByClassName('dom-test-content')
    for (var i = 0; i < domTestTextList.length; i++) {
        domTestTextList[i].innerHTML
    }
}

function domTestDepthThreeQSA() {
    var domTestTextList = document.querySelectorAll('#domTestWrap .dom-test-content')
    for (var i = 0; i < domTestTextList.length; i++) {
        domTestTextList[i].innerHTML
    }
}
JSLitmus.test('dom test depth one', domTestDepthOne)
JSLitmus.test('dom test depth one query selecter', domTestDepthOneQS)
JSLitmus.test('dom test depth two', domTestDepthTwo)
JSLitmus.test('dom test depth two query selecter all', domTestDepthTwoQSA)
JSLitmus.test('dom test depth three query', domTestDepthThree)
JSLitmus.test('dom test depth three query selecter all', domTestDepthThreeQSA)

var allLi = document.querySelectorAll("li");

function foo1() {
    for (var i = 0, len = allLi.length; i < len; i++) {

    };

}

function foo2() {
    for (var i = 0; i < allLi.length; i++) {

    };
}

JSLitmus.test('foo1', foo1);
JSLitmus.test('foo2', foo2);

五、运行效果图

红框内数值越大就表示性能越好