Cómo resolver el problema del tiempo lento de descarga de contenido Ajax
El artículo de hoy le presentará las soluciones y reflexiones sobre el problema de la velocidad de descarga demasiado lenta del contenido ajax.
Antecedentes:
El desarrollador me informó un error. La velocidad de 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 largo. y no se puede navegar en Chrome. Hubo un retraso de 2 segundos o más en el servidor y luego se confirmó que este retraso también existía 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 que no era el error de front-end, así que se lo informé a los compañeros de back-end. Sin embargo, a través del posicionamiento del backend, descubrí que el tiempo de respuesta de la interfaz era muy rápido, por lo que consulté 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 de la parte frontal. 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 con 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.
Error resuelto:
Combinando los motivos de la apelación y revisando las discusiones en varios posts, se extraen las siguientes conclusiones:
1. Los eventos de la rueda del mouse son, por supuesto, la causa de este retraso (los eventos de la rueda del mouse no son eventos estándar y no se recomiendan). 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, puede intentar escuchar este evento (si el navegador no tiene este evento, no responderá a este oyente y no se producirá ningún conflicto cuando se produzca el evento). activado, cancele todos sus comportamientos predeterminados:
Por lo tanto, al escuchar el deltaY del modelo de evento (la cantidad de desplazamiento vertical del mouse), cuando se produce el desplazamiento vertical, se activa preventDefault, por lo que el código es el siguiente. sigue:
window.addEventListener("mousewheel ", (e) => {
if (e.deltaY === 1) {
e. preventDefault();
}
})
Si agrega este código al código de inicialización de página de la biblioteca básica front-end, mágicamente encontrará que se resuelva el problema de retraso en la descarga del contenido de la página relacionada.
Resumen:
La esencia del problema de compatibilidad:
Algunos módulos de la arquitectura webkit generalmente no están habilitados en los navegadores y algunos módulos sí. Algunas características sí. no está habilitado en el navegador, y el comportamiento de estos módulos se puede cambiar a través de diferentes configuraciones de compilación. Por lo tanto, muchos navegadores que utilizan webkit pueden presentar comportamientos diferentes.
Lo anterior es la introducción del editor para resolver el problema del tiempo lento de descarga de contenido Ajax. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y le responderé. a tiempo. ¡Muchas gracias por su apoyo al sitio web de Script House!