jquery：.css vs追加到头部之间的速度差异？

Question

我们有一些内部应用程序的kludgy变通方法，我想知道哪种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是要走的路。对于offsite css，浏览器只需要发出一个通常非常快的请求。

另一方面，无论何时修改css元素，浏览器都必须重新整理可能更昂贵的整个dom树。

另一个重要问题是：

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

Answer 2

我会通过jQ添加非语义类。如：'float-right'，'margin-right'。维护imo要好得多。

Answer 3

jQuery .css比使用您提供的示例更快地追加。我创建了一个测试用例，在此处演示了这一点：http://jsperf.com/jquery-css-vs-append-to-head

就异地CSS而言，其无法比较，因为异地css速度取决于用户的互联网连接，以及您的服务器速度等。如果你有一个邪恶的服务器和宽带用户，我说offsite要好得多，否则为了速度你只能可靠地依靠javascript。