4

Jquery 允许我们直接使用 $.css() 方法并将原始 DOM 元素作为第一个参数传递。例如，如果我想将 'a' 设置为 myDiv 的宽度，jQuery 允许使用以下语法：

（选项1）：

var elem = document.getElementById('myDiv');
var a = $.css(elem, 'width');

而不是这个（选项2）：

var a = $('#myDiv').css('width');

选项 1 不需要选择器，而且它似乎依赖于全局 jQuery 对象，而不是创建一个新对象。我在 jQuery API 或网上找不到任何关于此方法的文档。我认为这会提高性能，尤其是在动画中需要 jQuery 对象时。为什么我不应该使用这种方法？

谢谢！

编辑：性能测试表明选项 1 更快一些。似乎没有任何理由不直接使用 $.css() 。感谢大家的回答！

4

3 回答 3

1

是的，第一个稍微快一点。但它只能获取css值。

我在这里做了一个性能测试：http: //jsperf.com/jquery-css-signature你可以修改它并测试其他选项。

现在事实已经确定，在这些性能优化级别上，我认为不值得开销。采用更清晰/可维护的方式来获得相同的结果。在大多数情况下，性能优势不足以真正发挥作用。

于 2013-05-05T02:08:50.923 回答
1

任何将 jQuery 排除在外的东西都会使其更快。通过使用本机getElementById而不是传递要处理的字符串，可以提高速度。

更快的是使用本机getComputedStyle：

var elem = document.getElementById('myDiv');
var a = window.getComputedStyle(elem).width;

请注意，使用的是旧版本的 IE currentStyle，因此您可以像这样对其进行规范化：

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

有关使用纯 JavaScript 的更多信息，请查看Vanilla JS

于 2013-05-05T02:55:27.323 回答
0

选项 2 在经过一些类型检查和解析后，将做与选项 1 大致相同的事情。我无法想象性能差异（如果有的话）是显着的。

如果您在重复引用一个元素时担心性能，最好的办法是执行一次所有查找，然后重复使用：

var elem = $('#myDiv');

var a = elem.css('width');
elem.css('height', '100px');
// etc.
于 2013-05-05T02:09:29.290 回答