規(guī)則01：盡量減少HTTP請求
前端優(yōu)化的黃金準則指導著前端頁面的優(yōu)化策略：只有10%-20%的最終用戶響應時間花在接受請求的HTML文檔上，剩下的80%-90%時間花在為HTML文檔所引用的所有組件（圖片瘫筐、腳本塞茅、樣式表等）進行的HTTP請求上花盐。因此，改善響應時間的最簡單途徑就是減少組件的數(shù)量，并由此減少HTTP請求的數(shù)量。當然很多人就會說朵耕，既然這樣，那我們就減少頁面組件的數(shù)量不就OK了嗎淋叶？那你試試阎曹，你會掀起一場性能優(yōu)化和產(chǎn)品設計之間的大PK。所以，我們要減少HTTP請求是要平衡性能和設計的处嫌。如果找到這個平衡點呢栅贴？書中從以下幾個方面做了介紹，我逐一說明：
① 圖片地圖
初看“圖片地圖”四個字熏迹，對非專業(yè)的前端人員來說一頭霧水檐薯，我的第一印象就是這樣的，咱們以京東的移動站點為例注暗，右側用戶和購物車的圖標坛缕，正常實現(xiàn)我會選擇如下方式：
<a href=”用戶跳轉頁面URL”>
<div class=”定義用戶icon顯示的樣式表”></div>
</a>
<a href=”購物車跳轉頁面URL”>
<div class=” 定義用戶icon顯示的樣式表”></div>
</a>
這種方式無可厚非的，但是兩張圖片就有兩個HTTP請求捆昏，這明顯是增加了頁面中的HTTP請求赚楚。
那么我們可以把這兩個HTTP請求變成一個嗎？答案當然是可以的骗卜，這就是圖片地圖：允許在一張圖片上關聯(lián)多個URL宠页，而目標URL的選擇取決于用戶單擊了圖片上的哪個位置。這樣上面京東兩個圖標合并成一張圖片膨俐，這樣圖片的HTTP請求就減少了一個勇皇。
示例代碼如下：
<img src=”合并后的圖片”>
<map name=”map1”>
<area shape=”rect” coords=”0,0,40,40” href=”用戶跳轉頁面URL”>
<area shape=”rect” coords=”50,0,90,40” href=”購物車跳轉頁面URL”>
</map>
不過圖片地圖只支持矩形形狀，其他形狀不支持焚刺。
② 請CSS喝“雪碧”（CSS Sprites）
CSS Sprites一句話：將多個圖片合并到一張單獨的圖片敛摘，這樣就大大減少了頁面中圖片的HTTP請求。
③ 內(nèi)聯(lián)圖片和腳本
使用data:URL（Base64編碼）模式直接將圖片包含在Web頁面中而無需進行HTTP請求乳愉。
但是此種方法存在明顯缺陷：
- 不受IE的歡迎兄淫；
- 圖片太大不宜采用這種方式，因為Base64編碼之后會增加圖片大小蔓姚，這樣頁面整體的下載量會變大捕虽；
- 內(nèi)聯(lián)圖片在頁面跳轉的時候不會被緩存。（大圖片可以使用瀏覽器的本地緩存坡脐，在首次訪問的時候保存到瀏覽器緩存中泄私，典型的是HTML5的manifest緩存機制以及LocalStorage等）。
④ 樣式表的合并
將頁面樣式定義备闲、腳本晌端、頁面本身代碼嚴格區(qū)分開，但是樣式表恬砂、腳本也不是分割越細越好咧纠，因為沒多引用一個樣式表就增加一次HTPP請求，能合并的樣式表盡量合并泻骤。一個網(wǎng)站有一個公用樣式表定義漆羔，每個頁面只要有一個樣式表就OK啦梧奢。
通過以上四個努力之后，你會發(fā)現(xiàn)你的網(wǎng)頁響應時間最多能減少一半演痒，這不是作者說大話亲轨，也不是我狂吹，我親手用我的移動網(wǎng)站首頁做了一個嘗試嫡霞，本地測試之后響應時間能減少40%左右瓶埋。所以減少頁面HTTP請求數(shù)量，是一個很重要的原則诊沪。遵循此原則可以同時改善首次訪問和后續(xù)訪問的響應時間养筒，而每一個網(wǎng)站的首次響應時間會決定用戶之后還來不來的重要原因。
規(guī)則02：使用內(nèi)容發(fā)布網(wǎng)絡（CDN的使用）
什么叫內(nèi)容發(fā)布網(wǎng)絡（CDN）端姚？它是一組分布在多個不同地理位置的Web服務器晕粪，用于更加有效地向用戶發(fā)布內(nèi)容。主要用于發(fā)布頁面靜態(tài)資源：圖片渐裸、css文件巫湘、js文件等。如此昏鹃，能輕易地提高響應速度尚氛。
關于CDN的具體詳細原理以及優(yōu)缺點，各位可以自行詢問度娘或者google洞渤。
規(guī)則03：添加Expires頭
瀏覽器使用緩存來減少HTTP請求的數(shù)據(jù)阅嘶，并減小HTTP響應的大小，使頁面加載更快载迄。Web服務器使用Expires頭來告訴瀏覽器它可以使用一個組件的當前副本讯柔，直到指定的deadline為止。HTTP規(guī)范中稱此頭為：在這一時間之后響應被認為失效护昧。
個人對這塊表示不想使用魂迄，其實就是一句話，把一些css惋耙、js捣炬、圖片在首次訪問的時候全部緩存到瀏覽器本地，從我做移動網(wǎng)站的過程中發(fā)現(xiàn)绽榛，其實沒有這么復雜遥金，完全可以使用HTML5提供的本地緩存機制就OK了。關于HTML5本地緩存機制蒜田，各位可以查閱相關資料。后續(xù)我也會對HTML5的緩存機制進行介紹的选泻。
規(guī)則04：壓縮組件（使用Gzip方式）
書中關于壓縮從gzip壓縮方式到如何壓縮講了很多冲粤，我想直接跳過美莫，對于做PC網(wǎng)站或者移動網(wǎng)站來說，急需要壓縮的是css文件和js文件梯捕，至于如何壓縮厢呵，網(wǎng)上有很多在線工具，去挑選一個自己用的順手看的順眼的就好傀顾，當然也有人選擇對HTML進行壓縮襟铭，這樣也可以。但是實際工作中我沒有這么做短曾。之所謂沒有這么做寒砖，是因為我覺得很麻煩。不要鄙視我嫉拐，畢竟我不是一個真正意義上的前端工程師哩都，哈哈！
規(guī)則05：將CSS樣式表放在頂部
如果將css樣式定義放在頁面中或者頁面底部婉徘，會出現(xiàn)短暫白屏或者某一區(qū)域短暫白板的情況漠嵌，這和瀏覽器的運營機制有關的，不管頁面如何加載盖呼，頁面都是逐步呈現(xiàn)的儒鹿。所以在每做一個頁面的時候，用Link標簽把每一個樣式表定義放在head中几晤。
規(guī)則06：將javascript腳本放在底部
瀏覽器在加載css文件時约炎，頁面逐步呈現(xiàn)會被阻止，直到所有css文件加載完畢锌仅，所以要把css文件的引用放到head中去章钾，這樣在加載css文件時不會組織頁面的呈現(xiàn)。但是對于js文件热芹，在使用的時候贱傀，它下面所有也頁面內(nèi)容的呈現(xiàn)都會被阻塞，將腳本放在頁面越靠下的地方伊脓，就意味著越多的內(nèi)容能夠逐步呈現(xiàn)府寒。
規(guī)則07：避免使用CSS表達式
CSS表達式是動態(tài)玩CSS的一種很強大的方式，但是強大的同時也存在很高的危險性报腔。因為css表達式的頻繁求值會導致css表達式性能低下株搔。如果真想玩css表達式，可以選用只求值一次的表達式或者使用事件處理來改變css的值纯蛾。
規(guī)則08：使用外部javascript和CSS
內(nèi)聯(lián)js和css其實比外部文件有更快的響應速度纤房，那為什么還要用外部呢？因為使用外部的js和css可以讓瀏覽器緩存他們翻诉，這樣不僅HTML文檔大小減少炮姨，而且不會增加HTTP請求數(shù)量捌刮。
另外，使用外部js和css可以提高組件的可復用性舒岸。
規(guī)則09：減少DNS查詢
DNS查詢有時間開銷绅作，通常一個瀏覽器查找一個給定主機名的IP地址需要20-120ms。
緩存DNS：緩存DNS查詢可以很好地提高網(wǎng)頁性能蛾派，一旦緩存了DNS查詢俄认，之后對于相同主機名的請求就無需進行再次的DNS查找，至少短時間內(nèi)不需要洪乍。
所以在使用頁面中URL眯杏、圖片、js文件典尾、css文件等時役拴，不要使用過多不同的主機名。
規(guī)則10：精簡javascript
如何精簡钾埂？最初始的精簡方式就是移除不必要的字符減小js文件大小河闰，改善加載時間。包括所有的注釋褥紫、不必要的空白字符姜性。
高級一點的精簡方式就是：混淆。它不但會移除不必要的字符髓考，還會改寫代碼部念，比如函數(shù)和變量的名字會被改成很短的字符串，這樣使js代碼更簡練更難閱讀氨菇。
但是我一般很少使用混淆儡炼，一個現(xiàn)在互聯(lián)網(wǎng)時代，代碼沒有必要整的那么神秘查蓉，大可以大家一起share乌询，天下代碼一起抄，只要抄出自己的特色就ok了豌研。而且一旦使用混淆妹田，對于js代碼的維護和調(diào)試都很復雜，因為有時候混淆之后的js代碼完全看不懂鹃共。
其實實際開發(fā)過程中鬼佣，從文件大小和代碼可復用性來說，不僅僅是js代碼需要精簡霜浴，css代碼一樣也很需要精簡晶衷。
規(guī)則11：避免重定向
重定向的英文是Redirect，用于將用戶從一個URL重新跳轉到另一個URL。最常見的Redirect就是301和302兩種晌纫。
關于重定向的性能影響這里就不說了驻龟，自行查閱相關資料吧。
在我們實際開發(fā)中避免重定向最簡單也最容易被忽視的一個問題就是缸匪，設置URL的時候，最后的“/”类溢，有些人有時候會忽略凌蔬，其實你少了“/”，這時候的URL就被重定向了闯冷，所以在給頁面鏈接加URL的時候切記最后的“/”不可丟砂心。
規(guī)則12：刪除重復腳本
重復的js代碼除了有不必要的HTTP請求之外，還會浪費執(zhí)行js的時間蛇耀。
將你使用的js代碼模塊化辩诞，可以很好地避免這個問題，至于js模塊化如何實現(xiàn)纺涤，現(xiàn)在有很多可以使用的開源框架译暂，我用的比較多的是我們公司玉伯的Sea.js。
規(guī)則13：配置ETag
Etag（Entity Tag）撩炊，實體標簽外永，是Web服務器和瀏覽器用戶確認緩存組件的有效性的一種機制。
寫的很復雜拧咳，對我這種非專業(yè)的前端開發(fā)人員來說伯顶，有點過了，關于這個原則有興趣的自己看吧骆膝。
規(guī)則14：使Ajax可緩存
針對頁面中主動的Ajax請求返回的數(shù)據(jù)要緩存到本地祭衩，當然這個是針對短期內(nèi)不會變化的數(shù)據(jù)。如果不確定數(shù)據(jù)變化周期的話阅签，可以增加一個修改標識的判斷掐暮，我正常處理過程中會給一些Ajax請求返回的數(shù)據(jù)增加一個MD5值的判斷，每次請求會判斷當前MD5是否變化愉择，如果變化了取最新的數(shù)據(jù)劫乱，如果不變化，則不變锥涕。
做前端頁面衷戈，尤其是移動網(wǎng)站的頁面，我悶所記住的準則就是：盡量減少頁面大小层坠，盡量降低頁面響應時間殖妇。在頁面性能和交互設計之中找平衡點。
