百度MIP移動頁面加速——不只是CDN

0 發布于:2016-11-02 16:07 閱讀: 475 次

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解析時間和網絡請求時間。

總的來說,MIP除了CDN加速,還針對瀏覽器渲染和網絡加載做了優化。改版網站的數據表明,頁面加載速度提升了30-80%。更快的打開速度意味著更少的用戶等待和放棄,更好的用戶體驗。欲了解更多詳情,歡迎到MIP官網,與我們一同建立秒開的移動頁面。

添加新評論 ↑↑

吉林十一选五走势图表电脑版