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

加速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)

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。