QQ瀏覽器X5內核問題彙總

QQ瀏覽器X5內核問題彙總

23 September 2015

重要更新，X5內核即將更新爲Blink內核，到時候下面的這些問題將所有被修復。

X5內核開發團隊也給開發者們提供了很多指引，推薦關注： http://x5.tencent.com/guide?id=2001

@2016-04-05

經常被人問及微信中使用的X5內核的問題，其實我也不是很清楚，只知道它是基於android 4.2的webkit，版本號是webkit 534。今天正好從X5團隊拿到了一份問題彙總，梳理下發出來，給各位開發者以參考——不排除明天會刪除這篇文章的可能。

1.Android WebView常見問題及解決方案彙總：

http://blog.csdn.net/t12x3456/article/details/13769731

2.請問各位碰到過X5瀏覽器內，局部滑動使用iscroll卡頓的問題麼？

回答：是使用 iscroll.js 這個JS去滾動麼？若是隻是爲了產生滾動，建議使用 overflow 屬性來，目前有一種滾動優化在線上版本效率不是太好，經過JS去改變CSS的屬性產生滾動

3.調用：-webkit-filter: blur(10px);filter: blur(10px);在Android下 背景圖沒有blur掉，只是被單純的放大而已

回答：-webkit-filter目前還不支持，能夠先用圖片替換的方式 後續版本會支持這個屬性

4.shadowBlur是陰影效果吧，咱們是想實現圖片毛玻璃

回答： http://blog.csdn.net/jia20003/article/details/9195915 這個有用麼

5.LBS相關，定位頻繁失敗

第一步，首先確認定位失敗是個別站點緣由仍是全部站點定位都失敗。若是是全部站點定位都不成功，頗有多是內核問題，轉內核相關同窗跟進調查定位邏輯是否有缺陷；若是是某個站點纔會出現的問題，繼續第二步排查，從站點源碼着手。

第二步，找到站點請求定位的js代碼段，檢查獲取定位信息函數的options字段，頗有多是 options 中 timeout 字段設置的超時過短致使，建議前端開發將該字段時間設置長一些（建議10s以上）或者不設置該字段。若是js沒有設置 timeout 字段的狀況下仍然定位不成功，則轉內核同窗調查內核流程。

ps：H5獲取LBS信息的js接口

回答：

navigator.geolocation.getCurrentPosition(showPosition,showError,{  
    enableHighAccuracy:false，
    timeout:10*1000,
    maximumAge:0
});

navigator.geolocation.watchPosition(watchPosition,showError,options);

showPosition：定位成功時回調； 
showError：定位出錯時回調； 
options：可選的地理定位請求特徵 
enableHightAccuracy：可選，是否開啓高精度模式，參數默認值爲 false 
timeout：可選，單位爲ms，瀏覽器須要在該時間段內完成定位，不然定位失敗，默認值爲 - - infinity，無窮大。若是該值設置較小，會有很高的定位失敗率。 
maximumAge：可選，單位ms，從新計算位置的時間間隔。默認爲0，即每次時時計算位置信息。

6.打開視頻播放，後退視頻仍然在播放

回答：部分機型，瀏覽頁面時打開視頻播放，點擊返回，頁面上的視頻仍然在播放。解決辦法是捕獲後退事件，主動調用 onHideCustomView() 方法，而且在該方法裏將 onShowCustomView 裏關聯的view解除關聯

7.請問一下微信瀏覽器的cookie清理機制是怎麼樣的？

回答：X5內核是不會清除的。

8.打開WWW頁面，縮放顯示的問題

回答： 使用webview打開www頁面，若是頁面被放大顯示，肯定websettings有沒有設置，webSettings.setUseWideViewPort（true），默認爲false，www頁面不會被縮放顯示的。手機QQ瀏覽器默認爲true，顯示www頁面更美觀

9.關於滾動時候動畫的問題

回答：

頁面滑動過程當中動畫不會被觸發 頁面滑動過程當中動畫會被中止 這個是X5內核爲了作滾動優化而作的限制

10.關於connection type定義的問題

回答：X5執行的標準比較老，NetworkInfo_API

enum ConnectionType {  
UNKNOWN = 0,  
ETHERNET = 1,  
WIFI = 2,  
CELL_2G = 3,  
CELL_3G = 4,  
CELL_4G = 5,  
NONE = 6,  
};

11.出現網絡正常，可是頁面打不開的狀況

回答：關於設置裏面的雲加速試下是否能夠打開。

12.js阻塞和css阻塞的不一樣

回答：css是阻塞渲染過程，js阻塞解析過程！對於用戶來講，沒什麼區別，都是空白的 js的執行時，若是js中有讀寫css的屬性的代碼，而且下載隊列中有待加載的css，js執行會被阻塞掉。

13.cookie的4k限制

回答：瀏覽器端cookie的數量可能會超過4k，有http請求時，內核只取前4k的cookie數據！

14.Js Defer與把js放到html底部的區別

回答：js defer：先加載，ondownload 後執行。和js放到html底部相似。不一樣的就是html預掃描到會先加載

15.首屏顯示後，爲何又會重排版

回答：瀏覽器的排版寬度受上層ui設置的webview寬度影響。若是webview沒設置或者是設置成0，瀏覽器內核會用默認的排版寬度320px進行排版。此時若webview的寬度值被正常設置，計算出來的排版寬度不是320px（通常是360px），這樣瀏覽器就要用360px寬度，對頁面進行重排。

16.canvas的數量是否是有限制

回答：

• 小於1G的內存， canvas的內存不能超過100M
• 1G到2G的內存， canvas的內存不能超過300M
• 大於2G的內存 canvas的內存不能超過500M
• 爲了防止內存佔用過多，硬件加速的CANVAS最多支持5個

小於等於1G內存手機，因爲內存沒辦法精確統計，當達到75M以上，CANVAS數量最多支持20個

上面說的canvas內存，僅僅是說canvas 長寬計算出來的內存，不包括canavs使用的圖片等資源內存

17.x5瀏覽器CSS3有些不支持,一樣的樣式，在chrome裏能起到效果，在X5就沒用。而且js性能也差的多,微信還內置X5，用起來太不爽

回答：是否方便具體說下是什麼樣的性能問題和css樣式缺陷影響到您？咱們這邊能夠跟進查看下緣由。

X5內核也在不斷改進，您的反饋能夠幫助咱們進一步優化。

chrome在標準的支持和性能優化方面確實目前走在業界前面，不過android系統的碎片化，android系統webview更是碎片化嚴重。

android系統上的web開發可能也須要考慮到不一樣rom的兼容狀況。X5內核致力於爲開發者提供統一的web體驗，並經過不斷的優化，來向業界標準對齊。

目前咱們也在作基於chromium內核的研究工做，後續在標準的支持和性能上會有進一步提升。

18.請問下x5中js調用android怎麼實現？

回答：跟系統內核下同樣，都藉助 addjavainterface 實現

19.請問一下，android手機微信上用的x5支持webgl嗎？

回答：android手機中微信上的X5都是支持webgl的，不過部分機型上還有兼容性問題，因爲兼容性問題，webgl以前咱們是採用軟繪的方式支持,目前切換到了硬繪，但總體來講仍是會有兼容性和性能問題,後續這塊還會持續更新

20.若是在某個設備第一次打開應用的時候 沒有網絡，x5內核能夠啓動嗎？單網絡恢復後還要再次認證，仍是 不用在認證？

回答：第一次打開應用是不會拉起X5的 在第二次打開以後 無論有無網絡均可以拉起

21.若是我不安裝瀏覽器，安裝微信，x5能調用起來嗎?

回答：不能，只能安裝QQ瀏覽器才能調用

22.web audio api是否已經支持？

回答：暫時還不支持

23.何時支持html5的onunload和onbeforeunload事件

回答：如今是支持html5的 onunload 和 onbeforeunload 事件的

24.要用X5的內核，必需要用QQ瀏覽器麼？

回答：目前 SDK 版本是這樣的，咱們正在預研的版本，手機若是安裝了微信或手Q ，其它 app 能夠不依賴 QQ瀏覽器 而共享 x5 內核。

