J'essaie de comprendre comment CSS est évalué dans un paramètre spécifique:
permet de supposer que j'ai le contenu suivant dans mon Maintenant, supposons maintenant, supposons en outre le navigateur déjà téléchargé Notez que la balise de script n'est pas une Sync. et là indique que l'exécution du JavaScript est bloquée jusqu'à ce que le CSSOM soit là. maintenant :
1. La page commencera-t-elle à rendu même Note, je parle de deux choses différentes : exécution de rendu et de script. réinitialiser.css et style.css contient certaines règles qui affectent immédiatement le contenu pli ci-dessus ou les éléments du HTML. Toutefois, autocomplete.css ne contient que la classe utilisée ultérieurement par certains JavaScript. réinitialisé.css et style.css mais autocomplete.css est toujours en attendant.
Je me demande ce qui se produirait si le navigateur le ferait connaître la balise de script de blocage à la fin de la page? Évidemment, il peut rendre le HTML jusqu'à la balise de script, mais est l'exécution du script bloqué par le fichier autocomplete.css ? autocomplete.css n'est pas encore arrivée? et,
2. Est-ce que l'exécution du script script.js est bloqué JavaScript jusqu'à ce que le autocomplete.css est là?
3 Réponses :
Autocomplège est un fichier CSS. En tant que tel, il ajoute uniquement des propriétés de style aux classes définies dans le HTML. Le JavaScript s'exécutera toujours correctement, même si le CSS est manquant.
La seule chose qui pourrait arriver est que si la JS modifie certains styles de CSS des classes que le style est défini dans Autocomplete.css. Cependant, même alors il est peu probable.
Ne devez-vous pas attendre avec l'exécution de /js/script.js jusqu'à l'arrivée de l'autocomplete.css?
Tous jusqu'à ce que votre navigateur ne soit pas résolue (ni le pense résolu) Tous les ressources:
CSS est le blocage de rendu. La seule exception de cette règle serait CSS que votre DOM ne connaît pas encore (ASYNC chargé, construit / chargé, sur la volée via JavaScript ).
CSS en construisant le modèle d'objet CSS, la page ne sera pas rendu et JavaScript ne sera pas réalisé. Cependant, résoudre ne signifie pas nécessairement charge . Cela peut signifier deux choses:
CSS est chargé / analysé, il résoudra plus vite. et les différences qui en résulteront ne seront guère perceptibles. Si le serveur ne renvoie pas une erreur (et ne répondit pas) - cela va bloquer votre CSSOM à partir de la construction, votre page du chargement et de vos scripts de l'exécution.
Qu'est-ce que CSSOM?
Ok donc pour être clair: l'exécution de /js/script.js sera bloquée mais le rendu ne sera pas?
Cela arrive au cœur de ma question: lisant développeurs. google.com/web/fundamentals/performance/... it SAA L'exécution de la JS est bloquée jusqu'à ce que la CSSOM soit construite (notez que le script n'est pas asynchronisé). Le script sera donc bloqué même Thoug autocomplete.css ne contient pas de règles qui s'appliquent au contenu du HTML? Je comprends maintenant que ce rendu peut arriver même si certains CSS ne sont pas là?
@worega j'ai mis à jour ma réponse à la lumière de ce que je pouvais trouver sur le sujet. On dirait que JavaScript est retardé jusqu'à ce que CSSOM est construit.
Les dernières recommandations de performance sont les suivantes:
1) Inline Toutes CSS dans l'en-tête que le navigateur doit rendre au-dessus de la teneur en plis. Contenu qui est visible sans défilement.
2) Ajoutez toutes les autres CSS au bas de la page ou de la charger de manière asynchrone avec quelque chose comme ceci: https : //github.com/filamentgroup/charcss
Lis ça. Juste une pointe Éliminer le blocage du rendu CSS
Si
autocomplete.css est manquant, la page lancera une erreur silencieuse: Échec de la charge de chargement: NET :: err_file_not_found . Mais tout continuera à charger, y compris votre script. Si le fichier existe et qu'il prend le temps de charger, votre page ne se charge pas car votre CSS est dans la tête et doit être chargée avant de charger le reste de la page.