前端優化的**準則指導著前端頁面的優化策略：只有10%-20%的終端使用者響應時間花在接受請求的html文件上，剩下的80%-90%時間花在為html文件所引用的所有元件（、指令碼、樣式表等）進行的http請求上。因此，改善響應時間的最簡單途徑就是減少元件的數量，並由此減少http請求的數量。當然很多人就會說，既然這樣，那我們就減少頁面元件的數量不就ok了嗎？那你試試，你會掀起一場效能優化和產品設計之間的大pk。所以，我們要減少http請求是要平衡效能和設計的。如果找到這個平衡點呢？書中從以下幾個方面做了介紹，我逐一說明：
那麼我們可以把這兩個http請求變成乙個嗎？答案當然是可以的，這就是地圖：允許在一張上關聯多個url，而目標url的選擇取決於使用者單擊了上的哪個位置。這樣上面京東兩個圖示合併成一張，這樣的http請求就減少了乙個。
示例**如下：
④ 樣式表的合併
將頁面樣式定義、指令碼、頁面本身**嚴格區分開，但是樣式表、指令碼也不是分割越細越好，因為沒多引用乙個樣式表就增加一次htpp請求，能合併的樣式表盡量合併。乙個**有乙個公用樣式表定義，每個頁面只要有乙個樣式表就ok啦。
通過以上四個努力之後，你會發現你的網頁響應時間最多能減少一半，這不是作者說大話，也不是我狂吹，我親手用我的移動**首頁做了乙個嘗試，本地測試之後響應時間能減少40%左右。所以減少頁面http請求數量，是乙個很重要的原則。遵循此原則可以同時改善首次訪問和後續訪問的響應時間，而每乙個**的首次響應時間會決定使用者之後還來不來的重要原因。
什麼叫內容發布網路（cdn）？它是一組分布在多個不同地理位置的web伺服器，用於更加有效地向使用者發布內容。主要用於發布頁面靜態資源：、css檔案、js檔案等。如此，能輕易地提高響應速度。
關於cdn的具體詳細原理以及優缺點，各位可以自行詢問度娘或者google。
瀏覽器使用快取來減少http請求的資料，並減小http響應的大小，使頁面載入更快。web伺服器使用expires頭來告訴瀏覽器它可以使用乙個元件的當前副本，直到指定的deadline為止。http規範中稱此頭為：在這一時間之後響應被認為失效。
個人對這塊表示不想使用，其實就是一句話，把一些css、js、在首次訪問的時候全部快取到瀏覽器本地，從我做移動**的過程中發現，其實沒有這麼複雜，完全可以使用html5提供的本地快取機制就ok了。關於html5本地快取機制，各位可以查閱相關資料。後續我也會對html5的快取機制進行介紹的。
如果將css樣式定義放在頁面中或者頁面底部，會出現短暫白屏或者某一區域短暫白板的情況，這和瀏覽器的運營機制有關的，不管頁面如何載入，頁面都是逐步呈現的。所以在每做乙個頁面的時候，用link標籤把每乙個樣式表定義放在head中。
瀏覽器在載入css檔案時，頁面逐步呈現會被阻止，直到所有css檔案載入完畢，所以要把css檔案的引用放到head中去，這樣在載入css檔案時不會組織頁面的呈現。但是對於js檔案，在使用的時候，它下面所有也頁面內容的呈現都會被阻塞，將指令碼放在頁面越靠下的地方，就意味著越多的內容能夠逐步呈現。
css表示式是動態玩css的一種很強大的方式，但是強大的同時也存在很高的危險性。因為css表示式的頻繁求值會導致css表示式效能低下。如果真想玩css表示式，可以選用只求值一次的表示式或者使用事件處理來改變css的值。
內聯js和css其實比外部檔案有更快的響應速度，那為什麼還要用外部呢？因為使用外部的js和css可以讓瀏覽器快取他們，這樣不僅html文件大小減少，而且不會增加http請求數量。
另外，使用外部js和css可以提高元件的可復用性。
dns查詢有時間開銷，通常乙個瀏覽器查詢乙個給定主機名的ip位址需要20-120ms。
快取dns：快取dns查詢可以很好地提高網頁效能，一旦快取了dns查詢，之後對於相同主機名的請求就無需進行再次的dns查詢，至少短時間內不需要。
所以在使用頁面中url、、js檔案、css檔案等時，不要使用過多不同的主機名。
如何精簡？最初始的精簡方式就是移除不必要的字元減小js檔案大小，改善載入時間。包括所有的注釋、不必要的空白字元。
但是我一般很少使用混淆，乙個現在網際網路時代，**沒有必要整的那麼神秘，大可以大家一起share，天下**一起抄，只要抄出自己的特色就ok了。而且一旦使用混淆，對於js**的維護和除錯都很複雜，因為有時候混淆之後的js**完全看不懂。
其實實際開發過程中，從檔案大小和**可復用性來說，不僅僅是js**需要精簡，css**一樣也很需要精簡。
重定向的英文是redirect，用於將使用者從乙個url重新跳轉到另乙個url。最常見的redirect就是301和302兩種。
關於重定向的效能影響這裡就不說了，自行查閱相關資料吧。
在我們實際開發中避免重定向最簡單也最容易被忽視的乙個問題就是，設定url的時候，最後的「/」，有些人有時候會忽略，其實你少了「/」，這時候的url就被重定向了，所以在給頁面鏈結加url的時候切記最後的「/」不可丟。
重複的js**除了有不必要的http請求之外，還會浪費執行js的時間。
將你使用的js**模組化，可以很好地避免這個問題，至於js模組化如何實現，現在有很多可以使用的開源框架，我用的比較多的是我們公司玉伯的sea.js。
etag（entity tag），實體標籤，是web伺服器和瀏覽器使用者確認快取元件的有效性的一種機制。
寫的很複雜，對我這種非專業的前端開發人員來說，有點過了，關於這個原則有興趣的自己看吧。
針對頁面中主動的ajax請求返回的資料要快取到本地，當然這個是針對短期內不會變化的資料。如果不確定資料變化週期的話，可以增加乙個修改標識的判斷，我正常處理過程中會給一些ajax請求返回的資料增加乙個md5值的判斷，每次請求會判斷當前md5是否變化，如果變化了取最新的資料，如果不變化，則不變。
**
Web前端效能優化的14條規則
部落格分類 web前端測試 1.減少http請求 條件get請求每次都會產生乙個304的請求 4.壓縮元件 在server端對response資源進行壓縮再傳給瀏覽器,一般使用gzip 5.將css放再頂部 能加快頁面內容顯示,並且能避免頁面產生白屏 6.將js放在底部 7.避免css表示式 8.將...
效能提公升的14條規則（九）
規則9 減少dns查詢 internet是通過ip位址來查詢伺服器的。由於ip位址很難記憶，通常使用包含主機名的urllai 來取代它，但當瀏覽器傳送其請求時，ip位址仍然是必需的。這就是domain name system dns 所處的角色。dns將主機名對映到ip位址上，就像 本將人名對映到他...
效能提公升的14條規則（三）
規則3 新增expires頭 在設計web頁面的時候，首次訪問的響應時間並不是唯一需要考慮的。如果是這樣的話，我們可以將規則1發揮到極致，並且不再頁面上放置任何 指令碼和樣式表。然而，我們都知道，指令碼和樣式表能夠加強使用者體驗，儘管這意味著頁面需要花更長的時間進行載入。這一章介紹的規則3展示了如何...