2020-5-6 前端達(dá)人
1. 加載和執(zhí)行
盡量將所有的<script>標(biāo)簽放在</body>標(biāo)簽之前，確保腳本執(zhí)行前頁(yè)面已經(jīng)完成了渲染，避免腳本的下載阻塞其他資源（例如圖片）的下載。
合并腳本，減少頁(yè)面中的<script>標(biāo)簽
使用<script>標(biāo)簽的defer和async屬性（兩者的區(qū)別見(jiàn)這里）
通過(guò)Javascript動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽插入文檔來(lái)下載，其不會(huì)影響頁(yè)面其他進(jìn)程
2.數(shù)據(jù)存取
由于作用域鏈的機(jī)制，訪問(wèn)局部變量比訪問(wèn)跨作用域變量更快，因此在函數(shù)中若要多次訪問(wèn)跨作用域變量，則可以用局部變量保存。
避免使用with語(yǔ)句，其會(huì)延長(zhǎng)作用域鏈
嵌套的對(duì)象成員會(huì)導(dǎo)致引擎搜索所有對(duì)象成員，避免使用嵌套，例如window.location.href
對(duì)象的屬性和方法在原型鏈的位置越深，訪問(wèn)的速度也越慢
3.Dom編程
進(jìn)行大段HTML更新時(shí)，推薦使用innerHTML，而不是DOM方法
HTML集合是一個(gè)與文檔中元素綁定的類數(shù)組對(duì)象，其長(zhǎng)度隨著文檔中元素的增減而動(dòng)態(tài)變化，因此避免在每次循環(huán)中直接讀取HTML集合的length，容易導(dǎo)致死循環(huán)
使用節(jié)點(diǎn)的children屬性，而不是childNodes屬性，前者訪問(wèn)速度更快，且不包含空白文本和注釋節(jié)點(diǎn)。
瀏覽器的渲染過(guò)程包括構(gòu)建DOM樹(shù)和渲染樹(shù)，當(dāng)DOM元素的幾何屬性變化時(shí)，需要重新構(gòu)造渲染樹(shù)，這一過(guò)程稱為“重排”，完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，這一過(guò)程稱為“重繪”。因此應(yīng)該盡量合并多次對(duì)DOM的修改，或者先將元素脫離文檔流（display：none、文檔片段），應(yīng)用修改后，再插入文檔中。
每次瀏覽器的重排時(shí)都會(huì)產(chǎn)生消耗，大多數(shù)瀏覽器會(huì)通過(guò)隊(duì)列化修改并批量執(zhí)行來(lái)優(yōu)化重排過(guò)程，可當(dāng)訪問(wèn)元素offsetTop、scrollTop、clientTop、getComputedStyle等一系列布局屬性時(shí)，會(huì)強(qiáng)制瀏覽器立即進(jìn)行重排返回正確的值。因此不要在dom布局信息改變時(shí)，訪問(wèn)這些布局屬性。
當(dāng)修改同個(gè)元素多個(gè)Css屬性時(shí)，可以使用CssText屬性進(jìn)行一次性修改樣式，減少瀏覽器重排和重繪的次數(shù)
當(dāng)元素發(fā)生動(dòng)畫(huà)時(shí)，可以使用絕對(duì)定位使其脫離文檔流，動(dòng)畫(huà)結(jié)束后，再恢復(fù)定位。避免動(dòng)畫(huà)過(guò)程中瀏覽器反復(fù)重排文檔流中的元素。
多使用事件委托，減少監(jiān)聽(tīng)事件
4.算法和流程控制
for循環(huán)和while循環(huán)性能差不多，除了for-in循環(huán)最慢（其要遍歷原型鏈）
循環(huán)中要減少對(duì)象成員及數(shù)組項(xiàng)的查詢次數(shù)，可以通過(guò)倒序循環(huán)提高性能
循環(huán)次數(shù)大于1000時(shí)，可運(yùn)用Duff Devices減少迭代次數(shù)
switch比if-else快，但如果具有很多離散值時(shí)，可使用數(shù)組或?qū)ο髞?lái)構(gòu)建查找表
遞歸可能會(huì)造成調(diào)用棧溢出，可將其改為循環(huán)迭代
如果可以，對(duì)一些函數(shù)的計(jì)算結(jié)果進(jìn)行緩存
5.字符串和正則表達(dá)式
進(jìn)行大量字符串的連接時(shí)，+和+=效率比數(shù)組的join方法要高
當(dāng)創(chuàng)建了一個(gè)正則表達(dá)式對(duì)象時(shí)，瀏覽器會(huì)驗(yàn)證你的表達(dá)式，然后將其轉(zhuǎn)化為一個(gè)原生代碼程序，用戶執(zhí)行匹配工作。當(dāng)你將其賦值給變量時(shí)，可以避免重復(fù)執(zhí)行該步驟。
當(dāng)正則進(jìn)入使用狀態(tài)時(shí)，首先要確定目標(biāo)字符串的起始搜索位置（字符串的起始位置或正則表達(dá)式的lastIndex屬性），之后正則表達(dá)式會(huì)逐個(gè)檢查文本和正則模式，當(dāng)一個(gè)特定的字元匹配失敗時(shí)，正則表達(dá)式會(huì)試著回溯到之前嘗試匹配的位置，然后嘗試其他路徑。如果正則表達(dá)式所有的可能路徑都沒(méi)有匹配到，其會(huì)將起始搜索位置下移一位，重新開(kāi)始檢查。如果字符串的每個(gè)字符都經(jīng)歷過(guò)檢查，沒(méi)有匹配成功，則宣布徹底失敗。
當(dāng)正則表達(dá)式不那么具體時(shí)，例如.和[\s\S]等，很可能會(huì)出現(xiàn)回溯失控的情況，在js中可以應(yīng)用預(yù)查模擬原子組(?=(pattern))\1來(lái)避免不必要的回溯。除此之外，嵌套的量詞，例如/(A+A+)+B/在匹配"AAAAAAAA"時(shí)可能會(huì)造成驚人的回溯，應(yīng)盡量避免使用嵌套的量詞或使用預(yù)查模擬原子組消除回溯問(wèn)題。
將復(fù)雜的正則表達(dá)式拆分為多個(gè)簡(jiǎn)單的片段、正則以簡(jiǎn)單、必需的字元開(kāi)始、減少分支數(shù)量|，有助于提高匹配的效率。
setTimeout(function(){
process(todo.shift());
if (todo.length > 0) {
setTimeout(arguments.callee, 25);
} else {
callback();
}
})
setTimeout(function(){
let start = +new Date();
do {
process(todo.shift());
} while(todo.length > 0 && (+new Date() - start) < 50)
if (todo.length > 0) {
setTimeout(arguments.callee, 25);
} else {
callback();
}
})
WebWork進(jìn)行計(jì)算
Expires： Mon，28 Jul 2018 23:30:30 GMT
eval、Function進(jìn)行雙重求值
Object/Array字面量定義，不要使用構(gòu)造函數(shù)
if (i & 1) {
className = 'odd';
} else {
className = 'even';
}
Math對(duì)象等
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com