Estoy usando la API de Google Maps en mi aplicación y tengo alrededor de 300 MB de datos de coordenadas que usará para mostrar funciones. Estoy tratando de acelerar la carga de la página inicial la primera vez que un cliente la usa (los datos se descargarán, luego se almacenarán en caché, por lo que serán más rápidos).
Los datos de coordenadas están en varios archivos javascript en formato JSON y estoy cargando los archivos js usando la etiqueta HTML así:
<script type="text/javascript" src="JavaScript/file1.js" async></script> <script type="text/javascript" src="JavaScript/file2.js" async></script> ... <script type="text/javascript" src="JavaScript/map.js" async></script>Cada uno de los archivos "filex.js" solo tiene una var cuyo valor son las coordenadas con formato JSON. Hay varios porque parece que a los navegadores no les gusta almacenar en caché un archivo js de un tamaño determinado. El script map.js los usa para agregarlos a la API de Google Maps de esta manera:
layer.addGeoJson(file1var); layer.addGeoJson(file2var); ...etc.El problema es que la descarga de esos ~300 MB de scripts bloquea la carga de la página y la página tarda aproximadamente un minuto en cargarse. Una vez que se almacenan en caché, todo es rápido la próxima vez, como era de esperar.
Lo que quiero hacer es permitir que la página web se cargue y que todo funcione EXCEPTO para descargar esos archivos js con los datos JSON. Me gustaría que solo se descarguen en segundo plano después de que el resto de la página ya se haya cargado, por lo que es básicamente invisible para el usuario en lugar de esperar un minuto.
Puede ver que intenté usar las directivas 'async' y 'defer' en la etiqueta, pero no hicieron lo que quería (todavía bloquean el resto de la carga de la página).
¿Hay alguna manera de permitir que esos archivos js se descarguen sin bloquear el resto de la carga de la página?
Alternativamente, ¿puedo eliminar esas referencias del HTML y, en su lugar, hacer que el script map.js las solicite cuando las necesite? Estaría bien si necesitara descargarlos la primera vez que los necesita, pero aún necesitaría que se almacenen en caché para que sean más rápidos la próxima vez.
Descubrí lo que funcionó para mí. Noté que en la pestaña de red de herramientas de desarrollo de Chrome se mostró cuando ocurrió el evento 'DOMContentLoaded' y estuvo esperando hasta que todos mis archivos se descargaron. Buscando en eso encontré esta publicación que me ayudó a llegar a la respuesta.
Sin embargo, el evento 'DOMContentLoaded' aún era demasiado temprano y la página aún estaba bloqueada para que no se cargara por completo hasta que se descargaron todos los archivos.
Pude hacer que funcionara escuchando el evento 'onload' de la página que se activa después de que todo está cargado y agregando los scripts como este:
window.addEventListener('load', (event) => { let script = document.createElement('script'); script.src = "JavaScript/huc8-0.js"; script.async = true; document.body.appendChild(script); // copy/paste the above 4 lines to add each of the files I needed });