【原創】Chrome53 最新版驚現無厘頭卡死 BUG！

發現問題

今天有客戶向咱們反饋了一個BUG：一個頁面在IE、FireFox、Chrome52中能正常運行，可是在最新版的Chrome53中顯示不了？？？

習慣性的，咱們須要客戶提供頁面在瀏覽器中的HTML源代碼，客戶竟然告訴咱們說：右鍵打不開！！！

這就怪了，莫非寫的代碼致使死循環了，而後瀏覽器崩潰了........

首先和客戶確認運行環境：

1. 使用了最新版的FineUIPro v3.2.0.4
2. 使用了最新版的Chrome 53.0.2785 穩定版

一切看似都是最新的，而後咱們讓客戶在IE瀏覽器下取到頁面的HTML源代碼，開始調試

分析問題

拿到頁面的HTML源代碼，咱們在相同的Chrome53中測試，的確瀏覽器卡死了。

咱們的第一反應就是代碼中存在死循環，可是奇怪的是爲啥Chrome52沒有問題呢？無論他，先調試再說

最後，代碼跟蹤到這裏地方：

 

其實這就是jQuery的一個DOM節點的插入操做，可是執行完這條語句後，瀏覽器就卡死，沒反應了。

這個代碼的簡化示例代碼以下：

$('<div></div>').appendTo('body');

 

其實就是對 jQuery 的 appendTo 方法的調用，這讓咱們的焦點轉向了 jQuery，莫非是 jQuery 對 Chrome 53 不兼容？

 

若是存在這麼嚴重的問題，網絡上應該早就有人遇到了。但實際上沒有一我的提出相似的問題，而且咱們使用的 jQuery 也是最新版：v1.12.4

 

爲了不 FineUIPro 的客戶端 JavaScript 的影響，咱們把 me._fjs_el DOM 節點的內容單獨拿出來，在頁面上執行：

$('<div id="Panel7" class="f-panel f-panel-viewport f-cmp ui-widget" style="margin: 5px; display: block;">'+
    '<div id="Panel7_Toolbar1" class="f-toolbar f-toolbar-align-left f-panel-toolbar-top ui-widget-content f-cmp ui-widget" style="display: block;"></div>'+
    '<div class="f-panel-body" style="padding: 0px; overflow: auto;">'+
        '<div id="fineui_0" class="f-panel ui-widget-content f-panel-border f-cmp ui-widget f-layout-vbox-item" style="margin: 5px; display: block;"></div>'+
    '</div>'+
'</div>').appendTo('body')

 

 

結果是，執行完這段代碼後，瀏覽器直接卡死：

 

此時，咱們來到 CPU 的佔用居高不下：

 

莫非，是 DOM 節點有問題，好比少了閉合標籤之類的，致使Chrome53解析出的問題？？

 

仔細檢查後，咱們確認了 DOM 節點一切正常！！

 

好吧，那就來折半分析問題，先刪除一部分代碼，發現以下兩段刪除了一個 DIV 節點的代碼都能正常運行：

$('<div id="Panel7" class="f-panel f-panel-viewport f-cmp ui-widget" style="margin: 5px; display: block;">'+
    '<div id="Panel7_Toolbar1" class="f-toolbar f-toolbar-align-left f-panel-toolbar-top ui-widget-content f-cmp ui-widget" style="display: block;"></div>'+
    '<div class="f-panel-body" style="padding: 0px; overflow: auto;">'+
    '</div>'+
'</div>').appendTo('body')

 

$('<div id="Panel7" class="f-panel f-panel-viewport f-cmp ui-widget" style="margin: 5px; display: block;">'+
    '<div class="f-panel-body" style="padding: 0px; overflow: auto;">'+
        '<div id="fineui_0" class="f-panel ui-widget-content f-panel-border f-cmp ui-widget f-layout-vbox-item" style="margin: 5px; display: block;"></div>'+
    '</div>'+
'</div>').appendTo('body')

 

無厘頭，自己刪除的 DIV 節點都沒有任何問題。更無厘頭的事情時，通過好屢次嘗試，咱們發現把原始HTML代碼中 class 屬性改個字符就能正常運行了：

$('<div id="Panel7" class="f-panel f-panel-viewport f-cmp ui-widget" style="margin: 5px; display: block;">'+
    '<div id="Panel7_Toolbar1" class="f-toolbar f-toolbar-align-left f-panel-toolbar-top ui-widget-content f-cmp ui-widget" style="display: block;"></div>'+
    '<div class="f-panel-body" style="padding: 0px; overflow: auto;">'+
        '<div id="fineui_0" class="f-panel ui-widget-content f-panel-border f-cmp ui-widget f-layout-vbox-iter" style="margin: 5px; display: block;"></div>'+
    '</div>'+
'</div>').appendTo('body')

 

 

 

好吧！這還有啥好說的，這是Chrome53自己的BUG無疑！

 

小結：上面的代碼可復現，若是你不信，能夠本身試下。

首先隨便找到一個引用了 jQuery 的頁面，若是很差找，能夠用咱們產品的示例頁面：http://fineui.com/demo_pro/

打開 Chrome53， F12 打開調試窗口，執行以下代碼：

$('<div id="Panel7" class="f-panel f-panel-viewport f-cmp ui-widget" style="margin: 5px; display: block;">'+
    '<div id="Panel7_Toolbar1" class="f-toolbar f-toolbar-align-left f-panel-toolbar-top ui-widget-content f-cmp ui-widget" style="display: block;"></div>'+
    '<div class="f-panel-body" style="padding: 0px; overflow: auto;">'+
        '<div id="fineui_0" class="f-panel ui-widget-content f-panel-border f-cmp ui-widget f-layout-vbox-item" style="margin: 5px; display: block;"></div>'+
    '</div>'+
'</div>').appendTo('body')

 

瀏覽器卡死！！！

 

而後，從新啓動 Chrome53，執行以下代碼：

$('<div id="Panel7" class="f-panel f-panel-viewport f-cmp ui-widget" style="margin: 5px; display: block;">'+
    '<div id="Panel7_Toolbar1" class="f-toolbar f-toolbar-align-left f-panel-toolbar-top ui-widget-content f-cmp ui-widget" style="display: block;"></div>'+
    '<div class="f-panel-body" style="padding: 0px; overflow: auto;">'+
        '<div id="fineui_0" class="f-panel ui-widget-content f-panel-border f-cmp ui-widget f-layout-vbox-iten" style="margin: 5px; display: block;"></div>'+
    '</div>'+
'</div>').appendTo('body')

 

瀏覽器正常運行！！

 

解決問題

既然是 Chrome53 的BUG，就等 Chrome官方出更新版本吧....

剛下載的最新版：53.0.2785.116 仍然可重現這個問題，有興趣的同窗能夠本身試下（因爲google官網沒法訪問，能夠方便的經過baidu下載）。