0
179
VistasArchivos CSS y JS que se cargan dos veces para activos precargados en Safari
Tengo una página html que está siendo atendida por mi servidor de nodo, la cadena HTML se genera en el lado del servidor y los archivos js y css están precargados, se adjunta el código a continuación. Veo que en Safari, estos activos se cargan dos veces, lo que provoca un destello de contenido sin estilo en la página de mi aplicación, lo que realmente sucede se debe a esta carga duplicada, la hidratación y las acciones de JS comienzan antes de que CSS se cargue por completo. Cualquier ayuda ayudaría
NOTA: Esto sucede solo en safari
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="preload" as="script" href="/build/vendor.93cdba92ba41a9a0915e.js" /> <link rel="preload" as="script" href="/build/main.dfb07bf2ef463aa43736.js" /> <link rel="preload" href="/build/main.18.8f76beb6dd5628871221.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> </head> <body> <div style="z-index: 3" class="header" id="desktop-headerMount"> Header here</div> <div id="mountRoot" class="" style="min-height:1000px;margin-top:-2px;"> // React App Will Mount Here </div> <div id="web-footerMount"> Footer Here </div> <script src="/build/vendor.93cdba92ba41a9a0915e.js"></script> <script src="/build/main.dfb07bf2ef463aa43736.js"></script> </body> </html>Al adjuntar una captura de pantalla de la pestaña de red también a continuación, los archivos css y js se cargan dos veces.
Sin embargo, esto sucede solo en Safari, en Chrome funciona bien
Editar
Me doy cuenta de que esto a veces depende de la velocidad de la red, me pregunto si está ocurriendo algún tipo de condición de carrera, donde antes de que se complete la precarga si mi analizador html alcanza la etiqueta del script, entonces esto puede suceder, ¿supongo?