25.關於svg問題。

回答：關於SVG的問題：

關於svg模糊的問題，有2種狀況：

直接訪問一個.svg url的頁面或者object，embed加入的svg， 出現模糊的問題

此問題已解決， qq瀏覽器5.8上已經修復， tbs下個版本也會修復 svg用做background-image, 模糊這個問題是咱們目前渲染機制致使不能兼容非標準寫法： 在用svg做爲background-image的時候， 須要指定background-size， 否則會模糊

關於svg支持狀況： 在5.3以前的qq瀏覽器不支持svg， 咱們會在後臺把svg轉成一張jpeg圖片， 供瀏覽器顯示，5.4及以上版本支持svg，若是遇到被轉成圖片的問題，須要升級瀏覽器版本。

26.請問flexbox近期會支持嗎？

回答：flexbox咱們正在作開發支持

27.x5內核 目前是獨立運行的 仍是須要安裝ＱＱ瀏覽器？

回答：sdk是須要QQ瀏覽器的，微信手Q裏的是不須要的

28.如今X5內核怎麼調試？在微信或者手q或者qq瀏覽器中調試頁面

回答：如今的微信手Q裏面的X5還沒法經過inspector調試 後期咱們會把帶有inspector調試的版本掛在開發者後臺下載區 敬請期待

29.請問x5支持webgl的全部接口嗎？能在全部版本的android機（4.0+)和ios機(5.0+)上運行webgl嗎？

回答：webgl目前是支持的，不過部分機型上還有兼容性問題

30.X5上支持哪些擴展？支持多少個紋理單元？

回答：X5上只能支持：

WEBGL_lose_context  
EXT_texture_filter_anisotropic  
OES_texture_float  
OES_standard_derivatives  
OES_vertex_array_object  
WEBGL_debug_renderer_info  
WEBGL_debug_shaders  
WEBKIT_WEBGL_compressed_texture_s3tc

並且這些是必須手機GPU有對應的擴展指令才行的。

關於紋理單元。咱們這邊沒有限制

上面的擴展，也都是基本每個對應opengl的一個擴展

支持多少紋理單元，也是從opengl查詢獲得的。

主要應該是看手機GPU支持到啥程度，咱們是作個對接。

31.x5的文件分片功能解決了嗎，blob = file.webkitSlice(start, stop),這樣分片出來的blob用不了啊。

回答：分片問題這邊已經定位處理，瀏覽器會在5.8版本修復

32.手機qq瀏覽器是否有調試工具呢？

回答：有的，Inspector。

33.請問如今微信調用的手機QQ瀏覽器支持websocket 嗎？

回答：支持websocket ，暫不支持wss，不支持webrtc

34.有計劃支持webRTC嗎？

回答：這個咱們後續會評估的。

35.我是HTML5遊戲開發者，製做中的H5遊戲須要有音樂音效。可是我在android機器上使用QQ瀏覽器出現了以下問題：

循環播放BGM時，若是同時播放音效，BGM會被強行暫停 多個音效同時播放時，會出現明顯的沒法忍受的延遲和播放失敗 這個問題在同一臺機器的微信上一樣存在，可是同一臺機器的chrome沒有這個問題。

我能想到的最合理的解釋是：X5內核同一時間只能播放一個音頻通道。

但願官方能解答個人疑惑和遇到的問題，謝謝。

PS：

• 使用的H5音頻庫 : SoundJS
• 使用的音頻格式 : mp3
• 使用的Android機型：三星 Note3

回答：播放音效須要獲取聲音輸出焦點，目前只支持同時播放一個音效 您提的需求咱們會討論評估後期是否能有方案現

36.播放音效時，爲啥會把我後臺的BGM播放給暫停掉？

回答：播放聲音時當前音頻須要獲取 audiofocus ，系統在audiofocus丟失時會通知其它音頻播放軟件，這個暫停應該是播放軟件自身的行爲，咱們自己並無暫停後臺音頻，只是向系統申請了 audiofocus

37.300ms延遲是指什麼？click 和 touch ?

