域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

QCon全球軟件技術(shù)大會(huì)，是全球頂級(jí)的互聯(lián)網(wǎng)技術(shù)交流大會(huì)，也是全世界各路程序猿、攻城獅的聚集大會(huì)。今年的Qcon上海大會(huì)于10月20-22日在上海寶華萬豪酒店舉辦。每一期Qcon大會(huì)都是高手云集，講師中藏龍臥虎，主題演講干貨甚多。但對(duì)于我來說，最關(guān)注的肯定還是大會(huì)中Web前端相關(guān)的議程。

本屆大會(huì)共有 “前端技術(shù)實(shí)踐” 和 “大規(guī)模前端系統(tǒng)” 兩個(gè)前端專題。今天上午，百度搜索資深工程師沈洲在 “大規(guī)模前端系統(tǒng)”專題中做了名為《移動(dòng)頁(yè)面加速框架的探索與實(shí)踐》的主題演講，其中，提到就了一種開源新技術(shù) —— MIP。

MIP到底是什么?能夠Web前端開發(fā)帶來哪些變化?下面我將為大家介紹一下：

從百度MIP的官方資料，我們可以查閱到：

MIP (Mobile Instant Pages - 移動(dòng)網(wǎng)頁(yè)加速器), 是一套應(yīng)用于移動(dòng)網(wǎng)頁(yè)的開放性技術(shù)標(biāo)準(zhǔn)。通過提供MIP-HTML規(guī)范、MIP-JS運(yùn)行環(huán)境以及MIP-Cache頁(yè)面緩存系統(tǒng)，實(shí)現(xiàn)移動(dòng)網(wǎng)頁(yè)加速。

MIP主要由三部分組織成：

· MIP HTML

· MIP JS

· MIP Cache

MIP HTML 基于HTML中的基礎(chǔ)標(biāo)簽制定了全新的規(guī)范，通過對(duì)一部分基礎(chǔ)標(biāo)簽的使用限制或功能擴(kuò)展，使HTML能夠展現(xiàn)更加豐富的內(nèi)容;MIP JS 可以保證 MIP HTML 頁(yè)面的快速渲染;MIP Cache 用于實(shí)現(xiàn)MIP頁(yè)面的高速緩存，從而進(jìn)一步提高頁(yè)面性能。

由此我們可以看到，MIP是一種開源技術(shù)標(biāo)準(zhǔn)，用來提升H5頁(yè)面的速度體驗(yàn)。做為Web前端工程師，速度應(yīng)該是大家最關(guān)注的基礎(chǔ)體驗(yàn)之一，沈洲的演講中也提供了相關(guān)的數(shù)據(jù)：

•Facebook 每增加500ms -3% 的瀏覽量

•Amazon 每增加100ms -1% 的成單量

•Google 每增加500ms -25% 的檢索量

•百度在1.5s內(nèi)每增加500ms -3% 的用戶點(diǎn)擊

這些數(shù)據(jù)都說明，提升速度對(duì)于流量、用戶、訂單量都有非常大的提升。那么百度發(fā)布的MIP，是如何提升移動(dòng)H5頁(yè)面的速度呢?我們發(fā)現(xiàn)，MIP中的MIP-Cache和CDN類似，但MIP還加速不僅僅于此。

頁(yè)面渲染耗時(shí)主要分為以下三類：DNS解析耗時(shí)，網(wǎng)絡(luò)傳輸耗時(shí)，瀏覽器渲染重繪耗時(shí)。 MIP加速的基本原理就是減少各個(gè)步驟的耗時(shí)：

為減少DNS解析，MIP-Cache將靜態(tài)文件以相對(duì)路徑儲(chǔ)存在百度CDN中;

為減少網(wǎng)絡(luò)傳輸耗時(shí)，MIP-JS 控制靜態(tài)資源的按需加載，MIP-Cache系統(tǒng)優(yōu)先從CDN讀取文件;

為減少瀏覽器渲染重繪耗時(shí)，MIP-HTML 對(duì)<img>,<video>等造成瀏覽器重繪的標(biāo)簽進(jìn)行了封裝控制。下文將對(duì)MIP的三大組成部分MIP-HTML, MIP-JS, MIP-Cache進(jìn)行詳細(xì)介紹。

MIP-HTML 規(guī)范中有兩類標(biāo)簽，一類是HTML常規(guī)標(biāo)簽，另一類是MIP標(biāo)簽(MIP-HTML 組件)。

在MIP規(guī)范中，類似等會(huì)引起瀏覽器重繪的標(biāo)簽應(yīng)被替換成, 利用懶加載和按需加載提高頁(yè)面的渲染速度。

MIP-HTML除了對(duì)瀏覽器原生標(biāo)簽的封裝，還有一類自定義交互組件。比如圖片輪播組件，表單組件，分享組件等。這些組件依賴MIP-JS和自身腳本即可運(yùn)行，不需要引用第三方庫(kù)。引用MIP自定義組件的而好處在于，頁(yè)面開發(fā)時(shí)無需引入jquery，bootstrap等體積龐大的庫(kù)，減少頁(yè)面發(fā)送的網(wǎng)絡(luò)請(qǐng)求及傳輸時(shí)間，加快網(wǎng)頁(yè)的傳輸和渲染。

MIP-JS是MIP的運(yùn)行環(huán)境，接管了MIP頁(yè)的生命周期，腳本加載及頁(yè)面渲染。

具體來說，MIP-JS包括基礎(chǔ)類引入(AMD)，內(nèi)置組件加載(mip-img)，外置組件管理(組件css插入)以及組件布局管理(解決布局兼容性問題)。

MIP-JS選擇使用精簡(jiǎn)的基礎(chǔ)類，盡量減少網(wǎng)絡(luò)傳輸時(shí)間;內(nèi)置優(yōu)秀的組件，在不阻塞瀏覽器渲染的前提下提供最好的交互體驗(yàn);提供組件布局管理，預(yù)先為組件設(shè)定寬高，避免組件加載后的瀏覽器重布局。

MIP-Cache 通過CDN(Content Delivery Network)服務(wù)器緩存靜態(tài)MIP頁(yè)面。

當(dāng)用戶訪問MIP頁(yè)面時(shí)，請(qǐng)求首先會(huì)發(fā)到CDN服務(wù)器，如果頁(yè)面存在，則從CDN直接返回靜態(tài)頁(yè)面;如果頁(yè)面不存在，則會(huì)請(qǐng)求第三方服務(wù)器。返回的頁(yè)面的同時(shí)加入MIP-Cache。

在使用MIP Cache時(shí)，MIP頁(yè)面引用的所有靜態(tài)文件和外部資源都會(huì)被替換成相對(duì)地址，緩存到CDN上。盡可能減少了DNS解析時(shí)間和網(wǎng)絡(luò)請(qǐng)求時(shí)間。

總的來說，MIP除了CDN加速，還針對(duì)瀏覽器渲染和網(wǎng)絡(luò)加載做了優(yōu)化。

講師沈洲還在演講中透露，通過MIP改造網(wǎng)站的數(shù)據(jù)表明：頁(yè)面加載速度提升了30-80%，到達(dá)率提升了5%-40%。

更快的打開速度意味著更少的用戶等待和放棄，更好的用戶體驗(yàn)。

那么，你的站點(diǎn)準(zhǔn)備好改MIP了嗎?

想看更多解讀請(qǐng)?jiān)L問：

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！