MIP 加速原理


本文檔為您詳細闡釋MIP頁面的加速原理

經過精心設計的JavaScript

為了去除臃腫的客戶端腳本,MIP檔案不允許自訂JavaScript;對一些強烈依賴JavaScript的功能(如:廣告、統計和互動),MIP提供與MIP runtime相容的封裝好的元件來實作。

JavaScript 引用原則:

  • 目前MIP不允許使用者自訂JavaScript,需要用MIP 元件的形式引進來,從而確保安全性與效能表現

  • 可以引用mip-iframe來引入實現部分富交互的功能,這樣,即使開發時使用最影響性能的document.write,也不會影響主頁的渲染

  • MIP元件是開源的,允許開發者自訂功能元件,專案也將持續提供多樣化的元件,以適應不同的需求

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

在頁面開發時,資源常常不會被設定寬高,特別是使用廣告或透過呼叫`document.write() 注入的時候。由於資源大小無法確定,頁面經常要進行反覆重新的繪製;

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

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

開發者的任何自訂腳本,都需要用MIP的tag回饋給MIP,例如mip-ad、mip-iframe等,這些方式不會阻塞頁面的layout和渲染。

控制外部資源載入

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

封裝互動功能

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

只允許inline的css

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

只允許GPU加速的動畫

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

MIP 快取

MIP另一個重要的意義在於能夠幫站長加速網頁,百度將會將MIP網頁快取到百度CDN。只要符合MIP標準,都可以使用MIP快取。

開放且持續更新

MIP是一個開源項目,所有的標準並非一成不變。我們會持續不斷進行優化,期待您的共同參與!