【已更新】【原创】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下载）。

 

 

 

【更新@2016-10-08 15:20】

==========================

多谢网友 @momo314  和  @也许你面容憔悴 的提醒，经测试：v53.0.2785.113 和 v53.0.2785.116 存在BUG，v53.0.2785.143 版本解决了这个问题

 

同时提醒正在使用 v53.0.2785.113 和 v53.0.2785.116（2016-09-15发布） 的网友，尽快升级到最新稳定版：v53.0.2785.143（2016-09-30发布！）

 

根据网友的反馈，开发版 Chrome v54 依然存在此BUG，而 Chrome 55 工做正常。

 

但愿Chrome版本帝之后发稳定版时多注意，不要在新版本中引入这个问题了........