Question

我想在dom元素中添加多个css样式，它也可以在不同的浏览器中使用。那么，性能明智哪个下面哪一个会更好？

将所有不同的前缀css添加到一起，让浏览器可以选择哪一个 domElement.style.cssText =＆＃34; -webkit-transform：scaleY（1.25）;变换：scaleY（1.25）＆＃34 ;;
以编程方式添加基于浏览器或平台的css

if(platform == "Chrome"){         //assume platform is found initially using js
     domElement.style.cssText = "-webkit-transform: scaleY(1.25);
  } else {
     domElement.style.cssText = "transform: scaleY(1.25);
  }

Answer 1

您不应该尝试优化浏览器本身的功能。

只需输入尽可能多的无效CSS属性即可。浏览器不会评估无效的CSS选择器或属性。

你正在犯一些错误/错误：

1。）不要使用内联样式表。关于如何覆盖这样的内联样式，关于SO的问题已经太多了。简短的回答是：你做不到。更长的答案是：你可以，但不能没有打开通往!important地狱的大门。

2.）在明确需要特征检测的情况下，您正在进行客户端检测。您的代码无法识别，较新的Chrome版本已使用该属性的无前缀表示法。

如果你可以在没有任何JS的情况下做到这一点，那将会更简单并获得更多性能：

.my-element:hover {
    -webkit-transform: scale(0, 1.25);
        -ms-transform: scale(0, 1.25); // IE9 only
            transform: scale(0, 1.25);
}

使用基于浏览器/平台的javascript添加样式

1 个答案: