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

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

谢谢!

最佳答案

我找出了问题所在(速度很快!),所以我发布此内容以防其他人遇到它。事实证明,罪魁祸首实际上不是 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 问题。

关于javascript - Bootstrap 3 性能 - 每个屏幕卡住 5-30 秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30197463/

相关文章:

javascript - AngularJS:在路由之间转换时防止页面刷新

javascript - 我如何实现 $ ('#calendar' ).weekCalendar ('today' )?

c# - 具有元组键的字典比嵌套字典慢。为什么?

html - 如何在 Bootstrap 3.3.7 中换行

javascript - 有没有什么方法可以代替 JS hack,让我可以从 iframe 发布到 iframe 之外的另一个页面?

javascript - 在 IE(7 和 8)中移动大尺寸图像非常慢

python - 高效地在Python中随机列出数百万个元素

html - 我怎样才能在容器的两个固定导航栏之间留出空间

javascript - Bootstrap 无法处理非常大的屏幕分辨率

javascript - 谷歌地图动态更改信息窗口