Script Loader: Propagate fetchpriority from dependents to dependencies.

This introduces a "fetchpriority bumping" mechanism for both classic scripts (`WP_Scripts`) and script modules (`WP_Script_Modules`). When a script with a higher `fetchpriority` is enqueued, any of its dependencies will have their `fetchpriority` elevated to match that of the highest-priority dependent. This ensures that all assets in a critical dependency chain are loaded with the appropriate priority, preventing a high-priority script from being blocked by a low-priority dependency. This is similar to logic used in script loading strategies to ensure that a blocking dependent causes delayed (`async`/`defer`) dependencies to also become blocking. See #12009. 

When a script's `fetchpriority` is escalated, its original, registered priority is added to the tag via a `data-wp-fetchpriority` attribute. This matches the addition of the `data-wp-strategy` parameter added when the resulting loading strategy does not match the original.

Developed in #9770.

Follow-up to [60704].

Props westonruter, jonsurrell.
Fixes #61734.


git-svn-id: https://develop.svn.wordpress.org/trunk@60931 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

src/wp-includes/class-wp-dependency.php

@@ -50,7 +50,7 @@ class _WP_Dependency {
 	 * Used for cache-busting.
 	 *
 	 * @since 2.6.0
-	 * @var bool|string
+	 * @var string|false|null
 	 */
 	public $ver = false;
 

src/wp-includes/class-wp-script-modules.php

@@ -41,6 +41,15 @@ class WP_Script_Modules {
 	 */
 	private $a11y_available = false;
 
+	/**
+	 * Holds a mapping of dependents (as IDs) for a given script ID.
+	 * Used to optimize recursive dependency tree checks.
+	 *
+	 * @since 6.9.0
+	 * @var array<string, string[]>
+	 */
+	private $dependents_map = array();
+
 	/**
 	 * Registers the script module if no script module with that script module
 	 * identifier has already been registered.
@@ -269,6 +278,38 @@ public function add_hooks() {
 		add_action( 'admin_print_footer_scripts', array( $this, 'print_a11y_script_module_html' ), 20 );
 	}
 
+	/**
+	 * Gets the highest fetch priority for the provided script IDs.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param string[] $ids Script module IDs.
+	 * @return string Highest fetch priority for the provided script module IDs.
+	 */
+	private function get_highest_fetchpriority( array $ids ): string {
+		static $priorities   = array(
+			'low',
+			'auto',
+			'high',
+		);
+		$high_priority_index = count( $priorities ) - 1;
+
+		$highest_priority_index = 0;
+		foreach ( $ids as $id ) {
+			if ( isset( $this->registered[ $id ] ) ) {
+				$highest_priority_index = max(
+					$highest_priority_index,
+					array_search( $this->registered[ $id ]['fetchpriority'], $priorities, true )
+				);
+				if ( $high_priority_index === $highest_priority_index ) {
+					break;
+				}
+			}
+		}
+
+		return $priorities[ $highest_priority_index ];
+	}
+
 	/**
 	 * Prints the enqueued script modules using script tags with type="module"
 	 * attributes.
@@ -282,15 +323,21 @@ public function print_enqueued_script_modules() {
 				'src'  => $this->get_src( $id ),
 				'id'   => $id . '-js-module',
 			);
-			if ( 'auto' !== $script_module['fetchpriority'] ) {
-				$args['fetchpriority'] = $script_module['fetchpriority'];
+
+			$dependents    = $this->get_recursive_dependents( $id );
+			$fetchpriority = $this->get_highest_fetchpriority( array_merge( array( $id ), $dependents ) );
+			if ( 'auto' !== $fetchpriority ) {
+				$args['fetchpriority'] = $fetchpriority;
+			}
+			if ( $fetchpriority !== $script_module['fetchpriority'] ) {
+				$args['data-wp-fetchpriority'] = $script_module['fetchpriority'];
 			}
 			wp_print_script_tag( $args );
 		}
 	}
 
 	/**
-	 * Prints the the static dependencies of the enqueued script modules using
+	 * Prints the static dependencies of the enqueued script modules using
 	 * link tags with rel="modulepreload" attributes.
 	 *
 	 * If a script module is marked for enqueue, it will not be preloaded.
@@ -301,12 +348,20 @@ public function print_script_module_preloads() {
 		foreach ( $this->get_dependencies( array_unique( $this->queue ), array( 'static' ) ) as $id => $script_module ) {
 			// Don't preload if it's marked for enqueue.
 			if ( ! in_array( $id, $this->queue, true ) ) {
-				echo sprintf(
-					'<link rel="modulepreload" href="%s" id="%s"%s>',
+				$enqueued_dependents   = array_intersect( $this->get_recursive_dependents( $id ), $this->queue );
+				$highest_fetchpriority = $this->get_highest_fetchpriority( $enqueued_dependents );
+				printf(
+					'<link rel="modulepreload" href="%s" id="%s"',
 					esc_url( $this->get_src( $id ) ),
-					esc_attr( $id . '-js-modulepreload' ),
-					'auto' !== $script_module['fetchpriority'] ? sprintf( ' fetchpriority="%s"', esc_attr( $script_module['fetchpriority'] ) ) : ''
+					esc_attr( $id . '-js-modulepreload' )
 				);
+				if ( 'auto' !== $highest_fetchpriority ) {
+					printf( ' fetchpriority="%s"', esc_attr( $highest_fetchpriority ) );
+				}
+				if ( $highest_fetchpriority !== $script_module['fetchpriority'] && 'auto' !== $script_module['fetchpriority'] ) {
+					printf( ' data-wp-fetchpriority="%s"', esc_attr( $script_module['fetchpriority'] ) );
+				}
+				echo ">\n";
 			}
 		}
 	}
@@ -374,18 +429,20 @@ private function get_marked_for_enqueue(): array {
 	 *                               Default is both.
 	 * @return array[] List of dependencies, keyed by script module identifier.
 	 */
-	private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ) {
+	private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ): array {
 		return array_reduce(
 			$ids,
 			function ( $dependency_script_modules, $id ) use ( $import_types ) {
 				$dependencies = array();
-				foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
-					if (
-					in_array( $dependency['import'], $import_types, true ) &&
-					isset( $this->registered[ $dependency['id'] ] ) &&
-					! isset( $dependency_script_modules[ $dependency['id'] ] )
-					) {
-						$dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
+				if ( isset( $this->registered[ $id ] ) ) {
+					foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
+						if (
+							in_array( $dependency['import'], $import_types, true ) &&
+							isset( $this->registered[ $dependency['id'] ] ) &&
+							! isset( $dependency_script_modules[ $dependency['id'] ] )
+						) {
+							$dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
+						}
 					}
 				}
 				return array_merge( $dependency_script_modules, $dependencies, $this->get_dependencies( array_keys( $dependencies ), $import_types ) );
@@ -394,6 +451,75 @@ function ( $dependency_script_modules, $id ) use ( $import_types ) {
 		);
 	}
 
+	/**
+	 * Gets all dependents of a script module.
+	 *
+	 * This is not recursive.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @see WP_Scripts::get_dependents()
+	 *
+	 * @param string $id The script ID.
+	 * @return string[] Script module IDs.
+	 */
+	private function get_dependents( string $id ): array {
+		// Check if dependents map for the handle in question is present. If so, use it.
+		if ( isset( $this->dependents_map[ $id ] ) ) {
+			return $this->dependents_map[ $id ];
+		}
+
+		$dependents = array();
+
+		// Iterate over all registered scripts, finding dependents of the script passed to this method.
+		foreach ( $this->registered as $registered_id => $args ) {
+			if ( in_array( $id, wp_list_pluck( $args['dependencies'], 'id' ), true ) ) {
+				$dependents[] = $registered_id;
+			}
+		}
+
+		// Add the module's dependents to the map to ease future lookups.
+		$this->dependents_map[ $id ] = $dependents;
+
+		return $dependents;
+	}
+
+	/**
+	 * Gets all recursive dependents of a script module.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @see WP_Scripts::get_dependents()
+	 *
+	 * @param string $id The script ID.
+	 * @return string[] Script module IDs.
+	 */
+	private function get_recursive_dependents( string $id ): array {
+		$get = function ( string $id, array $checked = array() ) use ( &$get ): array {
+
+			// If by chance an unregistered script module is checked or there is a recursive dependency, return early.
+			if ( ! isset( $this->registered[ $id ] ) || isset( $checked[ $id ] ) ) {
+				return array();
+			}
+
+			// Mark this script module as checked to guard against infinite recursion.
+			$checked[ $id ] = true;
+
+			$dependents = array();
+			foreach ( $this->get_dependents( $id ) as $dependent ) {
+				$dependents = array_merge(
+					$dependents,
+					array( $dependent ),
+					$get( $dependent, $checked )
+				);
+			}
+
+			return $dependents;
+		};
+
+		return array_unique( $get( $id ) );
+	}
+
 	/**
 	 * Gets the versioned URL for a script module src.
 	 *

src/wp-includes/class-wp-scripts.php

@@ -127,7 +127,7 @@ class WP_Scripts extends WP_Dependencies {
 	 * Used to optimize recursive dependency tree checks.
 	 *
 	 * @since 6.3.0
-	 * @var array
+	 * @var array<string, string[]>
 	 */
 	private $dependents_map = array();
 
@@ -439,9 +439,24 @@ public function do_item( $handle, $group = false ) {
 		if ( $intended_strategy ) {
 			$attr['data-wp-strategy'] = $intended_strategy;
 		}
-		if ( isset( $obj->extra['fetchpriority'] ) && 'auto' !== $obj->extra['fetchpriority'] && $this->is_valid_fetchpriority( $obj->extra['fetchpriority'] ) ) {
-			$attr['fetchpriority'] = $obj->extra['fetchpriority'];
+
+		// Determine fetchpriority.
+		$original_fetchpriority = isset( $obj->extra['fetchpriority'] ) ? $obj->extra['fetchpriority'] : null;
+		if ( null === $original_fetchpriority || ! $this->is_valid_fetchpriority( $original_fetchpriority ) ) {
+			$original_fetchpriority = 'auto';
+		}
+		$actual_fetchpriority = $this->get_highest_fetchpriority_with_dependents( $handle );
+		if ( null === $actual_fetchpriority ) {
+			// If null, it's likely this script was not explicitly enqueued, so in this case use the original priority.
+			$actual_fetchpriority = $original_fetchpriority;
+		}
+		if ( is_string( $actual_fetchpriority ) && 'auto' !== $actual_fetchpriority ) {
+			$attr['fetchpriority'] = $actual_fetchpriority;
 		}
+		if ( $original_fetchpriority !== $actual_fetchpriority ) {
+			$attr['data-wp-fetchpriority'] = $original_fetchpriority;
+		}
+
 		$tag  = $translations . $ie_conditional_prefix . $before_script;
 		$tag .= wp_get_script_tag( $attr );
 		$tag .= $after_script . $ie_conditional_suffix;
@@ -898,6 +913,8 @@ public function add_data( $handle, $key, $value ) {
 	/**
 	 * Gets all dependents of a script.
 	 *
+	 * This is not recursive.
+	 *
 	 * @since 6.3.0
 	 *
 	 * @param string $handle The script handle.
@@ -1051,6 +1068,62 @@ private function filter_eligible_strategies( $handle, $eligible_strategies = nul
 		return $eligible_strategies;
 	}
 
+	/**
+	 * Gets the highest fetch priority for a given script and all of its dependent scripts.
+	 *
+	 * @since 6.9.0
+	 * @see self::filter_eligible_strategies()
+	 * @see WP_Script_Modules::get_highest_fetchpriority_with_dependents()
+	 *
+	 * @param string              $handle  Script module ID.
+	 * @param array<string, true> $checked Optional. An array of already checked script handles, used to avoid recursive loops.
+	 * @return string|null Highest fetch priority for the script and its dependents.
+	 */
+	private function get_highest_fetchpriority_with_dependents( string $handle, array $checked = array() ): ?string {
+		// If there is a recursive dependency, return early.
+		if ( isset( $checked[ $handle ] ) ) {
+			return null;
+		}
+
+		// Mark this handle as checked to guard against infinite recursion.
+		$checked[ $handle ] = true;
+
+		// Abort if the script is not enqueued or a dependency of an enqueued script.
+		if ( ! $this->query( $handle, 'enqueued' ) ) {
+			return null;
+		}
+
+		$fetchpriority = $this->get_data( $handle, 'fetchpriority' );
+		if ( ! $this->is_valid_fetchpriority( $fetchpriority ) ) {
+			$fetchpriority = 'auto';
+		}
+
+		static $priorities   = array(
+			'low',
+			'auto',
+			'high',
+		);
+		$high_priority_index = count( $priorities ) - 1;
+
+		$highest_priority_index = (int) array_search( $fetchpriority, $priorities, true );
+		if ( $highest_priority_index !== $high_priority_index ) {
+			foreach ( $this->get_dependents( $handle ) as $dependent_handle ) {
+				$dependent_priority = $this->get_highest_fetchpriority_with_dependents( $dependent_handle, $checked );
+				if ( is_string( $dependent_priority ) ) {
+					$highest_priority_index = max(
+						$highest_priority_index,
+						(int) array_search( $dependent_priority, $priorities, true )
+					);
+					if ( $highest_priority_index === $high_priority_index ) {
+						break;
+					}
+				}
+			}
+		}
+
+		return $priorities[ $highest_priority_index ];
+	}
+
 	/**
 	 * Gets data for inline scripts registered for a specific handle.
 	 *

src/wp-includes/script-modules.php

@@ -181,9 +181,21 @@ function wp_default_script_modules() {
 				break;
 		}
 
-		// The Interactivity API is designed with server-side rendering as its primary goal, so all of its script modules should be loaded with low fetch priority since they should not be needed in the critical rendering path.
+		/*
+		 * The Interactivity API is designed with server-side rendering as its primary goal, so all of its script modules
+		 * should be loaded with low fetchpriority since they should not be needed in the critical rendering path.
+		 * Also, the @wordpress/a11y script module is intended to be used as a dynamic import dependency, in which case
+		 * the fetchpriority is irrelevant. See <https://make.wordpress.org/core/2024/10/14/updates-to-script-modules-in-6-7/>.
+		 * However, in case it is added as a static import dependency, the fetchpriority is explicitly set to be 'low'
+		 * since the module should not be involved in the critical rendering path, and if it is, its fetchpriority will
+		 * be bumped to match the fetchpriority of the dependent script.
+		 */
 		$args = array();
-		if ( str_starts_with( $script_module_id, '@wordpress/interactivity' ) || str_starts_with( $script_module_id, '@wordpress/block-library' ) ) {
+		if (
+			str_starts_with( $script_module_id, '@wordpress/interactivity' ) ||
+			str_starts_with( $script_module_id, '@wordpress/block-library' ) ||
+			'@wordpress/a11y' === $script_module_id
+		) {
 			$args['fetchpriority'] = 'low';
 		}