性能黃金法則:

只有10%-20%的最終用戶響應(yīng)時(shí)間花在加載html文檔,其余80%-90%時(shí)間花在加載頁(yè)面所需的組件(腳本,圖片,樣式表,flasf..)

本文的內(nèi)容就是來減少那80%-90%的時(shí)間.

減少HTTP請(qǐng)求

圖片地圖(Image Map)

通過<\map>標(biāo)簽，把多個(gè)URL關(guān)聯(lián)到一個(gè)圖片上,來減少HTTP的開銷.

原理就是通過你點(diǎn)擊的圖片區(qū)域來映射你對(duì)應(yīng)該區(qū)域的URL.

缺點(diǎn):

無法手工進(jìn)行定義區(qū)域坐標(biāo) 定義的形狀單一 IE有兼容性問題 CSS Sprites

原理: 把多個(gè)碎圖片合在一張圖片上,在通過CSS的position來獲取你需要的圖片.

優(yōu)點(diǎn)：

減少HTTP請(qǐng)求 減少圖片的加載量

困惑點(diǎn):

網(wǎng)站建設(shè)

有人認(rèn)為合并后的圖片會(huì)大于分散圖片之和,因?yàn)樗麄冇X得合并的圖片含有留白.

實(shí)際上是小于為合并的,因?yàn)楹喜⒑笠粡垐D片減少了圖片本身的開銷(顏色,格式等).

內(nèi)聯(lián)圖片(Inline Images)

通過data:URL的格式在頁(yè)面使用圖片而無需HTTP請(qǐng)求.

缺點(diǎn):

IE不支持 數(shù)據(jù)大小,質(zhì)量受到限制. 合并腳本與樣式表

原理: 把一個(gè)頁(yè)面依賴的樣式合并為一個(gè)樣式,把依賴的所有腳本合并為一個(gè)腳本.

(現(xiàn)在的打包工具可以很方便做到這個(gè))

使用內(nèi)容發(fā)布網(wǎng)絡(luò)(CDN)

CDN: 一組分布在不同地理位置的服務(wù)器,來更高效的向用戶發(fā)布數(shù)據(jù).

優(yōu)點(diǎn):

縮短響應(yīng)時(shí)間 可以緩存,備份,擴(kuò)展存儲(chǔ)能力 緩和web峰值的壓力

缺點(diǎn):

你的響應(yīng)時(shí)間會(huì)受到其他網(wǎng)站的影響,因?yàn)镃DN提供商的所有客戶都是共用web服務(wù)器組. 無法直接控制組件服務(wù)器. 受限于CDN供應(yīng)商本身服務(wù)器的性能.

添加expires頭

理解expires:

瀏覽器(代理)通過使用緩存來減少HTTP的請(qǐng)求數(shù)量,并減少響應(yīng)大小.加速頁(yè)面的加載.

服務(wù)器通過expires頭告知客戶端可以在指定的時(shí)間內(nèi)使用某個(gè)組件的副本.(超過那個(gè)時(shí)間就是無效的),直接從客戶端硬盤讀取數(shù)據(jù),響應(yīng)時(shí)間少.

Expires : Thu, 15 Apr 2016 20:00:00 GMT

Expires會(huì)要求服務(wù)器端時(shí)間與客戶端時(shí)間嚴(yán)格同步,并且一旦過期,服務(wù)器需要配制新的日期.

空緩存: 用戶第一次訪問你的網(wǎng)站,即使設(shè)置了Exppires頭也不會(huì)減少HTTP請(qǐng)求數(shù)量,因?yàn)榇藭r(shí)瀏覽器的緩存是空的.

完整緩存: 如果你的所有可以緩存的組件都在緩存狀態(tài).

所以使用長(zhǎng)久的Expires頭的場(chǎng)景對(duì)象應(yīng)該是那些不經(jīng)常變化的組件:

Cache-Control:max-age = 315000000

通過Cache-Control:max-age可以指定一個(gè)組件被緩存多久,單位s。

如果同時(shí)有max-age和Expires,那么會(huì)重寫Expires.

壓縮組件

原理: 通過減少HTTP響應(yīng)包的大小,來減少響應(yīng)時(shí)間。

客戶端通過HTTP請(qǐng)求設(shè)置Accept-Encoding來標(biāo)志對(duì)哪些壓縮的支持.

Accept-Encoding : gzip

服務(wù)器看到上述報(bào)頭,會(huì)使用客戶端的壓縮方式來壓縮響應(yīng).并通過Content-Encoding告知客戶端.

