javascript - À propos du blocage de synchronisation Load() de JQuery

Question

Maintenant, nous devons charger l'en-tête et le pied de page séparément dans une page principale. Les performances de l'utilisation d'iframe ne sont pas bonnes et la page HTML pure ne peut pas être utilisée pour charger la page directement en utilisant la méthode d'inclusion de php que j'ai. Je n'ai pas appris à importer les modèles de frameworks tels que React et Angular. Oui, donc après de longues délibérations, seul le load() de jquery peut être utilisé pour le charger. Le problème est maintenant que la méthode de chargement entraînera la synchronisation du thread principal. sera bloqué et l'expérience de la page sera très mauvaise.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Maintenant, ma question est la suivante :
1. La méthode de chargement ne peut-elle pas être définie sur un chargement asynchrone comme les méthodes ajax $.get ou $.post pour éviter de bloquer le thread principal ? Comment puis-je résoudre le problème de blocage du thread principal causé par load() ?
J'ai lu des informations pertinentes et il semble que l'utilisation de h5 Worker puisse éviter le blocage du thread principal. Est-ce le seul moyen de le résoudre ? Je n'ai jamais utilisé Worker.

2. Pour mes besoins, en plus des méthodes mentionnées dans mon article, comment dois-je le résoudre dans ma situation actuelle ? Quelle méthode de développement d'entreprise est la meilleure pour résoudre le chargement de l'en-tête et du pied de page ?

Bienvenue à l'aide de tous pour résoudre le problème, merci !

Answer 1

load() se charge de manière asynchrone par défaut et ne provoquera pas le blocage du thread principal. Ainsi, le problème de blocage de synchronisation dans l'avertissement n'est pas causé par un seul chargement() ici. J'ai ensuite vérifié la sous-page et découvert qu'il y avait <script src="*"> Ainsi, l'introduction js externe dans la sous-page a été supprimée et l'avertissement a disparu. Il s'agit donc d'un avertissement de blocage de synchronisation provoqué par l'introduction de js externes dans load() et les sous-pages.

Answer 2

1. La couche inférieure de cette méthode appelle la méthode $.ajax() pour faire une requête ajax au serveur. Par conséquent, il est chargé de manière asynchrone par défaut et n’entraînera pas le blocage du thread principal.
. Cependant, comme le chargement par défaut est asynchrone, cela peut se produire. La partie principale de la page est affichée en premier, puis les données d'en-tête et de pied de page côté serveur sont renvoyées et insérées dans la page. La page, l'en-tête et le pied de page ne sont pas affichés. S'ils apparaissent en même temps, ils clignoteront.
2. La situation que j'ai rencontrée est que l'en-tête et le pied de page sont relativement fixes, je peux donc créer un modèle de page, avec l'en-tête et le pied de page écrits dedans, puis intégrer l'iframe dans la partie principale de la page, et définissez l'adresse de l'iframe en fonction de la situation.

Answer 3

1Bien sûr.

var html = $.get('xx.yy');
$('selector').html(html);

2. Je crée généralement la tête et la queue, ainsi que le contenu, pour créer base.html Lorsque j'utilise PHP, cela étendra base.html

.