jQuery Script Blog

jQuery 4 vs. jQuery 3: A Technical Comparison

by jQueryScript,
jQuery 4

The release of jQuery 4 marks a significant shift in the library's philosophy. While version 3.x focused on maintaining broad compatibility across a fragmented browser ecosystem, version 4 focuses on cleanup and modernization.

This update introduces breaking changes that go beyond simple deprecations. The following sections detail the technical differences between the two versions.

jQuery 4 vs jQuery 3

1. Browser Support and File Size

The most structural change in jQuery 4 is the removal of legacy browser support. This cleanup allows for the removal of internal polyfills and workarounds.

  • jQuery 3.x: Supports Internet Explorer 9+, Edge Legacy, iOS 7+, and Firefox 45+.
  • jQuery 4: Removes support for IE < 11, Edge Legacy (non-Chromium), iOS < 11, and Firefox < 65.

Impact: The gzipped file size of jQuery 4 is approximately 3KB smaller than 3.7.1. The removal of the Sizzle selector engine (in favor of a native-first approach) and IE-specific hooks contributes to this reduction.

2. Core Architecture: ESM vs. AMD

  • jQuery 3.x: The source code relies on AMD (Asynchronous Module Definition) and RequireJS. This structure makes it difficult to import specific parts of the source directly into modern bundlers without a build step.
  • jQuery 4: The source code is migrated to ES Modules (ESM). While the distributed file remains a UMD module for compatibility, the source is now compatible with Rollup, Webpack, and Vite. This allows for better integration into modern development workflows.

3. AJAX: Security and Binary Data

The AJAX module received substantial updates regarding security and data handling.

JSONP Auto-Promotion

  • jQuery 3.x: If jQuery.ajax receives dataType: "json" and the URL contains a callback placeholder (e.g., ?callback=?), it automatically promotes the request to JSONP. This behavior executes remote code, often without the developer's explicit intent.
  • jQuery 4: This auto-promotion is disabled. Developers must explicitly set dataType: "jsonp" to perform a JSONP request.

Binary Data Support

  • jQuery 3.x: Passing binary data (like FormData) to jQuery.ajax often required setting processData: false and manually handling the data, as jQuery would attempt to convert it to a string.
  • jQuery 4: Native support for binary data, including FormData, is added. The library detects binary data and bypasses string conversion automatically.

Script Transport

  • jQuery 3.x: Used XHR for some script requests and <script> tags for others, depending on cross-domain settings.
  • jQuery 4: Switches almost entirely to using <script> tags for asynchronous script requests. This change reduces Content Security Policy (CSP) errors related to inline script execution.

4. Event System: Focus Order and Shims

jQuery 4 aligns its event handling with modern W3C specifications, resulting in a breaking change for focus events.

Focus Event Order

  • jQuery 3.x: Enforced a specific event firing order to normalize behavior across IE and other browsers: focusout -> blur -> focusin -> focus.
  • jQuery 4: Removes the override. The library now yields to the browser's native order (W3C spec): blur -> focusout -> focus -> focusin.

Removal of Shims

  • jQuery 3.x: Included shims for focusin and focusout events to support browsers that did not implement them natively (primarily Firefox before version 52).
  • jQuery 4: These shims are removed.

5. API Removals and Replacements

Version 4.0 removes multiple utility functions that were deprecated in version 3.x. These functions have native JavaScript equivalents.

Method jQuery 3.x Status jQuery 4 Status Native Replacement
jQuery.trim() Deprecated Removed String.prototype.trim()
jQuery.isArray() Deprecated Removed Array.isArray()
jQuery.parseJSON() Deprecated Removed JSON.parse()
jQuery.isFunction() Deprecated Removed typeof x === "function"
jQuery.isNumeric() Deprecated Removed Custom check (e.g., !isNaN(parseFloat(n)))
jQuery.now() Deprecated Removed Date.now()
jQuery.nodeName() Internal/Deprecated Removed elem.nodeName.toLowerCase() === name

Prototype Array Methods

  • jQuery 3.x: The jQuery prototype included push, sort, and splice methods. These were internal references to the Array.prototype methods.
  • jQuery 4: These methods are removed from the jQuery prototype. Code relying on $elem.push() will throw an error. Use [].push.call($elem, value) instead.

6. CSS and Attributes

Automatic `px` Addition

  • jQuery 3.x: Automatically added px to unitless values passed to .css(), excluding a specific whitelist of properties (defined in jQuery.cssNumber).
  • jQuery 4: Inverts this logic. It no longer automatically adds px to most properties. It only adds px to a specific set of properties known to require it. This reduces the overhead of checking the whitelist.

`toggleClass` Signature

  • jQuery 3.x: Supported toggleClass( boolean ) and toggleClass( undefined ).
  • jQuery 4: Removes support for the boolean/undefined signature. Developers must explicitly pass the class name(s) to toggle.

Opacity Hook

  • jQuery 3.x: Included a CSS hook to handle opacity in IE (which used filter: alpha(opacity=...)).
  • jQuery 4: Removes this hook. Standard opacity is supported in all target browsers.

7. Security: Trusted Types

  • jQuery 3.x: Did not natively support Trusted Types. Passing TrustedHTML objects to manipulation methods could fail or result in stringification.
  • jQuery 4: Adds full support for Trusted Types. HTML wrapped in TrustedHTML passes through manipulation methods (like .html(), .append()) correctly, complying with strict CSP environments.

8. The Slim Build

The "Slim" build of jQuery excludes modules to reduce file size.

  • jQuery 3.x Slim: Excluded Ajax and Effects.
  • jQuery 4 Slim: Excludes Ajax, Effects, Deferreds, Callbacks, and Queues.
    • Implication: The v4 Slim build relies entirely on native Promise for asynchronous operations. If your code uses jQuery.Deferred, you cannot use the v4 Slim build without a polyfill.

Conclusion

jQuery 4 is a strict modernization update. It trades backward compatibility with obsolete browsers for improved security, reduced file size, and alignment with modern JavaScript standards.

For developers maintaining legacy systems, the removal of JSONP auto-promotion and the change in focus event order present the highest risk of regression. A thorough audit using the jQuery Migrate plugin is necessary before deployment.

Read the Full jQuery 4.0 Upgrade Guide on jQueryScript.net

Related Resources