为什么Chrome需要12秒才能完成更新层树?

TLM*_*AGE 5 javascript timeline google-chrome

我有一个相对不复杂的ASP.Net应用程序,偶尔会在图层中显示一条带阴影的警报消息,并带有一个按钮来关闭通知.

这段代码多年来一直运作良好.

最近,我收到用户抱怨的回复非常慢.他们经历的是页面完全没有响应,当他们点击[确定]按钮时,很长一段时间没有任何反应.

当我录制时间轴时,我可以看到原始的甚至导致往返于网络服务器,我可以看到来自网络服务器的响应.我还可以看到由于响应而运行的所有Javascript代码.

就应用程序而言,事务已经结束,并且就Javascript而言,事务也已结束.我们需要做的就是等待用户点击[确定]按钮,我们将关闭通知弹出窗口.

这就是"冻结"发生的地方.[OK]事件未交付20-30秒.在此期间发生了什么?这就是我写作的原因:

我们看到一些非常短的计时器偶尔会触发,然后我们会看到一个快速的Recalculate Style调用,然后是Update Layer Tree事件.

更新层树事件需要10-12秒!

更新层树事件需要10-12秒(而不是毫秒)

这是由于更新层树事件而无法响应的对话框的代码这里首先显示的是获取,然后,如果出现问题,可能会使用类似于showAlert的代码进行更新:

状态/错误对话框代码

小智 4

有关Chrome 为什么会执行的详细信息,请参阅 @tiblu 的评论Update Layer Tree

至于花费 12 秒:在其他浏览器(例如 Firefox 或 Safari)中交互是否正常?如果您的代码多年来一直工作正常,正如您所说,并且最近(> 2015 年 10 月中旬)突然出现浏览器响应问题,并且仅在 Chrome 中,问题可能不是您的代码。

最近有很多类似的新问题和投诉,都指向 Chrome 46 的发布。例如:这个问题 (code.google.com)这个问题 (code.google.com)

CPU 峰值是导致浏览器无响应的原因,您可以使用 Chrome 的任务管理器进行监控。至于为什么CPU 会出现峰值以及更多详细信息,您需要关注上述问题以及其他问题的发展。

对于伪答案表示歉意,目前没有代表将其放入评论中。