javascript - recursos - primer renderizado con contenido wordpress
Renderizar el aplazamiento del bloqueo frente al guión en movimiento en la parte inferior (4)
Sí, los scripts cargados incluso en la parte inferior deben tener un atributo de definición, si es posible en el diseño y los requisitos de su sitio
No, esas herramientas buscan la finalización del análisis.
Depende de la versión de IE que desee admitir, tendrán diferentes recomendaciones.
Ahora explique el script simple, defer y async un poco, para ayudarlo a comprender las razones:
La etiqueta Script Simple <script> detendrá el análisis en ese punto, hasta que la descarga del script se ejecute .
Async Si va a usar async , entonces el script no dejará de analizar para descargar, ya que continuará descargando en paralelo con el resto del contenido html. Sin embargo, el script detendrá el análisis para su ejecución y solo entonces el análisis de html continuará o se completará
Aplazar Si usa defer , el script no detendrá el análisis de los datos html para descargar o ejecutar el script. Por lo tanto, es la mejor forma de evitar cualquier tiempo adicional al tiempo de carga de la página web.
Tenga en cuenta que el aplazamiento es bueno para reducir el tiempo de análisis de html, sin embargo, no siempre es el mejor o apropiado en cada flujo de diseño web, así que tenga cuidado cuando lo use.
Asumo que mover el script en la parte inferior es lo mismo que usar el atributo deferir o asíncrono. Dado que los programas de aplazamiento y asíncrono no son totalmente compatibles con el navegador heredado, me fui cargando el script al final de la página.
<html>
<body>
<!-- whole block of html -->
<script type=''text/javascript'' src=''app.js''></script>
</body>
</html>
Antes de hacer esto, ejecuté herramientas de referencia de rendimiento como GTmatrix y la visión de la velocidad de la página de Google. Ambos muestran el parámetro ''bloqueo de render'' como problema principal. Estoy un poco confundido ahora, ya que incluso después de mover estos scripts en la parte inferior para permitir que el contenido / html se cargue primero; Estas herramientas aún informan que el bloqueo de render es un problema principal.
Miré las otras publicaciones de stackoverflow destacando que aunque los scripts cargados en la parte inferior tienen que tener el atributo "diferir".
Tengo varias preguntas:
- está por encima de verdad?
- ¿Estas herramientas buscan específicamente el atributo ''diferir'' o ''asíncrono''?
- Si tengo que dar un aplazamiento de reserva de respaldo (específicamente para los navegadores de IE), ¿necesito usar sentencias condicionales para cargar scripts no aplazados para IE?
Por favor sugerir el mejor enfoque. Gracias de antemano.
¿Por qué los scripts mencionados al fin deben tener un atributo de aplazamiento?
Bueno, la respuesta es que al agregar diferir al último script, en realidad está reduciendo la cantidad de recursos críticos que deben cargarse antes de pintar la página, lo que reduce la ruta de representación crítica.
Sí, tiene razón al momento en que se analiza el último DOM, pero el navegador aún no ha comenzado a pintar el DOM y, por lo tanto, domContentLoadedEvent se bloquea hasta que finaliza la actividad de pintado y renderizado.
Al agregar async / defer, le estamos diciendo al navegador que el recurso no es crítico para la representación y que se puede cargar y ejecutar después de que se haya cargado el contenido dom. Esto activará el evento domContentLoaded antes y cuanto antes se inicie el evento domContentLoaded, más pronto podrá comenzar a ejecutarse la otra lógica de la aplicación.
Consulte el enlace de google a continuación que demuestra claramente el concepto. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
En lugar de async , quizás algo como esto (gracias @ guest271314 por la idea)
<!DOCTYPE html>
<html>
<body>
<!-- whole block of html -->
<!-- inline scripts can''t have async -->
<script type=''text/javascript''>
function addScript(url){
document.open();
document.write("<scrip" + "t src = /"" + url + "/"></scr" + "ipt>");//weird quotes to avoid confusing the HTML parser
document.close();
}
//add your app.js last to ensure all libraries are loaded
addScript("jquery.js");
addScript("lodash.js");
addScript("app.js");
</script>
</body>
</html>
¿Es esto lo que querías? Puede agregar los atributos async o defer en la llamada document.write si lo desea.
Según HTML Spec 1.1, el bloque de secuencia de comandos en la página html bloquearía la representación de la página hasta que se descargue y procese el archivo javascript en la url.
Adición de secuencias de comandos al final de la página: permite que el navegador continúe con la representación de la página y, por lo tanto, el usuario podrá ver la representación de la página lo antes posible.
[Preferido] Agregar diferir a la etiqueta de secuencia de comandos: promete al navegador que la secuencia de comandos no contiene ningún documento.write o documento que altere el código en él y por lo tanto le permite continuar la representación.
Como hilo anterior puede serte útil