前端性能優化

1 前端優化必要性

隨着互聯網的發展，前端優化愈來愈被人們重視，在一個大型的大型電子商務網站技術架構中，前端架構必定是一項必不可少的工做，國內幾個大型的互聯網公司也有很是強大的前端技術人員。在業界享有名氣淘寶UED團隊就有好幾十人。在瀏覽器訪問一個網站時，有10%-20%的時間是花在下載HTML上面，有80%-90%時間是花在下載頁面中全部組件上面。若是咱們能夠把後端時間縮短一半，總體響應時間只能減小5%-10%。然而咱們關注前端，一樣是其響應時間縮短一半，那總體性能能減小40%-45%。

看些研究數據：

• Amazon 慢 0.1 s -> 1% 用戶放棄交易

• Google 慢 0.4s ->  0.6% 放棄搜索

• Yahoo! 慢 0.4s ->  減小 5%-9% 的流量

• Bing 慢 2s ->  收入降低 4.3 %

2 前端優化最佳實踐

在前端發展了那麼長時間，其優化經驗也有不少值得借鑑，下面做簡單介紹。

2.1 14條優化軍規

1.          儘量的減小HTTP請求數

2.          使用CDN

3.          添加Expires頭(或者 Cache-control)

4.          Gzip 組件

5.          把CSS樣式放在頁面的上方。

6.          將腳本放在底部(包括內聯的)

7.          避免在CSS中使用Expressions

8.          將javascript和css獨立成外部文件

9.          減小DNS查詢

10.      壓縮JavaScript和CSS文件 (包括內聯的)

11.      避免跳轉

12.      移除重複的腳本

13.      配置 ETags

14.      緩存Ajax請求

以上內容在網上都有介紹，在此不做多說，有興趣的同窗能夠google一把。

2.2 拆分初始化負載

Ajax和動態HTML的日益普及網頁上面的js和css也變得很是龐大，web程序也變得像桌面程序同樣，很大一部分代碼不會在啓動時候使用，而是採起插件式架構，容許動態加載模塊。

         在一個大型結構複雜的網頁上面，爲了避免影響用戶體驗，能夠把js分爲兩部分，一部分是渲染頁面必須的，剩下是一部分。這樣也在必定程度上面提升用戶體驗，給用戶第一時間看到完整的頁面。再尋找哪些js能夠被拆分，能夠經過一些輔助工具來判斷，firebug就是一個很是好的工具，能夠經過查看哪些函數onload以前未被使用。經過判斷能夠把其中一部分拆分出來，可是有些不開始拆分，例如頁面的錯誤處理和業務判斷等js是不能拆分的，若是要拆分合理必將是一項嚴謹的工做。

2.3 無阻塞加載腳本

Js有兩種方式被包含在頁面中，一種是行內腳本，一種是外部腳本。對外面腳本瀏覽器在下載js或者執行腳本的同時不會下載其餘內容，有時候這種狀況是必要，可是卻會影響頁面其餘展現，理想狀況是不堵塞其餘內容下載的方式來加載js。目前也有對應的技術，用得比較多的是XHR Eval，xhr注入，script ifram，script dom element，script defer document.write script Tag。具體使用狀況要根據環境來定。

因爲使用外部腳本，有人可能會想到把所有使用內部腳本，這種作法不可取，這樣會增長頁面大小，並且瀏覽器不會緩存js，少數內部腳本是可取的。可是大多狀況下使用外部腳本，這樣不管在團隊開發，仍是版本控制還會帶來很大好處。

2.4 使用現成組件

現成開源的js組件不少，能夠根據熟悉程度和業務應用性使用，jquery，yui，ext，dojo。若是自行開發，除非有強大團隊，要不維護成本過高，並且功能不完善。

Prototype

驚豔，野性， 代碼風格類Ruby，新手不易上手，文檔缺少

Jquery

乖巧 靈活 易用

Dojo

強大，複雜，笨重

它的設計初衷就是：不光只運行在瀏覽器的腳本環境中，甚至像pdf/rhino這些也擁有

腳本環境的地方也能使用

Yui

溫順，矯健，文檔齊全，編碼語法相對傳統，封裝的形式比較接近於Java

Ext

Ext:  野生，炫，侵入太強，適用於精英團隊

 

2.5 針對Content優化

1.          組件延遲加載

不可見的組件: 非當前的Tab，隱藏的圖片

附加組件：動畫,拖動

1.          預加載組件

無條件的預加載(Google 首頁的例子）

有條件的預加載（淘寶首頁搜索提示功能的例子）

1.          減小DOM元素個數

元素越多，下載的數據越多，JS操做DOM速度越慢

1.          儘可能少使用 iframe

2. l  公共文件的重複加載

3. l  瀏覽器的消耗

4. 6 圖片優化

5. l  優化圖片

嘗試使用PNG，png擁有gif全部功能，還支持alpha透明，文件比較小，因此儘量使用png格式圖片。

刪除圖片的元數據，例如photoshop的元數據，這樣在必定程度上能減小圖片大小而不影響圖片質量。

• CSS sprites

能夠把網站經常使用的小圖片集合在一張圖片中，經過Css定位到小圖上面，從而減小http請求。

• 不要在HTML中縮放圖片  

<img width="100" height="100" src=「cat.jpg" />

3   怎麼樣纔算足夠快

• 0.1秒

用戶直接操做ui中對象的感受極限。例如，用戶直接選擇表格的一列到該列高亮顯示，或者反饋被選擇的時間間隔。

• 1秒

用戶隨意在計算機指令空間操做而無需過分等等時間的感受極限。0.2-1.0的時間延遲會被用戶注意到，會讓用感受到計算機正在對指令進行處理中。等待的時間過長，會讓用戶失去流暢的體驗。

• 10秒

用戶專一於任務的極限，超過10秒的任何操做都要有一個進度指示器，以及有一個讓用戶中斷操做，並且有清晰的標示方法。假設用戶超過10秒後返回界面，他們將要從新適應。在實際工做中有些操做超過10秒是能夠接受的，好比撤換操做任務。

換句話說js在執行若是超過0.1秒，會讓人感受到不平滑。若是超過1秒會讓人感受應用程序緩慢；超過10秒那麼用戶會很是沮喪。這些就是用於足夠快的標準。