亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端性能優(yōu)化——加載頁面和靜態(tài)資源（入門級(jí)別）

moven_j / 1504人閱讀

摘要：服務(wù)器可以在與每次客戶端傳送的字段進(jìn)行比較，如果相等，則表示未修改，響應(yīng)反之，則表示已修改，響應(yīng)狀態(tài)碼，返回新資源。

最近一直在準(zhǔn)備面試，接觸了一些性能優(yōu)化方面的知識(shí)，前端性能優(yōu)化主要從兩個(gè)方面進(jìn)行：

1.加載頁面和靜態(tài)資源；
2.頁面渲染；

這篇文章主要講第一點(diǎn)：

加載頁面和靜態(tài)資源

加載頁面和靜態(tài)資源主要可以從三個(gè)角度進(jìn)行：

靜態(tài)資源的合并、壓縮(http2.0時(shí)代有變)

靜態(tài)資源緩存（css、img）

使用CDN讓靜態(tài)資源加載更快

我們一個(gè)一個(gè)仔細(xì)展開說。

靜態(tài)資源的合并、壓縮

靜態(tài)資源的合并和壓縮能夠減少HTTP請(qǐng)求的數(shù)量和請(qǐng)求資源的大小。
可以使用webpack或fis3進(jìn)行。以fis3為例：

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

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

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

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

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

靜態(tài)資源緩存

我們?cè)趯懬岸隧撁娴臅r(shí)候，經(jīng)常要引入多個(gè)css、js文件，這些文件中，有一些文件是不太需要改動(dòng)的，但是這些不太需要改動(dòng)的文件，如果每次用戶訪問頁面都要重新加載就會(huì)很影響性能。合理的做法是對(duì)于更新頻率不太高的文件，讓用戶能夠利用本地緩存。

瀏覽器緩存的分類：

1）強(qiáng)制緩存：緩存資源未過有效期則不需要請(qǐng)求資源。HTTP首部字段利用catch-control,Expires設(shè)置緩存過期時(shí)間.

Expires：

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

這個(gè)字段表示的是緩存到期時(shí)間

絕對(duì)時(shí)間，即服務(wù)器時(shí)間。瀏覽器會(huì)檢查當(dāng)前時(shí)間，如果還沒有到失效時(shí)間，則會(huì)直接使用緩存文件。但是因?yàn)檫@個(gè)字段中使用的是絕對(duì)時(shí)間，可能出現(xiàn)客戶端與服務(wù)器時(shí)間不同的情況，而且客戶端用戶可以自己修改時(shí)間。

catch-control

Cache-Control: max-age=2592000

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

2）對(duì)比緩存：從緩存中獲取對(duì)應(yīng)的數(shù)據(jù)標(biāo)識(shí)，然后向服務(wù)器發(fā)送請(qǐng)求，確認(rèn)數(shù)據(jù)是否更新，如果已經(jīng)更新，則返回新數(shù)據(jù)和新緩存，如果沒有更新，則返回304狀態(tài)碼，通知客戶端緩存未更新，可以使用緩存。通過HTTP的last-modified,Etag字段判斷。對(duì)比緩存和強(qiáng)制緩存相比，更加適合于一些經(jīng)常要更新的資源文件。

Last-Modified:

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

第一次請(qǐng)求資源時(shí)，服務(wù)器返回最后一次更新資源時(shí)間。瀏覽器下一次請(qǐng)求資源時(shí)，就會(huì)發(fā)送If-Modified-Since字段。

If-Modified-Since：再次請(qǐng)求時(shí)，請(qǐng)求頭中帶有該字段，服務(wù)器會(huì)將If-Modified-Since的值與Last-Modified字段進(jìn)行對(duì)比，如果相等，則表示未修改，響應(yīng)304，讓瀏覽器利用緩存；反之，則表示修改了，緩存過期，響應(yīng)200狀態(tài)碼，返回?cái)?shù)據(jù)。

這個(gè)字段可以和Cache-Control配合使用。

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

如果資源更新的速度是秒以下單位，那么該緩存是不能被使用的，因?yàn)樗臅r(shí)間單位最低是秒。
如果文件是通過服務(wù)器動(dòng)態(tài)生成的，那么該方法的更新時(shí)間永遠(yuǎn)是生成的時(shí)間，盡管文件可能沒有變化，所以起不到緩存的作用。

Etag

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

下面是打開了segmentfault上的一個(gè)網(wǎng)頁，然后重新刷新頁面的情況。

使用CDN讓靜態(tài)資源加載更快

在不同地域的用戶請(qǐng)求資源（訪問網(wǎng)站）的響應(yīng)速度具有很大的差異，為了提高用戶體驗(yàn)，我們?cè)谟脩艉头?wù)器中間加了一層，就是CDN。CDN（Content Delivery Network），它的思想就是將源站的內(nèi)容分發(fā)到最接近用戶的網(wǎng)絡(luò)邊緣節(jié)點(diǎn)，讓用戶能夠就近取得所需的內(nèi)容，提高用戶訪問的響應(yīng)速度。

當(dāng)用戶發(fā)起HTTP請(qǐng)求時(shí)，通過CDN向邊緣節(jié)點(diǎn)服務(wù)器發(fā)起請(qǐng)求，邊緣節(jié)點(diǎn)會(huì)檢測(cè)當(dāng)前節(jié)點(diǎn)是否具有你想請(qǐng)求的數(shù)據(jù)，如果沒有就去源站，如果有請(qǐng)求數(shù)據(jù)就會(huì)進(jìn)一步判斷，這個(gè)數(shù)據(jù)是否在有效期，根據(jù)是否過期來決定。（具體的過程更復(fù)雜一點(diǎn)，涉及負(fù)載均衡等，下面一篇文章會(huì)詳細(xì)講）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107633.html

相關(guān)文章

  • WEB前端性能優(yōu)化

    摘要：頁面渲染初始化盒子模型相關(guān)屬性變化窗口事件觸發(fā)結(jié)構(gòu)變化，比如刪除了某個(gè)節(jié)點(diǎn)獲取某些屬性，引發(fā)回流很多瀏覽器會(huì)對(duì)回流做優(yōu)化，他會(huì)等到足夠數(shù)量的變化發(fā)生，在做一次批處理回流。使用框架出現(xiàn)了首屏性能渲染問題。 請(qǐng)求過程中一些潛在的性能優(yōu)化點(diǎn) 深入理解http請(qǐng)求的過程是前端性能優(yōu)化的核心！ dns是否可以通過緩存減少dns查詢時(shí)間？ 網(wǎng)絡(luò)請(qǐng)求的過程走最近的網(wǎng)絡(luò)環(huán)境？ 相同的靜態(tài)資源是否...

    raoyi 評(píng)論0 收藏0

  • Web前端性能優(yōu)化——如何有效提升靜態(tài)文件的加載速度

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

    ccj659 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 前端優(yōu)化 - 收藏集 - 掘金

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

    VincentFF 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

moven_j

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<