728x90

 

이제 성능에 앞서서 웹페이지가 로딩되는 순서를 알아보도록 하자.

왜 이게 중요한지에 대해서는 바로 최적화 문제이다.

하지만 모두 다 설명하려면 엄청난 시간이 걸리게 되니 정말 간략하게 소개하려고한다.

 

위는 픽셀 플로우(fixel flow)라고 불리우는 순서이다.

이는 전반적인 웹이 로딩이 되는 순서라고 보기에는 그렇고 웹이 동작하는 도중에 어떻게 웹이 동적이게 바뀌는지를 알려준다.

 

1.JavaScript - 맨 먼저 js가 동작하면서 html의 dom을 건드린다. 그리고 dom트리가 재구축된다.
2.Style - 건드린 dom의 style이 변화한다면(css, style) 마찬가지로 이 단계가 실시된다. cssom트리가 재구축된다.
3.Layout - 리플로우(reflow)라고도 부른다. style중에서 화면의 위치, 크기등의  윤곽을 계산해서 적용한다. 리소스를 많이 먹는다.
4.Paint - style중에서 위치와 관련없는 투명도, 색등을 적용한다. layout에 비해서 상대적으로 적은 연산을 사용한다.
5.Composite - 위에 layout하고 paint하고 한것을 순서를 맞쳐서 모조리 합친다.

 

이를 다른 명칭으로 하면 아래와 같다.

 

출처 - https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/

 

Parse - Style - Layout - Paint - Composite

 

하나의 이름이 Js 에서 Parse로 바뀌었는데 이는 최초 시작부분이라서 그렇다.

맨처음에 js를 실행하기에 앞서서 HTML을 파싱해서 DOM트리와 CSSOM트리를 제작한다.

그래서 여러분이 생각할 때 

 

최초 : parse(html) - style - layout - paint - composite

그 다음 부터 : js - style - layout - paint - compoiste

 

이라고 생각하면된다.

여러분이 js로 뭔가를 실행하거나 html이 파싱하게 될 경우 자동으로 style단계로 넘어간다.

그러나 layout과 paint가 무조건적으로 실행되는건 아니다.

예를 들어서 dom의 크기나 위치를 건드려야만 layout이 실행된다.

반면에 layout이 실행되면 반드시 paint도 동반으로 실행된다.

그러나 dom의 크기나 위치를 건드리지 않는다면 layout이 paint가 바로 실행된다.

그런데 style을 건드리더라도 그게 보여주는데 영향을 안 미친다면 layout과 paint를 모두 무시할 수 도 있다.

이는 성능 최적화의 중점적인 부분인데 가능한한 layout을 적게 일으키는게 중요하다.

 

그 과정을 간략하게 보도록하자.

 

html이 넘어오면 이를 잘라서 DOM트리를 만들게 된다.

이 parse는 최초에 한번만 실행하며 후에는 실행되지 않는다.

다만 재시작하게 되면 js코드부분이 일어나게 된다.

 

style과 css를 분석해서 CSSOM트리를 제작한다.

parse가 일어나거나 js가 돔을 바꾸게 되면 자동적으로 일어난다.

 

그다음 DOM트리 + CSSOM트리를 합쳐서 Render트리를 만들게 된다.

여기서 화면에 어떻게 배치될지를 계산하게 되는데 이 과정에서 많은 연산이 들어간다.

위에도 언급했지만 layout은 무조건 일어나는게 아니라 DOM의 크기나 위치를 건드려야 작동하므로

가급적이면 적게 일어나는걸 목표로 한다.

 

그리고 Layout이 일어나고 난 후 자동적으로 paint가 일어난다.

layout에 적용된 틀에서 색이나 투명도, 그라데이션등을 적용시킨다.

layout을 건너띄고 paint만 동작할수도 있으나 layout과 paint를 모두 건너띌 수도 있다.

예를들면 DOM을 건드리긴했지만 meta태그나 위치나 크기, 색등에 모두 영향을 미치지 않는다면 실행되지 않는다.

 

이제 다 합쳐서 합성을 한다. 이게 일어나면 화면에 그려지게 된다.

이미 배치된것에 z-index를 고려해서 합치기만 하면되므로 많은 연산은 필요하지 않다.

js나 parse가 일어나도 이 경우는 반드시 일어나게 된다.

 

이 과정은 개발자 도구로도 확인할 수 있다.

 

화면에 보면 Layout-Paint-Composite 순으로 일어나고 있은걸 확인할 수 있다.

물론 짤려서 그렇지 앞부분들을 보면 style이나 parse도 정상적으로 일어날 수 있다.

 

그럼 다음에는 parse에서 어떤작업이 일어나는지 더 자세히 알아보도록 하자.

+ Recent posts