前端性能優化經常使用方法

1. 網頁內容

1.1 減小http請求次數

1.1.1 捆綁文件

經過一些現成的庫將多個腳本文件捆綁成一個文件，將多個樣式表文件捆綁成一個文件，以此來減小文件的下載次數。

1.1.2 CSS Sprites

把多個圖片拼成一副圖片，而後經過CSS來控制須要顯示圖片的位置（ CSS Sprites Generator）

1.1.3 Inline images

經過Base64編碼的字符串將圖片內嵌到網頁文本中。（可是隻適合用於小圖標，大一點的圖片就免了）

1.2 減小DNS查詢次數

DNS（Domain Name System，域名系統）

1.3 避免頁面跳轉

1.4 緩存Ajax

1.5 延遲加載

這裏討論延遲加載須要咱們知道咱們的網頁最初加載須要的最小內容集是什麼。剩下的內容就能夠推到延遲加載的集合中。

Javascript是典型的能夠延遲加載內容。一個比較激進的作法是開發網頁時先確保網頁在沒有Javascript的時候也能夠基本工做，而後經過延遲加載腳原本完成一些高級的功能。

1.6 提早加載

與延遲加載目的相反，提早加載的是爲了提早加載接下來網頁中訪問的資源，下面是提早加載的類型

無條件提早加載：當前網頁加載完成後，立刻去下載一些其餘的內容。例如google會在頁面加載成功以後立刻去下載一個全部結果中會用到的image sprite。

1.7 減小DOM元素數量

網頁中元素過多對網頁的加載和腳本的執行都是沉重的負擔，500個元素和5000個元素在加載速度上會有很大差異。

想知道你的網頁中有多少元素，經過在瀏覽器中的一條簡單命令就能夠算出，

document.getElementsByTagName('*').length

參考： https://www.cnblogs.com/chenxizhang/archive/2013/05/17/3083162.html

http://www.cnblogs.com/huyh/archive/2009/03/30/1422976.html

• 避免不正確地使用服務器控件。

• 減小沒必要要的內容（並非全部內容都必須放在頁面上面的）

  若是數據量大，能夠考慮分頁，或者按需加載

1.8 根據域名劃份內容

瀏覽器通常對同一個域的下載鏈接數有所限制，按照域名劃分下載內容能夠瀏覽器增大並行下載鏈接，可是注意控制域名使用在2-4個之間，否則dns查詢也是個問題。

1.9 減小iframe數量

使用iframe要注意理解iframe的優缺點

優勢

• 能夠用來加載速度較慢的內容，例如廣告。
• 安全沙箱保護。瀏覽器會對iframe中的內容進行安全控制。
• 腳本能夠並行下載

缺點

• 即便iframe內容爲空也消耗加載時間
• 會阻止頁面加載
• 沒有語義

1.10 避免404

404咱們都不陌生，表明服務器沒有找到資源，咱們要特別要注意404的狀況不要在咱們提供的網頁資源上，客戶端發送一個請求可是服務器卻返回一個無用的結果，時間浪費掉了。

更糟糕的是咱們網頁中須要加載一個外部腳本，結果返回一個404，不只阻塞了其餘腳本下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。

1. 服務器

2.1 使用CDN

再次強調第一條黃金定律，減小網頁內容的下載時間。提升下載速度還能夠經過CDN(內容分發網絡)來提高。CDN經過部署在不一樣地區的服務器來提升客戶的下載速度。

2.2 添加Expires 或Cache-Control報文頭

2.3 Gzip壓縮傳輸文件

2.4 配置ETags

2.5 儘早flush輸出

2.6 使用GET Ajax請求

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

2.7 避免空的圖片src

空的圖片src仍然會使瀏覽器發送請求到服務器，這樣徹底是浪費時間，並且浪費服務器的資源。尤爲是你的網站天天被不少人訪問的時候，這種空請求形成的傷害不容忽略。

