Bootstrap 3性能 - 屏幕每个冻结5-30秒

时间:2015-05-12 17:15:07

标签: javascript performance twitter-bootstrap internet-explorer twitter-bootstrap-3

(编辑:我在发布之前进行了搜索,但没有看到解决此特定问题的任何内容,如果帖子存在,请指出它们,谢谢)

我正在使用Bootstrap 3和jQuery 1.11.2开发内部站点。浏览器的使用几乎全部是IE浏览器,主要目标是IE 11,其余部分(IE 7/8/9和/或兼容模式下的11)在未来几个月内被拖延。

该网站本质上是一个报告网站,它从Oracle数据库中提取数据并生成各种HTML报告,通常采用HTML表格格式。

使用Bootstrap 3我遇到了严重的性能问题。我无法确定问题的根源,但我知道表格行越多,性能就越差。例如,我刚刚生成了一个包含327行的报告,在一个表中使用了class =" table table-striped table-condensed",而且在几秒钟后绘制的屏幕也会冻结并且不允许我滚动超过20秒。但是这种行为发生在另一个没有使用这些表类的报告上。

我已在此报告和其他报告上运行IE 11 F12探查器,发现RegExp.exec在这些屏幕上运行了150,000到200,000次(!!)。我之前尝试删除所有脚本并一次添加一个脚本,并发现添加bootstrap.js是导致性能问题的原因。

还有其他人经历过这个吗?如果是这样,我可以通过哪些一般方法避免这种情况?它使应用程序几乎无法在某些地方使用。

Bootstrap 3使得开发屏幕变得简单,因此我可以专注于应用功能,但这已经成为一个严重的问题。我可以处理5-10秒的延迟,在一个屏幕上我实际上实现了#34;加载,请等待#34; modal作为hack并将其设置为立即关闭 - 这意味着它将保持打开状态,直到浏览器完成运行客户端脚本,停止挂起,然后允许模式关闭。因此,该报告是一个hacky变通方法。我不想在几乎每个屏幕上都必须实现这样的模式,特别是因为Bootstrap而我可能有20-30秒或更长时间延迟的屏幕。

谢谢!

1 个答案:

答案 0 :(得分:1)

我弄清楚问题是什么(那很快!)所以我发布这个以防万一其他人遇到它。事实证明,罪魁祸首实际上是 Bootstrap(或至少不是唯一的)。我正在Visual Studio 2013中开发一个MVC应用程序,它增加了一个新的“功能”,可以将javascript注入到名为browserLink的输出中。这又使用SignalR在浏览器之间建立通信通道。

在我的情况下,这对IE11的布局引擎造成了严重破坏,导致了上述问题。它似乎干扰了Bootstrap 3,导致它花费的时间比渲染页面所需的时间长得多。实际上,即使没有启用Bootstrap 3,它也会导致IE 11挂起。

我之前使用的是Visual Studio 2012,所以2013年开始注入此脚本时,这是一个惊喜。

此处提供了问题和解决方案的说明:http://sylvester-lee.blogspot.com/2014/03/javascript-or-jquery-perform-very-slowly.html

根据那里的建议,我从运行/调试菜单中禁用了浏览器链接,现在速度非常快。

如果你不需要browserLink(因为我以前从未听过它,我没有,也没有看到任何理由我需要它)然后我的建议是先关掉它然后看看如果能解决性能问题。

有趣的是,我觉得奇怪的是VS2013附带Bootstrap作为MVC的默认布局框架,然而注入一个导致性能问题的javascript,至少有时会伪装成Bootstrap问题。