Comment résoudre le problème de la lenteur du temps de téléchargement du contenu d'Ajax (analyse détaillée)

Cet article présente principalement la solution et le processus de réflexion du problème de temps de téléchargement de contenu lent d'Ajax. Cet article vous le présente en détail à travers le contexte de l'événement et l'analyse du processus. Les amis qui en ont besoin peuvent s'y référer

Avant-propos :

Aujourd'hui, cet article vous présentera la solution et réfléchira à la lenteur du temps de téléchargement de contenu d'ajax.

Contexte de l'événement :

Le développeur m'a signalé un bug. La vitesse de réponse ajax était très lente. Après le positionnement, la raison de la vitesse lente était due au contenu. -le temps de téléchargement était trop long, il y a un délai de 2s+ dans Chrome, et plus tard, il a été confirmé que ce délai existait également dans notre client mobile. La capture d'écran est la suivante :

Analyse du processus :

Raison du positionnement :

Tout d'abord. , voir ce Delay, la première réaction a été qu'il ne s'agissait pas d'un bug du front-end, et des commentaires ont été donnés aux camarades de classe du back-end. Cependant, grâce au positionnement back-end, nous avons constaté que le temps de retour de l'interface est très rapide. La lecture de la littérature étrangère prouve qu'il s'agit d'un bug causé par des événements non standard du navigateur.

2. Analyse du bug :

Grâce à la communication avec les étudiants en développement, j'ai découvert que le bug a deux caractéristiques. Premièrement, ce délai n'existe que lorsque le chargement pull-up est nécessaire pour provoquer des requêtes ajax. , et le temps de retard dans l'environnement unifié et dans le navigateur est similaire, tous deux compris entre 2 et 3 secondes.

Deuxièmement, bien que certains composants chargés en pull-up déclenchent également ajax, il n'y a pas de délai.

Nous avons donc commencé le front-end. Pour localiser la raison, nous devons d'abord la comprendre : en raison de la conception de l'architecture de notre projet, tout le chargement pull-up est complété par un pager de composants de base, et une partie de celui-ci. son code est tel qu'illustré sur la figure , le principe est de détecter en continu si le composant est dans la zone visible via l'événement scroll et l'événement resize du navigateur, et si c'est le cas, de déclencher la fonction hasMore.

Deuxièmement, vérifiez la différence d'appel de ce composant entre la page entreprise avec problème de retard et la page entreprise sans délai.

Par comparaison, aucune différence entre les deux composants n'a été trouvée. (Donc les étudiants intéressés par ce mystère peuvent me contacter pour en discuter... Je peux vous envoyer le code source)

Après avoir reproduit plusieurs fois le problème, il est évident que dans Chrome sur PC , Le délai disparaît parfois lors de l'utilisation du mode tactile et réapparaît lors de l'utilisation de la molette de la souris. Par conséquent, le problème se situe dans l’événement mousewheel et dans l’événement scroll qui lui correspond étroitement.

Résolution du bug :

En combinant les raisons de l'appel et en discutant à travers plusieurs articles examinés, les conclusions suivantes sont tirées :

1. L'événement mousewheel du navigateur Chrome est à l'origine de ce retard (l'événement mousewheel n'est pas un événement standard et n'est pas recommandé à tout le monde), bien sûr ! Je n'ai pas utilisé l'événement mousewheel dans le code, mais l'utilisation de l'événement scroll peut provoquer des conflits avec l'événement mousewheel. Malheureusement, la vue Web de notre client mobile spécial souffrait également de cette faille.

2. Pour résoudre ce problème, vous pouvez essayer d'écouter cet événement (si le navigateur n'a pas cet événement, il ne répondra pas à cette écoute, il n'y a pas de conflit), et lorsque l'événement est déclenché, annulez-le Tous les comportements par défaut :

Par conséquent, en écoutant le deltaY (montant de défilement vertical de la souris) de son modèle d'événement, lorsqu'il y a un déplacement vertical, PreventDefault est déclenché, donc le code est le suivant :

 window.addEventListener("mousewheel", (e) => {
   if (e.deltaY === 1) {
     e.preventDefault();
   }
 })

Changez ceci. Ce code a été ajouté au code d'initialisation de la page de la bibliothèque de base frontale, et il a été découvert comme par magie que les problèmes de délai de téléchargement du contenu de la page associés étaient résolus.

Résumé :

La nature du problème de compatibilité :

Dans l'architecture webkit, certains modules ne sont généralement pas partagés , certains modules possèdent certaines fonctionnalités qui ne sont pas partagées entre les navigateurs, et leur comportement peut être modifié via différentes configurations de compilation. Par conséquent, de nombreux navigateurs utilisant Webkit peuvent présenter des comportements différents.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

php+ajaxMéthodes de mise en œuvre du processus d'initiation et du processus de révision

js Explication détaillée des étapes pour implémenter la fonction d'encapsulation ajax

Méthode PHP+Mysql+Ajax pour implémenter la fonction de chat du service client Taobao Aliwangwang (page d'accueil )

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!