因此注意咱們的網頁中是否存在這樣的代碼：

straight HTML
<img src="">

JavaScript
var img = new Image();
img.src = "";

1. Cookie

3.1 減小Cookie大小

3.2 頁面內容使用無cookie域名

1. CSS

4.1 將樣式表置頂

將樣式表(css)放在網頁的HEAD中會讓網頁顯得加載速度更快，由於這樣作可使瀏覽器逐步加載已將下載的網頁內容。這對內容比較多的網頁尤爲重要，用戶不用一直等待在一個白屏上，而是能夠先看已經下載的內容。

若是將樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁，由於大多數瀏覽器在實現時都努力避免重繪，樣式表中的內容是繪製網頁的關鍵信息，沒有下載下來以前只好對不起觀衆了。

4.2 避免CSS表達式

CSS表達式能夠動態的設置CSS屬性，在IE5-IE8中支持，其餘瀏覽器中表達式會被忽略。例以下面表達式在不一樣時間設置不一樣的背景顏色。

CSS表達式的問題在於它被從新計算的次數遠比咱們想象的要多，不只在網頁繪製或大小改變時計算，即便咱們滾動屏幕或者移動鼠標的時候也在計算，所以咱們仍是儘可能避免使用它來防止使用不當而形成的性能損耗。

若是想達到相似的效果咱們能夠經過簡單的腳本作到。

4.3 用<link>代替@import

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

4.4 避免使用Filters

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

1. Javascript

5.1 將腳本置底

所以對於腳本提速，咱們能夠考慮如下方式，

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

5.2 使用外部Javascirpt和CSS文件

使用外部Javascript和CSS文件可使這些文件被瀏覽器緩存，從而在不一樣的請求內容之間重用。

同時將Javascript和CSS從inline變爲external也減少了網頁內容的大小。

使用外部Javascript和CSS文件的決定因素在於這些外部文件的重用率，若是用戶在瀏覽咱們的頁面時會訪問屢次相同頁面或者能夠重用腳本的不一樣頁面，那麼外部文件形式能夠爲你帶來很大的好處。但對於用戶一般只會訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對來講能夠提供更高的效率。

5.3 精簡Javascript和CSS

精簡就是將Javascript或CSS中的空格和註釋全去掉，精簡的工具不少，主要能夠參考以下，

JS compressors:

• Packer
• JSMin
• Closure compiler
• YUICompressor (also does CSS)
• AjaxMin (also does CSS)

CSS compressors:

• CSSTidy
• Minify
• YUICompressor (also does JS)
• AjaxMin (also does JS)
• CSSCompressor

與VS集成比較好的工具以下.

• YUICompressor - 編譯集成，包含在 NuGet.
• AjaxMin - 編譯集成

5.4 去除重複腳本

5.5 減小DOM訪問

經過Javascript訪問DOM元素沒有咱們想象中快，元素多的網頁尤爲慢，對於Javascript對DOM的訪問咱們要注意

• 緩存已經訪問過的元素
• Offline更新節點而後再加回DOM Tree
• 避免經過Javascript修復layout

5.6 使用智能事件處理

這裏說智能的事件處理須要開發者對事件處理有更深刻的瞭解，經過不一樣的方式儘可能少去觸發事件，若是必要就儘早的去處理事件。

好比一個div中10個按鈕都須要事件句柄，那麼咱們能夠將事件放在div上，在事件冒泡過程當中捕獲該事件而後判斷事件來源。

1. 圖片

6.1 優化圖像

6.2 優化CSS Sprite

6.3 不要在HTML中縮放圖片

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

6.4 使用小且可緩存的favicon.ico

網站圖標文件favicon.ico，無論你服務器有仍是沒有，瀏覽器都會去嘗試請求這個圖標。因此咱們要確保這個圖標

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

1. 移動客戶端

7.1 保持單個內容小於25KB

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

7.2 打包組建成符合文檔

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

參考:

http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html