I decided to do example number two. First off,
we request the page and start receiving the HTML.
We start parsing it immediately and building the DOM.
We come across two style sheets. Style.css and print.css
with a media query for print. We aren't printing,
so print.css isn't a part of the critical rendering
path. We only have to send out a request
for style.css. And then we continue parsing the DOM.
We run into two script tags at the end of
the body. One for app.js and another for analytics.js. analytics.js
is async, so it's not a part of the critical
rendering path. We fire off a request for app.js and
halt building the DOM while we wait for CSS to
arrive and the CSSOM to be built. Now that we
have the CSSOM, the job script engine is unblocked, so
we can run app.js, finish building the DOM and then render
the page. That wasn't to bad.
:لقد قررت أداء المثال الثاني. أولاً
.نطلب الصفحة ونبدأ في تلقي HTML
.نبدأ بتحليلها على الفور وإنشاء DOM
سنجد ورقتي أنماط. Style.css وprint.css
مع استعلام وسائط للطباعة. لن نقوم بالطباعة؛
ولذلك print.css ليس جزءًا من مسار
العرض الهام. يجب علينا فقط إرسال طلب
.لـ style.css. ثم نقوم بعدها بمتابعة تحليل DOM
سنجد علامتي برنامج نصي في نهاية
.الموضوع. إحداهما لـ app.js والأخرى لـ analytics.js
وanalytics.js غير متزامن؛ ولذلك فهو ليس جزءًا من مسار
،العرض الهام. نرسل طلبًا بسرعة لـ app.js
ونوقف إنشاء DOM بينما ننتظر وصول
CSS وإنشاء CSSOM. والآن بعد أن صار لدينا
CSSOM، أصبح المحرك النصي للوظيفة غير محظور؛ وبالتالي
يمكننا تشغيل app.js وإنهاء إنشاء DOM، ثم عرض
.الصفحة. لم يكن ذلك متعبًا
Decidí resolver el ejemplo número dos.
Primero, solicitamos la página
y empezamos a recibir el código HTML.
Comenzamos a analizarlo inmediatamente
y construimos el DOM.
Nos encontramos con dos hojas de estilo,
Style.css and print.css
y una pregunta en el medio,
para imprimir.
No estamos imprimiendo,
así que print.css
no hace parte de la ruta.
Sólo hay que enviar una solicitud
para style.css.
y luego continuamos analizando el DOM.
Nos encontramos con dos etiquetas
de guión al final del cuerpo,
una para pp.js
y la otra para analytics.js.
El analytics.js. es asíncrono,
así que no pertenece a la ruta.
Enviamos una solicitud para app.js,
paramos la construcción del DOM,
y esperamos que lleguen los CSS
y se crean los CSSOM.
Ahora que tenemos los CSSOM,
el motor del guión de las tareas
está desbloqueado,
y podemos ejecutar el app.js, terminar
de construir el DOM,
y luego hacer la página.
No está mal.
例の2を描くことにしました
最初にページを要求してHTMLの受信が始まります
すぐに解析を始めてDOMを構築します
2つのスタイルシートに遭遇します
style.cssと
印刷用のメディアクエリのあるprint.cssです
印刷しないので print.cssは
クリティカル・レンダリングパスの
部分ではありません
style.cssへの要求を送る必要があるだけです
そのままDOMの解析を続けます
bodyの終わりで2つのscriptタグに遭遇します
1つはapp.jsで もう1つはanalytics.jsです
analytics.jsはasyncなので
クリティカル・レンダリングパスの
部分ではありません
CSSが届いてCSSOMが構築されるのを待つ間は
app.jsへの要求を発しないで
DOMの構築を休止します
CSSOMを得ると
JavaScriptエンジンはブロックされなくなり
app.jsを実行できて DOMの構築を終えて
ページをレンダリングします
そう悪くない例ですね
전 2번 예제를 하기로 했습니다
첫 번째로, 페이지를 요청하고 HTML을 받기 시작합니다
바로 그것을 파싱하기 시작하고 DOM을 생성하죠
그리고 두 개의 스타일 시트를 만납니다
style.css와 print라는 미디어 쿼리를 가진 print.css이죠
우리는 인쇄를 하지 않으므로
print.css는 크리티컬 렌더링 패스의 부분이 아니죠
style.css에 대한 요청만 보내면 됩니다
그리고 DOM 파싱을 계속합니다
body의 마지막에 두 개의 스크립트 태그를 맞닥뜨리게 되죠
하나는 app.js이고 다른 하나는 analytics.js이죠
analytics.js는 비동기적이므로
크리티컬 렌더링 패스의 일부가 아닙니다
CSS가 도착하고 CSSOM이 만들어지기를 기다리는 동안
app.js에 대한 요청을 하고
DOM 생성을 중지합니다
이제 CSSOM을 가지게 되면
자바스크립트 엔진이 다시 돌아가고
app.js를 실행하고
DOM 생성을 마치고 페이지를 렌더링하죠
그리 어렵지 않군요
Decidi fazer o exemplo número 2. Primeiro,
requisitamos a página e começamos a receber o HTML.
Começamos imediatamente a analisá-lo e a criar o DOM.
Encontramos duas folhas de estilo: style.css e print.css
com uma consulta de mídia por print. Não vamos imprimir,
então print.css não faz parte do caminho de renderização
crítica. Só precisamos enviar uma requisição
por style.css. Depois continuamos analisando o DOM.
Encontramos duas tags script no final do
corpo: uma para app.js e outra para analytics.js. analytics.js
é assíncrono, então não faz parte do caminho
de renderização crítica. Acionamos uma requisição por app.js e
interrompemos a criação do DOM enquanto esperamos a
chegada do CSS e a construção do CSSOM. Agora que temos
o CSSOM, o mecanismo do JavaScript está desbloqueado;
podemos executar o app.js, terminar a criação do DOM e
renderizar a página. Não foi tão ruim.