前端性能優(yōu)化的目的:
- 從用戶(hù)角度而言:優(yōu)化能夠讓頁(yè)面加載得更快、對(duì)用戶(hù)的操作響應(yīng)的更及時(shí)，能夠給用戶(hù)提供更為良好的體驗(yàn)。
- 從服務(wù)商角度而言:優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù)、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀(guān)的資源。
一、圖片優(yōu)化
- 小圖使用雪碧圖，iconFont
這是減少圖像請(qǐng)求的有效方法，把所有的背景圖像都放到一個(gè)圖片文件中，然后通過(guò)CSS的background-image和background-position屬性來(lái)顯示圖片的不同部分；合并后的圖片會(huì)比分離的圖片總和要小，這是因?yàn)樗档土藞D片自身的開(kāi)銷(xiāo)。 - 圖片使用懶加載（只加載屏幕可視區(qū)域內(nèi)的內(nèi)容）
- webp代替其他格式
- 圖片一定要壓縮
- 可以使用的img的srcset，根據(jù)不同分辨率顯示不同尺寸圖片，這樣既保證顯示效果，又能節(jié)省帶寬，提高加載速度
二、封裝函數(shù)
把重復(fù)使用的代碼塊，封裝成函數(shù)，使加載速度更快
三、 css優(yōu)化
- css寫(xiě)在頭部
- 避免css表達(dá)式（Expressions）
- 移除空置的css規(guī)則
- 避免行內(nèi)style樣式
四、首屏優(yōu)化
原則：顯示快，滾動(dòng)流暢，懶加載，懶執(zhí)行，漸進(jìn)展現(xiàn)
- 代碼分離，將首屏不需要的代碼分離出去
- 服務(wù)端渲染或預(yù)渲染，加載完html直接渲染，減少白屏?xí)r間
- DNS prefetch，使用dns-prefetch減少dns查詢(xún)時(shí)間，PC端域名發(fā)散，移動(dòng)端域名收斂
- 減少關(guān)鍵路徑css，可以將關(guān)鍵的css內(nèi)聯(lián)，這樣可以減少加載和渲染時(shí)間
五、合并文件
將腳本文件和樣式表文件分別合并到一個(gè)文件中，可以減少HTTP請(qǐng)求的數(shù)量并縮短最終用戶(hù)響應(yīng)時(shí)間。當(dāng)腳本或者樣式表在不同頁(yè)面中使用時(shí)需要做不同的修改，這可能會(huì)相對(duì)麻煩點(diǎn)，但即便如此也要把這個(gè)方法作為改善頁(yè)面性能的重要一步。
六、把JavaScript和CSS都放到外部文件中
七、壓縮 JavaScript 和 CSS
壓縮是指從去除代碼不必要的字符減少文件大小從而節(jié)省下載時(shí)間。
方法：
1.去除不必要的空白符（空格、換行、tab縮進(jìn)）、格式符、注釋符
2.簡(jiǎn)寫(xiě)方法名、參數(shù)名來(lái)壓縮js腳本
在 JavaScript中，由于需要下載的文件體積變小了從而節(jié)省了響應(yīng)時(shí)間。
八、避免重定向
301(永久重定向)和302(臨時(shí)重定向),這兩個(gè)重定向用的比較多。
但是要記住重定向會(huì)降低用戶(hù)體驗(yàn)。在用戶(hù)和HTML文檔中間增加一個(gè)跳轉(zhuǎn)，會(huì)拖延頁(yè)面中所有元素的顯示，因?yàn)樵贖TML文件被加載前任何文件（圖像、Flash等）都不會(huì)被下載。
九、DOM優(yōu)化
1、緩存DOM
const div = document.getElementById('div')
由于查詢(xún)DOM比較耗時(shí)，在同一個(gè)節(jié)點(diǎn)無(wú)需多次查詢(xún)的情況下，可以緩存DOM
2、減少DOM深度及DOM數(shù)量
HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析DOM并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和層級(jí)較少。
3、批量操作DOM
由于DOM操作比較耗時(shí)，且可能會(huì)造成回流，因此要避免頻繁操作DOM，可以批量操作DOM，先用字符串拼接完畢，再用innerHTML更新DOM
4、批量操作CSS樣式
通過(guò)切換class或者使用元素的style.csstext屬性去批量操作元素樣式
5、在內(nèi)存中操作DOM
使用DocumentFragment對(duì)象，讓DOM操作發(fā)生在內(nèi)存中，而不是頁(yè)面上
6、DOM元素離線(xiàn)更新
對(duì)DOM進(jìn)行相關(guān)操作時(shí)，例、appendChild等都可以使用Document Fragment對(duì)象進(jìn)行離線(xiàn)操作，帶元素“組裝”完成后再一次插入頁(yè)面，或者使用display:none 對(duì)元素隱藏，在元素“消失”后進(jìn)行相關(guān)操作
7、DOM讀寫(xiě)分離
瀏覽器具有惰性渲染機(jī)制，連接多次修改DOM可能只觸發(fā)瀏覽器的一次渲染。而如果修改DOM后，立即讀取DOM。為了保證讀取到正確的DOM值，會(huì)觸發(fā)瀏覽器的一次渲染。因此，修改DOM的操作要與訪(fǎng)問(wèn)DOM分開(kāi)進(jìn)行
8、事件代理
事件代理是指將事件監(jiān)聽(tīng)器注冊(cè)在父級(jí)元素上，由于子元素的事件會(huì)通過(guò)事件冒泡的方式向上傳播到父節(jié)點(diǎn)，因此，可以由父節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)統(tǒng)一處理多個(gè)子元素的事件，利用事件代理，可以減少內(nèi)存使用，提高性能及降低代碼復(fù)雜度
9、防抖和節(jié)流
使用函數(shù)節(jié)流（throttle）或函數(shù)去抖（debounce），限制某一個(gè)方法的頻繁觸發(fā)
10、及時(shí)清理環(huán)境
及時(shí)消除對(duì)象引用，清除定時(shí)器，清除事件監(jiān)聽(tīng)器，創(chuàng)建最小作用域變量，可以及時(shí)回收內(nèi)存
