高性能JavaScript筆記三（編程實踐）

時間 2019-12-09

標籤高性能 javascript 筆記編程實踐欄目 JavaScript 简体版

原文原文鏈接

避免雙重求值

有四個標準函數能夠容許你傳入代碼的字符串，而後它才你動態執行。它們分別是：eval、Function、setTimeout、setIntervaljavascript

事實上當你在javascript代碼中執行另一段javascript代碼時，都會致使雙重求值的性能消耗，因此在大多數狀況下，不必使得eval和Function函數，所以最好避免使用它們。至於setTimeout和setInterval，建議傳入函數而不是字符串來做爲第一個參數java

如今Safari4和chrome的javaScript引擎會緩存住那些使用了eval且重複運行的代碼，這也是一個性能提高點。chrome

使用Object/Array直接量

使用直接量的兩大好處數組

運行速度更快
節省代碼量、減小文件尺寸(事實上對象屬性或者數組項數量越多，使用直接量的好處就越明顯)

不要重複工做

有兩種方法避免重複工做瀏覽器

延遲加載
條件預加載

以一個例子來講明吧緩存

        function addHandler(target,eventType,handler) {
            if (target.addEventListener) {//DOM2 Events
                target.addEventListener(eventType, handler, false);
            } else {//IE
                target.attachEvent('on' + eventType, handler);
            }
        }
        function removeHandler(target, eventType, handler) {
            if (target.removeEventListener) {//DOM2 Events
                target.removeEventListener(eventType, handler, false);
            } else {//IE
                target.detachEvent('on' + eventType, handler);
            }
        }

事實上頁面一加載，你就知道用戶是使用的哪一種瀏覽器，可是這時候若是頁面上有100個元素須要添加事件綁定就須要判斷100次（而自己事實上你只須要去判斷一次）函數

下面使用延遲加載的方式來試試性能

        function addHandler(target, eventType, handler) {
            if (target.addEventListener) {//DOM2 Events
                addHandler = function (target, eventType, handler) {
                    target.addEventListener(eventType, handler, false);
                }
            } else {//IE
                addHandler = function (target, eventType, handler) {
                    target.attachEvent('on' + eventType, handler);
                }
            }
            addHandler(target, eventType, handler);//調用新的函數
        }
        function removeHandler(target, eventType, handler) {
            if (target.removeEventListener) {//DOM2 Events
                removeHandler = function (target, eventType, handler) {
                    target.removeEventListener(eventType, handler, false);
                }
            } else {//IE
                removeHandler = function (target, eventType, handler) {
                    target.detachEvent('on' + eventType, handler);
                }
            }
            removeHandler(target, eventType, handler);//調用新的函數
        }

調用延遲加載函數時，第一次會相對慢些，後面每次調用時都會很快，因此當一個函數在頁面中不會當即調用時，延遲加載是最好的選擇優化

另一種方式是使用條件預加載：會在腳本加載期間提單檢測，而不會等到函數被調用spa

        var addHandler = document.body.addEventListener ?
            function (target, eventType, handler) {
                target.addEventListener(eventType, handler, false);
            } :
            function (target, eventType, handler) {
                target.attachEvent('on' + eventType, handler);
            };


        var removeHandler = document.body.removeEventListener ?
            function (target, eventType, handler) {
                target.removeEventListener(eventType, handler, false);
            } :
            function (target, eventType, handler) {
                target.detachEvent('on' + eventType, handler);
            };

位操做

javascript中的數字都是以64位格式進行存儲的，在位操做中，數字被轉換爲有符號32位格式，每次運算都是直接操做該32位數獲得結果，事實上javascript位操做比其它數學運算和布爾運算操做都要快

舉例來講明一下

一、對2取模，通常性的你們會以下這樣寫

        if (i % 2) {
            //是奇數
        } else {
            //是偶數
        }

但下面這樣寫會更快些

        if (i & 1) {
            //是偶數
        } else {
            //是奇數
        }

二、位掩碼（也就是使用單個數字的每一位來斷定是否選項成立，從而有效的把數字轉換爲由布爾值標記組成的數組）示例代碼以下所示

        var OPTION_A = 1;
        var OPTION_B=2;
        var OPTION_C = 3;
        var OPTION_D = 4;
        var options = OPTION_A | OPTION_B | OPTION_C | OPTION_D;
        if (options&OPTION_A) {
            //選項a在列表中，進行處理processing
        }
        if (options & OPTION_B) {
            //選項b在列表中，進行處理processing
        }