Question

我在页面上有几个div，内容相对较多，并且应用了border-radius（包括特定于供应商的前缀版本）css属性。 Firefox和Chrome都可以毫无问题地处理它，但在IE 9中它很慢。只需将其停用即可使页面速度提高至少5倍。

有没有办法使用某种解决方法/替代方法在IE 9中加快速度。虽然我知道我可能会使用背景图像和额外的标记来模拟旧式，但我正在寻找一种不那么突兀的解决方案。

Answer 1

正如@Parzifal已经提到的，有一些众所周知的解决方法可以在IE中创建没有border-radius的圆角。它们基于将一些javascript代码（通过行为或表达式）附加到特定类。此代码是添加一些额外的DOM元素还是添加VML标记。

建议采用这种方法，即实际上没有更便宜的方法可以动态创建圆角并且不使用图像。虽然这种方法需要彻底的测试，并且进一步支持和开发至少会有点痛苦。

我不知道你究竟是如何分析的，哪个阶段确实是瓶颈。圆角减慢，比如滚动，我不知道该建议。

如果只是关于加载页面的问题 - 您可以照常加载所有内容，但根本没有圆角。然后，在javascript中，您可以侦听DOMContentLoaded并使用圆角指定现有的CSS规则。

说，你有预定义的圆角类，代码如下：

$('.there-should-be-rounded-corners').addClass('and-here-come-rounded-corners');

再次调查这个问题。不确定100％这会有所帮助，但至少值得尝试。