王俊杰 2016-10-22 17:03
QCon全球軟件技術(shù)大會，是全球頂級的互聯(lián)網(wǎng)技術(shù)交流大會，也是全世界各路程序猿、攻城獅的聚集大會。今年的Qcon上海大會于10月20-22日在上海寶華萬豪酒店舉辦。每一期Qcon大會都是高手云集，講師中藏龍臥虎，主題演講干貨甚多。但對于我來說，最關(guān)注的肯定還是大會中Web前端相關(guān)的議程。
本屆大會共有 “前端技術(shù)實踐” 和 “大規(guī)模前端系統(tǒng)” 兩個前端專題。今天上午，百度搜索資深工程師沈洲 在 “大規(guī)模前端系統(tǒng)”專題中做了名為《移動頁面加速框架的探索與實踐》的主題演講，其中，提到就了一種開源新技術(shù) —— MIP。
MIP到底是什么?能夠Web前端開發(fā)帶來哪些變化? 下面我將為大家介紹一下：
從百度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頁面的高速緩存，從而進一步提高頁面性能。
由此我們可以看到，MIP是一種開源技術(shù)標準，用來提升H5頁面的速度體驗。做為Web前端工程師，速度應(yīng)該是大家最關(guān)注的基礎(chǔ)體驗之一，沈洲的演講中也提供了相關(guān)的數(shù)據(jù)：
•Facebook 每增加500ms -3% 的瀏覽量
•Amazon 每增加100ms -1% 的成單量
•Google 每增加500ms -25% 的檢索量
•百度 在1.5s內(nèi)每增加500ms -3% 的用戶點擊
這些數(shù)據(jù)都說明，提升速度對于流量、用戶、訂單量都有非常大的提升。那么百度發(fā)布的MIP，是如何提升移動H5頁面的速度呢? 我們發(fā)現(xiàn)，MIP中的MIP-Cache和CDN類似，但MIP還加速不僅僅于此。
頁面渲染耗時主要分為以下三類：DNS解析耗時，網(wǎng)絡(luò)傳輸耗時，瀏覽器渲染重繪耗時。 MIP加速的基本原理就是減少各個步驟的耗時：
為減少DNS解析，MIP-Cache將靜態(tài)文件以相對路徑儲存在百度CDN中;
為減少網(wǎng)絡(luò)傳輸耗時，MIP-JS 控制靜態(tài)資源的按需加載，MIP-Cache系統(tǒng)優(yōu)先從CDN讀取文件;
為減少瀏覽器渲染重繪耗時，MIP-HTML 對
,等造成瀏覽器重繪的標簽進行了封裝控制。 下文將對MIP的三大組成部分MIP-HTML, MIP-JS, MIP-Cache進行詳細介紹。
MIP-HTML 規(guī)范中有兩類標簽，一類是HTML常規(guī)標簽，另一類是MIP標簽(MIP-HTML 組件)。
在MIP規(guī)范中，類似
等會引起瀏覽器重繪的標簽應(yīng)被替換成, 利用懶加載和按需加載提高頁面的渲染速度。
MIP-HTML除了對瀏覽器原生標簽的封裝，還有一類自定義交互組件。比如圖片輪播組件，表單組件，分享組件等。這些組件依賴MIP-JS和自身腳本即可運行，不需要引用第三方庫。引用MIP自定義組件的而好處在于，頁面開發(fā)時無需引入jquery，bootstrap等體積龐大的庫，減少頁面發(fā)送的網(wǎng)絡(luò)請求及傳輸時間，加快網(wǎng)頁的傳輸和渲染。
MIP-JS是MIP的運行環(huán)境，接管了MIP頁的生命周期，腳本加載及頁面渲染。
具體來說，MIP-JS包括基礎(chǔ)類引入(AMD)，內(nèi)置組件加載(mip-img)，外置組件管理(組件css插入)以及組件布局管理(解決布局兼容性問題)。
MIP-JS選擇使用精簡的基礎(chǔ)類，盡量減少網(wǎng)絡(luò)傳輸時間;內(nèi)置優(yōu)秀的組件，在不阻塞瀏覽器渲染的前提下提供最好的交互體驗;提供組件布局管理，預(yù)先為組件設(shè)定寬高，避免組件加載后的瀏覽器重布局。
MIP-Cache 通過CDN(Content Delivery Network)服務(wù)器緩存靜態(tài)MIP頁面。
當(dāng)用戶訪問MIP頁面時，請求首先會發(fā)到CDN服務(wù)器，如果頁面存在，則從CDN直接返回靜態(tài)頁面;如果頁面不存在，則會請求第三方服務(wù)器。返回的頁面的同時加入MIP-Cache。
在使用MIP Cache時，MIP頁面引用的所有靜態(tài)文件和外部資源都會被替換成相對地址，緩存到CDN上。盡可能減少了DNS解析時間和網(wǎng)絡(luò)請求時間。
總的來說，MIP除了CDN加速，還針對瀏覽器渲染和網(wǎng)絡(luò)加載做了優(yōu)化。
講師沈洲還在演講中透露，通過MIP改造網(wǎng)站的數(shù)據(jù)表明：頁面加載速度提升了30-80%，到達率提升了5%-40%。
更快的打開速度意味著更少的用戶等待和放棄，更好的用戶體驗。
那么，你的站點準備好改MIP了嗎?
想看更多解讀請訪問：http://zhanzhang.baidu.com/college/articleinfo?id=915
