javascript - Bootstrap 3 性能 - 每个屏幕卡住 5-30 秒

Question

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

我正在使用 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 秒的延迟，在一个屏幕上，我实际上实现了一个“正在加载，请等待”模式作为一种 hack，并将其设置为立即关闭——这意味着它保持打开状态，直到浏览器完成运行客户端-side 脚本，停止挂起，然后然后允许模式关闭。所以这是该报告的一个巧妙的解决方法。我不想在几乎每个屏幕上实现这样的模式，尤其是那些仅仅因为 Bootstrap 而可能有 20-30 秒或更长时间延迟的屏幕。

谢谢!

Answer 1

我找出了问题所在(速度很快!)，所以我发布此内容以防其他人遇到它。事实证明，罪魁祸首实际上不是 Bootstrap(或者至少不完全是)。我正在 Visual Studio 2013 中开发一个 MVC 应用程序，它添加了一个新的“功能”，该功能将 javascript 注入(inject)到名为 browserLink 的输出中。这反过来又使用 SignalR 在浏览器之间建立通信 channel 。

就我而言，这对 IE11 的布局引擎造成了严重破坏，导致了上述问题。它似乎以某种方式干扰了 Bootstrap 3，导致渲染页面所需的时间远远超过所需时间。事实上，即使没有打开 Bootstrap 3，它也会导致 IE 11 挂起。

我之前使用过 Visual Studio 2012，因此当 2013 年开始注入(inject)此脚本时，我感到很惊讶。

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

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

如果您不需要 browserLink(并且因为我以前从未听说过它，所以我没有也不明白为什么我需要它)，那么我的建议是先将其关闭并查看如果这可以解决性能问题。

有趣的是，我确实觉得很奇怪，VS2013 附带 Bootstrap 作为 MVC 的默认布局框架，但注入(inject)的 javascript 会导致性能问题，至少有时会伪装成 Bootstrap 问题。