javascript - replacestate - Cómo manejar el botón Atrás cuando el navegador no está activando el evento popstate inmediatamente

window history pushstate refresh (1)

Esta pregunta puede sonar extraña, ya que la mayoría de las veces popstate se dispara de forma sincrónica cuando los usuarios presionan el botón Atrás.

Sin embargo, la especificación de W3C establece que un UA (navegador) puede hacer cola en popstate cuando recorre el historial (consulte el elemento 14), es decir. popstate se popstate forma asíncrona (aunque la URL ha cambiado en este momento).

Los proveedores de navegadores interpretan e implementan esta especificación de manera diferente. Mozilla decide que Firefox debería poder disparar popstate antes de load , y por buenas razones, para que las imágenes lentas no bloqueen popstate .

Chrome / Safari decide lo contrario, y nos lleva a nuestro problema:

Al administrar el historial de una aplicación web, a menudo es conveniente iniciar la administración del historial tan pronto como sea posible, por ejemplo. en DOMContentLoaded lugar de load . Pero a cambio, los usuarios no pueden retirarse de ningún pushState , porque todos los popstate se popstate cola hasta la load .

Estamos buscando consejos sobre cómo manejar este escenario. Yo vengo con algunos:

Lazyload imágenes, por lo que la load puede disparar lo antes posible.
Bloquear la interfaz de usuario hasta que se dispara la load .
Init framework on load lugar de DOMContentLoaded .

¿Hay mejores soluciones?

Actualización : las cosas se ponen feas cuando hay ajax que se dispara antes de load , si esas solicitudes dan como resultado un cambio de DOM, y el cambio de DOM tiene algunas imágenes, la load se retrasa hasta que esas imágenes se carguen o se popstate tiempo de espera, lo que significa que popstate está en cola por más tiempo.

Actualización 2 : para agregar una demostración simple para ello, visite esta página jsbin con chrome y vea que popstate se bloqueará hasta que se popstate load . Puede comparar el resultado entre la imagen en caché y la imagen sin caché.

¿Puedes intentar llamar a popstate durante la descarga de la página anterior? Por ejemplo, si está en la página 1 y desea pasar a la página 2, en lugar de llamar al estado emergente durante la carga / preparación de la página 2, ¿por qué no llama al estado emergente en el evento de descarga de la página 1?

No estoy seguro de si satisface su escenario. Pero no pude probarlo en tu basura.