Browser 웹 페이지를 표현하는 방법

Yudrey·2022년 4월 11일
0

패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤"

Unobtrusive JavaScript
웹 페이지가 JavaScript에 대해 가지는 의존도를 줄이고,
사용성을 높이기 위해 JavaScript를 적소에만 사용하는 것

→ 'Unobtrusive'라는 용어를 대체할 적절한 우리말을 찾는 것이 난해함
→ 개발 관련 용어는 정확한 용어를 익히는 것도 중요하지만, 가능하면 영어 원문도 알아두는 것이 좋음

프론트엔드 기술 스택

웹 브라우저 + HTML, CSS, JS

웹 페이지 로드 과정


→ 노란색 박스로 된 과정은 자바스크립트 이벤트는 없으며, 네트워크 레벨에서 일어나는 것으로 대부분 백엔드에서 담당
→ 프론트엔드는 Processing 단계를 잘 알아두면 좋음

출처: https://www.w3.org/TR/navigation-timing-2/

1. Prompt for unload
어떤 웹페이지를 보고 있다가 다른 페이지로 이동할 때 발생
다른 페이지로 이동하므로 해당 페이지에서 벗어날 거라는 신호를 주는 것

unloadEventStart → window: beforeunload 이벤트 발생
(이 페이지를 벗어나시겠습니까?)

2. Redirect
요청한 URL (서버) 측에서 redirect 신호를 보낼 때 발생
웹 페이지를 보고 있지 않다면 발생하지 않는 신호

3. AppCache
실제로 서버에서 데이터를 읽어오기 전에 브라우저 캐시에 저장된 데이터가 있는지 확인

4. DNS, TCP, Request, Response
네트워크 단계로, 네임서버를 조회해서 서버의 실제 IP를 알아내고 서버에 실제 요청을 보내고 받아오는 부분까지 처리하는 단계
웹페이지에 사용할 HTML을 받아오는 단계

5. Processing
웹 페이지 파일(HTML, JavaScript, CSS, image)을 파싱하고 렌더링하는 단계

domInteractive, domComplete → documnet: readystatechange 이벤트 발생

domContentLoadedEventEnd → document: DOMContentLoaded 이벤트 발생

HTML 파일을 다 읽고 파싱하고 DOM까지 그려낸 단계
자바스크립트로 기능을 추가할 수 있으며
서버 리소스(이미지,동영상)는 아직 안 읽은 단계

6. Load
loadEventEnd → window: load 이벤트 발생
모든 서버 리소스까지 다운로드 받고 로드한 단계


브라우저 주요 구성 요소


출처: 패스트캠퍼스 강의
The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤

사용자 인터페이스

웹페이지를 제외한 나머지 영역
사용자가 인터렉션 가능한 영역
주소 표시줄, 북마크 등등..

출처: https://www.naver.com/

브라우저 엔진

사용자 인터페이스와 렌데링 엔진의 다리 역할

렌더링 엔진

실질적으로 웹페이지를 표현하는 부분
HTML, CSS, JavaScript를 읽고 해석하고 그리는 것


출처: https://www.naver.com/

참고 : 모던 웹 브라우저 들여다보기(2018)
https://developer.chrome.com/blog/inside-browser-part1/
https://developer.chrome.com/blog/inside-browser-part2/
https://developer.chrome.com/blog/inside-browser-part3/
https://developer.chrome.com/blog/inside-browser-part4/


렌더링 엔진의 동작 과정

  1. HTML, CSS, JS 파싱
    문서를 읽어 브라우저가 문법을 분석, 코드를 이해한다.
    script 태그를 만나면 JS를 해석할 때까지 파싱을 멈춘다.

  2. DOM, CSSOM 변환
    브라우저에서 사용할 수 있는 구조로 변환한다.

  3. 렌더 트리 구축
    DOM과 CSSOM을 결합하여 화면에 그려낼 내용을 작성한다.
    즉, 어떤 엘리먼트에 어떤 스타일을 적용할 것인지 정해진다.

  1. 렌더 트리 배치
    각 요소의 크기와 위치를 계산한다. (Layout 단계)

웹 사이트 Layout 확인 방법

  • 크롬 개발자도구에서 More Tools > Layers
  • 브라우저 성능을 위해 레이어 전체 개수는 30개 이내로 하는 것이 좋음
  1. 렌더 트리 그리기
    요소를 실제로 픽셀로 변환하여 그린다. (Paint 단계, Rasterize)
    픽셀로 그려진 여러 레이어를 합성한다. (Compositing 단계)

*Layout 단계가 발생하면 Paint, Compositing 단계를 반드시 거치게 되므로 비용이 많이 발생함. 따라서 Layout 단계를 건너 뛰도록 하는 것이 렌더링 성능의 핵심!

profile
Frontend Developer

0개의 댓글