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秒那么用戶會非常沮喪。這些就是用于足夠快的標準。