Question

如果我已经在我的应用程序中使用jQuery，但希望尽可能提高性能。在我的代码的某些地方使用vanilla JS而不是jQuery（例如）来获取窗口宽度是否会改善性能？

Answer 1

实际上存在巨大的性能差异！我在jsPerf中尝试过：https://jsperf.com/window-width-jquery-vs-vanilla/1

Vanilla胜过jQuery！

当您必须实例化一个新的jQuery对象（$(window)）时，当然会有明显的开销。如果必须使用jQuery，请将窗口jQuery对象保存到变量。

Answer 2

使用JQuery而不是普通（vanilla）JavaScript总是有性能价格，因为它是一个构建在JavaScript之上的库，用于解决浏览器本机DOM API的不一致性，并使元素的迭代更简单（仅举几例）

何时使用JQuery的一些示例：

繁琐的跨浏览器情况（例如AJAX）
为了便于链接，请简化对元素组的处理。

不使用JQuery时的一个例子：

多次执行循环时。

打开某种类型的所有标签。 JQuery很简单，但是当有许多要迭代的元素时，它们表现不佳：

$('span').unwrap();  // unwrap all span elements

本机DOM API将表现更好：

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

window.innerWidth：使用滚动条

$（window）.innerWidth（）：错误用法

$（window）.width（）：没有滚动条

mediaquery：使用滚动条（至少是标准的）


$（window）.innerWidth（）：这实际上是获取内在的错误方法   窗口宽度，因为api.jquery.com/innerWidth表示“这个   方法不适用于窗口和文档对象;对于这些，   请改用.width（）。“

但是如果我们只需要窗口的内部宽度呢？我们可能需要   根据宽度调整图像。在这种情况下，请使用window.innerWidth。

window.innerWidth：字面意思是窗口的宽度WITH scroll   bar（因为所有mediaquery都应该表现）。但遗憾的是，IE8并不支持   它

所以使用：
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
要明确，window.innerWidth与后两者不同只有window.innerWidth包含滚动条。但我们不必担心关于在IE8中获取错误的宽度，因为它不支持 Mediaquery - 如果它想要宽度，它将不得不求助于javascript 无论如何，解决方案。

来源：http://luxiyalu.com/window-innerwidth-vs-window-innerwidth/

使用$（window）。width（）和window.innerWidth会有性能差异吗？

2 个答案: