加速HTML5應用程式與網站的50個技巧

以下是BUILD 2012: 50 Performance Tricks to make your HTML5 Applications and Sites faster的讀書心得，此篇演說的內容和之前討論Web Performance Best Practices and Rules裡的原則有異曲同工之妙，是當我們網站開發上線前後或執行上有瓶頸，要針對網站進行效能調效時，可以有一個很快速的指導方針，BUILD的演說有影片及投影片可以下載，以下重點整理。

加速六大原則

以下為投影片P58 ~ p80頁的內容。

避免3xx轉址
在前1000大網站中，有63%包含3xx轉址。
避免使用Meta更新標籤
<meta http-equiv="refresh" content="url=http://news.com/" />。網路上約14%的Url包含meta-refresh標籤。
最小化伺服器處理時間（Server Time）
使用CDN（Content Distribution Networks）
最大化並行連線數（Concurrent Connections）
重覆使用已建立的連線
知道你的伺服器位置
瞭解你的網路同步時間（Network Timing）
Unload、Redirect、AppCache、DNS、TCP、Request、Response、Processing、Onload

以下為投影片p81 ~ p104頁的內容。

下載較少的資源與位元組
平均下載777k位元組，Images 474k、Scripts 128k、Flash 84k、HTML 35k、Style Sheets 27k、Other 29k。
使用GZIP壓縮網路流量
保留App局部資源在Package
在App快取裡快取動態資源
提供能快取的內容
Expires: Fri, 20 Apr 2011 00:00:00 GMT
傳送有條件的請求
If-Modified-Since: Sun, 10 Apr 2011 21:30:46 GMT

快取資料請求

   jQuery.ajax({
       url: url,
       dataType: 'json',
       data: data,
       cache: true,
       success: callback
   });

以下為投影片p105 ~ p135頁的內容。

使用HTTP Header指定舊有IE Mode

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

在頁面頂端載入樣式表

    <head>
     <title>KingKong Bruce記事
     <link rel="stylesheet" type="text/css"href="kkbruce.css" />
    </head>

避免行內的JavaScript

    <head>
     <script type="text/javascript">
      function helloWorld() { 
       alert('Hello World!');
      }
     </script>
    </head>

以下為投影片p136 ~ p158頁的內容。

最小化圖片的數量
避免使用大量的小圖示
使用Image Sprite技巧
建立你的Sprite幫手
使用正確的圖片格式
- Png（預設）：網頁元素、Logo
- Jpeg：照片
- jpeg-XR：高解析照片
- 不要使用Gif、Tiff、BMP、WebP…等

使用原生圖片解析度

    <!-- logo.gif dimensions: 500 x 400 -->
       <img src="logo.png" width="50" height="40" />

替代Image，使用CSS3 Gradients
- -ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))
- -webkit-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))
- -moz-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))
替代Image，使用CSS3 Border Radius
- border-radius:18px;
- -webkit-border-radius: 100px;
- -moz-border-radius: 100px;
使用CSS3 Transforms
- -ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
- -webkit-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
- -moz-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
- -o-transform: translate(75px, 100px) scaleY(.75) skewY(10deg);
使用DataURI
DataURI合適小且單一個圖示。
避免複雜SVG路徑
Video：使用預覽圖片
最小化的使用媒體外掛
Flash、Silverlight…等。
預先載入未來使用的媒體

以下為投影片p159 ~ p198頁的內容。

以下為投影片p199 ~ p204頁的內容。

整齊的時間來顯示框架（16.7）

    setInterval(renderLoop, 16.7);
    setInterval(renderLoop, 33.4);

動畫使用requestAnimationFrame

    window.requestAnimationFrame(renderLoop);