홈페이지가 사용자에게 보이는 순서에 대해서 설명해주세요.(브라우저 렌더링 과정에 대해서 설명해주세요.)

[365kim]

• 홈페이지가 사용자에게 보이는 순서에 대해서 설명해주세요. (브라우저 렌더링 과정에 대해서 설명해주세요.)

[365kim]

공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆

[Puterism]

• 체프의 테코톡 😎
• 자바스크립트 딥다이브 - 38장 브라우저 렌더링

[Puterism]

핵심키워드
HTML 파싱, 리소스 요청, DOM Tree, CSSOM Tree, Render Tree, Layout, Paint, Composite Layers

경험요약
주소창에 URL 입력 후 일어나는 일들을 브라우저 렌더링 과정 중심으로 이야기했다.

스터디회고
조금 두루뭉술하게 이야기한 감이 없지 않아 있었다. 더 부드러운 흐름으로 이야기할 수 있도록 고민해봐야 할 것 같다.

[zereight]

핵심키워드
HTML 파싱, DOM Tree, CSSOM Tree, Render Tree, Layout, Paint, Composition

경험요약
리소스 다운로드 후 렌더링이 어떻게 되는지에 대해서 이야기 했고, Composition부분은 살짝 생략했다.

스터디회고
모든 단계에 대해서 명확하게 설명할줄 알아야겠다.

[365kim]

• 핵심키워드 : 리소스 요청/응답 파싱/트리생성 렌더링 파이프라인
• 경험요약 : width를 변경해서 Layout 과정을 일으키는 대신 transform을 사용한 경험
• 스터디회고 : 설명이 장황해졌다. 좀더 깔끔하게 말하는 연습이 필요하다. head 태그안에 있는데 렌더트리에 포함되는게 있는지 더 고민해봐야겠다.