什么是 MIP
MIP (Mobile Instant Pages - 移動網(wǎng)頁加速器), 是一套應(yīng)用于移動網(wǎng)頁的開放性技術(shù)標準。通過提供MIP-HTML規(guī)范、MIP-JS運行環(huán)境以及MIP-Cache頁面緩存系統(tǒng),實現(xiàn)移動網(wǎng)頁加速。
MIP主要由三部分組織成:
- MIP HTML
- MIP JS
- MIP Cache
MIP HTML 基于HTML中的基礎(chǔ)標簽制定了全新的規(guī)范,通過對一部分基礎(chǔ)標簽的使用限制或功能擴展,使HTML能夠展現(xiàn)更加豐富的內(nèi)容;MIP JS 可以保證 MIP HTML 頁面的快速渲染;MIP Cache 用于實現(xiàn)MIP頁面的高速緩存,從而進一步提高頁面性能。
1. MIP HTML
MIP HTML 基于HTML基礎(chǔ)規(guī)范進行了擴展,下面是一段簡單的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的環(huán)境下快速的展現(xiàn) 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 規(guī)范中有兩類標簽,一類是HTML常規(guī)標簽,另一類是MIP標簽。MIP標簽也被稱作 MIP HTML 組件,使用它們來替代HTML常規(guī)標簽可以大幅提升頁面性能。
例如,mip-img
標簽,它使得圖片只在需要時才進行加載,減少了頁面渲染時間,節(jié)省了用戶的流量。
閱讀
2. MIP JS
MIP JS 用于管理資源的加載,并支持上述MIP標簽的使用,從而確保頁面的快速渲染,提高頁面各方面的性能。
MIP JS 最顯著的優(yōu)勢是能夠異步加載所有外部資源,整個頁面渲染過程不會被頁面中的某些元素阻塞,從而實現(xiàn)頁面渲染速度的提升。
此外,MIP JS 還涵蓋了所有iframe的沙盒、于資源加載前提前計算頁面元素布局、禁用緩慢css選擇器等技術(shù)性能。
3. MIP Cache
MIP Cache 是一套基于代理的 CDN(Content Delivery Network) 緩存系統(tǒng),可用于緩存所有被百度相關(guān)頁面引用或者從百度相關(guān)服務(wù)點出的MIP頁面。用戶在訪問 MIP 頁面的時候,請求首先會發(fā)到 CDN 服務(wù)器,如果頁面存在,則從 CDN 返回,如果 CDN 上不存在,則會請求第三方服務(wù)器。同時 MIP Cache 服務(wù)器會將頁面緩存到 CDN 上。在使用 MIP Cache 時,MIP 頁面所需要的所有靜態(tài)文件和外部資源都會被緩存到 CDN 上(視頻除外),并且頁面中的資源鏈接會被轉(zhuǎn)換成相對地址,很大程度上提升了頁面渲染速度。每一個 MIP 頁面都會綁定一個驗證系統(tǒng),在頁面進行渲染時,這種驗證器可以直接在瀏覽器控制臺中輸出頁面的錯誤;并且隨著代碼邏輯的變化,能夠展示其對頁面性能以及用戶體驗的影響。
閱讀