Cómo resolver el problema del tiempo lento de descarga de contenido Ajax (análisis detallado)
Prólogo:
El artículo de hoy presenta los problemas y consideraciones que no se pueden resolver cuando el tiempo de descarga del contenido es demasiado lento.
Antecedentes:
El desarrollador me informó un error. La velocidad correspondiente a ajax es muy lenta. Después de localizarlo, la razón de la velocidad lenta es que el tiempo de descarga del contenido es demasiado. de largo En el navegador Chrome Hubo un retraso de 2 segundos en el juego, y luego se confirmó que también hubo un retraso en nuestro cliente móvil. La captura de pantalla es la siguiente:
Análisis del proceso:
1. Motivo del posicionamiento:
En primer lugar, cuando vi este retraso, mi primera reacción fue esa. no fue un error de front-end, se brindó retroalimentación a los estudiantes de back-end. Sin embargo, a través del posicionamiento del backend, descubrí que el tiempo de respuesta de la interfaz es muy rápido. También revisé la literatura extranjera y demostré que se trataba de un error causado por eventos irregulares del navegador.
2. Análisis de errores:
A través de la comunicación con compañeros de desarrollo, descubrí que este error tiene dos características. Primero, este retraso solo existe cuando es necesario aumentar la carga de la solicitud Ajax. Y el retraso en el entorno unificado es similar al retraso en el navegador, entre 2 y 3 segundos.
En segundo lugar, algunos componentes que levantan la carga también activarán ajax, pero no hay demora.
Entonces comenzamos con el posicionamiento del front-end. Para el posicionamiento, primero debemos encontrar un punto para comprender: debido al diseño de la arquitectura de nuestro proyecto, toda la carga pull-up se completa a través de un componente básico. pagger.Parte del código se muestra en la figura. El principio es detectar continuamente si el componente está dentro del área visible a través del evento de desplazamiento del navegador y el evento de cambio de tamaño. Si es así, active la función hasMore.
En segundo lugar, puede ver la diferencia al llamar al componente entre una página comercial con problemas de latencia y una página comercial sin problemas de latencia.
Comparando los dos componentes tampoco encontré ninguna diferencia. Puedo enviarte el código fuente)
Después de reproducir el problema varias veces, es evidente que en Chrome en PC, el retraso al usar el modo táctil ocasionalmente desaparece mientras se usa. El retraso al usar la rueda del mouse aparece nuevamente. . Por lo tanto, el problema se localizó en el evento de la rueda del mouse y su evento correspondiente aproximado: el evento de desplazamiento.
El error ha sido resuelto:
Combinando los motivos del recurso y revisando las discusiones en varios posts, se extraen las siguientes conclusiones:
1. Por supuesto, es para el navegador Chrome. ¡El evento de la rueda del mouse causa este retraso (el evento de la rueda del mouse no es un evento estándar y no se recomienda)! No estoy usando eventos de la rueda del mouse en mi código, pero el uso de eventos de desplazamiento podría causar conflictos con los eventos de la rueda del mouse, una falla que desafortunadamente también tiene la vista web en nuestro cliente móvil Maverick.
2. Para resolver este problema, intente escuchar el evento (si el navegador no tiene el evento, no responderá al oyente, por lo que no habrá conflicto) y cancele todos. ellos cuando se activa el evento Comportamiento predeterminado:
Por lo tanto, al escuchar el deltaY del modelo de evento (la cantidad de desplazamiento vertical del mouse), cuando se desplaza verticalmente, se activa preventDefault, por lo que el código es el siguiente: siguiente:
Agregue este código Vaya al código de inicialización de la página de la biblioteca básica del front-end y mágicamente descubra que el problema de retraso en la descarga del contenido de la página relacionada se ha resuelto.
Resumen:
La esencia del problema de compatibilidad:
Algunos módulos en la arquitectura webkit generalmente no admiten **** en los navegadores, y algunos módulos Algunas funciones no son compatibles con los navegadores y el comportamiento de estos módulos se puede cambiar mediante diferentes configuraciones de compilación. Por lo tanto, muchos navegadores que utilizan webkit pueden presentar comportamientos diferentes.
Lo anterior es el contenido que he recopilado para usted. Espero que le resulte útil en el futuro.
Artículos relacionados:
php ajax implementa el proceso de inicio y el proceso de revisión
Explicación detallada de los pasos para implementar la función ajax encapsulada js
Método PHP Mysql Ajax para implementar la función de chat Aliwangwang del servicio al cliente de Taobao (página principal)