微信浏覽器是移動端的IE6?微信更新核心後Html5和CSS3相容性總結

今年4月，自從微信浏覽器X5 更新Blink核心之後，各前端社群一片高潮，仿佛看到了前端er,眼含熱淚進而抱頭痛頭的說:終于可以不用相容這“移動端的IE6 ”了，可以早點回家了！！！

那真實情況是不是這樣呢？正好最近在做一款微信的小遊戲，項目結束後，我做了一個小的總結，分享如下，時間寶貴，先上結論。

結論

總的來說，自從微信4月更新 X5 Blink核心之後，相容性大大好轉。

1. 安卓版的微信浏覽器，全面更新為TBS2.0 (基于Android 5.0 WebView Blink核心，Chrome 37），所有版本的安卓系統均為同一核心，開發隻需考慮适屏問題了，HTML5和CSS3均有較好的支援（基于Chrome 37，詳情可以上caniuse查）。
2. IOS雖說沒有更新統一為同一版本的核心，但IOS版本的微信一直是WKWebView核心,WKWebView的版本依賴于IOS的版本。 IOS 8.0（下文有IOS8以下系統的占比，可忽略）以上的系統，對Html5和css3的支援率也很高，基本的H5，CSS3的特性均得到支援，測試中有詳細資料。
3. 相容性詳情請檢視html5和css3測試或直接用真機在以下提供的測試位址測試。

從我最近調試遊戲和微信端的頁面和以下測試來看，基本和媒體預期一緻，Html5和Css3相容良好。希望後面X5的Blink能夠保持一定節奏的更新，不要那麼多坑。

真機測試

html5測試

測試位址：https://html5test.com/

測試結果：

1. honor 7:475分 安卓6.0 測試報告： https://html5test.com/s/e61f0b2ed3825842.html
2. vivo xplay:475分 安卓4.2 測試報告： https://html5test.com/s/9b411b2ed390367b.html
3. iphone4：401分 iOS 9.3.1 測試報告： http://html5test.com/s/e0c5562ed81761a7.html
4. iphone6 plus: 387分 IOS 8.4 測試報告： https://html5test.com/s/e5b68e2ed8206f48.html

css3測試

該網站不支援輸出報告:( ，隻截了一個圖。

（說明，chrome 49 測試支援度為：52%，相對來說，下面浏覽器的測試對CSS3的支援度還是比較高的 ）

測試位址：http://css3test.com/

1. honor 7 安卓6.0 :49%
2. vivo xplay 安卓4.2：49%
3. iphone4 iOS 9.3.1：56%
4. iphone6 plus IOS 8.4 ：51%

注：從Layabox引擎的遊戲營運統計資料上看，低于IOS 8.0的遊戲使用者終端占比僅為3%左右。幾可忽略不計。

FYI

官方人員說明

http://bbs.mb.qq.com/thread-202308-1-1.html

基于BLINK的新X5核心已經在手機QQ浏覽器上上線了，最近在微信、手機QQ、空間上灰階。 4月份應該會全量釋出。

很抱歉給大家的開發帶來了不便。

這裡介紹一下微信、手機QQ、空間内嵌X5的背景：最初是因為在微信發現系統WebView的一些安全漏洞，對微信業務影響非常嚴重，但是這些漏洞單純在APP側無法解決，是以微信提出要求内嵌X5核心替換系統WebView。後來手機QQ、空間也提出了内嵌X5的需求。是以為了APP的安全考慮，這裡是不可能讓前端控制用不用X5的，不然的話，惡意的網站直接跳過X5，利用系統WebView的安全漏洞，就可以擷取使用者的銀行賬号等資訊了。

内嵌X5最初是解決APP的問題，主要是APP終端開發的述求，前端同學沒有參與，上線後，給前端同學帶來了一些挑戰，這主要是因為之前的X5核心是基于Android 4.2 WebView定制優化而來的，很多H5， CSS3屬性支援是以Android 4.2系統為基礎的，雖然後續我們在此基礎上做了增強，但是比起Chrome的Blink核心，還是要差很多。 而Android 4.4開始，系統WebView切換到了Blink核心，是以導緻在新Android機型上，X5核心的一些CSS3/H5支援弱于系統WebView。

為了解決這個問題，去年X5核心團隊，投入了全部人力，全力将X5核心更新到了Blink。 全新的X5核心基于Android 5.0系統的Blink核心，已經在15年11月份在QQ浏覽器6.2版本上線，經過兩個版本的疊代，現在基本穩定，近期已經開始在微信、手機QQ和空間上灰階，預期會在4月份全量上線。新核心上線後，會在新Android版本手機上對齊Chrome blink核心在前端的表現能力，同時在低版本的Android手機上也提供相同表現能力，相信會給前端同學帶來更多的想象空間。

報道

1. Layabox 解讀微信全面更新 X5 Blink 核心
2. iOS 8 HTML5性能測試：蘋果有多愛HTML5？

相關資訊

官網：http://x5.tencent.com/

核心資訊：http://x5.tencent.com/guide?id=4000

1. 核心基準從WebKit更新到Blink版本，更高的性能，更完善的H5/CSS3支援。
2. 核心版本号更新到362xx版本。 可以根據UserAgent判斷目前環境是否已更新到 TBS2.0版本,包含（TBS/03xxxx）字段
3. 更完善的H5支援，HTML5跑分475
4. CSS3屬性支援增強，完整支援flex
5. 更完善的filter支援
6. 支援Spdy 3.1
7. 動畫性能提升
8. 支援僞元素動畫效果
9. 更好的inspector支援

caniuse測試： http://res.imtt.qq.com/tbs/incoming20160419/home.html

調試方法：http://bbs.mb.qq.com/thread-1143161-1-1.html

出處：http://www.cnblogs.com/etoah/

歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面保留此段聲明。