Recall that by default, the browser assumes that
css is blocking, hence the first link tag will
block rendering. The screen query will evaluate the true,
since we are rendering the content on the screen
and hence it will also block rendering. The
third declaration depends on the orientation of the device.
In this particular case because the handset is in
portrait orientation. It won't be a render blocking resource.
Finally, the last declaration is only applied
when the page is being printed. Hence,
it is not render blocking when the page is first being loaded in the browser.
>> Nice. So, only two of the four are
render blocking. I can feel the pages getting faster already.
تذكر أنه في الإعدادات الافتراضية، يفترض المستعرض أن
css يشكل حاجزًا، لذا ستقوم علامة الرابط الأول
،بحظر العرض. سيقوم استعلام الشاشة بتقييم الصواب
لأننا نقوم بعرض المحتوى على الشاشة
كما سيقوم أيضًا بحظر العرض. يعتمد الإقرار
.الثالث على توجيه الجهاز
في هذه الحالة بعينها لأن الجهاز في
.اتجاه عمودي. لن يكون مصدرًا لحظر العرض
وفي النهاية، لا يتم تطبيق الإقرار الأخير
،إلا عند طباعة الصفحة. وبالتالي
.فهو لا يحظر العرض عند تحميل الصفحة لأول مرة في المستعرض
>> جيد. لذا، اثنان فقط من بين الأربعة
.هما من يحظران العرض. أشعر أن الصفحات أصبحت أسرع بالفعل
Recuerda que, por defecto,
el navegador asume
que el CSS es bloqueante,
de ahí que la primera etiqueta LINK
bloquee la renderización.
La consulta SCREEN
confirmará que estamos visualizando
el contenido en una pantalla
así que también
bloqueará la renderización.
La tercera declaración
depende de la orientación del dispositivo.
En este caso en particular,
ya que el dispositivo está en vertical,
este recurso
no bloqueará la renderización.
Por último, la última declaración
solo se aplica cuando la página
se está imprimiendo,
por tanto no bloquea la renderización
cuando la página se carga
por primera vez en el navegador.
Vale. Solo dos de las cuatro
bloquean la renderización.
Ya empiezo a notar
cómo las páginas cargan más rápido.
デフォルトではブラウザはCSSが
ブロックすると仮定するのでしたね
それゆえ最初のlinkタグは
レンダリングをブロックします
screenクエリはTrueと評価されます
画面に内容がレンダリングされるからです
これもレンダリングをブロックします
3つ目の宣言は端末の向きに依存します
この場合では 受話器がポートレイトの向きなので
レンダリングをブロックする
リソースにはなりません
最後の宣言はページが
印刷されている時にのみ適用されます
それゆえページがブラウザで
最初に読み込まれている時
レンダリングをブロックしません
いいですね
4つ中2つのみがレンダリングをブロックします
もうページの読み込みが速まったように感じます
기본적으로, 브라우저는 CSS가 렌더링을 막는다고
가정한다는 것을 상기시켜보죠
그러므로 첫 번째 link 태그는 렌더링을 방해합니다
screen 쿼리는 화면에 내용을 렌더링하므로
브라우저는 이 태그를 방해하는 태그로 인식합니다
그러므로 이 또한 렌더링을 막습니다
세 번째 선언은 기기의 방향과 관련이 있죠
이 특정한 경우에는 폰이 세로 방향이므로
렌더링을 막는 리소스가 아닙니다
마지막으로, 마지막 선언은
페이지가 인쇄될 때만 적용이 되죠, 따라서
페이지가 브라우저에 처음 로드될 때는
렌더링을 막지 않습니다
>> 멋져요, 그렇다면 4개 중 2개만
렌더링을 막는군요
벌써 페이지가 빨라진 것처럼 느껴지는데요
Por padrão, o navegador supõe
que o CSS esteja bloqueando,
portanto, a primeira
tag link bloqueia a renderização.
A consulta screen é avaliada
como verdadeira,
já que estamos renderizando o
conteúdo na tela; portanto,
ela também
bloqueia a renderização.
A terceira declaração depende da
orientação do dispositivo.
Neste caso específico,
como o fone está
na orientação de retrato,
ele não é um recurso
bloqueador de renderização.
Por fim,
a última declaração só se aplica
quando a página está sendo impressa.
Portanto, ela não será um bloqueador
de renderização quando a
página estiver sendo carregada pela primeira vez no navegador.
Legal. Então, só duas das quatro são
bloqueadores de renderização.
Já posso sentir as páginas
ficando mais rápidas.