Tengo una aplicación web ASP.NET Core 5 MVC que sufre de "Flash of Unstyled Content" (FOUC). Esencialmente, mis estilos se muestran por un período breve mientras se carga la página. Vi esta pregunta de desbordamiento de pila sobre el manejo de FOUC, y las sugerencias son principalmente para ocultar la página a través de CSS o JavaScript con una clase CSS, luego eliminar esa clase para mostrar el HTML después de que la página termine de cargarse. Esto parece más un "truco" que una solución real. También he visto algunas sugerencias para minimizar tu CSS y comprimir tus imágenes. Ya lo hice, pero todavía tengo FOUC.
¿Cómo puedo evitar FOUC, específicamente en una aplicación ASP.NET Core?
Para mi caso específico, tengo todos mis enlaces y mi hoja de estilo en mi diseño compartido principal _Layout.cshtml . Tengo mi JavaScript en la parte inferior de la página después de todo mi HTML. Tengo un código Razor en la parte superior de mi página, pero según tengo entendido, este código se ejecuta en el lado del servidor y no debería afectar los tiempos de carga de la página.
¿Podría intentar ocultar su etiqueta <html> con CSS y luego mostrarla con una función JavaScript window.onload ?
<!DOCTYPE html> <html style='display: none;'> <head> <script> window.onload = function() { document.querySelector('html').style.display = ''; } </script> </head> <body> <h1>My Content</h1> </body> </html>