개시하다

웹 프런트엔드 고성능 튜닝 2장의 자용 독서 노트

브라우저의 주요 구성 요소 구성

렌더링 엔진

Javascript 엔진

엔진 소개

특정한 기능과 서비스를 외부에 제공하는 소프트웨어와 시스템 등
참조: https://e-words.jp/w/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3.html

렌더링 엔진은

웹 페이지를 그리는 소프트웨어를 제공하다.
HTML, CSS, 이미지 파일 등 다양한 에셋을 받아 화면에 에셋을 그리는 역할을 한다.
자원을 받아서 그리는 역할을 하기 때문에 브라우저 외에 HTML 메일의 디스플레이를 지원하기 위해 렌더링 엔진을 삽입할 수 있습니다.
대표 예: Blink, WebKit

자바스크립트 엔진

Javascript의 실행 환경을 제공하는 소프트웨어입니다.
렌더링 엔진과 함께 사용하는 경우 자바스크립트에서 DOM 트리, CSSOM 트리 등 내부 대상이나 API에 접근할 수 있도록 귀속을 제공합니다.
엔진이 있기 때문에, 예를 들면

<script>
  document.write('Hello World!')
</script>

이러한 코드가 HTML 파일에 기술되어 브라우저에 표시되면 브라우저에서 프롬프트가 표시됩니다.을 입력합니다.
대표 예: V8

브라우저 렌더링 프로세스

크게 다음과 같은 네 단계로 나뉜다.
Loading -> Scripting -> Rendering -> Painting
참고할 만한 이미지가 있으니 첨부합니다.

참조: https://www.seplus.jp/dokushuzemi/blog/2020/08/step_up2_specialist_css.html

Loading

에셋을 다운로드하고 다운로드한 에셋을 지웁니다.
여기서 말하는 자원은

HTML 파일

CSS 파일

Javascript 파일

jpeg 등 이미지 파일

라는 뜻이다.각종 네트워크 프로토콜을 통해 자원을 얻다.여기는 주제에서 멀지 않기 때문에 상세하게 설명하지 않겠습니다

HTTP

TLS

TCP

IP

DNS

UDP

주변 사정을 이해했으면 좋겠다.
그러면 다운로드할 수 있으면 얻은 자원에 따라 DOM 트리를 구축합니다.이것이 바로 퍼스의 단계다.
브라우저는 여기에 구축된 DOM 트리를 기반으로 렌더링 작업을 수행합니다.
여기에 구축된 DOM 트리는 Javascript를 통해서도 액세스할 수 있습니다.흔히'DOM 작업'이라고 불리지만 상술한 처리 절차를 보면'HTML 파일을 바탕으로 구축된 DOM 트리에 자바스크립트를 실행함으로써 DOM 트리의 구조를 변경한다'는 뜻이다.
또한 CSS 파일도 당연히 HTML 파일 안에 포함됩니다.렌더링 엔진은 여기에 포함된 CSS 파일도 CSSOM 트리로 변환합니다.
이제 Loading 단계가 종료됩니다.

Scripting

문장 해석 -> 문법 해석 -> 컴파일 -> 실행
프로세스 처리
대강 한 차례 설명하다
Loading 단계에서 생성된 Javascript의 코드
문장 해석 -> 문법 해석 -> 컴파일
형식, 클릭
실행
에서 Javascript를 실행하는 코드입니다.
Javascript를 사용하여 DOM 트리를 조작할 수 있지만 나중에 렌더링 단계나 Painting 단계로 이어질 수 있습니다.외부 리소스를 가져올 때 Loading 단계를 다시 시작합니다.
성능을 고려할 때 어떤 코드를 실행하면 어느 단계부터 처리해야 하는지 알아야 한다.

Rendering

렌더링 단계

스타일 컴퓨팅

레이아웃

.

계산 스타일

Loading 단계에서 구축된 CSSOM 트리에 따라 어떤 DOM 요소가 어떤 CSS 속성을 적용하는지 판단합니다.

배치

스타일 계산에서는 DOM 요소에 적용되는 CSS 속성을 식별합니다.
여기에는 이러한 정보를 바탕으로 Painting 단계에서 사용하는 레이아웃 트리를 만듭니다.

Painting

레이아웃 트리 기반

페인트

래스터화

층의 합성

이후 렌더링 결과를 생성하여 웹 페이지로 열람할 수 있습니다.

페인트

드로잉 생성 명령.

격자화

명령에 따라 도면층 단위로 한 장 한 장 그리다.
z축의 상한 관계를 고려하기 위해 왜 층 단위로 그렸는가.

작성 레이어

작성된 여러 레이어를 작성합니다.
레이어 합성에 CPU 및 GPU가 사용됩니다.
2D인 경우 CPU, 3D인 경우 GPU가 더 적합합니다.

잡기

프런트엔드 엔지니어의 경우 손실이 없음

특히 Loading의 해설은 이해하기 쉽다(협의 포함)

어떤 React 항목이 크롬의 검증 도구인'Performance'탭을 열었을 때 예상과 같이 Scripting에 가장 많은 시간(이미지 첨부 파일)이 걸렸다

전반부 수입량이 많아서 후반전(Painting)에 지쳤으니 다음에 보자

참고 자료

웹 프런트엔드 고성능 튜닝

자세한 내용을 배우고 싶으신 분들은 이쪽을 봐주세요.

열심히 공부하고 싶다면 책을 사거나 다음 기사를 읽는 것을 추천한다.

https://zenn.dev/ak/articles/c28fa3a9ba7edb

https://qiita.com/sasakiki/items/91dcc8b50d7a61ce98bc

사냥꾼자리에서 배우고 싶은 사람이 여기 있어요.

취미는 조금 다르지만 로딩 단계를 이해하는 데 참고 가치가 크다.
정체된 3년차 웹 엔지니어의 경우 Python 웹 응용 프로그램 자체 시작