如果大家有使用百度站長(zhǎng)工具，一定會(huì)發(fā)覺(jué)近來(lái)多了一個(gè)工具欄-移動(dòng)專區(qū)目錄加了一個(gè)-MIP引入。
什么是百度MIP？
MIP 英文全稱Mobile Instant Page 即：移動(dòng)網(wǎng)頁(yè)加速器，是一套應(yīng)用于移動(dòng)網(wǎng)頁(yè)的開(kāi)放性技術(shù)標(biāo)準(zhǔn)。通過(guò)提供MIP-HTML規(guī)范、MIP-JS運(yùn)行環(huán)境以及MIP-Cache頁(yè)面緩存系統(tǒng)，實(shí)現(xiàn)移動(dòng)網(wǎng)頁(yè)加速。其是一項(xiàng)長(zhǎng)期的開(kāi)源計(jì)劃。
百度MIP加速原理
主要通過(guò)規(guī)范頁(yè)面結(jié)構(gòu)，如不允許自定義JS、靜態(tài)圖片需要標(biāo)明尺寸、控制外部資源的額加載來(lái)確保其高效性、封裝交互功能、只允許用 transforms 和 opacity 來(lái)完成動(dòng)畫效果。最后就是百度將會(huì)把 MIP 網(wǎng)頁(yè)緩存到百度 CDN 中。只要符合 MIP 標(biāo)準(zhǔn)，都可以使用 MIP 緩存。
百度MIP頭部使用規(guī)范
起始標(biāo)簽使用
html 標(biāo)簽必須加上 mip 標(biāo)記，即:
響應(yīng)式網(wǎng)站可以用百度MIP嗎？
答案是否定的，因?yàn)轫憫?yīng)式網(wǎng)站包括PC端、PAD端、移動(dòng)端。百度MIP只適合用移動(dòng)端。
我的網(wǎng)站有比較多的交互效果，可以用百度MIP嗎？
答案也是否定的，百度MIP只適合靜態(tài)類資訊站點(diǎn)，太多交互效果的網(wǎng)站不適合
百度MIP可以加載視頻嗎？
答案是可以的，百度MIP有mip-video視頻組件，可以加載視頻。
百度MIP是免費(fèi)使用的嗎？
答案是肯定的，目前是鼓勵(lì)大家用。
其他瀏覽器都兼容百度MIP嗎？
百度自己肯定不用說(shuō)了，聽(tīng)人反應(yīng)過(guò)UC以前不兼容，是因?yàn)檎`把某些標(biāo)簽當(dāng)成廣告過(guò)濾了，最新版本的UC瀏覽器已兼容，正常瀏覽器應(yīng)該都是兼容的。
開(kāi)發(fā)成本高嗎？
根據(jù)方維網(wǎng)絡(luò)了解，如果是沒(méi)使用過(guò)的網(wǎng)站開(kāi)發(fā)者，需要花半個(gè)月左右的時(shí)間深入了解，目前來(lái)看，會(huì)用的開(kāi)發(fā)者并不是很多，應(yīng)該還在普及階段，所以開(kāi)始開(kāi)發(fā)成本會(huì)比較高，然后慢慢降低。
除了網(wǎng)站加載速度快、百度排名優(yōu)先外，還有沒(méi)有其他優(yōu)勢(shì)？
如果不出所料，百度會(huì)開(kāi)發(fā)越來(lái)越多的組件，目前已上線圖片預(yù)覽，視頻播放，分享組件等，使用這些組件可以更好的保證用戶體驗(yàn)、減少兼容性問(wèn)題。
方維網(wǎng)絡(luò)建議，如果是移動(dòng)類的資訊站點(diǎn)，完全可以考慮使用百度MIP，畢竟速度快、排名好，這是非常重要的兩項(xiàng)。
方維網(wǎng)絡(luò)專注于網(wǎng)站定制開(kāi)發(fā)，歡迎廣大客戶咨詢400-800-9385
使用百度MIP遇到最大的問(wèn)題應(yīng)該是后臺(tái)編輯器編輯的內(nèi)容如何轉(zhuǎn)換成MIP可識(shí)別的內(nèi)容
如圖片標(biāo)簽變化，img標(biāo)簽變?yōu)閙ip-img、不允許用內(nèi)聯(lián)樣式style、視頻標(biāo)簽變化等。
目前來(lái)看，并沒(méi)有專門針對(duì)百度MIP開(kāi)發(fā)的后臺(tái)編輯器，所以只能用程序替換的方法了。
function replacePicUrl($content = null, $url="") {
$pattern="/<img.*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.jpeg]|\.png]|\.bmp]))[\'|\"].*?[\/]?>/";
preg_match_all($pattern, $content,$matches);
$full_img = $matches[0];
$full_src = $matches[1];
foreach ($full_img as $k => $v) {
$v1 = str_replace("<img", "<mip-img", $v);
$v1 = str_replace("/>", "></mip-img>", $v1);
$new_path = $url.$full_src[$k];
$v1 = str_replace($full_src[$k], $new_path, $v1);
$content = str_replace($v, $v1, $content);
}
return $content;
}
提取style：
function getStyle($content = null){
preg_match_all("/style=('|\")([^'\"]+)('|\")/",$content,$matches);
$styles = $matches[0];
$styles_value = $matches[2];
$style_custom = "";
$i = 0;
foreach($styles_value as $key){
$style_custom .= ".class".$i."{".$key."}";
$class_name = 'class="class'.$i.'"';
$replacements = $class_name;
$patterns = $styles[$i];
$content = str_replace($patterns, $replacements, $content);
$i++;
}
$res['style_custom'] = $style_custom;
$res['content'] = $content;
return $res;
}
