如何用百度MIP快速搭建体验友好的移动页面
在讀這篇文章之前，請確定你已經了解 MIP 定義及加速原理。如果不確定的話，可以到 MIP 官網了解。
改造前期準備和注意事項:
你可以選擇直接將原先的移動站點直接改成 MIP 站，也可以單獨再做一套 MIP 站點與移動站并存。
復雜的頁面暫不建議 MIP 改造，目前對資訊、圖文類支持已較好，若功能較為復雜的建議自定義組件或等待 MIP 項目小組開發。
改造需具備一定的 html 知識，改造 MIP 教程請按照教程來，特別注意大小寫，建議全局小寫。
我們從一個 html 頁面的上下順序一步步改造，只要按照本文章內的一步步來，即可完成 MIP 改造。
1. Doctype 改造
1.1 打開你的模板或代碼文件看第一行，將<! DOCTYPE ***>改為<!DOCTYPE html>
2. <Html>標簽改造
2.1 完成第一步后，繼續修改下一行代碼，將： <html xmlns="http://www.w3.org/1999/xhtml">或：<html lang="en"> 改成：<html mip>注意全部小寫
3. Head 部分改造
3.1 <head>標簽必須是完全小寫。
3.2 頁面的編碼必須是 utf-8，修改聲明為：<meta charset="utf-8">
3.3 頁面中加入<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
3.4 頁面中加入 MIP 專用樣式文件< link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css" >
3.5 這里需要告訴搜索引擎改頁面對應的標準 html 頁面地址，如果存在則標識<link rel="canonical" href="https://www.baidu.com"> 其中 href 值修改成為與當前 mip 頁面相對應的標準頁面（移動頁）url 地址。如果只有 mip 頁面沒有相對應的標準頁面則標識為：<link rel="canonical" href="https://www.baidu.com"> 其中的 href 值為當前頁面地址。詳細說明
4. Body 內改造
4.1 首先<body>標簽必須是小寫的；
4.2 替換<img>, <style>, <frame>, <form>,< input>, <textarea>, <select>, <option>標簽為對應 MIP 組件標簽，具體見官網文檔。
4.3 引用 MIP-JS 運行環境 <script src= "https://c.mipcdn.com/static/v1/mip.js"></script>放在頁面尾部。
5. 使用 MIP Cache 注意事項
5.1 一般 Cache 圖片、樣式、腳本，做完上述 4 步后，修改資源地址為相對地址或合法絕對地址（以校驗工具為準）；
5.2 Cache 的內容需要更新需要通過 MIP 數據提交中的更新數據接口，把更新的 url 鏈接推送過去，等待百度更新。
6. 其他組件使用
6.1 除了上述這些需求外，一部分站點可能需要用到組件，官網文檔包含了目前支持的所有組件，本文簡單舉例說明一下使用百度統計該如何實現：
6.2 查找原有百度統計工具查看統計 JS 代碼 (可全局查找 var _hmt 關鍵字) 獲取 token（hm.js? 之后的編碼），在頁面底部，所有 script 前放入代碼：<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11（網站統計 token 值）"></mip-stats-baidu>
6.3 去除原有百度統計工具查看統計 JS 代碼，刪除整段 js.
總結
以上是生活随笔為你收集整理的如何用百度MIP快速搭建体验友好的移动页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： typedef 的四个用途和两大陷阱
- 下一篇： c#输出最大值、最小值和平均值（B）【C