前端性能優化

1 前端優化必要性

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

看些研究數據:css

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

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

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

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

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秒那麼用戶會很是沮喪。這些就是用於足夠快的標準。

相關文章
相關標籤/搜索