JavaScript性能优化技巧

作者: 流浪的狮子 | 来源:发表于2018-03-13 10:33 被阅读0次

JavaScript性能优化技巧
iOS开发中常见的性能优化技巧
Python-02进阶-07代码优化技巧
JavaScript 性能优化技巧分享
差距不止一星半点！Github星标85K的性能优化法则圣经
react性能优化
前端性能优化
JavaScript 性能优化
JavaScript是如何工作的：渲染引擎和优化其性能的技巧
Android知识点整理

DOM优化

DOM与JavaScript

浏览器会把dom与js独立实现

像两个独立的小岛
js操作dom

从一个岛到另外一个岛
dom的性能

岛与岛之间的桥，每次通过收取“过桥费”

尽量减少过桥的次数

innerHTML与dom方法对比

window.onload = function() {
 // 1.频繁的js+dom操作
 // 2.先执行完js操作然后一次性添加做dom操作。
    var oDiv = document.getElementById('divTyping');
    var str = "";
    // console.time('hello');
    // for (var i = 0; i < 5000; i++) {
    //     oDiv.innerHTML += 'a';
    // }
    // console.timeEnd('hello'); // 谷歌下测试 时间：166.23779296875ms;

    console.time('hello');
    for (var i = 0; i < 5000; i++) {
     str += 'a';
    }
    oDiv.innerHTML = str;
    console.timeEnd('hello'); // 谷歌下测试 时间：0.22900390625ms;
}

结论：通过以上的测试可以看出2的效率更高。

window.onload = function() {
    // 1.单独的dom操作的性能
    // 2.单独的javascript操作的性能
    var oUl = document.getElementById('ul1');
    var str = "";

    // console.time('hello');
    // for (var i = 0; i < 5000; i++) {
    //     var oLi = document.createElement('li');
    //     oUl.appendChild(oLi);
    // }
    // console.timeEnd('hello'); // 

    console.time('hello');
    for (var i = 0; i < 5000; i++) {
     str += '<li></li>';
    }
    oUl.innerHTML = str;
    console.timeEnd('hello'); 
}

chrome：dom方法要比innerHTML性能要好
其他浏览器：innerHTML要比dom方法性能要好

减少DOM操作

节点克隆

cloneNode

window.onload = function() {
    // cloneNode性能测试
    var oUl = document.getElementById('ul1');
    var str = "";

    // console.time('hello');
    // for (var i = 0; i < 5000; i++) {
    //     var oLi = document.createElement('li');
    //     oLi.innerHTML = 'li';
    //     oUl.appendChild(oLi);
    // }
    // console.timeEnd('hello'); // 测试完成时间：22.596923828125ms;

    console.time('hello');
    var oLi = document.createElement('li');
    oLi.innerHTML = 'li';
    for (var i = 0; i < 5000; i++) {
        var newLi = oLi.cloneNode(true);
        oUl.appendChild(newLi);
    }
    console.timeEnd('hello'); // 测试完成时间：5.889892578125ms;
}

结论：cloneNode性能稍微好一些

访问元素集合

尽量用局部变量

window.onload = function() {
        // 局部变量的性能测试
        var oUl = document.getElementById('ul1');
        var str = "";

        var aLi = oUl.getElementsByTagName('li');
        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oLi.innerHTML = 'li';
            oUl.appendChild(oLi);
        }

        // console.time('hello');
        // for (var i = 0; i < aLi.length; i++) {
        //     aLi[i].innerHTML = 'li';
        // }
        // console.timeEnd('hello'); // 测试完成时间：hello: 882.308837890625ms,第一次结果可能高达2000多ms;

        console.time('hello');
        var len = aLi.length;
        for (var i = 0; i < len; i++) {
            aLi[i].innerHTML = 'li';
        }
        console.timeEnd('hello'); // 测试完成时间：hello: 842.797119140625ms，第一次结果可能高达1800多ms；
    }

结论，两者性能提高不多，但是有优化作用

元素节点

尽量用只获取元素的节点方法

1.尽量使用获取元素的方式，而不是既可以获取元素也可以获取文本节点的方式。
childNodes firstChild --> 元素节点、文本节点
children firstElementChild --> 获取元素节点

选择API

利用querySelector、querySelectorAll

DOM与浏览器

重排：改变页面的内容
重绘：浏览器显示内容

添加顺序
尽量在appendChild前添加操作

window.onload = function() {
        var oUl = document.getElementById('ul1');

        console.time('hello');
        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oUl.appendChild(oLi);
            oLi.innerHTML = 'li';
        }
        console.timeEnd('hello'); // 完成时间：32.947021484375ms

        // console.time('hello');
        // for (var i = 0; i < 5000; i++) {
        //     var oLi = document.createElement('li');
        //     oLi.innerHTML = 'li';
        //     oUl.appendChild(oLi);
        // }
        // console.timeEnd('hello'); // 完成时间：27.43798828125ms
    }

合并dom操作

利用cssTest

window.onload = function() {
        // 局部变量的性能测试
        var oUl = document.getElementById('ul1');

        // console.time('hello');
        // for (var i = 0; i < 5000; i++) {
        //     var oLi = document.createElement('li');
        //     oLi.style.width = '100px';
        //     oLi.style.height = '100px';
        //     oLi.style.backgroundColor = 'red';
        //     oUl.appendChild(oLi);
        // }
        // console.timeEnd('hello'); // 完成时间：17.507080078125ms

        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oLi.style.cssText = 'width:100px;height: 100px;background-color:red;';
            oUl.appendChild(oLi);
        }
        console.timeEnd('hello'); //
    }
    
结论：性能上有优化，但是和测试结果有待考据

缓存布局信息

window.onload = function() {
        var oDiv = document.getElementById('box');

        // setInterval(function() {
        //     oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
        //     oDiv.style.top = oDiv.offsetTop + 1 + 'px';
        // }, 30);

        var L = oDiv.offsetLeft;
        var T = oDiv.offsetTop;
        setInterval(function() {
            L++;
            T++;
            oDiv.style.left = L + 'px';s
            oDiv.style.top =  T + 'px';
        }, 30); // 性能上有提升
    }

文件碎片

createDocumentFragment()

window.onload = function() {
        var oUl = document.getElementById('ul1');

        // console.time('hello');
        // fsubor (var i = 0; i < 5000; i++) {
        //     var oLi = document.createElement('li');
        //     oUl.appendChild(oLi);
        // }
        // console.timeEnd('hello'); // 完成时间：6.130126953125ms

        var oFrag = document.createDocumentFragment();
        console.time('hello');
        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oFrag.appendChild(oLi);
        }
        oUl.appendChild(oFrag);
        console.timeEnd('hello'); // 完成时间：5.923828125ms
    }

DOM与事件（事件委托）

DOM与前端模板（能更好的对逻辑和试图分离，MVC架构的基础）