百度MIP技術快速入門（上）

時間 2020-06-15

標籤百度 mip 技術快速入門简体版

原文原文鏈接

前言

「本文假定讀者已經有初級的前端開發知識，包括HTML、CSS。」css

百度在一年前推出了稱爲 MIP（Mobile Instant Pages）的前端開發組件，主要目的是加速移動端網頁的顯示。MIP技術來源於谷歌推出的AMP技術，但因爲衆所周知的緣由，百度決定自行開發一套和AMP相似的技術，宣稱和AMP規範徹底一致。html

MIP由MIP-HTML、MIP-JS、MIP-Cache組成。用人話說，前端

MIP-HTML 是MIP對HTML的規範，包括禁用<img>以防止頁面repaint、a標籤強制要求href屬性等，具體 https://www.mipengine.org/doc... ；git

MIP-JS 要求全部JS代碼須要以「MIP組件」的形式引入到頁面中，禁止直接寫JS。而且，在MIP全部的JS代碼都是異步加載的，再加上禁用各類CSS的hack、靜態資源固定大小等規範來減小頁面重繪，以此提升JS的運行速度；github

MIP-Cache，簡單說就是百度免費提供的CDN，全部MIP頁的代碼都放在百度的CDN上，並且對於網頁中的靜態資源，好比圖片，均可以放在百度的CDN上，但因爲百度對使用MIP-Cache技術的靜態資源的收錄時間不肯定，因此我建議只對長期不變的靜態資源用緩存。shell

概覽

應用MIP技術，按照百度的建議是直接開發一套MIP頁面，而不建議「改造」現有移動端H5頁。數組

然而改造一下現有的頁面，成本顯然低得多。將一個頁面「MIP化」大概分爲2步：瀏覽器

對於HTML代碼，按照MIP-HTML的規範進行修改，去除或替換禁用的標籤；
對於JS代碼，因爲大部分JS是一些顯示邏輯（好比圖片輪播），不涉及具體的業務，因此，開發者要在MIP組件列表（https://www.mipengine.org/doc... ）中尋找合適的MIP組件直接替換掉頁面中原有的JS代碼；
注：若是頁面中的JS涉及必要的業務邏輯，則必須自行開發 MIP自定義組件，並提交百度審覈，經過後才能用。緩存

願意的話，還能夠按照MIP-Cache的格式要求來緩存靜態資源。服務器

以目前MIP技術的發展來看，MIP只適合於改造單個頁面，還沒法應用於整個站點，由於官方MIP組件都比較簡單，只適用於相似新聞、論壇帖子頁之類的結構簡單、特效簡單的網頁，對於存在複雜的交互邏輯，或是基於React之類框架的SPA頁面，不適合應用MIP技術，若是必定要用MIP的話，那須要去掉這些複雜的邏輯，只保留簡單的展現，至關於從新開發一個頁面了。

不過呢，百度已經在開發MIP 2.0了，MIP 2.0的亮點即「整站MIP化」，包括提供更多強大的MIP組件、更容易編寫JS代碼、默認用Vue開發自定義組件以及更快的運行速度等。

MIP頁面開發入門

先來看看如何開發一個MIP頁面。

開發MIP頁，最重要的就是如何使用MIP組件。

爲了方便開發，首先，請按照 MIP-CLI 的文檔安裝好（https://github.com/mipengine/... ），進入工做區文件夾，並新增一個頁面，命令是

mip add XXX.html

使用以下命令能夠驗證頁面是否符合MIP的要求：

mip validate XXX.html

若是須要運行這個頁面，那麼能夠用這個命令

mip server

按 Ctrl+C 能夠退出。提示一下，在瀏覽器中調試MIP頁時，能夠用開發者工具修改頁面分辨率，換成手機的分辨率。

使用 MIP-CLI 新建的頁面是這樣的：

<!DOCTYPE html>
<html mip>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title><!-- 標題 --></title>
    <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
    <link rel="canonical" href="對應的原頁面地址">
    <style mip-custom>
    /* 自定義樣式 */
    </style>
</head>
<body>
<!-- 正文 -->

<script src="https://c.mipcdn.com/static/v1/mip.js"></script>

</body>
</html>

其中<html mip>、 <link rel="canonical" href="">是必須添加的標籤，前者用於告知Spider當前是個MIP頁；後者告知百度當前MIP頁對應的移動端H5頁的地址（對應的，在H5頁上須要<link rel="miphtml" href=""> 指明對應的MIP頁地址），固然，若是沒有對應的H5頁，那麼能夠指向PC頁或本身。

引入的一個CSS文件和JS文件是MIP技術的基本庫文件，裏面包含了MIP的核心代碼和幾個內置組件。

基本規範

對於全部<img>標籤，替換爲<mip-img>，注意<mip-img>不是自閉合標籤，須要添加關閉標籤。

<mip-img
    layout="responsive" 
    width="350" 
    height="263"
    src="https://www.mipengine.org/static/img/sample_01.jpg">
</mip-img>

https://www.mipengine.org/exa...

這是一個最簡單的MIP組件，看上去和普通的HTML<img>標籤同樣，很是簡單，但有幾點須要注意：

1）MIP的組件大多支持多種佈局，這裏使用的是「responsive」，即響應式佈局，適合視頻、圖片等固定比例但真實大小不肯定的資源；

2）「responsive」佈局須要提供 width 和 height，但不須要提供單位，由於這裏的寬和高僅用於肯定比例，MIP會自動給定真實大小。

還有 a標籤強制要求href屬性等其餘要求，具體看 MIP-HTML 規範，https://www.mipengine.org/doc...。

組件佈局

MIP組件支持如下幾種佈局（https://www.mipengine.org/doc... ），具體要看各個組件的文檔。能夠經過修改MIP組件標籤中的layout屬性修改佈局方式。

這裏須要注意的是，大多數組件都有默認的佈局方式。

添加樣式

MIP沒有對CSS作特別的限制（可是會自動去掉一些性能極差的選擇器），也容許使用外鏈的方式引入CSS文件（雖然並不建議這麼作，由於這樣引入的CSS文件一般很是大）。對於內聯的CSS，須要使用 <style mip-custom></style> 包裹。

試用更復雜的組件

MIP組件的使用方法相似於Bootstrap的JS組件的使用方法，找到文檔，複製，粘貼，done……因此這裏只提一個要點：MIP官方提供的組件分爲內置組件、個性化組件和廣告組件，其中內置組件只須要一開始自動引入的 mip.js 就能運行，而其餘類型的組件均須要引入特定的腳本才能用。

由於很是簡單，因此這裏我就以一個很簡單的個性化組件——mip-gototop爲例，展現一下MIP組件的使用方法。

複製粘貼 gototop 組件的示例代碼；

<mip-fixed type="gototop">
    <mip-gototop></mip-gototop>
</mip-fixed>

在 mip.js 後添加 gototop 組件須要的JS文件。

<script src="https://c.mipcdn.com/static/v1/mip-gototop/mip-gototop.js"></script>

隨便寫一些代碼把整個頁面撐的長一些，以便看出回頂部組件的效果。

最後看起來是這樣的：

接着可使用上文中提到的 MIP-CLI 工具，mip server 命令運行MIP服務器，從這個本地的服務器訪問剛寫完的MIP頁，就能夠看到效果了。

以上就是絕大多數MIP組件的使用方法。

已有H5頁改形成MIP頁

使用百度的官方MIP開發一個MIP並不難，那現有頁面改形成MIP頁就更簡單了，就三步：

使用 MIP-CLI 驗證現有頁面（mip validate XXX.html），找出全部錯誤；
修復代碼規範類的錯誤，好比a標籤缺了href屬性、存在<img>標籤等；
把用JS實現的特效換成MIP組件，主要包括回到頂部、圖片輪播、廣告等。

我在網上找到了這一套用AmazeUI寫的H5頁，簡單說一下改造的過程。侵刪。

先使用驗證工具驗證這個頁面，提示有這些錯誤：

能夠發現大多數錯誤均可以很快解決。

而後能夠發現，頁面中有三塊JS實現的效果須要替換爲MIP組件。分別是：

頂部的輪播圖片效果，須要替換爲 mip-carousel；
回到頂部按鈕，須要替換爲 mip-gototop；

超連接，mip頁之間跳轉須要用

<a data-type="mip" data-title="連接到頁面的標題" href="連接地址"></a>

至此也就完成了這個頁面的MIP化改造。

總結

本文簡單介紹了MIP技術、MIP頁的開發過程、現有H5的MIP化改造等基本問題，後續的文章將更深刻的討論MIP技術，包括MIP自定義組件的開發、MIP 2.0等話題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。