우리의 웹페이지와 웹앱을 브라우저가 사용자에게 보여주기까지 어떤 과정을 거치는가?
각 과정에서 어떻게 작업하면 성능을 향상시킬 수 있을까?
1.성능보장 렌더링 순서
우리의 웹페이지와 웹어플리케이션을 브라우저가 사용자에게 보여주기까지 어떤과정을 거치는가?
→ 그 과정에서 어떤 부분을 활용해야 성능을 좋게 만들 수 있을까?
✨Critical Rendering Path
: Construction(DOM ⇒ CSSOM ⇒ RenderTree) + Operation(Layout ⇒ paint ⇒ Composition)
HTML ⇒ request/response → loading → scripting → rendering → layout → painting ⇒ User
: 브라우저가 서버에게 html 파일을 요청하고, 서버로부터 받은 html파일을 로딩한다. 데이터를 받아와서 이 html을 한 줄 한줄씩 읽어서 DOM요소로 변환하는 스크립팅작업을 한다. CSS요소를 CSSOM으로 변환 후 이것들을 브라우저 window에 표기하기위해 준비한다. 이렇게 렌더링트리를 만든 후 각각의 요소들이 어떤 위치에 얼마나 크게 표기될 건지 계산(layout) 한 다음, 그림을 그리는 스텝으로 진행된다 (painting)
Construction : DOM ⇒ CSSOM ⇒ RenderTree
Operation : Layout ⇒ Paint ⇒ Composition
Construction
-
html페이지에서 브라우저가 이해할 수 있도록 브라우저만의 언어로 바꾸는 과정
-
DOM요소 + CSSOM = Rendertree를 최종적으로 만드는 것까지가 Construction파트에서 하는 일
Operation
이렇게 만들어진 브라우저가 이해할 수 있는 RenderingTree를 이용해서 구조를 작성하고 어디에 배치할 건지 계산 후 실제로 브라우저 window에 그림을 그려주는 rendering하게 되는 operation파트로 나뉜다.
각 요소들을 화면에 배치하면서 최종적으로 사용자에게 출력되는 화면을 만드는 일 🤩
-
Layout : 우리가 만든 RenderTree(DOM+CSSOM)를 이용해서, 최종적으로 계산된 정보를 기반으로 window위에 각 요소들의 위치(x,y),크기(너비,높이) 등을 배치하는 레이아웃을 구상합니다. → 얼마만큼 어디에 그림을 그려야 될지 계산합니다.
-
Paint : layout에서 배치한 결과에 따라 각 부분을 조금씩 잘게 나누어서 이미지를 준비한다. (이때 각각의 이미지를 비트맵이라고 한다. 컴퓨터가 이해할 수 있는 이미지를 비트맵 데이터 형태로 변화하게 한다) / 각 이미지들을 레이어를 만들어서 레이어별로 paint를 준비만 해놓는다. → 이유는 만약 우리가 한 요소의 위치를 변경하거나 투명도를 변경했을때!! 레이어의 기능이 없는 상태라면? 브라우저는 이 작은 요소를 업데이트하기 위해 전체 웹페이지를 모두 다시 업데이트해야하므로 비효율적이다. 하지만 레이어기능에서의 이 작업은 업데이트 해야할 요소를 포함하고 있는 레이어만 업데이트 하면 되므로 상대적으로 효율적이다.
*주의 : 과한 레이어 사용은 브라우저의 성능을 나쁘게 하므로 남용하지 않는다. →
will-change속성값을 너무 많이 쓰지않도록 한다. -
Composition : 위에서 준비한 레이어들을 순서대로 차곡차곡 브라우저 위에 표기하면 된다. z-index가 높을수록 가장 나중에
🤷🏻♀️Critical rendering path의 파트별로
어떤 부분을 어떻게 변경하면 성능개선에 도움이 될까?
Construction : DOM ⇒ CSSOM ⇒ RenderTree
// time to first render
DOM에서부터 RenderingTree를 어떻게 빠르게 만들 수 있을까?
🔹요소들을 최대한 작게 만들기
: DOM요소가 작을수록, CSS규칙이 작으면 작을수록 RenderingTree가 작아지니까 빠르게 만들수 있다. → 불필요한 태그, div, wrapping클래스 등은 자제
Operation : Layout ⇒ Paint ⇒ Composition
// performance user interactions avoid jank ensure reflows & repaints at 60 f/s
사용자가 클릭해서 요소를 움직이고, 애니메이션을 쓰는 등 상호작용이 일어나면 어떻게 빠르게 실행시킬 수 있을까?
🔹operation에서는 paint작업이 자주 일어나지 않도록 하는것이 중요! best는 composition만 발생!
위치를 변경해야 하는경우, top left 값을 변경하기보다는 translate를 사용→ composition만 다시 하면 됨.
❗️최악은 layout부터 다시 작업해야하는 경우이다 ❗️
2. 레이어 데모(will-change남용? )
- F12 → moreTool → Layers
어떤 CSS를 사용하냐에 따라 layer가 달라지는 것을 확인 할 수 있음
위에서 공부한 성능을 빠르게 하는 규칙들을 참고하여 코딩하고, 어떤 CSS를 활용하는 것이 효율적인지 http://csstriggers.com/ 참고하면 좋을듯하다.
🔹Operation에서 paint작업이 자주 일어나지 않도록 하는것이 중요! best는 composition작업만 다시 하면 되도록! layout부터 다시 작업하는 일을 없도록 ㅠㅠ
