資訊專欄INFORMATION COLUMN
摘要：服務器可以在與每次客戶端傳送的字段進行比較，如果相等，則表示未修改，響應反之，則表示已修改，響應狀態(tài)碼，返回新資源。
最近一直在準備面試，接觸了一些性能優(yōu)化方面的知識，前端性能優(yōu)化主要從兩個方面進行：
1.加載頁面和靜態(tài)資源；
2.頁面渲染；
這篇文章主要講第一點：
加載頁面和靜態(tài)資源加載頁面和靜態(tài)資源主要可以從三個角度進行：
靜態(tài)資源的合并、壓縮(http2.0時代有變)
靜態(tài)資源緩存（css、img）
使用CDN讓靜態(tài)資源加載更快
我們一個一個仔細展開說。
靜態(tài)資源的合并、壓縮靜態(tài)資源的合并和壓縮能夠減少HTTP請求的數(shù)量和請求資源的大小。
可以使用webpack或fis3進行。以fis3為例：
// 清除其他配置，只保留如下配置
fis.match("*.js", {
// fis-optimizer-uglify-js 插件進行壓縮，已內(nèi)置
optimizer: fis.plugin("uglify-js")
});
fis.match("*.css", {
// fis-optimizer-clean-css 插件進行壓縮，已內(nèi)置
optimizer: fis.plugin("clean-css")
});
fis.match("*.png", {
// fis-optimizer-png-compressor 插件進行壓縮，已內(nèi)置
optimizer: fis.plugin("png-compressor")
});
上面就是壓縮資源的配置文件。
但http2.0中增加了很多特性，例如多路復用，也就是說在未來的前端工作中，可能靜態(tài)資源的合并就顯得沒那么重要了！
靜態(tài)資源緩存我們在寫前端頁面的時候，經(jīng)常要引入多個css、js文件，這些文件中，有一些文件是不太需要改動的，但是這些不太需要改動的文件，如果每次用戶訪問頁面都要重新加載就會很影響性能。合理的做法是對于更新頻率不太高的文件，讓用戶能夠利用本地緩存。
瀏覽器緩存的分類：
1）強制緩存：緩存資源未過有效期則不需要請求資源。HTTP首部字段利用catch-control,Expires設置緩存過期時間.
Expires：
Expires: Thu, 10 Nov 2017 08:45:11 GMT
這個字段表示的是緩存到期時間
絕對時間，即服務器時間。瀏覽器會檢查當前時間，如果還沒有到失效時間，則會直接使用緩存文件。但是因為這個字段中使用的是絕對時間，可能出現(xiàn)客戶端與服務器時間不同的情況，而且客戶端用戶可以自己修改時間。
catch-control
Cache-Control: max-age=2592000
這個字段表示的也是過期時間，以上面為例就是2592000s后過期。但是它用的是相對時間，即使客戶端時間改變，相對時間也不會隨之改變，這確保服務器和客戶端的時間一致性。
2）對比緩存：從緩存中獲取對應的數(shù)據(jù)標識，然后向服務器發(fā)送請求，確認數(shù)據(jù)是否更新，如果已經(jīng)更新，則返回新數(shù)據(jù)和新緩存，如果沒有更新，則返回304狀態(tài)碼，通知客戶端緩存未更新，可以使用緩存。通過HTTP的last-modified,Etag字段判斷。對比緩存和強制緩存相比，更加適合于一些經(jīng)常要更新的資源文件。
Last-Modified:
Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT
第一次請求資源時，服務器返回最后一次更新資源時間。瀏覽器下一次請求資源時，就會發(fā)送If-Modified-Since字段。
If-Modified-Since：再次請求時，請求頭中帶有該字段，服務器會將If-Modified-Since的值與Last-Modified字段進行對比，如果相等，則表示未修改，響應304，讓瀏覽器利用緩存；反之，則表示修改了，緩存過期，響應200狀態(tài)碼，返回數(shù)據(jù)。
這個字段可以和Cache-Control配合使用。
但是他還是有一定缺陷的：
如果資源更新的速度是秒以下單位，那么該緩存是不能被使用的，因為它的時間單位最低是秒。
如果文件是通過服務器動態(tài)生成的，那么該方法的更新時間永遠是生成的時間，盡管文件可能沒有變化，所以起不到緩存的作用。
Etag
Etag存儲的是資源的實體標識(一般都是hash生成的，哈希字符串)，服務器存儲著文件的Etag字段，當資源內(nèi)容更新的時候，Etag會變。服務器可以在與每次客戶端傳送If-no-match的字段進行比較，如果相等，則表示未修改，響應304；反之，則表示已修改，響應200狀態(tài)碼，返回新資源。
下面是打開了segmentfault上的一個網(wǎng)頁，然后重新刷新頁面的情況。
使用CDN讓靜態(tài)資源加載更快在不同地域的用戶請求資源（訪問網(wǎng)站）的響應速度具有很大的差異，為了提高用戶體驗，我們在用戶和服務器中間加了一層，就是CDN。CDN（Content Delivery Network），它的思想就是將源站的內(nèi)容分發(fā)到最接近用戶的網(wǎng)絡邊緣節(jié)點，讓用戶能夠就近取得所需的內(nèi)容，提高用戶訪問的響應速度。
當用戶發(fā)起HTTP請求時，通過CDN向邊緣節(jié)點服務器發(fā)起請求，邊緣節(jié)點會檢測當前節(jié)點是否具有你想請求的數(shù)據(jù)，如果沒有就去源站，如果有請求數(shù)據(jù)就會進一步判斷，這個數(shù)據(jù)是否在有效期，根據(jù)是否過期來決定。（具體的過程更復雜一點，涉及負載均衡等，下面一篇文章會詳細講）
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/107633.html
摘要：頁面渲染初始化盒子模型相關屬性變化窗口事件觸發(fā)結構變化，比如刪除了某個節(jié)點獲取某些屬性，引發(fā)回流很多瀏覽器會對回流做優(yōu)化，他會等到足夠數(shù)量的變化發(fā)生，在做一次批處理回流。使用框架出現(xiàn)了首屏性能渲染問題。 請求過程中一些潛在的性能優(yōu)化點 深入理解http請求的過程是前端性能優(yōu)化的核心！ dns是否可以通過緩存減少dns查詢時間？ 網(wǎng)絡請求的過程走最近的網(wǎng)絡環(huán)境？ 相同的靜態(tài)資源是否...
摘要：在減少文件請求數(shù)量方面大致有以下三方面合并腳本文件合并樣式文件合并引用的圖片，使用雪碧圖。和的模塊管理不同，前者是基于靜態(tài)的，而后者是動態(tài)的。被打包文件的內(nèi)容也已經(jīng)被壓縮混淆，減少了加載文件的。 作者：劉軼斌，騰訊應用開發(fā) 工程師商業(yè)轉載請聯(lián)系騰訊WeTest獲得授權，非商業(yè)轉載請注明出處。 原文鏈接：http://wetest.qq.com/lab/view/345.html We...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
閱讀 1277·2021-09-23 11:51
閱讀 1397·2021-09-04 16:45
閱讀 636·2019-08-30 15:54
閱讀 2088·2019-08-30 15:52
閱讀 1607·2019-08-30 11:17
閱讀 3110·2019-08-29 13:59
閱讀 2025·2019-08-28 18:09
閱讀 391·2019-08-26 12:15
