加速HTML5應用程式與網站的50個技巧
以下是BUILD 2012: 50 Performance Tricks to make your HTML5 Applications and Sites faster的讀書心得，此篇演說的內容和之前討論Web Performance Best Practices and Rules裡的原則有異曲同工之妙，是當我們網站開發上線前後或執行上有瓶頸，要針對網站進行效能調效時，可以有一個很快速的指導方針，BUILD的演說有影片及投影片可以下載，以下重點整理。
加速六大原則
原則一：快速回應請求（Quickly respond to network requests）
以下為投影片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
原則二：最小化下載的位元組（Minimize bytes downloaded）
以下為投影片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 }); - 標準化檔案名稱大小寫習慣
原則三：正確的架構宣告（Efficiently Structure Markup）
以下為投影片p105 ~ p135頁的內容。
- 測試所有的Browser Mode
- Quirks Mode (Legacy IE)
- IE7 Standards Mode
- IE8 Standards Mode
- IE9 Standards Mode (HTML5)
- IE10 Standards Mode (HTML5)
- 使用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> - 永遠不要在頁面底端載入樣式表
- 避免在階層樣式裡使用@import
- 避免使用內嵌與行內樣式
- 只引用需要的樣式規則
- 永遠只在頁面底端載入JavaScript
- 避免在頁面頂端載入JavaScript
- 避免行內的JavaScript
<head> <script type="text/javascript"> function helloWorld() { alert('Hello World!'); } </script> </head> - 在script標籤使用defer屬性
先看以下程式碼：
<head> <title>KingKong Bruce記事 <script src="myscript.js" defer="defer"></script> </head>defer是以延遲方式執行JavaScript，作者建議，只有在網頁head標籤只有一個選項（只有一個script標籤）時使用。
- 非同步下載Script
使用Script標籤的async屬性。
- 移除裡重覆程式碼
尤其是重覆Script。有52%的網頁裡有重覆程式碼。
- 盡量專注在一種Script框架
- 不要為了酷或炫，載入過多的Script
原則四：最佳化媒體使用（Optimize media usage）
以下為投影片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…等。
- 預先載入未來使用的媒體
原則五：撰寫快速的JavaScript（Write fast JavaScript）
以下為投影片p159 ~ p198頁的內容。
- 正確處理整數運算
投影片p160~p165有個簡單易懂的範例程式碼。
- 最小化JavaScript
- 在有需求時才初始化JavaScript
- 最小化DOM的反覆（Interactions）
- 使用DOM內建方法
- 使用Selectors API來建立集合存取點
這裡指HTML5裡的querySelect()、querySelectorAll()方法。
- 使用.innerHTML來建構你的頁面
- 批次的標籤變更
- 維護一個小而美的DOM
- 資料傳輸使用JSON，不要使用XML
- 使用原生的JSON方法
JSON.parse()、JSON.stringify
- 保守的使用Regular Expressions
原則六：知道你的應該程式在做什麼（Know what your application is doing）
以下為投影片p199 ~ p204頁的內容。
- 瞭解JavaScript的時間
SetTimeout()與SetInterval()
- 組合應用程式的時間
- 整齊的時間來顯示框架（16.7）
setInterval(renderLoop, 16.7); setInterval(renderLoop, 33.4); - 動畫使用requestAnimationFrame
window.requestAnimationFrame(renderLoop); - 知道你的App是可見的
document.hidden (property)、Visibilitychange (event)
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。