0
218
VistasCómo cargar CSS de forma asincrónica sin secuencias de comandos en línea (cumple con CSP)
Quiero implementar la carga asincrónica de archivos CSS para un rendimiento más rápido. Sin embargo, también quiero seguridad, así que quiero que mi sitio tenga CSP.
<link rel="stylesheet" media="print" class="AOcssLoad" .... onload="this.onload=null;this.media='all';" /> Sin entrar en detalles, quiere que evite cosas como onload y muchos otros JS que forman parte de elementos.
quiero que se vea asi
<link rel="stylesheet" media="print" class="AOcssLoad" href="" />Sugiera una forma de lograr archivos CSS asíncronos sin JS en línea como se usó anteriormente.
Podemos usar etiquetas <script> en línea o archivos JS separados.
Probé el siguiente código como un JS en línea. A continuación se muestra el HTML para el JS,
<script nonce="" type="text/javascript" data-exclude="true"> var Script = document.getElementsByClassName("AOcssLoad"); for (var i = 0 ; i < Script.length; i++) { this.className += " Loading"; Script[i].addEventListener("load", function({ this.onload=null;this.media="all"; this.className += " OnLoad"; }); } </script>Si bien funciona, es muy poco confiable.
No puedo comprender el problema, pero diré que funciona solo el 50% de las veces, a veces solo recargar la página puede resolver/romper el problema, sin cambios aparentes en css/html/cache como tal.
Por favor, ayúdame a mejorar esto, o crea un mejor enfoque para ello.
Editar:
Como se sugiere en los comentarios, probé diferentes métodos, incluidos los enlaces a otros recursos de GitHub.
Esos métodos no son confiables, diría que funcionan menos del 50% de las veces. Sin embargo, traté de usar jQuery(document).ready() y add media="all" a todos los archivos css, pero eso aumenta el TBT (Tiempo total de bloqueo), lo que afecta el rendimiento de mi sitio.
Edición 2:
Como muchos de ustedes señalan repetidamente en las respuestas, usar DOMcontentLoaded y muchas otras formas pueden ayudar a hacer lo que quiero implementar.
Sin embargo, todos estos enfoques contribuyen a un aumento significativo del TBT (Tiempo total de bloqueo).
Se agradecería un enfoque que no dañe el OTC.
3 Respuestas
Responde la pregunta0
Sugeriría usar fetch().then() e inyectarlo como un elemento de style :
var stylesheetURLS = ["style.css", "style2.css"] stylesheetURLS.forEach(url => { fetch(url).then(response => response.text()).then(stylesheet => { var styleElement = document.createElement("style"); styleElement.textContent = stylesheet; document.head.append(styleElement); }); }); No estoy seguro de si la fetch es lenta, pero no me sorprendería si lo fuera.
Alternativa para fetch : XMLHttpRequest
var stylesheetURLS = ["style.css", "style2.css"]; stylesheetURLS.forEach(url => { var request = new XMLHttpRequest(); request.open("GET", url); request.send(); request.onload = function() { var styleElement = document.createElement("style"); styleElement.textContent = request.responseText || request.response; document.head.append(styleElement); } }); De nuevo, no estoy seguro de si esto es más rápido que fetch
0
Probé la descarga de un archivo css que tarda más de 6 segundos en descargarse y puedo confirmar que la descarga no contribuye al TBT. Como lo indica Google, TBT es el momento en que el navegador no está disponible para la entrada del usuario, por ejemplo, cuando el usuario hace clic en un botón o se desplaza, el navegador no reaccionará. Un TBT largo a menudo se debe a que el subproceso principal está ocupado porque tiene demasiado trabajo que hacer. Creo que procesar el CSS (aplicar todas las reglas al html) es lo que aumenta su TBT porque la descarga de archivos ya se realiza en segundo plano (asincrónica) y no será la causa de un largo tiempo de TBT.
A continuación, se muestra un ejemplo de que el TBT no aumenta al descargar un archivo grande:
OTC: 
Como puede ver, la descarga tarda más de 6 segundos, pero no suma el TBT: 
0
Podría usar una función Vanilla JS basada en jQuery .ready() :
document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(".AOcssLoad").forEach(el => { el.media = "all" console.log(`Loaded: ${el.href}`) }) }); <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap-utilities.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap-reboot.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap-grid.min.css" /> <h1>Hello world!</h1>Sin embargo, independientemente de la solución que elija, tenga en cuenta que tendrá que lidiar con Flash of Unstyled Content (FOUC) . Considere otros enfoques para administrar sus archivos de hojas de estilo .