回答：touch 點擊以後，到 click 事件被觸發，click 事件有延遲，touch 不存在，用 touchstart 事件替代 click 事件就OK

38.如今微信內置的瀏覽器能支持flexbox麼，如今有沒有什麼好辦法可以替代呢？作好的網頁一放到微信上，大量的flex的頁面

回答：你好flexbox正在開發支持，flexbox在android4.1到4.3系統內核上，也有相似問題，頁面是須要兼容的

39.有沒有什麼x5內核的論壇或者wiki之類的？能夠參考下。

回答：http://bbs.browser.qq.com/ http://x5.tencent.com/ 這兩個論壇能夠關注下

另外有咱們的公衆帳號 有問題能夠隨時交流

40.X5公衆號叫什麼？

回答：騰訊X5瀏覽服務

41.手q上面的內核應該也是x5的吧？這樣直接在手q上面的效果和在微信裏面應該是同樣的？

回答：是的手Q微信內的webview都是X5。

42.x5不支持font-face嗎？

回答：支持

43.x5 支持flex嗎？有兼容性文檔嗎？

回答：不支持.http://1.h5support.sinaapp.com/incoming/cow.html

這個頁面是參考caniuse的測試用例獲得的測試結果，5.7是對應qq瀏覽器5.7版本，能夠對比下和系統瀏覽器4.1~.4.4的支持度。有須要的同窗能夠先參考下，相關的文檔建設咱們也在逐步完……

44.iscroll+lazyload在x5瀏覽器裏面卡頓很嚴重，有人碰到過相似問題麼，小米手機 列表內元素200個左右。

回答：iscroll自己對內核要求比較高，較新的blink版本支持才比較好。能夠對比測試下android 4.x 的系統瀏覽器看看。建議仍是在前端作些優化，避免較長的元素，並減小動畫效果。http://www.cnblogs.com/vbluebirdv/archive/2012/11/18/2776300.html 能夠參考網上一些iscroll調優的文章

45.微信裏面緩存問題，在安卓下和 ios下，刷新機制是否是不同？

回答：ios由於有刷新功能，點擊以後請求到的都是最新的文件，安卓下，無論怎樣請求都不會更新文件

46.如今微信裏面沒有假如這個啊？爲何IOS QQ瀏覽器不識別這個？

回答：ios內核不是X5， ios 瀏覽器後續版本也會支持 http://open.mb.qq.com/doc?id=1201 目前ios 瀏覽器僅支持 x5-page-mode

47.如今白鷺遊戲引擎是否是內置在x5裏面了？

回答：內置了白鷺引擎runtime

48.x5內核不支持 canvas 的 background 屬性嗎？

<!doctype html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta charset="utf-8">  
<title>canvas test</title>  
    <!--<meta HTTP-EQUIV="pragma" CONTENT="no-cache">-->
    <!--<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">-->
</head>

<body>  
<div>  
    <canvas id="testCanvas" width="500" height="300" style="background: #00FF00;"></canvas>

<!--<canvas id="testCanvas" width="1136" height="640" style="background:#000"></canvas> -->  
</div>  
</body>  
</html>

背景顏色顯示不出來

回答：這個是作了優化，當canvas下蓋了背景，就沒有去繪製背景圖片，當初是由於一些手機的GPu在繪製這塊，若是存在這種狀況繪製很是慢

49.qq瀏覽器有沒有準備支持asm.js的計劃？

回答：咱們也正在籌備相關工做，會對市面上各類遊戲引擎進行全面評測並設計合理的架構方案整合。預計下半年能夠推出，敬請期待

50.X5不支持canvas.toDataUrl()的image/jpeg參數，仍是轉成了默認的png格式請問有什麼替換方法嗎？

回答：當前確實還不支持...咱們在修復

51.問一下 ios版的微信裏面是用的系統自帶的UIWebView仍是用的qq瀏覽器的內核？

回答：ios版微信裏面用的是系統自帶的

神飛愛好前端設計與開發，崇尚一目瞭然的設計。現居深圳/廣州，就任於騰訊微信設計團隊。