The Critical Rendering Path

참고 - https://developers.google.com/web/fundamentals/performance/rendering/?hl=ko

이번 장에서는 브라우저랜더링 파이프라인에 대한 배경지식을 배우게 된다.

Jutter

jutter(움직임 결함)을 피하는것은 대단히 중요하다. 애니메이션이나 사용자로 인해 스크롤을 하는등 스크린상의 변화가 있으면 프레임은 끊임없이 깜빡인다. 대부분의 디바이스는 초당 60번(60Hz) 깜빡이기 때문에 우리가 만드는 웹사이트도 60fps(1프레임당 16ms이하, 실제로는 10~12ms)에 맞춰야 한다. 사람들은 프레임이 비어있는걸 엄청나게 잘 느끼기 때문이다. 그리고 그들은 그러한 모습(프레임드랍)을 극혐한다.

What Goes Into One Frame

브라우저는 서버로 요청을 보낸다. `GET/ HTTP/1.1`. 서버는 응답으로 HTML문서를 보내온다. 이때 브라우저는 조금 영리한 방법으로 파싱을 하는데, 우리는 이부분에 주목해야 한다.

DOM + CSSOM = Render Tree

랜더트리에는 <head>, <script>태그 CSS의 display:none되어있는 엘리먼트 등 실제 눈에 보이지 않는부분은 랜더하지않는다.

rasterizer

코드를 화면에 그려주는 과정. (Paint)

image Decorde + resize

composite layers

웹 랜더 파이프라인.

첫번째 경우 (처음 랜더링하는 경우)

  1. css혹은 js로 시각적인 변화를 준다.
  2. style 브라우저는 효과를 줄 대상등을 계산한다.
  3. layout width height 다른 엘리먼트와의 상대적거리를 지정한다.(relative ,absolute, left, top 등) reflow가 일어난다.
  4. paint (background-color, text color, shadows 등)
  5. composite (Notice how opacity and transform only trigger composite?)

두번째 경우(색상이 변하는경우)

  1. paint단계에서 repaint가 일어난다.
  2. composite

세번째경우(cursor 변환등)

  1. composite만 일어난다.

퀴즈: Rendering Quiz

flex로 브라우저상 보여지는 박스사이즈가 변했다면 어떤 랜더링 과정을 거쳤을까?

답 : paint, layout, composite

style의 역할은 계산이다. reflow나 repaint에 대한 계산은 이미 끝나있다.

layout 사이즈가 변했기 때문에 reflow가 일어났다. layout이 변하면 composite와 paint는 자동으로 일어난다.

https://csstriggers.com/ 을 참고해 reflow를 피할수 있는 방법이 있다면 최대한 이용한다.

results matching ""

    No results matching ""