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