概述
提高性能，最簡單也是最顯著的方法就是：減少HTTP請求的數(shù)量凌外。每一個HTTP請求除了有TCP開銷外，還包含大量的頭信息。保持最小的獨立請求連接數(shù)可以保證用戶的頁面加載速度更快歉备。讓頁面和其資源文件保持較小的體積將減少網(wǎng)絡用時——對任何互聯(lián)網(wǎng)應用而言，這才是真正的瓶頸匪燕。基于MVC的JavaScript Web富應用開發(fā)
合并型優(yōu)化
- 將多個腳本合并為一個腳本蕾羊， 將多個CSS合并為一個樣式表喧笔，minify github
- 使用CSS Sprites技術合并多張小圖為一張大圖。
感受型優(yōu)化
理解瀏覽器下載資源也很重要龟再，為了加速頁面渲染书闸，瀏覽器并行下載所需的資源，但是對于外部腳本并非如此利凑。
當瀏覽器開始下載外部腳本時浆劲，在外部腳本下載、解析并執(zhí)行完畢之前截碴，不會下載其他內容梳侨。
- 幾乎每一個前端程序員都知道應該把script標簽放在頁面底部。
- 還有一種方法是設置defer屬性——告訴瀏覽器該腳本不會在頁面加載完成之前操作DOM日丹， 類似于在腳本中使用window.onload事件
<script src="foo.js" type="text/javascript" charset="utf-8" defer></script>走哺。這樣實際上并沒有對下載的速度，下載的數(shù)量做出優(yōu)化哲虾，但是用戶會提前看到頁面的內容與相應的樣式丙躏，提高感受速度。
就近存儲型優(yōu)化
緩存: 通過設置Expires頭以保證緩存長時間有效束凑，同樣重要的有如何自動使緩存失效(在需主動修改靜態(tài)資源時)晒旅，一種有效的技術就是——在引用資源文件的URL查詢參數(shù)中添加文件修改的時間
<link rel="stylesheet" href="master.css?1296085785">Expires 的升級版Cache-Control，瀏覽器 HTTP 協(xié)議緩存機制詳解使用CDN汪诉，內容分發(fā)網(wǎng)絡(Content_delivery_network)為你的站點提供靜態(tài)資源內容服務废恋，以減少它們的加載時間。使用就近的服務器響應資源扒寄。
內容分發(fā)網(wǎng)絡節(jié)點會在多個地點鱼鼓，多個不同的網(wǎng)絡上擺放。這些節(jié)點之 間會動態(tài)的互相傳輸內容该编，對用戶的下載行為最優(yōu)化迄本，并借此減少內容供應者所需要的帶寬成本，改善用戶的下載速度课竣，提高系統(tǒng)的穩(wěn)定性嘉赎。
內容分發(fā)網(wǎng)絡所需要的節(jié)點數(shù)量隨著需求而不同，依照所需要服務的對象大小于樟，有可能有數(shù)萬臺服務器公条。
壓縮型優(yōu)化
將js文件壓縮，工具有YUI Compressor等迂曲。
Gzip壓縮
- 瀏覽器發(fā)送Http request 給Web服務器, request 中有Accept-Encoding: gzip, deflate靶橱。 (告訴服務器， 瀏覽器支持gzip壓縮)
- Web服務器接到request后， 生成原始的Response, 其中有原始的Content-Type和Content-Length抓韩。
- Web服務器通過Gzip，來對Response進行編碼鬓长， 編碼后header中有Content-Type和Content-Length(壓縮后的大小)谒拴， 并且增加了Content-Encoding:gzip. 然后把Response發(fā)送給瀏覽器。
- 瀏覽器接到Response后涉波，根據(jù)Content-Encoding:gzip來對Response 進行解碼英上。 獲取到原始response后， 然后顯示出網(wǎng)頁啤覆。
待續(xù): 關于圖片的優(yōu)化
附雅虎14條
- 減少HTTP請求
- 使用內容分發(fā)網(wǎng)絡
- 添加Expires頭
- 壓縮組件
- 將樣式表放在頂部
- 將腳本放在底部
- 避免CSS表達式
- 使用外部JavaScript和CSS
- 減少DNS查找
- 精簡JavaScript
- 避免重定向
- 刪除重復腳本
- 配置ETag
- 使Ajax可緩存
