【初心者向け 101】Brower API
そもそもDOMって？
そもそもDOMとは？ITスクールでは、詳しい説明がありませんでしたので、いつも疑問を抱いていました。
少し勉強してみた結果、以下のような結論が出ました。その前に簡単な説明から入ります。
我々がBrowserをオープンする際にはwindowという最上位のインタフェースがあります。
Browerの全体を意味する最上位のwindowはChromeでも、Edgeでも、safariでも同じでWeb Browser全体を意味し、DOM(document)はその中にあるWeb pageを意味するInterface(正確にはhtml文書全体の要素を含めているやつ）ということがやっと理解できました。
https://www.guru99.com/understanding-dom-fool-guide.html
WEBサイトにはnight modeがありますね！本来なら二つwebページを作成することが当たり前だと思いますが、DOMの中の要素を操作することで、Bodyのcolorのみ変更すれば、night modeをWEBページを２つ作成することではなく、１つのWEBページでも表現することができます。
Windowサイズ
const container = document.querySelector('.wow');
wowというクラス名のelementを持ってくる
window.addEventListener('resize', () => {});
browserのサイズが変わるたびに、() => {}の関数を実行する。
container.innerHTML =` ${text} <br> `;
QueryからもってきたDOM要素にhtmlを入れます。
RenderTree
https://velog.io/@moonshadow/CSSOM
DOMがHTMLのelementを表すインタフェースであれば、その後はcssのようなstyleを構造的に表したcssomがあります。HTMLー＞CSS順のparsingしてから、ページに見える画面をRenter Treeを通して構造化します。
Critical rendering path
これが、ページをロードし、レンダリングをする過程です。
その後、レイアウト、ペイントが適用されます。
レンダリングのスピードが速ければ、はやいほど性能が上がるのは当たり前ですね！
contruction
html 파일을 브라우저가 이해할 수 있도록 브라우저의 언어로 바꾸는 Construction part
→ DOM, CSSOM, Render Tree를 만드는 부분
requests/response : 브라우저가 서버에게 html 파일을 요청, 서버에 request를 하면 가장먼저 index.html을 받아오고 그 파일안에서 링크된 필요한 파일들(CSS,JS)을 받아오고, 필요한 리소스(이미지, 폰트)들을 순차적으로 서버에서 받아옴
loading : html 파일을 서버에서 받아 로딩
scripting : html 파일을 읽어 DOM 요소로 변환(DOM 트리 생성), CSS 스타일을 모두 계산해서 CSSOM 트리 생성
operation
→ layout, paint, composition을 거쳐서 사용자에게 보여주는 부분
rendering: DOM 트리 + CSSOM 트리 → 브라우저에 표기될 요소들만 선별하여 Render Tree 생성
layout: Render Tree 각 요소들의 위치와 크기 계산
painting: layer事に絵を書きます。
composition: paintingした絵をbroswerに配置
html 파일을 브라우저가 이해할 수 있도록 브라우저의 언어로 바꾸는 Construction part
→ DOM, CSSOM, Render Tree를 만드는 부분
http://webkrauts.de/artikel/2014/will-change-und-der-compositor-layer
Discussion