MIP 是用 CDN 做加速的么?準確答案是:是,但不只是。
MIP 全稱 Mobile Instant Pages,移動網頁加速器,是百度提出的頁面加速解決方案。MIP 從前端渲染和頁面網絡傳輸兩方面進行優化,杜絕頁面渲染中的阻塞問題,提升頁面展現速度。
頁面渲染耗時與 MIP 加速原則
頁面渲染耗時主要分為以下三類:DNS 解析耗時,網絡傳輸耗時,瀏覽器渲染重繪耗時 。
MIP 加速的基本原理就是減少各個步驟的耗時:
為減少 DNS 解析,MIP-Cache 將靜態文件以相對路徑儲存在百度 CDN 中;
為減少網絡傳輸耗時,MIP-JS 控制靜態資源的按需加載,MIP-Cache 系統優先從 CDN 讀取文件;
為減少瀏覽器渲染重繪耗時,MIP-HTML 對<img>
,<video>
等造成瀏覽器重繪的標簽進行了封裝控制。 下文將對 MIP 的三大組成部分 MIP-HTML, MIP-JS, MIP-Cache 進行詳細介紹。
MIP-HTML 組件加速原理
MIP-HTML 規范中有兩類標簽,一類是 HTML 常規標簽,另一類是 MIP 標簽(MIP-HTML 組件)。在 MIP 規范中,類似<img>
等會引起瀏覽器重繪的標簽應被替換成<mip-img>
, 利用懶加載和按需加載提高頁面的渲染速度。
MIP-HTML 除了對瀏覽器原生標簽的封裝,還有一類自定義交互組件。比如圖片輪播組件,表單組件,分享組件等。這些組件依賴 MIP-JS 和自身腳本即可運行,不需要引用第三方庫。引用 MIP 自定義組件的而好處在于,頁面開發時無需引入 jquery,bootstrap 等體積龐大的庫,減少頁面發送的網絡請求及傳輸時間,加快網頁的傳輸和渲染。
MIP-JS 加速原理
MIP-JS 是 MIP 的運行環境,接管了 MIP 頁的生命周期,腳本加載及頁面渲染。具體來說,MIP-JS 包括基礎類引入(AMD),內置組件加載(mip-img),外置組件管理(組件 css 插入)以及組件布局管理(解決布局兼容性問題)。
MIP-JS 選擇使用精簡的基礎類,盡量減少網絡傳輸時間;內置優秀的組件,在不阻塞瀏覽器渲染的前提下提供最好的交互體驗;提供組件布局管理,預先為組件設定寬高,避免組件加載后的瀏覽器重布局。
MIP-Cache 緩存加速原理
MIP-Cache 通過 CDN(Content Delivery Network) 服務器緩存靜態 MIP 頁面。當用戶訪問 MIP 頁面時,請求首先會發到 CDN 服務器,如果頁面存在,則從 CDN 直接返回靜態頁面;如果頁面不存在,則會請求第三方服務器。返回的頁面的同時加入 MIP-Cache。
在使用 MIP-Cache 時,MIP 頁面引用的所有靜態文件和外部資源都會被替換成相對地址,緩存到 CDN 上。盡可能減少了 DNS 解析時間和網絡請求時間。