javascript - 使用 CSS3 vendor 特定前缀的性能和 DOM 加载

Question

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

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

现在，对于我的页面，我使用了渐变和边框半径，制作了几个使用它们的类，并在整个过程中应用了这些类。

以下哪项更好？

1. 使用 javascript 查找是否存在支持，如果支持则使用属性，如果以上不支持，则检查用户代理并相应地应用 vendor 特定属性。

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

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

Answer 1

Which of the following is better to do?

1. Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.

2. Using all the browser prefixes in the classes and let the browser use whichever suits it.

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

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

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