微信瀏覽器是移動端的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