Content-Encoding : gzip

壓縮的內(nèi)容: 理想的是任何響應(yīng)文本(除了圖片，PDF)

壓縮帶來的成本:

服務(wù)器需要花費(fèi)額外CPU周期來完成壓縮. 客戶端對(duì)響應(yīng)需要進(jìn)行解壓.

代理緩存：

問題點(diǎn):

demo1

瀏覽器A(不支持gzip) --> 通過代理發(fā)送一個(gè)請(qǐng)求 --> 服務(wù)器 --> 服務(wù)器返回的響應(yīng)那么就是沒壓縮的 --> 該響應(yīng)被代理緩存并且發(fā)給瀏覽器A瀏覽器B(支持gzip) --> 通過同一個(gè)代理發(fā)送同一個(gè)URL --> 代理會(huì)使用之前緩存的未壓縮內(nèi)容進(jìn)行響應(yīng).這就沒達(dá)到壓縮的用途了

成都網(wǎng)站建設(shè)

demo2

瀏覽器A(支持gzip) --> 通過代理發(fā)生URL --> 服務(wù)器 --> 服務(wù)器返回壓縮后的響應(yīng) --> 代理緩存該響應(yīng) --> 并把響應(yīng)發(fā)給客戶端瀏覽器B(不支持gzip) --> 通過同一代理發(fā)送同一URL --> 代理會(huì)使用之前已經(jīng)緩存的壓縮的響應(yīng)內(nèi)容進(jìn)行響應(yīng) --> 就尷尬了

解決辦法:在服務(wù)器的響應(yīng)添加Vary頭.即

Vary : Accept-Encoding

原理:就是讓代理可以緩存響應(yīng)的多個(gè)版本.

把樣式表放在頂部

目的: 改善整體的用戶體驗(yàn).讓瀏覽器逐漸顯示網(wǎng)頁(yè)內(nèi)容,與用戶可以形成很好的視覺溝通.

白屏的概念:

你把樣式表放在文檔底部,有時(shí)候頁(yè)面加載緩慢你會(huì)發(fā)現(xiàn)頁(yè)面一片空白,直到突破內(nèi)容又一下子填滿頁(yè)面.這就是白屏.

把樣式表放在文檔底部出現(xiàn)白屏的情況有以下幾種:

在新窗口打開時(shí)候重新加載頁(yè)面時(shí)候(點(diǎn)擊刷新按鈕) 作為主頁(yè)時(shí)候

把樣式表放在頂部注意的情況:

使用link而不是@import加載樣式(@import加載性能不好,組件的加載是無序性) 樣式表在頁(yè)面的位置不影響加載的時(shí)間,只影響頁(yè)面的呈現(xiàn)

把腳本放在頁(yè)面底部

腳本會(huì)阻塞并行下載,也就是說如果你把腳本放在非底部的其他位置,位于腳本下面的代碼要等到腳本加載解析完才輪到它,這就妨礙了頁(yè)面的逐漸顯示原則.

避免CSS表達(dá)式

因?yàn)槊慨?dāng)頁(yè)面發(fā)生變化(大小,事件交互等),CSS表達(dá)式都會(huì)重新求值計(jì)算，這就影響了頁(yè)面的性能.

使用外嵌組件(外部JS和CSS)而不是內(nèi)聯(lián)

使用外部組件優(yōu)點(diǎn):

JS文件和CSS文件可以被瀏覽器緩存. 外部文件可以提高組件的重用率,方便維護(hù).

減少DNS查找.

為什么減少DNS查找可以提升性能?

因?yàn)槟阍跒g覽器輸入一個(gè)URL，需要先經(jīng)過DNS查找,找到你輸入的URL對(duì)應(yīng)的主機(jī)的IP地址,在未找到之前,你是不可以獲取的到任何服務(wù)器資源的.所以減少DNS的開銷是有必要的.

DNS緩存

DNS的查找是可以被緩存來提供查找效率.也就是說你的DNS信息會(huì)緩存在瀏覽器里面和操作系統(tǒng)里面.

影響DNS的緩存的原因

TTL值: 告知客戶端對(duì)記錄緩存多久.

瀏覽器對(duì)緩存的DNS數(shù)量是有限制的.

通過Keep-Alive來重用現(xiàn)有鏈接

一個(gè)持久的TCP鏈接就無需要DNS查找.

通過減少唯一主機(jī)名的數(shù)量來減少并行加載的組件數(shù)量

精簡(jiǎn)JS

減少不必要的字符(注釋,空白字符等)來改善組件的大小,減少加載時(shí)間 壓縮:在精簡(jiǎn)基礎(chǔ)上進(jìn)行壓縮

避免重定向

重定向的概念:就是把用戶從一個(gè)URL路由到另外一個(gè)URL.常見的重定向有301.302

為什么要避免使用重定向?

你如果使用了重定向,那么在文檔下載之前會(huì)有很多的一個(gè)空白期.這對(duì)用戶體驗(yàn)相當(dāng)不友好.所以重定向會(huì)延遲頁(yè)面所有東西.

移除重復(fù)的腳本

重復(fù)的腳本帶來的弊端:

多余的HTTP請(qǐng)求 執(zhí)行JS的時(shí)間花費(fèi)

配制ETag(實(shí)體標(biāo)簽)

什么是ETag(實(shí)體標(biāo)簽)?

ETag： 服務(wù)器和瀏覽器確定緩存組件有效性的一種機(jī)制

理解瀏覽器緩存的工作機(jī)制:

瀏覽器向服務(wù)器訪問一個(gè)URL,服務(wù)器返回響應(yīng)中一個(gè)Expires字段.瀏覽器檢測(cè)該字段是否有效,有效就會(huì)使用瀏覽器緩存中的資源,再次請(qǐng)求時(shí)候不會(huì)發(fā)送HTTP，其實(shí)在重用緩存時(shí)候,需要發(fā)送一個(gè)GET請(qǐng)求,進(jìn)行檢測(cè)時(shí)候有效,如果有效服務(wù)器會(huì)返回一個(gè)304 Not Modified.

服務(wù)器檢測(cè)組件與客戶端緩存資源是否匹配常用的方式:

通過最新修改的時(shí)間進(jìn)行比較 通過比較實(shí)體標(biāo)簽 通過修改時(shí)間進(jìn)行比較

最新修改時(shí)間:指的是服務(wù)器在響應(yīng)中會(huì)返回一個(gè)Last-Modified響應(yīng)頭,告訴我們組件最后修改時(shí)間

當(dāng)你再一次請(qǐng)求同一資源時(shí)候,瀏覽器在請(qǐng)求中會(huì)帶有If-Modified-Since字段,把最新修改的日期傳回到服務(wù)器,服務(wù)器把這個(gè)最新修改日期與之前的Last-Modified時(shí)間進(jìn)行比較,如果匹配一致,服務(wù)器返回304,使用緩存的.

通過實(shí)體標(biāo)簽(更加靈活)

ETag是唯一標(biāo)志了組件版本的字符串,必須用引號(hào)引起來.

第一次請(qǐng)求資源時(shí)候,服務(wù)器會(huì)返回一個(gè)資源的ETag,

當(dāng)瀏覽器再次請(qǐng)求該資源時(shí)候,瀏覽器會(huì)通過一個(gè)組件進(jìn)行驗(yàn)證,通過If-None-Match把ETag傳到原始服務(wù)器，服務(wù)器會(huì)進(jìn)行比較剛剛傳過來的與之前的是否有變化,一致的話,服務(wù)器返回304.

ETag的問題點(diǎn):

瀏覽器向一個(gè)服務(wù)器請(qǐng)求資源,獲得響應(yīng)的一個(gè)ETag,當(dāng)瀏覽器再次向另外一個(gè)服務(wù)器請(qǐng)求資源,這個(gè)時(shí)候兩者ETag是不匹配的.換言之對(duì)于有多個(gè)服務(wù)器處理請(qǐng)求的網(wǎng)站來說,ETag是有一定概率驗(yàn)證失敗. 降低代理緩存的有效性.用戶緩存的ETag和代理緩存的ETag不匹配,導(dǎo)致重新請(qǐng)求原始服務(wù)器,浪費(fèi)HTTP開銷.

ETag的解決辦法:

配制ETag或者移除ETag.

通過Ajax緩存

Ajax本質(zhì)就是提升用戶體驗(yàn)的.

優(yōu)化Ajax請(qǐng)求

壓縮組件

減少DNS查找 精簡(jiǎn)JS 避免重定向 ETag的處理

本文名稱：【成都網(wǎng)站建設(shè)】高性能網(wǎng)站建設(shè)指南筆記-成都創(chuàng)新互聯(lián)官方網(wǎng)站
標(biāo)題來源：http://www.rwnh.cn/news33/226533.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)