使用 CSS3 的供应商特定前缀的性能和 DOM 加载答案

【问题标题】：Performance and DOM Loading using vendor specific prefixes for CSS3使用 CSS3 的供应商特定前缀的性能和 DOM 加载
【发布时间】：2012-02-06 14:30:43
【问题描述】：

我对这个已经好奇了一段时间了。

css3 属性尚未标准化，但可以由浏览器实现，使用特定浏览器的前缀。例如，可以使用border-radius，它在现代浏览器上运行良好。但是，对于以前版本的浏览器供应商，我们可以使用供应商特定的属性，如 -moz、-webkit 等前缀来工作。

现在，对于我的页面，我使用了渐变和边框半径，创建了几个使用它们的类，并通过这些类应用了这些类。

以下哪个更好？

我比较好奇和关心的是 DOM 加载的性能和时间。

【问题讨论】：

您不再需要为border-radius 加上前缀了。
在您的浏览器中禁用 JavaScript。加载您的页面。渲染慢吗？如果您没有发现任何延迟，那就没问题了。
尽管在 Chrome 中并不真正需要它，但不幸的是，我有很多使用 Firefox 3.5.x、3.6.x 的人访问我的网站，这确实需要 -moz 前缀
请注意，浏览器会忽略带有非供应商前缀的属性。因此，每个浏览器只需要处理一个附加属性。我不认为这可能是性能问题。像 Facebook 这样的大网站的 CSS 规则可能比您的网站多几倍，而且它们做得很好。
刚刚浏览了google的样式，有趣的是google确实使用前缀，但是，我可以在整个代码中找到mozilla前缀7次和opera前缀2次。甚至StackOverflow似乎也提到了CSS 本身的前缀，并且似乎有几个条目。

【解决方案1】：

以下哪个更好？

使用javascript查找是否支持，如果支持则使用属性，如果以上为假，请检查用户代理并相应地应用供应商特定属性。

使用类中的所有浏览器前缀，让浏览器使用适合它的任何一个。

选项 1 包括使用 JavaScript 检测支持，然后有条件地写出带或不带前缀的 CSS 代码，并让浏览器应用样式。

选项 2 包括简单地使用 CSS 并依靠浏览器忽略它不理解的前缀/声明。

如您所见，选项 1 引入了一个额外的层 (JavaScript)，如果您只想尽可能使用一些 CSS3 功能，则这不是必需的。 选项 2 将是最高效的解决方案。

【讨论】：

【解决方案2】：

与此类问题一样，答案是 - 视情况而定。这取决于您使用的前缀、它们在 HTML 中出现的频率、您正在测试的浏览器等等。

解决方案是编写代码，对其进行分析，然后找出答案。很多时候，您会发现无论哪种方式性能都可以接受。

【讨论】：

就个人而言，我使用 Modernizr 和样式来对抗它添加的类。但是，这可能会更快或更慢，具体取决于许多因素。 HTML5Please 提供了很多关于新 CSS3 元素的建议。

【解决方案3】：

我使用选项 2 - 将所有浏览器前缀（以及非前缀版本）添加到 CSS：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

浏览器将跳过他们不理解的声明而不会出现任何问题（尽管您的 CSS 不会验证），同时仍会应用样式。最好使用CSS generator 以避免输入每个前缀。

您应该避免使用 Javscript 来检测 CSS 功能，因为这会破坏 separation of concerns - CSS 用于呈现，而 Javascript 用于行为。

【讨论】：