アドレスバーのURLで、HTMLを返した後、ブラウザのDOMの順序は、ロードとレンダリングを開始します
bodyタグ
ブラウザは、bodyタグが本当にロードを開始し、DOMをレンダリング遭遇すると、この時間は、次のような状況が存在します。
DOM要素
ブラウザは、DOM要素、ローディングの正常配列、サイドローディング側のレンダリングが発生した場合
インラインCSS
インラインCSSに直面したとき、ブラウザがロードするように続けますが、レンダリングがブロックされ、その後、新しいCSSルールツリーを生成し、再レンダリングインターフェース後世代
アウトリーチCSS
アウトリーチCSS（リンクタグ）に直面したとき、ブラウザは、DOMが負荷に続けるが、レンダリングがブロックされ、スレッド負荷のCSSファイルを開始します
内联Javascriptを
Javascriptをインラインに直面したとき、ブラウザは、DOMの負荷を、このスクリプトの実行を開始すると同時に、ブロックされたレンダリング（そこJavaScriptのDOMツリーによる変化もので、同時に遮断され、ツリーをレンダリングしてもよいです）
アウトリーチのJavascript
アウトリーチのJavascriptに直面したとき、このスクリプトをダウンロードし、ブラウザを開始するには、ダウンロードが成功した後、DOM負荷のこの全体のプロセスを、それを実行すると同時に、ブロックされたレンダリング
例
説明するために、例を使用して、
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
JSファイル中にjsの要素の後ろに、ダウンロードしたロードされ、また画面に表示されていない、ファイルのJSをダウンロードするための命令がDOM構文解析とレンダリングをブロック
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css">
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
CSSファイルは、2つをプリントアウトすることが可能であった、ダウンロードするプロセスに残っている<H>、ロードされたCSSファイルは、DOMのレンダリングをブロックされたが、DOMをブロックせずに見ることができます
延期与非同期
我々は最初の外部JavaScriptファイルをロードし、次のコードを実行した場合は、他のDOMをロードします。
<html>
<body>
<script src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
<h2>Hello World</h2>
</body>
</html>私たちが予想したように、ダウンロードし、完成にファイルがない、Hello Worldのはプリントアウトされていません。我々は延期または外部のJavaScriptに非同期プロパティを追加した場合、それは詰まりDOMダウンロード他のコンテンツのロードしないように：
<html>
<body>
<script async src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
<h2>Hello World</h2>
</body>
</html>
非同期と延期の属性の違いについては、私の他の記事を参照してください：
Javascriptのハイレベルのプログラミングの研究ノートを- HTMLにJavascriptを使用して
