介紹

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

Github

<code>https://github.com/mipengine/<code>

組成部分

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

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

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

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

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

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

控制外部資源加載

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 最核心，也是我們一直盡力遵守的原則是：

總結

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

閱讀更多 最美分享Coder 的文章

關鍵字: 引擎 高效 Pages