前端性能優化JavaScript篇

testbird 發布于2019-08-23 14:37 / 349人閱讀

摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。

關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascript方面聊一聊。

1.從資源加載方面來說，瀏覽器的加載順序是按源碼從上到下加載解析的，遇到link,script等資源都會阻塞頁面渲染，所以我們會把script放在前面，我們還可以結合構建工具（webpack,gulp...）壓縮js文件，抽離公共js、去掉空格、注釋，盡可能地讓js文件變小，防止腳本阻塞頁面渲染。

2.在寫代碼的時候我們還要注意以下問題。

（1）減少作用域鏈上的查找次數。我們知道，js代碼在執行的時候，如果需要訪問一個變量或者一個函數的時候，它需要從當前執行環境的作用域鏈一級一級地向上查找，直到全局作用域。如果我們需要經常訪問全局環境的變量對象的時候，我們每次都必須在當前作用域鏈上一級一級的遍歷，這顯然是比較耗時的。

function getTitle() {
    var h1 = document.getElementByTagName("h1");
    for(var i = 0, len = h1.length; i < len; i++) {
        h1[i].innerHTML = document.title + " 測試 " + i;
    }
}

上面這樣寫就非常耗時，我們可以優化一下：

function getTitle() {
    var doc = document;
    var h1 = doc.getElementByTagName("h1");
    for(var i = 0, len = h1.length; i < len; i++) {
        h1[i].innerHTML = doc.title + " 測試 " + i;
    }
}

通過創建一個指向document的局部變量，就可以通過限制一次全局查找來改進這個函數的性能。

（2）閉包導致的內存泄露。
閉包可以保證函數內的變量安全，可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中，不會被自動清除。使用場合：設計私有的方法和變量。使用不當就會造成內存占用過高。我們需要手動銷毀內存中的變量。

（3）盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收；

（4）使用classname代替大量的內聯樣式修改。很多時候我們會在用戶操作的時候，頁面元素樣式會進行相應的變化，這時候我們就可以把要變化的樣式寫成一個class,操作class變化，就能實現大量樣式的變化。

（5）批量元素綁定事件，可以使用事件委托。事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。比如我們有100個li，每個li都要綁定click點擊事件，就可以用事件委托。舉一個例子：我們需要給所有的button綁定click事件

我們有可能會這樣寫

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");
            
            Add.onclick = function(){
                alert("添加");
            };
            Remove.onclick = function(){
                alert("刪除");
            };
            Move.onclick = function(){
                alert("移動");
            };
            Select.onclick = function(){
                alert("選擇");
            }
        }

用事件委托就可以這樣寫：

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == "input"){
                    switch(target.id){
                        case "add" :
                            alert("添加");
                            break;
                        case "remove" :
                            alert("刪除");
                            break;
                        case "move" :
                            alert("移動");
                            break;
                        case "select" :
                            alert("選擇");
                            break;
                    }
                }
            }
            
        }

而且使用事件委托，還有一個好處就是，當你添加一個新的button，一樣的會綁定上click事件，這就是委托事件的好處。上面這樣的寫法是原生js的寫法，jquery可以這樣寫：

$("#box").on("click","input",function(event){
             var targetId = $(this).attr("id");
              switch(targetId){
                        case "add" :
                            alert("添加");
                            break;
                        case "remove" :
                            alert("刪除");
                            break;
                        case "move" :
                            alert("移動");
                            break;
                        case "select" :
                            alert("選擇");
                            break;
                    }             
})

這樣寫就簡便得多。

（6）避免不必要的DOM操作，盡量使用 ID 選擇器：ID選擇器是最快的，避免一層層地去查找節點。

（7）類型轉換：把數字轉換成字符串使用number + "" 。
雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說:

("" + ) > String() > .toString() > new String()

（8）對字符串進行循環操作，譬如替換、查找，應使用正則表達式。因為本身JavaScript的循環速度就比較慢，而正則表達式的操作是用C寫成的語言的API，性能很好。

（9）對象查詢使用[""]查詢要比.items()更快。這和前面的減少對象查找的思路是一樣的，調用.items()增加了一次查詢和函數的調用。

（10）浮點數轉換成整型使用Math.floor()或者Math.round()。parseInt()是用于將字符串轉換成數字，Math是內部對象，所以Math.floor()其實并沒有多少查詢方法和調用的時間，速度是最快的。

關于js性能優化來說，涉及到很多方面，特別是現在又出現很多的前端框架，優化方法又各有不同。上面說的這些只是很淺顯的東西，在開發中多注意一下就可以了，盡量精簡自己的代碼。性能優化還需要繼續深入研究。

GPU云服務器云服務器前端性能優化前端開發性能優化性能優化前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100875.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
王下邀月熊_Chevalier的前端每周清單系列文章索引

摘要：感謝王下邀月熊分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列，并以年月為單位進行分類，具體內容看這里前端每周清單年度總結與盤點。感謝王下邀月熊_Chevalier 分享的前端每周清單，為方便大家閱讀，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列，并以年/月為單位進行分類，具...

2501207950 2019-08-22 14:53 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
前端性能優化JavaScript篇

摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascri...

chuyao 2019-08-30 15:55 評論0 收藏0
前端性能優化JavaScript篇

摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascri...

guqiu 2019-08-02 14:03 評論0 收藏0