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

我们有一些内部应用程序的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。支持头

 $("") .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 。 感谢您对此帖的回复！

Answer 1

jQuery的.css比你提供的样本更快。 我已经创建了一个测试用例，在此处演示了这一点： http ： //jsperf.com/jquery-css-vs-append-to-head

至于异地CSS，它没有可比性，因为异地css速度取决于用户的互联网连接，以及你的服务器速度等。 如果你有一个邪恶的服务器和宽带用户，我说异地更好，否则为了速度你只能可靠地依靠javascript。

Answer 2

非现场css是要走的路。 对于offsite css，浏览器只需要发出一个通常非常快的请求。

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

另一个重要问题是：

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

Answer 3

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