前面,不要放在中,防止造成堵塞
盡量減少請求,單個100KB的文件比4個25KB的文件更快,也就是說減少頁面中外鏈的文件會改善性能
盡量使用壓縮過的JS文件,體積更小,加載更快
數據存取使用局部變量和字面量比使用數組和對象有更少的讀寫消耗
盡可能使用局部變量代替全局變量
如無必要,不要使用閉包;閉包引用著其他作用域的變量,會造成更大的內存開銷
原型鏈不要過深、對象嵌套不要太多
對于多次訪問的嵌套對象,應該用變量緩存起來
DOM編程不要頻繁修改DOM,因為修改DOM樣式會導致重繪(repaint)和重排(reflow)
如果要修改DOM的多個樣式可以用cssText一次性將要改的樣式寫入,或將樣式寫到class里,再修改DOM的class名稱
const el = document.querySelector(".myDiv") el.style.borderLeft = "1px" el.style.borderRight = "2px" el.style.padding = "5px"
可以使用如下語句代替
const el = document.querySelector(".myDiv") el.style.cssText = "border-left: 1px; border-right: 2px; padding: 5px;"
cssText會覆蓋已存在的樣式,如果不想覆蓋已有樣式,可以這樣
el.style.cssText += ";border-left: 1px; border-right: 2px; padding: 5px;"
避免大量使用:hover
使用事件委托
// good document.querySelector("ul").onclick = (event) => { let target = event.target if (target.nodeName === "LI") { console.log(target.innerHTML) } } // bad document.querySelectorAll("li").forEach((e) => { e.onclick = function() { console.log(this.innerHTML) } }) 批量修改DOM
當你需要批量修改DOM時,可以通過以下步驟減少重繪和重排次數:
使元素脫離文檔流
對其應用多重改變
把元素帶回文檔中
該過程會觸發兩次重排——第一步和第三步。如果你忽略這兩個步驟,那么在第二步所產生的任何修改都會觸發一次重排。
有三種方法可以使DOM脫離文檔:
隱藏元素,應用修改,重新顯示
使用文檔片斷(document.fragment)在當前DOM之外構建一個子樹,再把它拷回文檔
將原始元素拷貝到一個脫離文檔的節點中,修改副本,完成后再替換原始元素
算法和流程控制改善性能最佳的方式是減少每次迭代的運算量和減少循環迭代次數
JavaScript四種循環中for while do-while for-in,只有for-in循環比其他其中明顯要慢,因為for-in循環要搜索原型屬性
限制循環中耗時操作的數量
基于函數的迭代forEach比一般的循環要慢,如果對運行速度要求很嚴格,不要使用
if-else switch,條件數量越大,越傾向于使用switch
在判斷條件多時,可以使用查找表來代替if-else switch,速度更快
switch(value) { case 0: return result0 break case 1: return result1 break case 2: return result2 break case 3: return result3 break } // 可以使用查找表代替 const results = [result0, result1, result2, result3]
如果遇到棧溢出錯誤,可以使用迭代來代替遞歸
字符串str += "one" + "two"
此代碼運行時,會經歷四個步驟:
在內存中創建一個臨時字符串
連接后的字符串 onetwo 被賦值給該臨時字符串
臨時字符串與str當前的值連接
結果賦值給str
str += "one" str += "two"
第二種方式比第一種方式要更快,因為它避免了臨時字符串的產生
你也可以用一個語句就能達到同樣的性能提升
str = str + "one" + "two"快速響應用戶界面
對于執行時間過長的大段代碼,可以使用setTimeout和setInterval來對代碼進行分割,避免對頁面造成堵塞
對于數據處理工作可以交由Web Workers來處理,因為Web Workers不占用瀏覽器UI線程的時間
編程實踐使用Object/Array字面量
const obj = new Object() const newObj = {} const arry = new Array() const newArry = []
使用字面量會運行得更快,并且節省代碼量
位操作在JavaScript中性能非常快,可以使用位運算來代替純數學操作
x =* x // 用位運算代替 x <<= 1
如無必要,不要重寫原生方法,因為原生方法底層是用C/C++實現的,速度更快
參考資料高性能JavaScript
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/100916.html
摘要:本文是圖說系列文章的第五篇。這樣的話,使用的開發者也不需要做任何適配,但是它們卻能獲得更高性能。該圖并不是用來準確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行,稱為垃圾回收。 本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章,建議您從第一篇入手。 在上一篇文章中,我們說到了使用 WebAssembly 和 JavaScript...
摘要:下面我們撇開網絡方面的優化,只分析靜態資源方面的優化。不過,也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析,我們可以清楚的認識到,非必要優先加載的,選擇異步加載是最優選擇。 為什么做優化 經典問題:白屏時間過長,用戶體驗差產生的原因:網絡問題、關鍵渲染路徑(CRP)問題 怎么做優化 如何做好優化呢,網上隨便一搜,就有很多優化總結,無非就是網絡優化、靜態資源(h...
摘要:下面我們撇開網絡方面的優化,只分析靜態資源方面的優化。不過,也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析,我們可以清楚的認識到,非必要優先加載的,選擇異步加載是最優選擇。 為什么做優化 經典問題:白屏時間過長,用戶體驗差產生的原因:網絡問題、關鍵渲染路徑(CRP)問題 怎么做優化 如何做好優化呢,網上隨便一搜,就有很多優化總結,無非就是網絡優化、靜態資源(h...
摘要:下面我們撇開網絡方面的優化,只分析靜態資源方面的優化。不過,也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析,我們可以清楚的認識到,非必要優先加載的,選擇異步加載是最優選擇。 為什么做優化 經典問題:白屏時間過長,用戶體驗差產生的原因:網絡問題、關鍵渲染路徑(CRP)問題 怎么做優化 如何做好優化呢,網上隨便一搜,就有很多優化總結,無非就是網絡優化、靜態資源(h...
摘要:插件性能優化及個人常用優化方法經常會觸發視覺變化。作用域鏈指的是當前作用于下可用變量的集合,它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優化時,數值和變量的性能差不多,并且速度顯著優于對象屬性和數組元素。 JavaScript 插件性能優化及個人react常用優化方法 JavaScript 經常會觸發視覺變化。有時是直接通過樣式操作,有時是會產生視覺變化...
閱讀 1358·2021-09-24 10:26
閱讀 3671·2021-09-06 15:02
閱讀 626·2019-08-30 14:18
閱讀 584·2019-08-30 12:44
閱讀 3125·2019-08-30 10:48
閱讀 1949·2019-08-29 13:09
閱讀 2002·2019-08-29 11:30
閱讀 2288·2019-08-26 13:36