前端性能優化——加載頁面和靜態資源（入門級別）

moven_j 發布于2019-08-26 11:49 / 1409人閱讀

摘要：服務器可以在與每次客戶端傳送的字段進行比較，如果相等，則表示未修改，響應反之，則表示已修改，響應狀態碼，返回新資源。

最近一直在準備面試，接觸了一些性能優化方面的知識，前端性能優化主要從兩個方面進行：

1.加載頁面和靜態資源；
2.頁面渲染；

這篇文章主要講第一點：

加載頁面和靜態資源

加載頁面和靜態資源主要可以從三個角度進行：

靜態資源的合并、壓縮(http2.0時代有變)

靜態資源緩存（css、img）

使用CDN讓靜態資源加載更快

我們一個一個仔細展開說。

靜態資源的合并、壓縮

靜態資源的合并和壓縮能夠減少HTTP請求的數量和請求資源的大小。
可以使用webpack或fis3進行。以fis3為例：

// 清除其他配置，只保留如下配置
fis.match("*.js", {
  // fis-optimizer-uglify-js 插件進行壓縮，已內置
  optimizer: fis.plugin("uglify-js")
});

fis.match("*.css", {
  // fis-optimizer-clean-css 插件進行壓縮，已內置
  optimizer: fis.plugin("clean-css")
});

fis.match("*.png", {
  // fis-optimizer-png-compressor 插件進行壓縮，已內置
  optimizer: fis.plugin("png-compressor")
});

上面就是壓縮資源的配置文件。

但http2.0中增加了很多特性，例如多路復用，也就是說在未來的前端工作中，可能靜態資源的合并就顯得沒那么重要了！

靜態資源緩存

我們在寫前端頁面的時候，經常要引入多個css、js文件，這些文件中，有一些文件是不太需要改動的，但是這些不太需要改動的文件，如果每次用戶訪問頁面都要重新加載就會很影響性能。合理的做法是對于更新頻率不太高的文件，讓用戶能夠利用本地緩存。

瀏覽器緩存的分類：

1）強制緩存：緩存資源未過有效期則不需要請求資源。HTTP首部字段利用catch-control,Expires設置緩存過期時間.

Expires：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

這個字段表示的是緩存到期時間

絕對時間，即服務器時間。瀏覽器會檢查當前時間，如果還沒有到失效時間，則會直接使用緩存文件。但是因為這個字段中使用的是絕對時間，可能出現客戶端與服務器時間不同的情況，而且客戶端用戶可以自己修改時間。

catch-control

Cache-Control: max-age=2592000

這個字段表示的也是過期時間，以上面為例就是2592000s后過期。但是它用的是相對時間，即使客戶端時間改變，相對時間也不會隨之改變，這確保服務器和客戶端的時間一致性。

2）對比緩存：從緩存中獲取對應的數據標識，然后向服務器發送請求，確認數據是否更新，如果已經更新，則返回新數據和新緩存，如果沒有更新，則返回304狀態碼，通知客戶端緩存未更新，可以使用緩存。通過HTTP的last-modified,Etag字段判斷。對比緩存和強制緩存相比，更加適合于一些經常要更新的資源文件。

Last-Modified:

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

第一次請求資源時，服務器返回最后一次更新資源時間。瀏覽器下一次請求資源時，就會發送If-Modified-Since字段。

If-Modified-Since：再次請求時，請求頭中帶有該字段，服務器會將If-Modified-Since的值與Last-Modified字段進行對比，如果相等，則表示未修改，響應304，讓瀏覽器利用緩存；反之，則表示修改了，緩存過期，響應200狀態碼，返回數據。

這個字段可以和Cache-Control配合使用。

但是他還是有一定缺陷的：

如果資源更新的速度是秒以下單位，那么該緩存是不能被使用的，因為它的時間單位最低是秒。
如果文件是通過服務器動態生成的，那么該方法的更新時間永遠是生成的時間，盡管文件可能沒有變化，所以起不到緩存的作用。

Etag

Etag存儲的是資源的實體標識(一般都是hash生成的，哈希字符串)，服務器存儲著文件的Etag字段，當資源內容更新的時候，Etag會變。服務器可以在與每次客戶端傳送If-no-match的字段進行比較，如果相等，則表示未修改，響應304；反之，則表示已修改，響應200狀態碼，返回新資源。

下面是打開了segmentfault上的一個網頁，然后重新刷新頁面的情況。

使用CDN讓靜態資源加載更快

在不同地域的用戶請求資源（訪問網站）的響應速度具有很大的差異，為了提高用戶體驗，我們在用戶和服務器中間加了一層，就是CDN。CDN（Content Delivery Network），它的思想就是將源站的內容分發到最接近用戶的網絡邊緣節點，讓用戶能夠就近取得所需的內容，提高用戶訪問的響應速度。

當用戶發起HTTP請求時，通過CDN向邊緣節點服務器發起請求，邊緣節點會檢測當前節點是否具有你想請求的數據，如果沒有就去源站，如果有請求數據就會進一步判斷，這個數據是否在有效期，根據是否過期來決定。（具體的過程更復雜一點，涉及負載均衡等，下面一篇文章會詳細講）

云服務器 GPU云服務器 cdn靜態資源加載慢頁面性能優化前端頁面優化前端性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107633.html

WEB前端性能優化

摘要：頁面渲染初始化盒子模型相關屬性變化窗口事件觸發結構變化，比如刪除了某個節點獲取某些屬性，引發回流很多瀏覽器會對回流做優化，他會等到足夠數量的變化發生，在做一次批處理回流。使用框架出現了首屏性能渲染問題。請求過程中一些潛在的性能優化點深入理解http請求的過程是前端性能優化的核心！ dns是否可以通過緩存減少dns查詢時間？網絡請求的過程走最近的網絡環境？相同的靜態資源是否...

raoyi 2019-08-26 11:58 評論0 收藏0
Web前端性能優化——如何有效提升靜態文件的加載速度

摘要：在減少文件請求數量方面大致有以下三方面合并腳本文件合并樣式文件合并引用的圖片，使用雪碧圖。和的模塊管理不同，前者是基于靜態的，而后者是動態的。被打包文件的內容也已經被壓縮混淆，減少了加載文件的。作者：劉軼斌，騰訊應用開發工程師商業轉載請聯系騰訊WeTest獲得授權，非商業轉載請注明出處。原文鏈接：http://wetest.qq.com/lab/view/345.html We...

ccj659 2019-08-06 13:25 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端優化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0