[Javascript]ページの表示
3051 ワード
Webページの表示
Webブラウザでページをレンダリングする方法
Webブラウザの基本構造
사용자 인터페이스
↓
브라우저 엔진
↓ → 자료 저장소
렌더링 엔진
↓
통신/ 자바스크립트 해석기 / UI 백엔드1.ユーザーインタフェース
(ユーザインタフェースは可視領域以外の領域を占めています!)
:ユーザーのエンジンにWebソースを表示します.
作成したコードを説明します
1)通信:画像、その他のスクリプト、スタイルシートのダウンロード
2)JS解釈器:記述コードの解釈
3)UIバックエンド:オペレーティングシステムに依存するUI形式
レンダーエンジンのキャラクタ
レンダー順序(Render Order)
1)分割2)計算スタイル3)レイアウト4)塗装5)混合
1.ボクシング
1)エラーまたはエラー構文を使用した場合の例外処理
->エラーコードが表示されない
2)
<link>、<img>等のタグを使用してリソースをダウンロードする3)
<script>タグに遭遇した場合、DOMパーティションを停止し、JSを解析する->割り込みの原因:スクリプトコードにDOM構造を変更するコードが含まれている可能性がありますo
<html>
...
<body>
<script>
document.write("<h2>hi~</h2>");
</script>
</body>
</html>2.計算スタイル
1)CSSOM情報によるドームノードのスタイルの決定
2)クロム開発者ツールの計算項目で確認できるスタイル
(スタイル計算フェーズで決定されたスタイル!)
3.レイアウト
1)ドームと計算スタイルに沿ってレイアウトツリーを作成し、要素のサイズや座標などの情報が含まれます.
2)ツリーには画面に表示される情報のみが含まれています
ex)display:none X,仮想要素O
Visibility:hiddenはスクリーンでは見えませんが、エリアレイアウト自体は変わらない!
4.ペンキ
5.複合ステップ
整理する
Reference
この問題について([Javascript]ページの表示), 我々は、より多くの情報をここで見つけました https://velog.io/@soulee__/Javascript-웹-페이지-렌더링テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol