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

我们对内部应用程序有一些笨拙的解决方法，我想知道哪种 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 规则（就像我在这里所做的那样）是否更快？速度是关键问题，上面的示例只是不断增长的混乱中的一小部分。 [值得庆幸的是，正在评估根本原因......但与此同时]。

谢谢你！

UPDATE

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

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

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

另一个重要问题是：

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