5/24 Dev.Feedback (성능 보장 렌더링 순서)

먼저 브라우저에서 URL을 입력하게 되면

아래 보여지는 순서로 진행이 되는데

requests / response  ----> loading ----> scripting ----> rendering --> layout --> painting



<-------------------------------------------------------><--------------------------------->

       브라우저만의 언어로 바꾸는 Construction part.         Rendering tree를 기반으로 window를 구성하는 
                                                                    Operation part

 

먼저 HTML 파일을 요청을 하고, 파일을 서버에서 받아 로딩을 한다.

로딩을 하면서 HTML을 받아 한줄 한줄씩 읽어 DOM 요소로 변환하는데, 이 작업을 scripting이라고 한다.

그 후 CSS 요소 역시 받아 CSSOM 요소로 변환 하여 Rendering tree 를 만든 다음,

각각의 요소들이 어떤 위치에 얼마나 크게 배치 되는지 확인하는 layout 과정을 거친 후 painting을 하여

보여주게 된다.

 

Construction part에는 DOM CSSOM RenderTree 까지 만드는 과정

Operation part layout paint composition을 통해 사용자들에게 제공하는 과정

 

특히 paint 과정이 중요한데, layer 별로 나누어서 준비를 해놓는데 그 이유는 브라우저의 성능을 끌어올리기 위해서이다.

각 layer 별로 나누는 이유는 포토샵 작업을 생각하면 쉬울 것 같다.

 

그리고 composition은 layout에서 layer별로 나누었던 부분들을 차곡차곡 쌓아 window를 구성해주는 것이다.

 

성능 개선을 위해 꼭 고려해야할 부분

( Javascript나 DOM 수정시 composition만 일어나게 하는 것이 BEST이다!)

• DOM 요소를 적게 구성한다. --> 불필요한 태그를 사용, or div 태그 남용 자제
• CSS 규칙을 적게 만든다. --> 쓸 때 없이 wrapping calss 나 wrapping 요소 만들기 금지
• Paint가 자주 일어나지 않게 만드는 것이 좋다 --> translate 로 포지션을 변경해주는 것이 좋음!

https://csstriggers.com/

CSS Triggers

CSS 속성들중 성능을 떨어뜨리지 않고 디자인을 하거나 애니메이션을 줄 수 있는 것들을 확인할 수 있는 사이트