高效能JavaScript摘要 三

2021-06-20 16:27:20 字數 1174 閱讀 5791

程式設計實踐

避免二次評估

js指令碼允許獲取乙個字串當作指令碼執行,四種方法可以實現。eval(),function()構造器,settimeout()和setinterval()。

var num1 = 5, num2 = 6;

var result = eval('num1 + num2');

console.log(result);

var sum = new function('arg1', 'arg2', 'return arg1 + arg2');

console.log(sum(num1, num2));

settimeout('var sum1=num1+num2;console.log(sum1)', 100);

setinterval('var sum2=num1+num2;console.log(sum2)', 100);

當在js**中出現另一端js**時,會付出二次評估的代價,二次評估是一項昂貴的操作,會花掉相應的更長的時間。應該避免eval(),function()構造器的寫法,settimeout()和setinterval()使用傳入函式的方法。

使用物件/陣列直接量

不使用間接量,直接建立。

不要重複工作

例如在事件判斷時,使用if(dom.addeventlistener)無可厚非,但是瀏覽器不會變化,所以不用每次判斷。

延遲載入

function addhandler(target, eventtype, handler);

}else;

} addhandler(target, eventtype, handler);

}

這個函式第一次呼叫時,檢查呼叫的控制代碼,然後原始函式就會被新的操作函式覆蓋,最後呼叫該函式確保第一次呼叫成功。在以後再呼叫,就不會檢測,因為檢測**已經被覆蓋了。

條件項載入

var addhandler = docuemnt.addeventlistener ?  function(target, eventtype, handler) : function(target, eventtype, handler)

使用速度快的部分

位操作符

原生方法

高效能 JavaScript 讀書筆記(三)

概念 重排 當元素的寬和高發生改變的時候,就會重新排列元素,稱為重拍。重繪 將重排的的元素重新繪製在瀏覽器中,稱為重繪。在元素中新增段落 新增邊框 新增或者刪除元素 修改內外邊距等,一切改變現有元素的位置的操作都會導致重排的發生。相應的,新增背景色這一類沒有改變元素位置的操作則不會導致重排和重繪。最...

高效能JavaScript 迴圈語句和流程控制

前言 迴圈語句 眾所周知,常用的迴圈語句有for while do while以及for in,foreach。除了for in和foreach效能略 低外,平時我們對前三者的選擇更多的是基於需求而非效能考慮,今天我們就對它們各自的效能做個測試,告訴我們最極端的情況下還能做哪些優化。首先我們來談談為...

高效能JavaScript讀後感 一 載入與執行

當你剛開始寫 的時候肯定有人告訴你,js 的引用應該放在最後面,如果沒人告訴你的話,那麼就當我告訴你了,這是最簡單的辦法 html 當然凡事無絕對,放在後面的引用往往是頁面載入不需要的,先讓看你 的人快速看到頁面先,ps.畢竟他們只是看看 當你按著上面的設定會出現第三種情況,就是當你載入js 的時候...