1

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

使用 .css的技术 A

$( "#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. 感谢您对这篇文章的回复！

4

3 回答 3

3

异地CSS是要走的路。使用异地 css 浏览器只需要发出一个通常非常快的请求。

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

另一个重要的问题是：

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

于 2012-08-14T18:28:32.330 回答
1

我会通过 jQ 添加非语义类。如：'float-right'、'margin-right'。这对维护 imo 来说要干净得多。

于 2012-08-14T18:25:05.010 回答
0

jQuery 的.css速度比将您提供的示例附加到头部要快。我创建了一个测试用例，在这里演示了这一点：http: //jsperf.com/jquery-css-vs-append-to-head

在此处输入图像描述

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

于 2012-08-14T19:12:40.553 回答