jquery:.css 与附加到头部之间的速度差异？

Question

我们对内部应用程序有一些笨拙的解决方法，我想知道哪种 jQuery/css 技术被认为更快/更高效......等等。

技术 A 使用 .css

$( "#doc" ).css( "margin-top", "90px" );
$( "#checkouthelp" ).css( "margin", "50px 50px 0 0" );

$( "#changelanguage" ).css( "float", "right" )
                      .css( "margin", "0 50px 0 0" );

技术B.附加到头部

$("<style>")
    .prop("type", "text/css")
    .html("\
    #doc {\
        margin-top:90px;\
    }\
    #checkouthelp {\
        margin:50px 50px 0 0;\
    }\
    #changelanguage {\
        float:right;\
        margin:0 50px 0 0;\
    }")
  .appendTo("head");

这是一个一开始规模较小且相对无害的元素之一，但已发展成为一个相当臃肿的解决方案。 像我在这里所做的那样，链接到异地CSS文件或直接更改CSS规则是否更快。速度是关键问题，上面的示例只是不断增长的困惑的一小部分。 [值得庆幸的是，正在评估根本原因......但与此同时]。

谢谢!

更新

虽然我还没有进行彻底的测试，但在我使用 Chrome 开发人员工具进行的几次速度测试中，看起来从外部样式表加载规则的速度较慢。将进行更多测试，但我认为我可能会陷入使用 .css 的困境。感谢您对这篇文章的回复!

Answer 1

异地 CSS 是正确的选择。使用异地 CSS，浏览器只需要发出一个请求，通常速度相当快。

另一方面，每当你修改 css 元素时，浏览器都必须重新解析整个 dom 树，这可能会更昂贵。

另一个重要问题是:

速度真的像你想象的那么重要吗？也许这些解决方案之间的差异是 45 毫秒，这几乎不是您应该关心的事情。您应该选择一种能够更快地编写代码并更好地维护代码的技术，这才是真正节省时间的地方。