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