[コンピュータサイエンス]仮想ドメインとは?

2511 ワード
computer science テキストリンク

DOMとは?


DOM(Document Object Model)の略記形式で簡単に説明すると、HTMLとJavaScriptを接続し、私が書いたHTMLをオブジェクト(Object)に変換してJavaScriptが理解できるようにすることです.
DOMは私が作成したHTMLから生成されますが、ブラウザは必要なノードを自分で貼り付けます.例えば、<head>または<body>がない場合、ブラウザで開くと自動的に生成される<html>に任意のコンテンツが記述される.また、JavaScriptを使用して新しいノードを追加することもできます.
const newTextDiv = document.createElement('div')
const helloWorld = document.createTextNode('Hello world!')
newTextDiv.appendChild(helloWorld)
document.body.appendChild(newTextDiv)
したがって、JavaScriptをDOM APIと呼ぶこともできる.

ブラウザの動作原理



ブラウザがHTMLを受信すると、それを変換(グループ化)し、ノードからなるDOMツリーを作成します.次に、外部CSSファイルと各ノードのinlineスタイルをグループ化し、スタイル付きRenderツリーを作成します.
Renderツリーが作成されている場合、各ノードの画面上の正確な位置が指定されます.次にpaint()メソッドを呼び出すと、実装したい画面が出力されます.
DOMはこのプロセスを繰り返します.つまり、エラーの修正や文の削除、画像の添付などの些細なことをしても、DOMはHTMLをDOMツリー、CSSをRenderツリー、レイアウト出力に最初から再分割します.
2000年初頭でも、1つのサイトには数ページはありませんが、今では多くのサイトが数十ページから数百ページから構成されています.エラーを見つけたいだけですが、Webサイト全体が最初からレンダリングを再開する必要があります(上の結果の出力プロセス)、エラーを検索するのに時間がかかりすぎて、効率がかなり低いです.
VirtualDomが現れました

Virtual DOM


仮想DOM(virtual DOM)は、複数の変更があっても一度だけレンダリングされます.仮想DOMは一度にDOMに渡され、レンダリングは一度だけ行われます.変更が発生した場合、仮想DOMは変更値を自動的に検出して変更し、最終結果を実際のDOMに渡します.

Reference


注意:DOMの概要
注意:DOMと仮想DOMとは?
22.4.18 [HackerRank]Java End-of-file
ピクチャリソースの非同期ロード