前端零碎問題（三）前端優化

前端頁面的優化，老生常談了，目前公認優化方案中最爲突出的就是yahoo的34條軍規了，附上

• 1.減小HTTP請求：提供性能首先作的一步，這是改進首次訪問用戶等待時間的最重要的方法。

  • 合併文件：如合併css文件、腳本文件（但要權衡利弊，一個文件太大並非最好的辦法）
  • css sprite：利用css-background相關元素進行背景圖絕對定位
  • 圖片地圖：把多張圖片整合到一張圖片中（只有在圖片的全部組成部分在頁面中是緊挨在一塊兒的時候可用，如導航欄，不具有可讀性，座標會比較繁瑣易出錯，不推薦使用）
  • 內聯圖象 使用 data: URL scheme 在實際的頁面嵌入圖像數據

• 2.減小DNS查找次數：輸入域名後DNS解析器就會返回這個域名對應的IP地址，這個解析也是須要時間的，這段時間內瀏覽器什麼都不會作，直到解析完畢。（通常爲服務端配置）

  • 緩存DNS查找改善頁面性能：須要一個特定的緩存服務器
  • 減小主機名的數量能夠減小 DNS 查找次數，還能夠減小頁面中並行下載的數量

• 3.避免跳轉 跳轉是使用301和302代碼實現的

  • 在寫頁面中跳轉的鏈接時，加上末尾的斜槓（/）。

• 4.可緩存的AJAX，AJAX在應用時帶來了很大的方便，但異步並非即時，優化AJAX響應。

  • Gzip 壓縮文件
  • 減小DNS查找次數
  • 精簡Javascript
  • 避免跳轉
  • 配置ETags

• 5.推遲加載內容

  • 把整個過程按照 onload 事件分隔成兩部分，隱藏或摺疊部分的內容可延遲加載。

• 6.預加載

  • 無條件加載：觸發onload事件時，直接加載額外的頁面內容。
  • 有條件加載：根據用戶的操做來有根據的判斷用戶下面可能去往的頁面並相應的加載頁面內容。
  • 有預期的加載：載入從新設計過的頁面時使用預加載。

• 7.減小DOM元素數量

  • 簡化頁面結構
  • 使用更語義化的標籤來給頁面佈局
  • 使用 document.getElementsByTagName('*').length 能夠查看頁面裏面標籤的總數。

• 8.根據域名劃分頁面內容 把頁面內容劃分爲若干部分可使你最大限度的實現平行下載。

• 9.使iframe的數量最小

  • iframe優勢：解決加載緩慢的第三方內容如圖標和廣告等的加載問題，並行加載腳本。
  • iframe缺點：即便內容爲空，加載也須要時間，會阻止頁面加載，沒有語意。

• 10.不要出現404錯誤

  • 下降用戶體驗，浪費服務器資源

• 11.使用內容分發網絡：使用 CDN 是一個只須要相對簡單地修改代碼實現顯著改善 網站訪問速度的方法。

  • 減小網頁內容的下載時間，提升下載速度還能夠經過CDN(內容分發網絡)來提高

• 12.爲文件頭指定 Expires 或 Cache-Control

  • 對於靜態內容:設置文件頭過時時間 Expires 的值爲「Never expire」(永不過時)
  • 對於動態內容:使用恰當的 Cache-Control 文件頭來幫助瀏覽器進行有條件的請求

• 13.Gzip 壓縮文件內容

  • Gzip一般能夠減小70%網頁內容的大小，包括腳本、樣式表、圖片等文件。Gzip比deflate更高效，主流服務器都有相應的壓縮支持模塊。
  • 值得注意的是pdf文件能夠從須要被壓縮的類型中剔除，由於pdf文件自己已經壓縮，gzip對其效果不大，並且會浪費CPU。

• 14.配置 ETag

  • 雖然標題叫配製ETags，可是這裏你要根據具體狀況進行一些判斷。首先Etag簡單來講是經過一個文件版本標識使得服務器能夠輕鬆判斷該請求的內容是否有所更新，若是沒有就回復304 (not modified)，從而避免下載整個文件。
  • 可是Etags的版本信息即便主流服務器未能很好地支持跨服務器的判斷，好比你從一個服務器集羣中一臺獲得Etags，而後發送到了另外一臺那麼校驗頗有可能會失敗。

• 15.儘早刷新輸出緩衝

  • 網頁後臺程序中咱們知道有個方法叫Response.Flush()，通常咱們調用它都是在程序末尾，但注意這個方法能夠被調用屢次。目的是能夠將現有的緩存中的回覆內容先發給客戶端，讓客戶端「有活幹」。

