前端優(yōu)化

firim 發(fā)布于2019-08-29 12:23 / 2932人閱讀

摘要：在大多數(shù)情況下，選擇一個更優(yōu)的算法，比圍繞著小成本中心所實現(xiàn)的具體優(yōu)化策略能夠獲得更大的收益。用于未來的一個建議使用流按需加載資源按圖片編碼優(yōu)化需加載資源圖片編碼優(yōu)化。和在發(fā)布時都會使用次優(yōu)的設(shè)置進(jìn)行編碼。

1.JavaScript壓縮和模塊打包

模塊打包則用于將不同腳本打包在一起并放進(jìn)同一文件。更少的 HTTP 請求和單個文件解析都可以減少加載時間。

使用 Webpack 打包 CSS 文件以及合并圖片。這些特性都可以有助于改善啟動時間。

2.按需加載資源

資源（特別是圖片）的按需加載或者說惰性加載，可以有助于 Web 應(yīng)用在整體上獲得更好的性能。對于使用大量圖片的頁面來說惰性加載有著顯著的三個好處：

減少向服務(wù)器發(fā)出的并發(fā)請求數(shù)量（這就使得頁面的其他部分獲得更快的加載時間）
減少瀏覽器的內(nèi)存使用率（更少的圖片，更少的內(nèi)存）
減少服務(wù)器端的負(fù)載
只在必要的時候才去加載圖片或資源（如視頻），比如在第一次被顯示的時候，或者是在將要顯示的時候?qū)ζ溥M(jìn)行加載。

3.在使用 DOM 操作庫時用上 array-ids

Array ids 使得 DOM 操作引擎可以「知道」在什么時候某個節(jié)點(diǎn)可以被映射到數(shù)組當(dāng)中的某個元素。沒有 array-ids 或者 track-by 的話，大部分庫都會進(jìn)行重新排序而摧毀已有的節(jié)點(diǎn)并重新創(chuàng)建新的。這就非常損耗性能了。

4.緩存

緩存可以被放在動態(tài)內(nèi)容服務(wù)器和客戶端之間，就可以避免公共請求以減少服務(wù)器的負(fù)載，與此同時改善響應(yīng)時間。

5.啟用 HTTP/2

HTTP/2 為同一服務(wù)器的并發(fā)連接問題帶來了很多好處。

6.應(yīng)用性能分析

Chrome 提供了非常棒的性能分析工具。特別是 Chrome Dev Tools 中的時間線和網(wǎng)絡(luò)視圖都對于定位延遲問題有著很大的幫助

時間線視圖可以幫忙找到運(yùn)行時間較長的操作。

網(wǎng)絡(luò)視圖可以幫助識別出額外的由緩慢請求導(dǎo)致的延遲或?qū)τ谀骋欢它c(diǎn)的串行訪問。

在大多數(shù)情況下，選擇一個更優(yōu)的算法，比圍繞著小成本中心所實現(xiàn)的具體優(yōu)化策略能夠獲得更大的收益。

7.使用負(fù)載均衡方案

為了使負(fù)載均衡真正有效，動態(tài)內(nèi)容和靜態(tài)內(nèi)容都應(yīng)該被拆分成易于并發(fā)訪問的。換句話說，元素的串形訪問會削弱負(fù)載均衡器以最佳形式進(jìn)行分流的能力。與此同時，對于資源的并發(fā)訪問可以改善啟動時間。

8.為了更快的啟動時間考慮一下同構(gòu)

改善 Web 應(yīng)用程序觀感的方式之一，就是減少啟動時間或者減少首頁渲染時間。

9.使用索引加速數(shù)據(jù)庫查詢

10.使用更快的轉(zhuǎn)譯方案

11.避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

防止 JavaScript 阻塞解析器和渲染器的一種方法就是將 script 標(biāo)簽標(biāo)記為異步的。這限制了我們對于 DOM 的訪問但是可以讓瀏覽器不管腳本的執(zhí)行狀態(tài)而繼續(xù)解析和渲染頁面。換句話說，為了獲得最佳的啟動時間，確保那些對于渲染不重要的腳本已經(jīng)通過異步屬性的方式標(biāo)記成異步的了。

12.用于未來的一個建議：使用 service workers + 流

13.按需加載資源按圖片編碼優(yōu)化需加載資源

圖片編碼優(yōu)化。PNGs 和 JPGs 在 Web 發(fā)布時都會使用次優(yōu)的設(shè)置進(jìn)行編碼。通過改變編碼器和它的設(shè)置，對于需要大量圖片的網(wǎng)站來說可以獲得有效的改善。流行的解決方案包括 OptiPNG 和 jpegtran。