【已更新】【原創】Chrome53 最新版驚現無厘頭卡死 BUG！ - sanshi－IT工程師數位筆記本

文章出處

發現問題

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

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

這就怪了，莫非寫的代碼導致死循環了，然后瀏覽器崩潰了........

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

使用了最新版的FineUIPro v3.2.0.4
使用了最新版的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')

瀏覽器正常運行！！