• 16.使用 GET 來完成 AJAX 請求

  • 瀏覽器在實現XMLHttpRequest POST的時候分紅兩步，先發header，而後發送數據。
  • 而GET卻能夠用一個TCP報文完成請求。
  • 另外GET從語義上來說是去服務器取數據，而POST則是向服務器發送數據，因此咱們使用Ajax請求數據的時候儘可能經過GET來完成。

• 17.把樣式表置於頂部

  • 以link方式引入
  • 讓網頁顯得加載速度更快，由於這樣作可使瀏覽器逐步加載已將下載的網頁內容。
  • 避免瀏覽器裸奔

• 18.避免使用 CSS 表達式(Expression)

  • 在IE5-IE8中支持，其餘瀏覽器中表達式會被忽略
  • 效率低，爲了兼容低版本IE瀏覽器所寫，儘可能避免。

• 19.使用外部 JavaScript 和 CSS

  • 結構、表現、行爲分離
  • 便於管理與維護

• 20.削減 JavaScript 和 CSS

  • 去掉多餘的空行和註釋
  • 合併多餘的腳本和css樣式

• 21.用 link 代替@import

  • 避免使用@import的緣由很簡單，由於它至關於將css放在網頁內容底部。

• 22.避免使用濾鏡

  • IE5.5 - IE8中支持，這種濾鏡的使用會致使圖片在下載的時候阻塞網頁繪製，另外使用這種濾鏡會致使內存使用量的問題。

• 23.把腳本置於頁面底部

  • 把腳本置底，這樣可讓網頁渲染所須要的內容儘快加載顯示給用戶。
  • 如今主流瀏覽器都支持defer關鍵字，能夠指定腳本在文檔加載後執行。
  • HTML5中新加了async關鍵字，可讓腳本異步執行。

• 24.剔除重複腳本

  • 重複的腳本不只浪費瀏覽器的下載時間，並且浪費解析和執行時間。

• 25.減小 DOM 訪問

  • 經過Javascript訪問DOM元素沒有咱們想象中快，元素多的網頁尤爲慢，對於Javascript對DOM的訪問咱們要注意 緩存已經訪問過的元素 、Offline更新節點而後再加回DOM Tree 、避免經過Javascript修復layout

• 26.開發智能事件處理程序

  • 這裏說智能的事件處理須要開發者對事件處理有更深刻的瞭解，經過不一樣的方式儘可能少去觸發事件，若是必要就儘早的去處理事件。
  • 好比一個div中10個按鈕都須要事件句柄，那麼咱們能夠將事件放在div上，在事件冒泡過程當中捕獲該事件而後判斷事件來源。

• 27.減少 Cookie 體積

  • 去除沒有必要的cookie，若是網頁不須要cookie就徹底禁掉
  • 將cookie的大小減到最小
  • 注意cookie設置的domain級別，沒有必要狀況下不要影響到sub-domain
  • 設置合適的過時時間，比較長的過時時間能夠提升響應速度。

• 28.對於頁面內容使用無 coockie 域名

• 29.優化圖像：儘量在不損失質量的前提下壓縮圖片的大小

  • 檢查GIF圖片中圖像顏色的數量是否和調色板規格一致。若是你發現圖片中只用到了4種顏色，而在調色板的中顯示的256色的顏色槽，那麼這張圖片就還有壓縮的空間。
  • 嘗試把GIF格式轉換成PNG格式，看看是否節省空間。大多數狀況下是能夠壓縮的。
  • 在全部的PNG圖片上運行pngcrush（或者其它PNG優化工具）。
  • 在全部的JPEG圖片上運行jpegtran。這個工具能夠對圖片中的出現的鋸齒等作無損操做，同時它還能夠用於優化和清除圖片中的註釋以及其它無用信息

• 30.優化 CSS Spirite

  • Spirite中水平排列圖片，垂直排列會增長文件大小；
  • Spirite中把顏色較近的組合在一塊兒能夠下降顏色數，理想情況是低於256色以便適用PNG8格式；
  • 不要在Spirite的圖像中間留有較大空隙。這雖然不大會增長文件大小,但對於用戶代理來講它須要更少的內存來把圖片解壓爲像素地圖。100×100的圖片爲1萬像素，1000×1000就是100萬像素。

• 31.不要在 HTML 中縮放圖像

  • 不要經過圖片縮放來適應頁面，若是你須要小圖片，就直接使用小圖片吧。

• 32.favicon.ico 要小並且可緩存

  • 要確保文件存在、文件儘可能小，最好小於1k、設置一個長的過時時間

• 33.保持單個內容小於 25K

  • 這限制是由於iphone，他只能緩存小於25K，注意這是解壓後的大小。因此單純gzip不必定夠用，精簡文件工具要用上了。

• 34.打包組件成複合文本

  • 把頁面內容打包成複合文本就如同帶有多附件的Email，它可以使你在一個HTTP請求中取得多個組建。當你使用這條規則時，首先要肯定用戶代理是否支持（iPhone不支持）。