CRPテスト
12396 ワード
HTMLと画像
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section>
<h3>포스트</h3>
<div>
<img src="./unsplash.jpg" />
</div>
</section>
</body>
</html>
HTMLダウンロードの末尾と「DOMContentLoaded」の間隔は、ブラウザがDOMツリーを構築するのに要する時間です.
画像はDOMツリーを生成しますが、ブロックされていないようです.
cssとjavascriptの追加
現在parser blocking JavaScriptが含まれているため、domctentLoadedイベントはCSSがダウンロードされ、パケットが分割されるまでブロックされます.(JavaScriptはCSOMを操作する可能性があるので)
したがって、cssとjavascriptまでイベントが発生します.
cssのみを使用する場合は、以下のようになります.
asyncからJavaScriptへ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" />
</head>
<body onload="measureCRP()">
<section>
<h3>포스트</h3>
<p>Hello <span>web performance</span> students!</p>
<div>
<img src="./unsplash.jpg" />
</div>
</section>
<script src="./timing.js" async></script>
</body>
</html>
スクリプトでasyncキーワードを使用すると、ブロック解析器を遅らせることができます.
下の写真はdeferを使った時の写真ですが、元々deferも阻止解析器を遅らせていたのですが、asyncと違ってHTML解析が終わってから実行されるのですが、なぜかHTML Parsingが完成した時間がasyncと違って見えます.
Reference
Reference
この問題について(CRPテスト), 我々は、より多くの情報をここで見つけました https://velog.io/@jiseong/CRP-테스트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol