本文主要考慮客戶端性能意系、服務(wù)器端和網(wǎng)絡(luò)性能，內(nèi)容框架來自Yahoo Developer Network迎瞧，包含 7 個類別共 35 條前端性能優(yōu)化最佳實踐，在此基礎(chǔ)上補充了一些相關(guān)或者更符合主流技術(shù)的內(nèi)容足绅。

主流技術(shù)的內(nèi)容

前端性能的一個重要指標(biāo)是頁面加載時間，不僅事關(guān)用戶體驗首量，也是搜索引擎排名考慮的一個因素。

• 來自Google的數(shù)據(jù)表明生百，一個有10條數(shù)據(jù)0.4秒能加載完的頁面缀程，變成30條數(shù)據(jù)0.9秒加載完之后滤奈，流量和廣告收入下降90%蜒程。
• Google Map 首頁文件大小從100KB減小到70-80KB后绅你，流量在第一周漲了10%舀瓢，接下來的三周漲了25%伦乔。
• 亞馬遜的數(shù)據(jù)表明：加載時間增加100毫秒，銷量就下降1%漩氨。

以上數(shù)據(jù)更說明「加載時間就是金錢」领炫，前端優(yōu)化主要圍繞提高加載速度進行偶垮。

一、頁面內(nèi)容

1. 減少HTTP請求數(shù)
Web 前端 80% 的響應(yīng)時間花在圖片帝洪、樣式、腳本等資源下載上。最直接的方式是減少頁面所需資源，但并不現(xiàn)實。所以，減少HTTP請求數(shù)主要的途徑是：

• 合并JS/CSS文件。服務(wù)器端（CDN）自動合并纹因，基于Node.js的文件合并工具惊畏，通過把所有腳本放在一個文件中的方式來減少請求數(shù)社搅。
• 使用CSS Sprite將背景圖片合并成一個文件，通過background-image 和background-position 控制顯示
• 行內(nèi)圖片（Base64編碼）。使用Data URI scheme將圖片嵌入HTML或者CSS中咙咽；或者將CSS镜廉、JS敢茁、圖片直接嵌入HTML中，會增加文件大小亮蒋，也可能產(chǎn)生瀏覽器兼容及其他性能問題。

減少頁面的HTTP請求數(shù)是個起點痢畜，這是提升站點首次訪問速度的重要指導(dǎo)原則。

2. 減少DNS查詢
用戶輸入URL以后唬复，瀏覽器首先要查詢域名（hostname）對應(yīng)服務(wù)器的IP地址评疗，一般需要耗費20-120毫秒時間雕拼。DNS查詢完成之前栈戳，瀏覽器無法從服務(wù)器下載任何數(shù)據(jù)症虑。

基于性能考慮，ISP汗洒、局域網(wǎng)、操作系統(tǒng)、瀏覽器都會有相應(yīng)的DNS緩存機制杏瞻。

• IE緩存30分鐘，可以通過注冊表中DnsCacheTimeout項設(shè)置厕倍；
• Firefox緩存1分鐘，通過network.dnsCacheExpiration配置睛驳；

另外減少不同的主機名可減少DNS查找淫茵，減少不同主機名的數(shù)量同時也減少了頁面能夠并行下載的組件數(shù)量，避免DNS查找削減了響應(yīng)時間蹬跃，而減少并行下載數(shù)量卻增加了響應(yīng)時間匙瘪。原則是把組件分散在2到4個主機名下，這是同時減少DNS查找和允許高并發(fā)下載的折中方案蝶缀。

3. 避免重定向
HTTP重定向通過301/302狀態(tài)碼實現(xiàn)丹喻。下面是一個有301狀態(tài)碼的HTTP頭

HTTP/1.1 301 Moved Permanently 
Location: http://example.com/newuri
Content-Type: text/html 

瀏覽器會自動跳轉(zhuǎn)到Location域指明的URL。重定向需要的所有信息都在HTTP頭部翁都，而響應(yīng)體一般是空的驻啤。其實額外的HTTP頭，比如Expires和Cache-Control也表示重定向荐吵。除此之外還有別的跳轉(zhuǎn)方式：refresh元標(biāo)簽和JavaScript骑冗，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的3xxHTTP狀態(tài)碼先煎，主要是為了讓返回按鈕能正常使用薯蝎。

客戶端收到服務(wù)器的重定向響應(yīng)后占锯，會根據(jù)響應(yīng)頭中Location的地址再次發(fā)送請求消略。重定向會影響用戶體驗却紧，尤其是多次重定向時，用戶在一段時間內(nèi)看不到任何內(nèi)容断凶，只看到瀏覽器進度條一直在刷新认烁。

• 最浪費的重定向經(jīng)常發(fā)生砚著、而且很容易被忽略：URL 末尾應(yīng)該添加/但未添加。比如赶撰，訪問http://astrology.yahoo.com/astrology將被301重定向到http://astrology.yahoo.com/astrology/（注意末尾的 /）豪娜。如果使用 Apache瘤载，可以通過Alias或mod_rewrite或DirectorySlash解決這個問題鸣奔。
• 網(wǎng)站域名變更：CNAME結(jié)合Alias或mod_rewrite或者其他服務(wù)器類似功能實現(xiàn)跳轉(zhuǎn)挎狸。

4. 緩存Ajax請求
最重要的的優(yōu)化方式是緩存響應(yīng)結(jié)果锨匆。有尚未過期的Expires或者Cache-Control HTTP頭恐锣，那么之前的資源就可以從緩存中讀出土榴。必須通知瀏覽器学搜，應(yīng)該繼續(xù)使用之前緩存的資源響應(yīng)瑞佩，還是去請求一個新的炬丸〕砭妫可以通過給資源的Ajax URL里添加一個表明用戶資源最后修改時間的時間戳來實現(xiàn)首启。如果資源從上一次下載之后再沒有被修改過毅桃，時間戳不變钥飞，資源就將從瀏覽器緩存中直接讀出，從而避免一次額外的HTTP往返消耗楔绞。詳見服務(wù)器-添加Expires或Cache響應(yīng)頭。

5. 延遲加載
頁面初始加載時哪些內(nèi)容是絕對必需的膀估？不在答案之列的資源都可以延遲加載察纯。比如：

• 非首屏使用的數(shù)據(jù)饼记、樣式具则、腳本低斋、圖片等膊畴；
• 用戶交互時才會顯示的內(nèi)容唇跨。

遵循「漸進增強」理念開發(fā)的網(wǎng)站：JavaScript用于增強用用戶體驗，但沒有（不支持） JavaScript也能正常工作玉控，完全可以延遲加載JavaScript高诺。

將首屏以外的HTML放在不渲染的元素中丸冕，如隱藏的<textarea>胖烛，或者type屬性為非執(zhí)行腳本的<script>標(biāo)簽中佩番，減少初始渲染的DOM元素數(shù)量贡歧，提高速度赋秀。等首屏加載完成或者用戶操作時绍弟，再去渲染剩余的頁面內(nèi)容著洼。

6. 預(yù)加載
預(yù)先加載利用瀏覽器空閑時間請求將來要使用的資源，以便用戶訪問下一頁面時更快地響應(yīng)葵陵。

• 無條件預(yù)先加載：頁面加載完成（load）后埃难，馬上獲取其他資源。以 google.com 為例涤久，首頁加載完成后會立即下載一個 Sprite 圖片涡尘，此圖首頁不需要，但是搜索結(jié)果頁要用到响迂。
• 有條件預(yù)先加載：根據(jù)用戶行為預(yù)判用戶去向考抄，預(yù)載相關(guān)資源。比如search.yahoo.com開始輸入時會有額外的資源加載蔗彤。Chrome 等瀏覽器的地址欄也有類似的機制川梅。
• 有「陰謀」的預(yù)先加載：頁面即將上線新版前預(yù)先加載新版內(nèi)容。網(wǎng)站改版后由于緩存贫途、使用習(xí)慣等原因怨酝，會有舊版的網(wǎng)站更快更流暢的反饋斤葱。為緩解這一問題鹤啡，在新版上線之前说贝，舊版可以利用空閑提前加載一些新版的資源緩存到客戶端傲宜，以便新版正式上線后更快的載入。

7. 減少DOM元素數(shù)量
復(fù)雜的頁面不僅下載的字節(jié)更多血筑，JavaScript DOM操作也更慢。例如，同是添加一個事件處理器哪轿，500個元素和5000個元素的頁面速度上會有很大區(qū)別。

從以下幾個角度考慮移除不必要的標(biāo)記：

• 是否還在使用表格布局车柠？
• 塞進去更多的<div>僅為了處理布局問題？也許有更好彭则、更語義化的標(biāo)記尤揣。
• 能通過偽元素實現(xiàn)的功能莽龟，就沒必要添加額外元素，如清除浮動。

瀏覽器控制臺中輸入以下代碼可以計算出頁面中有多少 DOM 元素：

document.getElementsByTagName('*').length

為什么不使用表格布局酌媒？

• 更多的標(biāo)簽喇辽，增加文件大谐槊住标捺；
• 不易維護辟汰，無法適應(yīng)響應(yīng)式設(shè)計秧耗；
• 性能考量霉猛，默認(rèn)的表格布局算法會產(chǎn)生大量重繪

8. 劃分內(nèi)容到不同域名
瀏覽器一般會限制每個域的并行線程（一般為6個尺锚，甚至更少），使用不同的域名可以最大化下載線程惜浅，但注意保持在2-4個域名內(nèi)瘫辩，以避免DNS查詢損耗。

例如坛悉，動態(tài)內(nèi)容放在csspod.com上伐厌，靜態(tài)資源放在static.csspod.com上。這樣還可以禁用靜態(tài)資源域下的Cookie裸影，減少數(shù)據(jù)傳輸弧械，詳見Cookie 優(yōu)化。

9. 盡量減少iframe的使用
用iframe可以把一個HTML文檔插入到父文檔里空民，重要的是明白iframe是如何工作的并高效地使用它刃唐。

<iframe>的優(yōu)點：

• 可以用來加載速度較慢的第三方資源，如廣告界轩、徽章画饥；
• 可用作安全沙箱；
• 可以并行下載腳本浊猾。

<iframe>的缺點：

• 加載代價昂貴抖甘，即使是空的頁面；
• 阻塞頁面 load 事件觸發(fā)葫慎；

Iframe 完全加載以后衔彻，父頁面才會觸發(fā) load 事件。 Safari偷办、Chrome 中通過 JavaScript 動態(tài)設(shè)置 iframe src 可以避免這個問題艰额。

• 缺乏語義。

10. 避免404錯誤
HTTP請求很昂貴椒涯，返回?zé)o效的響應(yīng)（如404未找到）完全沒必要柄沮，降低用戶體驗而且毫無益處。 一些網(wǎng)站設(shè)計很酷炫、有提示信息的404頁面祖搓，有助于提高用戶體驗狱意，但還是浪費服務(wù)器資源。尤其糟糕的是外部腳本返回404拯欧，不僅阻塞其他資源下載详囤，瀏覽器還會嘗試把404頁面內(nèi)容當(dāng)作JavaScript解析，消耗更多資源镐作。

二纬纪、服務(wù)器

1. 使用CDN
用戶與服務(wù)器的物理距離對響應(yīng)時間也有影響。把內(nèi)容部署在多個地理位置分散的服務(wù)器上能讓用戶更快地載入頁面滑肉。但具體要怎么做呢包各？

網(wǎng)站80-90%響應(yīng)時間消耗在資源下載上，減少資源下載時間是性能優(yōu)化的黃金法則靶庙。相比分布式架構(gòu)的復(fù)雜和巨大投入问畅，靜態(tài)內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）可以以較低的投入，獲得加載速度有效提升六荒。

內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）是一組分散在不同地理位置的web服務(wù)器护姆，用來給用戶更高效地發(fā)送內(nèi)容。典型地掏击，選擇用來發(fā)送內(nèi)容的服務(wù)器是基于網(wǎng)絡(luò)距離的衡量標(biāo)準(zhǔn)的卵皂。例如：選跳數(shù)（hop）最少的或者響應(yīng)時間最快的服務(wù)器。

2. 添加Expires或Cache-Control響應(yīng)頭

• 靜態(tài)內(nèi)容：將 Expires 響應(yīng)頭設(shè)置為將來很遠(yuǎn)的時間砚亭，實現(xiàn)「永不過期」策略灯变；
• 動態(tài)內(nèi)容：設(shè)置合適的 Cache-Control 響應(yīng)頭，讓瀏覽器有條件地發(fā)起請求捅膘。

Cache-Control頭在HTTP/1.1規(guī)范中定義添祸，取代了之前用來定義響應(yīng)緩存策略的頭（例如 Expires、Pragma）寻仗。當(dāng)前的所有瀏覽器都支持Cache-Control刃泌，因此，使用它就夠了署尤。

3. 啟用Gzip
前端工程師可以想辦法明顯地縮短通過網(wǎng)絡(luò)傳輸HTTP請求和響應(yīng)的時間耙替。毫無疑問，終端用戶的帶寬速度曹体，網(wǎng)絡(luò)服務(wù)商俗扇，對等交換點的距離等等，都是開發(fā)團隊所無法控制的混坞。但還有別的能夠影響響應(yīng)時間的因素狐援，壓縮可以通過減少HTTP響應(yīng)的大小來縮短響應(yīng)時間。

Gzip壓縮通尘吭校可以減少70%的響應(yīng)大小啥酱，對某些文件更可能高達(dá)90%，比Deflate更高效厨诸。主流 Web 服務(wù)器都有相應(yīng)模塊镶殷，而且絕大多數(shù)瀏覽器支持gzip解碼。所以微酬，應(yīng)該對HTML绘趋、CSS、JS颗管、XML陷遮、JSON等文本類型的內(nèi)容啟用壓縮。

注意!!! 圖片和 PDF 文件不要使用 gzip垦江。它們本身已經(jīng)壓縮過帽馋，再使用 gzip 壓縮不僅浪費 CPU 資源，而且還可能增加文件體積比吭。

從HTTP/1.1開始绽族，web客戶端就有了支持壓縮的Accept-Encoding HTTP請求頭。

Accept-Encoding: gzip, deflate

如果web服務(wù)器看到這個請求頭衩藤，它就會用客戶端列出的一種方式來壓縮響應(yīng)吧慢。web服務(wù)器通過Content-Encoding響應(yīng)頭來通知客戶端。

Content-Encoding: gzip

4. 配置 Etag
實體標(biāo)簽（ETags）赏表，是服務(wù)器和瀏覽器用來決定瀏覽器緩存中組件與源服務(wù)器中的組件是否匹配的一種機制（“實體”也就是組件：圖片检诗，腳本，樣式表等等）瓢剿。添加ETags可以提供一種實體驗證機制岁诉，比最后修改日期更加靈活。一個ETag是一個字符串跋选，作為一個組件某一具體版本的唯一標(biāo)識符涕癣。唯一的格式約束是字符串必須用引號括起來，源服務(wù)器用相應(yīng)頭中的ETag來指定組件的ETag前标。

HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195 

然后坠韩，如果瀏覽器必須驗證一個組件，它用If-None-Match請求頭來把ETag傳回源服務(wù)器炼列。如果ETags匹配成功只搁，會返回一個304狀態(tài)碼，這樣就減少了12195個字節(jié)的響應(yīng)體俭尖。Etag 通過文件版本標(biāo)識氢惋，方便服務(wù)器判斷請求的內(nèi)容是否有更新洞翩，如果沒有就響應(yīng) 304，避免重新下載焰望。

GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified 

5. 盡早輸出（flush）緩沖
用戶請求頁面時骚亿，服務(wù)器通常需要花費200 ~ 500毫秒來組合 HTML 頁面。在此期間熊赖，瀏覽器處于空閑来屠、等待數(shù)據(jù)狀態(tài)。使用PHP中的flush()函數(shù)震鹉，可以發(fā)送部分已經(jīng)準(zhǔn)備好的 HTML到瀏覽器俱笛，以便服務(wù)器還在忙于處理剩余頁面時，瀏覽器可以提前開始獲取資源传趾。

可以考慮在</head>之后輸出一次緩沖迎膜，HTML head一般比較容易生成，先發(fā)送以便瀏覽器開始獲取<head>里引用的CSS等資源浆兰。

<!-- css, js -->
</head>
<?php flush(); ?>
<body>
<!-- content --> 

6. Ajax請求使用GET方法
瀏覽器執(zhí)行XMLHttpRequest POST請求時分成兩步星虹，先發(fā)送Http Header，再發(fā)送data镊讼。而GET只使用一個TCP數(shù)據(jù)包（Http Header與data）發(fā)送數(shù)據(jù)宽涌，所以首選GET方法。

根據(jù)HTTP規(guī)范蝶棋，GET用于獲取數(shù)據(jù)卸亮，POST則用于向服務(wù)器發(fā)送數(shù)據(jù)，所以Ajax請求數(shù)據(jù)時使用GET更符合規(guī)范玩裙。

7. 避免圖片src為空
圖片src屬性值為空字符串可能以下面兩種形式出現(xiàn)：

HTML:

<img src="" /> 

JavaScript：

var img = new Image(); 
img.src = ""; 

雖然src屬性為空字符串兼贸，但瀏覽器仍然會向服務(wù)器發(fā)起一個HTTP請求：

• IE 向頁面所在的目錄發(fā)送請求；
• Safari吃溅、Chrome溶诞、Firefox向頁面本身發(fā)送請求；
• Opera不執(zhí)行任何操作决侈。

空src產(chǎn)生請求的后果不容小覷：

• 給服務(wù)器造成意外的流量負(fù)擔(dān)螺垢，尤其時日 PV 較大時；
• 浪費服務(wù)器計算資源赖歌；
• 可能產(chǎn)生報錯枉圃。

空的href屬性也存在類似問題。用戶點擊空鏈接時庐冯，瀏覽器也會向服務(wù)器發(fā)送HTTP請求孽亲，可以通過JavaScript阻止空鏈接的默認(rèn)的行為。

三展父、Cookie

1. 減少 Cookie 大小
Cookie被用于身份認(rèn)證返劲、個性化設(shè)置等諸多用途玲昧。Cookie通過HTTP頭在服務(wù)器和瀏覽器間來回傳送，減少Cookie大小可以降低其對響應(yīng)速度的影響篮绿。

• 去除不必要的 Cookie孵延；
• 盡量壓縮 Cookie 大小搔耕；
• 注意設(shè)置 Cookie 的 domain 級別隙袁，如無必要痰娱，不要影響到 sub-domain弃榨；
• 設(shè)置合適的過期時間。

2. 靜態(tài)資源使用無Cookie域名
靜態(tài)資源一般無需使用Cookie梨睁，可以把它們放在使用二級域名或者專門域名的無Cookie服務(wù)器上鲸睛，降低Cookie傳送的造成的流量浪費，提高響應(yīng)速度坡贺。

四官辈、CSS

1. 把樣式表放在<head>中
把樣式表放在<head>中可以讓頁面漸進渲染，盡早呈現(xiàn)視覺反饋遍坟，給用戶加載速度很快的感覺拳亿。

這對內(nèi)容比較多的頁面尤為重要，用戶可以先查看已經(jīng)下載渲染的內(nèi)容愿伴，而不是盯著白屏等待肺魁。

如果把樣式表放在頁面底部，一些瀏覽器為減少重繪隔节，會在 CSS 加載完成以后才渲染頁面鹅经，用戶只能對著白屏干瞪眼，用戶體驗極差怎诫。把樣式表放到文檔的HEAD部分能讓頁面看起來加載地更快瘾晃。

2. 不要使用CSS表達(dá)式
CSS表達(dá)式可以在CSS里執(zhí)行JavaScript，僅IE5-IE7支持幻妓，IE8標(biāo)準(zhǔn)模式已經(jīng)廢棄蹦误。 CSS表達(dá)式超出預(yù)期的頻繁執(zhí)行，頁面滾動肉津、鼠標(biāo)移動時都會不斷執(zhí)行胖缤，帶來很大的性能損耗。

3. 使用<link>替代@import
對于IE某些版本阀圾，@import的行為和放在頁面底部一樣哪廓。所以，不要用它初烘。

4. 不要使用 filter
AlphaImageLoader為IE5.5-IE8專有的技術(shù)涡真，和CSS表達(dá)式一樣分俯，放進博物館吧。IE專有的AlphaImageLoader濾鏡可以用來修復(fù)IE7之前的版本中半透明PNG圖片的問題哆料。在圖片加載過程中缸剪，這個濾鏡會阻塞渲染，卡住瀏覽器东亦，還會增加內(nèi)存消耗而且是被應(yīng)用到每個元素的杏节，而不是每個圖片，所以會存在一大堆問題典阵。

注意７苡妗！壮啊！這里所說的不是 CSS3 Filter

五嫉鲸、Javasript

1. 把腳本放在頁面底部
瀏覽器下載腳本時，會阻塞其他資源并行下載歹啼，即使是來自不同域名的資源玄渗。因此，最好將腳本放在底部狸眼，以提高頁面加載速度藤树。

一些特殊場景無法將腳本放到頁面底部的，可以考慮<script>的以下屬性：

• defer 屬性拓萌；
• HTML5 新增的async屬性岁钓。

2. 使用外部JavaScript和CSS
外部JavaScript和CSS文件可以被瀏覽器緩存，在不同頁面間重用司志，也能降低頁面大小甜紫。

當(dāng)然，實際中也需要考慮代碼的重用程度骂远。如果僅僅是某個頁面使用到的代碼囚霸，可以考慮內(nèi)嵌在頁面中，減少HTTP請求數(shù)激才。另外拓型，可以在首頁加載完成以后，預(yù)先加載子頁面的資源瘸恼。

3. 壓縮JavaScript和CSS
壓縮代碼可以移除非功能性的字符（注釋劣挫、空格、空行等）东帅，減少文件大小压固，提高載入速度。

得益于Node.js的流行靠闭，開源社區(qū)涌現(xiàn)出許多高效帐我、易用的前端優(yōu)化工具坎炼，JavaScript 和CSS壓縮類的，不敢說多如牛毛拦键，多入雞毛倒是一點不夸張谣光，如[UglifyJS 2] (github.com/mishoo/Ugli…)、csso芬为、cssnano 等萄金。

對于內(nèi)嵌的CSS和JavaScript，也可以通過htmlmin等工具壓縮媚朦。

這些項目都有Gulp氧敢、Webpack等流行構(gòu)建工具的配套版本。

4. 移除重復(fù)腳本
重復(fù)的腳本不僅產(chǎn)生不必要的HTTP請求莲镣，而且重復(fù)解析執(zhí)行浪費時間和計算資源福稳。

5. 減少DOM操作
JavaScript 操作 DOM 很慢涎拉，尤其是 DOM 節(jié)點很多時瑞侮。

使用時應(yīng)該注意：

• 緩存已經(jīng)訪問過的元素；
• 使用DocumentFragment暫存DOM鼓拧，整理好以后再插入DOM樹半火；
• 操作className，而不是多次讀寫style季俩；
• 避免使用JavaScript修復(fù)布局钮糖。

6. 使用高效的事件處理

• 減少綁定事件監(jiān)聽的節(jié)點，如通過事件委托酌住；
• 盡早處理事件店归，在DOMContentLoaded即可進行，不用等到load以后酪我。

六消痛、圖片

1. 優(yōu)化圖片
嘗試把GIF格式轉(zhuǎn)換成PNG格式，看看是否節(jié)省空間都哭。在所有的PNG圖片上運行pngcrush（或者其它PNG優(yōu)化工具）秩伞。

YDN列出的相關(guān)工具缺乏易用性，建議參考以下工具

• imagemin
• imageoptim.com

TODO:

• PNG 終極優(yōu)化欺矫；
• Webp 相關(guān)內(nèi)容纱新；
• SVG 相關(guān)內(nèi)容。

PNG終極優(yōu)化

• Most Effective Method to Reduce and Optimize PNG Images
• Clever PNG Optimization Techniques

2. 優(yōu)化CSS Sprite

• 水平排列Sprite中的圖片穆趴，垂直排列會增加圖片大辛嘲；
• Spirite中把顏色較近的組合在一起可以降低顏色數(shù)未妹，理想狀況是低于256色以適用PNG8格式簿废；
• 不要在Spirite的圖像中間留有較大空隙勺疼。減少空隙雖然不太影響文件大小，但可以降低用戶代理把圖片解壓為像素圖的內(nèi)存消耗捏鱼，對移動設(shè)備更友好执庐。

3. 不要在HTML中縮放圖片
不要使用<img>的width、height縮放圖片导梆，如果用到小圖片轨淌，就使用相應(yīng)大小的圖片。如果需要

<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 

那么圖片本身（mycat.jpg）應(yīng)該是100x100px的看尼，而不是去縮小500x500px的圖片递鹉。

很多 CMS 和 CDN 都提供圖片裁切功能。

補充：設(shè)置圖片的寬和高藏斩，以免瀏覽器按照「猜」的寬高給圖片保留的區(qū)域和實際寬高差異躏结，產(chǎn)生重繪。

4. 使用體積小狰域、可緩存的favicon.ico
Favicon.ico一般存放在網(wǎng)站根目錄下媳拴，無論是否在頁面中設(shè)置，瀏覽器都會嘗試請求這個文件兆览。

所以確保這個圖標(biāo)：

• 存在（避免 404）屈溉；
• 盡量小，最好小于 1K抬探；
• 設(shè)置較長的過期時間子巾。

對于較新的瀏覽器，可以使用PNG格式的favicon小压。

七线梗、移動端

1. 保證所有組件都小于25K
這個限制是因為iPhone不能緩存大于25K的組件，注意這里指的是未壓縮的大小怠益。這就是為什么縮減內(nèi)容本身也很重要仪搔，因為單純的gzip可能不夠。

2. 打包內(nèi)容為分段（multipart）文檔
把各個組件打包成一個像有附件的電子郵件一樣的復(fù)合文檔里溉痢，可以用一個HTTP請求獲取多個組件（記住一點：HTTP請求是代價高昂的）僻造。用這種方式的時候，要先檢查用戶代理是否支持（iPhone就不支持）孩饼。

總結(jié)

寫到這里髓削，雅虎的35條軍規(guī)算是介紹完了。條目雖然很多镀娶，但經(jīng)過分類立膛，可以發(fā)現(xiàn)，性能優(yōu)化主要切入點可以從以下幾個方面去考慮：

• 資源本身大小的壓縮優(yōu)化（想辦法減少資源的體積）
• 網(wǎng)絡(luò)請求的全過程（從url地址欄輸入發(fā)送請求開始到返回響應(yīng)包的每個環(huán)節(jié)）
• 瀏覽器渲染的全過程（拿到資源后瀏覽器渲染的每個環(huán)節(jié)）
  因此，要徹底掌握優(yōu)化的方法宝泵，必須對http請求的全過程以及瀏覽器的渲染全過程都有深入的理解好啰。