over 5 years ago

Source: http://browserdiet.com/

HTML

  • 避免對 stylesheet 或 javascript 使用 inline 或 embedded code 的方式
  • 除非是一次性的瀏覽頁面(一般 user 只會瀏覽一次,不使用 external 可減少 request 數)
  • external 的順序也有影響(最好把 style 放在 script 前)(reference)
  • css 放愈前面愈好
  • script 放愈後面愈好
  • minify html(移除註解、空白、換行)
  • 適當使用 async 如:<script async src="example.js"></script>

CSS

  • minify CSS
  • 合併所有 external stylesheet 以減少 request 數
  • <link> 優於 @import

JavaScript

  • 使用第三方的 script 最好用 async 或 friendly iframes,避免因為連線問題影響讀取速度
  • 避免在 loop 中多次重複計算 array length
  • 避免使用 document.write
  • 在 loop 中設定 layout 時避免多次重複計算 layout
  • 如果要重複在 DOM 取得同一個 element,最好取一次並存在 variable 就好
  • minify JavaScript
  • 合併所有 external JavaScript 以減少 request 數

jQuery

  • 使用愈新的版本愈好
  • JavaScript 原生的語法總是比較快,因此盡量不要用 jQuery.each 改用 for-loop
    Note: 但是 for-in-loop 的效能通常還是比 jQuery.each
  • 除非必要否則盡量少用 jQuery,如 $(this).attr('id') vs. this.id

images

  • (CSS Sprite) 將多個圖檔合併,並以 CSS 控制背景顯示位置,如此可減少 request 數並減低顯示延遲
    Note: 但圖與圖之間的空白不宜太多,空白雖不致影響檔案大小,卻與記憶體消耗有關
  • 使用 Data-URI 可減少 request 數
  • 圖檔指定 width 及 height 屬性可避免瀏覽器做不必要的 repaint 與 reflow
  • 圖檔最佳化(減少不必要的資訊如 Exif metadata 等)
  • 網頁呈現檔案較大的 jpeg 時,使用 progressive jpeg 優於 baseline jpeg

server

  • 自訂 cache 時效,網頁中要更新時可改檔名或用 GET parameter 改版號(但此作法會造成在 proxy 中無效)
  • 使用 GZIP 壓縮資料

tools

JavaScript Patterns 閱讀筆記 (1) Introduction →
 
comments powered by Disqus