新手指南
MIP (Mobile Instant Pages - 移動(dòng)網(wǎng)頁(yè)加速器)主要用于移動(dòng)端頁(yè)面加速。
這篇文檔將帶你快速創(chuàng)建一個(gè) MIP 頁(yè)面。
1. 創(chuàng)建 HTML 文件
首先創(chuàng)建一個(gè)標(biāo)準(zhǔn)的 HTML 文件, 注意:
- 在
<html>
標(biāo)簽中增加mip
標(biāo)識(shí) - 編碼為 utf-8
- 添加meta-viewport,用于移動(dòng)端展現(xiàn)
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2. 添加MIP運(yùn)行環(huán)境
在 HTML 代碼中,添加MIP依賴的mip.js
和mip.css
。
<!DOCTYPE html> <html mip> <head> <meta 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"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
3. 添加 MIP 關(guān)聯(lián)標(biāo)簽
<link rel="miphtml">
和<link rel="canonical">
主要用于告知搜索引擎頁(yè)面間的關(guān)系。添加關(guān)聯(lián)標(biāo)簽后,MIP頁(yè)的會(huì)繼承原頁(yè)面(移動(dòng)端)的點(diǎn)擊權(quán)重,同時(shí)MIP頁(yè)將作為搜索引擎的首選導(dǎo)流頁(yè)面。
使用規(guī)則:
<link rel="canonical">
在MIP 頁(yè)中使用,<link rel="miphtml">
在原頁(yè)面使用。- 若原頁(yè)面中已經(jīng)存在
<link rel="canonical">
標(biāo)簽指向PC頁(yè),則MIP頁(yè)<link rel="canonical">
的 href 也指向PC頁(yè)。 - 若
MIP頁(yè)
沒有對(duì)應(yīng)的原頁(yè)面
,則指向MIP頁(yè)本身url。
<!DOCTYPE html> <html mip> <head> <meta 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="//www.mipengine.org/"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
4. 添加樣式
出于速度考慮,建議內(nèi)聯(lián)使用 css 樣式。所有樣式寫在<style mip-custom></style>
中,注意:style 標(biāo)簽僅允許出現(xiàn)一次。
<!DOCTYPE html> <html mip> <head> <meta 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="//www.mipengine.org/"> <title>Hello World</title> <style mip-custom> h1 { color: red;} </style> </head> <body> <h1>Hello World!</h1> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
5. 替換禁用 HTML 標(biāo)簽
MIP十分關(guān)注頁(yè)面速度,也因此禁用了一些引起拖慢速度的html標(biāo)簽(<img>
標(biāo)簽會(huì)引起瀏覽器的repaint和reflow,為了避免這些,MIP提供了替代標(biāo)簽<mip-img>
。詳見<mip-img>
使用文檔
<!DOCTYPE html> <html mip> <head> <meta 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="//www.mipengine.org/"> <title>Hello World</title> <style mip-custom> h1 { color: red;} </style> </head> <body> <h1>Hello World!</h1> <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"></mip-img> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
6. 使用MIP組件
出于對(duì)代碼質(zhì)量和性能的考慮,MIP頁(yè)中不允許自定義javascript代碼,所有的交互通過(guò)引入MIP組件實(shí)現(xiàn)。MIP組件可以理解為封裝了js的自定義html標(biāo)簽。上一步中的<mip-img>
也是一個(gè)MIP組件。
我們以分享組件為例,根據(jù)<mip-share>
,需要依賴//mipcache.bdstatic.com/static/v1/mip-share/mip-share.js
腳本,用在頁(yè)面里就是這樣:
<!DOCTYPE html> <html mip> <head> <meta 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="//www.mipengine.org/"> <title>Hello World</title> <style mip-custom> h1 { color: red;} </style> </head> <body> <h1>Hello World!</h1> <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"></mip-img> <mip-share title="分享:我的第一個(gè)MIP頁(yè)面"></mip-share> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js"></script> </body> </html>
在使用組件時(shí),請(qǐng)注意閱讀組件文檔,查看組件是否依賴額外腳本。如果依賴,請(qǐng)?jiān)趍ip.js之后引入腳本。
7. 預(yù)覽
開發(fā)完成后,可以使用
MIP頁(yè)文件可以直接運(yùn)行,你可以選擇如下方式,像預(yù)覽普通HTML站點(diǎn)一樣預(yù)覽 MIP HTML 頁(yè)面:
- 直接在瀏覽器中打開(由于XML Http Requests失敗可能會(huì)導(dǎo)致某些元素預(yù)覽失?。?/li>
- 在本地部署一個(gè)服務(wù),如apache,nginx等
8. 起飛
到目前為止,你已經(jīng)創(chuàng)建好了一個(gè)MIP頁(yè)面。這個(gè)頁(yè)面有圖,有文,能分享,可以在瀏覽器中運(yùn)行。
進(jìn)階的內(nèi)容,請(qǐng)參考
MIP HTML 規(guī)范 組件布局 MIP 加速原理 擴(kuò)展組件開發(fā)規(guī)范