資訊專欄INFORMATION COLUMN
摘要：最少化請求用戶在瀏覽網頁時，超過的時間都是在請求下載網頁資源，包括圖片，樣式，腳本，等等，減少這些資源的下載請求數目，便成了讓網頁提速的關鍵。但需要提的是，中對請求的長度限制在字節以內參考，所以如果超過這個長度，只能使用請求。
前端工程師常常被提起網站性能，如何讓網站訪問更快等問題，本文就做個總結。
最少化HTTP請求用戶在瀏覽網頁時，超過80%的時間都是在請求下載網頁資源，包括圖片，樣式，腳本，Flash等等，減少這些資源的下載請求數目，便成了讓網頁提速的關鍵。
當然，如果頁面很簡單，資源少，網頁請求自然就少，如果網頁內容很多，我們如何做到減少資源請求數呢？這里有幾個方法：
合并靜態文件，將所有腳本、樣式文件合并到一個文件里，可以大大減少HTTP請求數。但如果每個頁面的靜態文件都不一樣，所有文件都合并到一起也會帶來麻煩，所以需要在開發過程中均衡處理合并。
CSS雪碧圖（Sprites），將CSS中用到的背景圖片合并到一張圖片上，然后通過background-position去定位想用到的圖片塊，可以減少圖片請求數。
使用data: URL scheme將圖片數據寫入到HTML或CSS文件中，雖然增加了HTML或CSS文件大小，但必要時，還是需要這么做來減少HTTP請求數。
將CSS文件放在頭部當頁面內容很多時，我們希望邊加載邊正確的顯示給用戶，你可能想把CSS文件放到頁面底部，這樣就可以優先展示用戶內容，但這會引起一個嚴重的問題，用戶先看到的是一個沒有樣式的頁面，之后閃一下（頁面重繪）又重新定義了樣式，這其實很影響用戶體驗。而最好的做法就是遵循HTML規范，把CSS文件放到文檔的HEAD標簽里。
將JS文件放在底部JS腳本所引起的問題是阻塞了瀏覽器的并行下載，HTTP/1.1規范指出：每個域名下的資源的并行下載數量不得超過兩個，當瀏覽器在下載JS文件時，不會進行其他下載，即使資源被分發在不同的域名。
避免CSS表達式如果要動態設置CSS屬性，CSS表達式（CSS expressions）就顯得尤其強（wei）大（xian），它在IE5.0中開始被支持，但又在IE8.0中被廢棄。比如以下樣式，背景色會在每個小時都被定義一次。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
可以看粗，expression方法接受一個Js語句去設置CSS屬性值，它只能被IE識別，所以在跨瀏覽器開發時（兼容IE），它就有了用武之地。
但是它的問題在于它執行的非常頻繁，網頁渲染時執行，窗口改變時執行，甚至頁面滾動時、用戶移動鼠標時它都會執行！
減少CSS表達式執行次數的方法是：當頁面渲染完成后就給CSS屬性設定一個明確的值，或者在Js中監聽網頁事件，事件觸發時再去設置CSS屬性值。如果一定要使用CSS表達式，請記住，它很可能會被執行成千上萬次。
外鏈CSS和JS文件之所以外鏈CSS和JS文件會使頁面更快，是因為它們可以被瀏覽器緩存，否則每次請求HTML文檔時都會重復下載CSS和JS代碼，雖然內聯CSS和JS可以減少HTTP請求數，但是使得HTML文檔更大。
如果頁面比較簡單，JS和CSS都很少，使用內聯代碼減少HTTP請求，反而會讓頁面更快。
壓縮靜態文件市面上的壓縮工具有很多，比如JSmin， YUI Compressor，GCC，pngcrush等等，可以根據業務需要選擇工具去壓縮靜態文件。
Ajax中優先選擇GET請求使用XMLHttpRequest對象進行POST請求時，我們發現，它其實是分為兩步完成，現發送請求頭信息，再發送請求數據，所以最好使用GET請求，只需要發送一個TCP數據包（除非有很多Cookie數據），而且GET請求的數據可以被緩存。但需要提的是，IE中對GET請求的URL長度限制在2K字節以內(參考support.microsoft.com)，所以如果URL超過這個長度，只能使用POST請求。
延遲加載開發過程中，想想這個元素或腳本是不是頁面初始化所必須的，如果不是，就可以考慮延遲加載它們，比如默認被折疊的元素、需要用戶觸發才需要顯示的元素以及首屏之后的頁面元素等等。
預加載預加載看上去和上條矛盾，其實不然。當瀏覽器處于空閑時，我們可以預先加載之后會使用到的頁面的元素（比如：圖片，JS，CSS），之后頁面再使用這些元素時會優先從緩存中讀取。預加載分為這兩種形式：
無條件預加載(Unconditional)：頁面一旦加載完成就去下載額外的元素，而這個元素并不一定在這個頁面上被使用，比如Google首頁加載了一張背景圖，這是為了搜索結果頁所準備的。
條件預加載(Conditional)：這是基于用戶行為做出下一步猜測而去加載元素，比如當你輸入文字時會根據文字去下載不同元素。
減少DOM數如果一個頁面太復雜，意味著下載時間更長，同時JS訪問DOM的速度也會變慢。減少DOM數并不意味著需要移除內容，而是我們可以使用更合理的HTML標簽。還在使用Table布局？頁面一堆DIV標簽，也許我們有更好更語義化的布局方法。
想知道頁面的DOM數量很簡單，只需要一行JS語句：
document.getElementsByTagName("*").length
多域名分發內容
使用多域名分發內容可以可以增加瀏覽器并行下載數，由于DNS解析也要耗時，一般2-4個域名比較合適。比如你可以把HTML或JSP，PHP等文檔文件放在www.example.org這個域名上，而把靜態文件放在static1.example.or或者static2.example.org上。
減少iframe的使用iframe可以讓HTML文檔嵌套在另一個HTML文檔內，想要更好的使用它們就必須知道它們的工作原理。
iframe優點：
* 延遲加載廣告等第三方內容
* 提供安全沙箱
* 并行下載腳本
iframe缺點：
* 代價昂貴
* 阻止父級頁面的加載
* 非語義化
Cookie常常被用在身份驗證或者存儲個人信息，他會通過HTTP頭信息在服務端和瀏覽器之間傳輸，為了減少HTTP響應時間，我們有必要減小Cookie。通常有以下幾個方法：
清除不必要的Cookie
盡量減小Cookie內容的長度
在適當的域中設置Cookie，保證其他子域不受影響
設定合適的Cookie的過期時間
更多關于Cookie的信息可以參考 When the Cookie Crumbles
減少DOM操作頻繁用JS操作DOM的開銷很大，我們可以通過以下幾種方式減少這種開銷：
1. 緩存獲取到的DOM元素
2. 批量處理元素，一次性更新到文檔
3. 盡量避免用JS改變頁面布局
當過多的元素被綁定頻繁被觸發的事件，頁面響應會變慢，這時我們就需要采用事件委托。如果你不需要等待所有圖片下載完成，可以使用DOMContentLoaded事件來代替onload事件。
使用link而不是@import引入CSS之前提到過，要將CSS文件放在HEAD標簽里，在IE中，@import相當于把CSS文件放到了頁面底部，所以最好不用這么使用。
避免使用CSS圖片濾鏡在IE7一下，AlphaImageLoader用于解決PNG圖片透明問題，如果圖片設置了這個屬性，當它在下載時，會阻塞瀏覽器渲染頁面，甚至讓瀏覽器卡死，這個問題是很嚴重。
可緩存的favicon.icofavicon.ico是網站根目錄的一張圖片，即便你不在HTML中設置它，瀏覽器也會發出請求，并且帶上Cookie等信息。
想要較少favicon.ico帶來的不良影響，需要做到：
1. 文件小，最好在1K一下
2. 在HTTP header中設置適當的過期時間(Expires)
空的圖片src屬性有三種形式：
HTML
CSS
.class{background:url("")}
JS
var img = new Image(); img.src = "";
這么做各瀏覽器發出請求情況各有差異，具體如下：
* IE會向頁面的目錄發出請求；
* Safari和Chrome會向當前頁面自己發出請求；
* Firefox 3及一下版本和Safari一樣，向當前頁面自己發出請求；
* Firefox 4及以上版本和Opera不發出請求；
本文粗譯自http://developer.yahoo.com/performance/rules.html，有所刪減并加了很多自己的理解。如果有錯誤或不恰當的地方，歡迎指正。
有些知識點只是粗描淡寫，比如靜態資源并行下載數、@import各瀏覽器表現差異等，歡迎在評論中詳細討論。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110853.html
摘要：最少化請求用戶在瀏覽網頁時，超過的時間都是在請求下載網頁資源，包括圖片，樣式，腳本，等等，減少這些資源的下載請求數目，便成了讓網頁提速的關鍵。但需要提的是，中對請求的長度限制在字節以內參考，所以如果超過這個長度，只能使用請求。 前端工程師常常被提起網站性能，如何讓網站訪問更快等問題，本文就做個總結。 最少化HTTP請求 用戶在瀏覽網頁時，超過80%的時間都是在請求下載網頁資源，包括...
摘要：最初，也在使用，并且最初看來功能安好。和的區別最大的區別在于托管于而不是。存在的問題在使用中，我們發現存在的問題主要表現在兩方面。使用考慮到的獨立性，我們設計了一個來管理所有，并使用和建立通訊。 在 FoxOne 1.5.1 版更新中，打開各個交易所網頁的速度得到了巨大提升。 我們分別在不同的網絡環境下，測算了新版 FoxOne 在 Dom 加載和頁面加載條件下的所需時間： showI...
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
閱讀 3820·2021-10-12 10:12
閱讀 1453·2021-10-11 10:58
閱讀 2290·2021-10-09 10:01
閱讀 2597·2021-09-24 09:48
閱讀 2699·2021-09-09 11:38
閱讀 3526·2019-08-30 15:44
閱讀 1724·2019-08-30 14:22
閱讀 518·2019-08-29 12:42
