前面,不要放在中,防止造成堵塞
盡量減少請求,單個100KB的文件比4個25KB的文件更快,也就是說減少頁面中外鏈的文件會改善性能
盡量使用壓縮過的JS文件,體積更小,加載更快
數(shù)據(jù)存取使用局部變量和字面量比使用數(shù)組和對象有更少的讀寫消耗
盡可能使用局部變量代替全局變量
如無必要,不要使用閉包;閉包引用著其他作用域的變量,會造成更大的內(nèi)存開銷
原型鏈不要過深、對象嵌套不要太多
對于多次訪問的嵌套對象,應(yīng)該用變量緩存起來
DOM編程不要頻繁修改DOM,因為修改DOM樣式會導(dǎo)致重繪(repaint)和重排(reflow)
如果要修改DOM的多個樣式可以用cssText一次性將要改的樣式寫入,或?qū)邮綄懙絚lass里,再修改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
當(dāng)你需要批量修改DOM時,可以通過以下步驟減少重繪和重排次數(shù):
使元素脫離文檔流
對其應(yīng)用多重改變
把元素帶回文檔中
該過程會觸發(fā)兩次重排——第一步和第三步。如果你忽略這兩個步驟,那么在第二步所產(chǎn)生的任何修改都會觸發(fā)一次重排。
有三種方法可以使DOM脫離文檔:
隱藏元素,應(yīng)用修改,重新顯示
使用文檔片斷(document.fragment)在當(dāng)前DOM之外構(gòu)建一個子樹,再把它拷回文檔
將原始元素拷貝到一個脫離文檔的節(jié)點中,修改副本,完成后再替換原始元素
算法和流程控制改善性能最佳的方式是減少每次迭代的運算量和減少循環(huán)迭代次數(shù)
JavaScript四種循環(huán)中for while do-while for-in,只有for-in循環(huán)比其他其中明顯要慢,因為for-in循環(huán)要搜索原型屬性
限制循環(huán)中耗時操作的數(shù)量
基于函數(shù)的迭代forEach比一般的循環(huán)要慢,如果對運行速度要求很嚴(yán)格,不要使用
if-else switch,條件數(shù)量越大,越傾向于使用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"
此代碼運行時,會經(jīng)歷四個步驟:
在內(nèi)存中創(chuàng)建一個臨時字符串
連接后的字符串 onetwo 被賦值給該臨時字符串
臨時字符串與str當(dāng)前的值連接
結(jié)果賦值給str
str += "one" str += "two"
第二種方式比第一種方式要更快,因為它避免了臨時字符串的產(chǎn)生
你也可以用一個語句就能達到同樣的性能提升
str = str + "one" + "two"快速響應(yīng)用戶界面
對于執(zhí)行時間過長的大段代碼,可以使用setTimeout和setInterval來對代碼進行分割,避免對頁面造成堵塞
對于數(shù)據(jù)處理工作可以交由Web Workers來處理,因為Web Workers不占用瀏覽器UI線程的時間
編程實踐使用Object/Array字面量
const obj = new Object() const newObj = {} const arry = new Array() const newArry = []
使用字面量會運行得更快,并且節(jié)省代碼量
位操作在JavaScript中性能非常快,可以使用位運算來代替純數(shù)學(xué)操作
x =* x // 用位運算代替 x <<= 1
如無必要,不要重寫原生方法,因為原生方法底層是用C/C++實現(xiàn)的,速度更快
參考資料高性能JavaScript
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/100916.html
摘要:本文是圖說系列文章的第五篇。這樣的話,使用的開發(fā)者也不需要做任何適配,但是它們卻能獲得更高性能。該圖并不是用來準(zhǔn)確的衡量其性能的。運行編寫出高性能的代碼是可能的。這種清理工作由引擎自動進行,稱為垃圾回收。 本文是圖說 WebAssembly 系列文章的第五篇。如果您還未閱讀之前的文章,建議您從第一篇入手。 在上一篇文章中,我們說到了使用 WebAssembly 和 JavaScript...
摘要:下面我們撇開網(wǎng)絡(luò)方面的優(yōu)化,只分析靜態(tài)資源方面的優(yōu)化。不過,也會阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析,我們可以清楚的認(rèn)識到,非必要優(yōu)先加載的,選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題:白屏?xí)r間過長,用戶體驗差產(chǎn)生的原因:網(wǎng)絡(luò)問題、關(guān)鍵渲染路徑(CRP)問題 怎么做優(yōu)化 如何做好優(yōu)化呢,網(wǎng)上隨便一搜,就有很多優(yōu)化總結(jié),無非就是網(wǎng)絡(luò)優(yōu)化、靜態(tài)資源(h...
摘要:下面我們撇開網(wǎng)絡(luò)方面的優(yōu)化,只分析靜態(tài)資源方面的優(yōu)化。不過,也會阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析,我們可以清楚的認(rèn)識到,非必要優(yōu)先加載的,選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題:白屏?xí)r間過長,用戶體驗差產(chǎn)生的原因:網(wǎng)絡(luò)問題、關(guān)鍵渲染路徑(CRP)問題 怎么做優(yōu)化 如何做好優(yōu)化呢,網(wǎng)上隨便一搜,就有很多優(yōu)化總結(jié),無非就是網(wǎng)絡(luò)優(yōu)化、靜態(tài)資源(h...
摘要:下面我們撇開網(wǎng)絡(luò)方面的優(yōu)化,只分析靜態(tài)資源方面的優(yōu)化。不過,也會阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析,我們可以清楚的認(rèn)識到,非必要優(yōu)先加載的,選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題:白屏?xí)r間過長,用戶體驗差產(chǎn)生的原因:網(wǎng)絡(luò)問題、關(guān)鍵渲染路徑(CRP)問題 怎么做優(yōu)化 如何做好優(yōu)化呢,網(wǎng)上隨便一搜,就有很多優(yōu)化總結(jié),無非就是網(wǎng)絡(luò)優(yōu)化、靜態(tài)資源(h...
摘要:插件性能優(yōu)化及個人常用優(yōu)化方法經(jīng)常會觸發(fā)視覺變化。作用域鏈指的是當(dāng)前作用于下可用變量的集合,它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優(yōu)化時,數(shù)值和變量的性能差不多,并且速度顯著優(yōu)于對象屬性和數(shù)組元素。 JavaScript 插件性能優(yōu)化及個人react常用優(yōu)化方法 JavaScript 經(jīng)常會觸發(fā)視覺變化。有時是直接通過樣式操作,有時是會產(chǎn)生視覺變化...
閱讀 1352·2021-09-24 10:26
閱讀 3664·2021-09-06 15:02
閱讀 616·2019-08-30 14:18
閱讀 581·2019-08-30 12:44
閱讀 3124·2019-08-30 10:48
閱讀 1946·2019-08-29 13:09
閱讀 2001·2019-08-29 11:30
閱讀 2288·2019-08-26 13:36