介紹

MIP（Mobile Instant Pages - 移動網頁加速器），是一套應用於移動網頁的開放性技術標準。通過提供 MIP-HTML 規範、MIP-JS 運行環境以及 MIP-Cache 頁面緩存系統，實現移動網頁加速。

Github

https://github.com/mipengine

組成部分

MIP 主要由三部分組織成：

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

特點和優勢

使用 MIP 無需等待加載，頁面內容將以更友好的方式瞬時到達用戶

• 豐富靈活的內置組件

MIP 提供實用、強大的基礎組件開發者可以根據需求任意選擇

• 高效便捷的交互機制

提供事件驅動和數據驅動機制提供更為簡單高效的組件互動方式

• 更好的整站體驗

更流暢的頁面切換體驗天然的站點離線緩存支持

• 開放的接入技術

MIP 是一項永久的開源計劃提供持續優化的解決方案

MIP 加速原理

經過精心設計的 JavaScript

為了去除臃腫的客戶端腳本，MIP 文件不允許自定義 JavaScript 。對一些強依賴 JavaScript 的功能（如：廣告、統計和交互），MIP 提供與 MIP Runtime 兼容封裝好的組件來實現。

JavaScript 引用原則：

• 目前 MIP 不允許用戶自定義 JavaScript ，需要用 MIP 組件的形式引進來，從而確保安全性和性能表現。
• 可以引用 組件 來引入實現部分富交互的功能，這樣，即使開發時使用最影響性能的 document.write() ，也不會影響主頁面的渲染。
• MIP 組件是開源的，允許開發者自定義功能組件，項目也將持續提供多樣的組件，以適應不同的需求。

所有靜態資源需要標明尺寸

在頁面開發時，資源常常不會被設定寬高，特別是使用廣告或者通過調用 document.write() 注入的時候。由於資源大小不能確定，頁面經常要進行反覆重新的繪製。

現在，MIP 要求將所有的資源（廣告、圖片、音頻和視頻）標明尺寸。當資源真正加載時，所有資源大小可以被立即推斷出並迅速的用於計算頁面布局，加載中的資源將無縫呈現，不必因為頁面頻繁更新布局而影響到用戶的閱讀體驗。

不允許任何機制阻止頁面渲染

開發者的任何自定義腳本，都需要用 MIP 的標題反饋給 MIP，例如 、 等，這些方式不會阻塞頁面的 layout 和渲染。

控制外部資源加載

MIP Runtime 會控制外部資源的按需加載來確保其高效性，從而使用戶想閱讀的內容儘快出現在螢幕中。

封裝交互功能

MIP 提倡網頁能給用戶直接簡單的體驗，但這並不意味著 MIP 限制了頁面的生動和有趣。MIP Runtime 提供了高度優化的被封裝的 JavaScript ，開發者無需投入過多精力去實現複雜的交互功能。

建議使用 inline 的 CSS

CSS 的加載，會阻止頁面的渲染，CSS 內聯可以減少客戶端的開銷。

只允許 GPU 加速的動畫

MIP 只允許用 transforms 和 opacity 來完成動畫效果，當動畫能在 GPU 上執行時，僅觸發渲染層合併。

MIP 緩存

MIP 另一個重要的意義在於能夠幫站長加速網頁，MIP-Cache 將會把 MIP 網頁緩存到百度 CDN 中。只要符合 MIP 標準，都可以使用 MIP 緩存。

開放且持續更新

MIP 是一個開源項目，所有的標準並非一成不變

MIP 適用場景

MIP 適用於所有需要加速的站點。

如果您的站點響應速度慢，如果您的 CDN 速度慢，如果您希望廣告有更高的 ROI，那 MIP 就非常適合您的站點。MIP 最核心，也是我們一直盡力遵守的原則是：速度最快和體驗最好。截至到目前，有超過 1w 個站點接入 MIP，他們使用 MIP 獲得了極致的用戶體驗並且帶來了客觀的廣告收入。

總結

無論您的站點是資訊類，還是電商，也就是依賴於高性能的頁面渲染，那麼MIP將是你的一個不錯的選擇！enjoy it！