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