MIP (Mobile Instant Pages - 移動網(wǎng)頁加速器) 主要用于移動端頁面加速。
瞬間加速：
移動頁面速度提升30-80%，支持在搜索引擎中沉浸式瀏覽，平均耗時最高降低80%。
提升流量：
搜索結(jié)果頁專屬icon，MIP頁，在搜索引擎中的點擊量提升可，高達13%，到達率提升5-40%
搜索優(yōu)待：
百度搜索會給予MIP結(jié)果頁頁，面級別優(yōu)待，抓取、收錄、排序一脈相承
體驗優(yōu)化：MIP頁面符合百度移動友好度，規(guī)范，頁面內(nèi)容將以更友好的，方式瞬時到達用戶
這篇文檔將帶你快速創(chuàng)建一個 MIP 頁面。
1. 創(chuàng)建 HTML 文件
首先創(chuàng)建一個標(biāo)準(zhǔn)的 HTML 文件 , 注意：
- 在
<html>標(biāo)簽中增加mip標(biāo)識 - 編碼為 utf-8
- 添加 meta-viewport，用于移動端展現(xiàn)
<!DOCTYPE html>
<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 運行環(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" >
<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">主要用于告知搜索引擎頁面間的關(guān)系。添加關(guān)聯(lián)標(biāo)簽后，MIP 頁的會繼承 原頁面 (移動端) 的點擊權(quán)重，同時 MIP 頁 將作為搜索引擎的首選導(dǎo)流頁面。
使用規(guī)則：
<link rel="canonical">在 MIP 頁 中使用，<link rel="miphtml">在 原頁面 使用。- 若 原頁面 中已經(jīng)存在
<link rel="canonical">標(biāo)簽指向 PC 頁，則 MIP 頁<link rel="canonical">的 href 也指向 PC 頁。 - 若
MIP 頁沒有對應(yīng)的原頁面，則指向 MIP 頁本身 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" >
<!--canonical 中的鏈接填寫對應(yīng)的非 mip 頁地址-->
<link rel="canonical" >
<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" >
<!--canonical 中的鏈接填寫對應(yīng)的非 mip 頁地址-->
<link rel="canonical" >
<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)注頁面速度，也因此禁用了一些引起拖慢速度的 html 標(biāo)簽（禁用列表）。例如，<img>標(biāo)簽會引起瀏覽器的 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" >
<!--canonical 中的鏈接填寫對應(yīng)的非 mip 頁地址-->
<link rel="canonical" >
<title>Hello World</title>
<style mip-custom>
h1 { color: red;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<mip-img layout="responsive" 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 組件
警告：出于對代碼質(zhì)量和性能的考慮，MIP 頁中不允許自定義 javascript 代碼。
在一個合法的 MIP 頁面中，所有的交互通過引入 MIP 組件實現(xiàn)。MIP 組件可以理解為封裝了 js 的自定義 html 標(biāo)簽。上一步中的<mip-img>也是一個 MIP 組件。點擊這里 查看更多組件。
我們以分享組件為例，根據(jù) 分享組件文檔，組件對應(yīng)的 html 標(biāo)簽為<mip-share>，需要依賴//mipcache.bdstatic.com/static/v1/mip-share/mip-share.js腳本，用在頁面里就是這樣：
<!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" >
<!--canonical 中的鏈接填寫對應(yīng)的非 mip 頁地址-->
<link rel="canonical" >
<title>Hello World</title>
<style mip-custom>
h1 { color: red;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<mip-img layout="responsive" src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"></mip-img>
<mip-share title=" 分享：我的第一個 MIP 頁面 "></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>
在使用組件時，請注意閱讀組件文檔，查看組件是否依賴額外腳本。如果依賴，請在 mip.js 之后引入腳本。
7. 預(yù)覽
開發(fā)完成后，可以使用 MIP 校驗工具 保證代碼規(guī)范。
提示： 校驗代碼，使用 MIP 校驗工具。
預(yù)覽線上 URL 異步打開效果，使用 MIP 預(yù)覽工具。
MIP 頁文件可以直接運行，你可以選擇如下方式，像預(yù)覽普通 HTML 站點一樣預(yù)覽 MIP HTML 頁面：
- 直接在瀏覽器中打開（由于 XML Http Requests 失敗可能會導(dǎo)致某些元素預(yù)覽失?。?/li>
- 在本地部署一個服務(wù)，如 apache，nginx 等
- 使用 mip-cli 輔助預(yù)覽，使用方法見 MIP 博客：開發(fā)教程一。
8. 起飛
到目前為止，你已經(jīng)創(chuàng)建好了一個 MIP 頁面。這個頁面有圖，有文，能分享，可以在瀏覽器中運行。
