如果大家有使用百度站長工具,一定會發(fā)覺近來多了一個工具欄-移動專區(qū)目錄加了一個-MIP引入。
什么是百度MIP?
MIP 英文全稱Mobile Instant Page 即:移動網頁加速器,是一套應用于移動網頁的開放性技術標準。通過提供MIP-HTML規(guī)范、MIP-JS運行環(huán)境以及MIP-Cache頁面緩存系統,實現移動網頁加速。其是一項長期的開源計劃。
百度MIP加速原理
主要通過規(guī)范頁面結構,如不允許自定義JS、靜態(tài)圖片需要標明尺寸、控制外部資源的額加載來確保其高效性、封裝交互功能、只允許用 transforms 和 opacity 來完成動畫效果。最后就是百度將會把 MIP 網頁緩存到百度 CDN 中。只要符合 MIP 標準,都可以使用 MIP 緩存。
百度MIP頭部使用規(guī)范
起始標簽使用
html 標簽必須加上 mip 標記,即:
響應式網站可以用百度MIP嗎?
答案是否定的,因為響應式網站包括PC端、PAD端、移動端。百度MIP只適合用移動端。
我的網站有比較多的交互效果,可以用百度MIP嗎?
答案也是否定的,百度MIP只適合靜態(tài)類資訊站點,太多交互效果的網站不適合
百度MIP可以加載視頻嗎?
答案是可以的,百度MIP有mip-video視頻組件,可以加載視頻。
百度MIP是免費使用的嗎?
答案是肯定的,目前是鼓勵大家用。
其他瀏覽器都兼容百度MIP嗎?
百度自己肯定不用說了,聽人反應過UC以前不兼容,是因為誤把某些標簽當成廣告過濾了,最新版本的UC瀏覽器已兼容,正常瀏覽器應該都是兼容的。
開發(fā)成本高嗎?
根據方維網絡了解,如果是沒使用過的網站開發(fā)者,需要花半個月左右的時間深入了解,目前來看,會用的開發(fā)者并不是很多,應該還在普及階段,所以開始開發(fā)成本會比較高,然后慢慢降低。
除了網站加載速度快、百度排名優(yōu)先外,還有沒有其他優(yōu)勢?
如果不出所料,百度會開發(fā)越來越多的組件,目前已上線圖片預覽,視頻播放,分享組件等,使用這些組件可以更好的保證用戶體驗、減少兼容性問題。
方維網絡建議,如果是移動類的資訊站點,完全可以考慮使用百度MIP,畢竟速度快、排名好,這是非常重要的兩項。
方維網絡專注于網站定制開發(fā),歡迎廣大客戶咨詢400-800-9385
使用百度MIP遇到最大的問題應該是后臺編輯器編輯的內容如何轉換成MIP可識別的內容
如圖片標簽變化,img標簽變?yōu)閙ip-img、不允許用內聯樣式style、視頻標簽變化等。
目前來看,并沒有專門針對百度MIP開發(fā)的后臺編輯器,所以只能用程序替換的方法了。
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;
}