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

Performance and DOM Loading using vendor specific prefixes for CSS3

本文关键字：性能 DOM 前缀 加载 CSS3 供应商 使用      更新时间：2023-09-26

我对此很好奇。

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

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

以下哪项更好？

  1. 使用javascript来查找是否存在支持，如果支持，则使用属性；如果上面的属性为false，则检查用户代理并相应地应用特定于供应商的属性。

  2. 使用类中的所有浏览器前缀，并让浏览器使用适合它的前缀。

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

以下哪项更好？

  1. 使用javascript来查找是否存在支持，如果支持，则使用属性；如果上面的属性为false，则检查用户代理并相应地应用特定于供应商的属性。

  2. 使用类中的所有浏览器前缀，并让浏览器使用适合它的前缀。

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

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

正如您所看到的，选项1引入了一个额外的层（JavaScript），如果您只是想在可能的情况下使用一些CSS3功能，那么这是不必要的选项2将是性能最高的解决方案

对于这类问题，答案是-取决于情况。这取决于你使用的前缀，它们在HTML中出现的频率，你测试的浏览器，等等

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

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

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

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

您应该避免使用Javscript来检测CSS特性，因为这打破了关注点的分离——CSS用于表示，Javascript用于行为。

相关文章：