【发布时间】：2012-08-15 10:12:08
【问题描述】：
对于内部应用程序，我们有一些笨拙的解决方法，我想知道哪种 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 .append to head
$("<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。感谢您对这篇文章的回复！
【问题讨论】：
-
我知道速度是主要问题，但我知道我不想负责维护技术 B。我怀疑它也较慢，但没有任何坚实的基础。跨度>
-
使用 jQuery 与上面的 2 个示例链接到外部样式表怎么样？速度再次成为主要关注点。谢谢！
-
您可以使用对象作为参数组合其中的一些
.css调用。$( "#changelanguage" ).css( { "float": "right", "margin": "0 50px 0 0" } );我更喜欢使用外部 css 表，但是我不知道什么会更快。尝试测试它。 -
要获得有意义的答案，您必须在各种选项上设置一个计时器。同时，我猜想直接操作 DOM（技术 A）会影响其他技术。在我看来，技术 2 必须慢一些，因为有两件事发生在级联中 - 放置一个新样式表，然后对其进行解析等以影响 DOM。类似地，由于与技术 2 相同的原因，获取样式表会更慢，加上 HTTP/web 延迟。
-
@Kevin ~ 谢谢，很高兴知道。