什麼是 MIP


MIP (Mobile Instant Pages - 行動網頁加速器),  是一套應用於行動網頁的開放性技術標準。透過提供MIP-HTML規格、MIP-JS運行環境以及MIP-Cache頁面快取系統,實現行動網頁加速。

MIP主要由三個部分組織成:

  • MIP HTML
  • #MIP JS
  • MIP Cache

MIP HTML 基於HTML中的基礎標籤制定了全新的規範,透過對一部分基礎標籤的使用限製或功能擴展,使HTML能夠展現更加豐富的內容;MIP JS 可以保證MIP HTML 頁面的快速渲染;MIP Cache 用於實現MIP頁面的高速緩存,從而進一步提高頁面效能。

1. MIP HTML

MIP HTML 基於HTML基礎規範進行了擴展,以下是簡單的MIP HTML程式碼範例:

<!DOCTYPE html>
<html mip>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
        <link rel="canonical" href="https://www.mipengine.org/">
        <!-- noscript 标签是为了在不支持script的环境下快速的展现 mip 页面,推荐使用 -->
        <noscript>
            <style mip-officialrelease>
                body {
                    -webkit-animation:none;
                       -moz-animation:none;
                        -ms-animation:none;
                            animation:none
                }
            </style>
        </noscript>
    </head>
    <body>Hello World!</body>
    <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>   
</html>

MIP HTML 規範中有兩類標籤,一類是HTML常規標籤,另一類是MIP標籤。 MIP標籤也被稱為 MIP HTML 元件,使用它們來取代HTML常規標籤可以大幅提升頁面效能。

例如,mip-img標籤,它使得圖片只在需要時才進行加載,減少了頁面渲染時間,節省了使用者的流量。

閱讀MIP HTML 規格以了解更多資訊。

2. MIP JS

MIP JS 用於管理資源的加載,並支援上述MIP標籤的使用,從而確保頁面的快速渲染,提高頁面各方面的性能。

MIP JS 最顯著的優勢是能夠非同步載入所有外部資源,整個頁面渲染過程不會被頁面中的某些元素阻塞,從而實現頁面渲染速度的提升。

此外,MIP JS 還涵蓋了所有iframe的沙盒、於資源加載前提前計算頁面元素佈局、禁用緩慢css選擇器等技術性能。

3. MIP Cache

MIP Cache 是一套基於代理的CDN(Content Delivery Network) 快取系統,可用於快取所有被百度相關頁面引用或從百度相關服務點出的MIP頁面。使用者在造訪 MIP 頁面的時候,請求首先會傳送到 CDN 伺服器,如果頁面存在,則從 CDN 返回,如果 CDN 上不存在,則會要求第三方伺服器。同時 MIP Cache 伺服器會將頁面快取到 CDN 上。在使用MIP Cache 時,MIP 頁面所需的所有靜態檔案和外部資源都會被快取到CDN 上(影片除外),頁面中的資源連結會轉換成相對位址,很大程度上提升了頁面渲染速度。每個MIP 頁面都會綁定一個驗證系統,在頁面進行渲染時,這種驗證器可以直接在瀏覽器控制台中輸出頁面的錯誤;並且隨著程式碼邏輯的變化,能夠展示其對頁面效能以及使用者體驗的影響。

閱讀MIP Cache 規格以了解更多資訊。