$(window).width()与window.innerWidth性能差异及原生JS替代jQuery的性能咨询

Great questions—let’s break these down clearly so you know exactly what’s going on.

1. Is there a performance difference between $(window).width() and window.innerWidth? #

Absolutely, and it all comes down to what’s happening under the hood.

jQuery’s $(window).width() isn’t a direct shortcut—it’s a wrapped method that adds extra layers of processing. When you call it, jQuery has to:

• Fetch or create the jQuery wrapper object for the window element
• Run through its internal width calculation logic, which includes cross-browser checks (for older browsers that handled viewport widths differently) and adjustments for things like scrollbars
• Finally return the computed value

On the flip side, window.innerWidth is a native browser property that gives you the viewport width (including the vertical scrollbar, if present) with zero extra overhead. No function calls, no abstraction layers—just a direct value from the browser.

In raw performance tests, window.innerWidth is consistently faster. For one-off calls, the difference might be microseconds, but when you’re calling the method repeatedly (like in a resize event), that gap becomes noticeable.

2. If jQuery is already loaded, will using native JS for window width improve performance? #

Yes—especially in high-frequency scenarios.

Even if jQuery is already part of your app, every call to $(window).width() still incurs the cost of jQuery’s internal processing. For a single page-load check, the performance gain is negligible (you’d never notice it). But if you’re using this inside a resize event handler that fires dozens of times per second, or in a loop that runs repeatedly, those tiny overheads add up quickly.

Here’s a quick example of the difference in practice:

// jQuery approach (has extra overhead)
$(window).on('resize', function() {
  const viewportWidth = $(window).width();
  // Do something with the width
});

// Native approach (lean and fast)
window.addEventListener('resize', function() {
  const viewportWidth = window.innerWidth;
  // Do something with the width
});

The native version skips jQuery’s event wrapping and width calculation logic, making it noticeably faster for repeated calls.

That said, if you only need the window width once, it’s not worth rewriting code just for this. But for any code that runs frequently, swapping in window.innerWidth is an easy, low-risk way to squeeze out some extra performance—no downsides for modern browsers.

内容的提问来源于stack exchange，提问作者S Jung