Javascript 使用$（window.width（）和window.innerWidth是否存在性能差异？

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

使用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：带滚动条
• $（窗口）.innerWidth（）：使用错误
• $（窗口）.width（）：不带滚动条
• mediaquery：带滚动条（至少是标准滚动条）

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

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

window.innerWidth：确切地说，是带有滚动条的窗口的宽度 条（所有mediaquery都应该这样做）。但遗憾的是，IE8不支持 它

因此，请使用：

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

为了清楚起见，window.innerWidth与后两个不同，因为 只有window.innerWidth包含滚动条。但我们不必担心 关于在IE8中获得错误的宽度，因为它不支持 Mediaquery–如果它想要宽度，就必须求助于javascript 无论如何，解决方案

---

来源：

实际上，性能上存在巨大差异！我在jsPerf中试用过：

香草胜过jQuery

---

当您必须实例化一个新的jQuery对象（

$（窗口）

）时，当然会有显著的开销。如果必须使用jQuery，请将窗口jQuery对象保存到一个变量。

在jQuery上使用vanilla js将消除创建jQuery对象时的jQuery过度。无论是否存在明显的性能差异，我猜不会，但是这将取决于您执行时间试验以确定改进。

window.innerWidth

将比

$（window.width（）

）更快，但它是否位于明显且重要的范围内值得怀疑。如果是，那么你可能会在其他地方遇到问题。定义巨大？我看到测试显示jquery方法的速度慢了94%。但如果这是单毫秒或双毫秒的94%。。。另外，大多数网页不会多次执行这样的调用。在真空中看到这样的事情很有趣，但它并不总是与网站上的实际实时实现直接相关。2ms仍然是1ms的两倍。做一个现实主义者；不，性能可能不会显著，但这完全取决于用例。收听滚动或鼠标移动事件？然后代码将被频繁地触发，任何缩短的毫秒都会有更多的时间进行样式重新计算和绘制。这是我的观点。时间试验更适合于应用，而不是真空中的方法。这就是我想说的。