Github
transform 비교 코드
position 비교 코드
Browser 렌더링
브라우저의 렌더링 과정은
HTML Parsing & CSS Parsing => Dom Tree & CSSOM Tree 생성
Attachment => Render Tree 생성
Reflow => Layout 에 따른 요소의 크기와 위치 계산
Repaint => Reflow에서 계산해주는 값을 기반하여 Paint
Composite => Layer 계층을 병합하여 화면에 나타냄
으로 이루어진다.
reflow의 특징
-
reflow는 브라우저 창 크기를 조절하여도 발생하게 된다.
-
또한, 하나의 요소가 reflow가 발생하면 상.하위 Layer내부에 존재하는 요소들도 reflow가 발생한다.
(즉, 대부분의 reflow는 페이지 전체의 렌더링을 발생한다고 한다. )
-
스레드 큐에 자바스크립트 실행이 끝나야 reflow를 진행한다.
아래 영상을 보자,
https://velog.velcdn.com/images/0_jin/post/862611b1-e2cf-478d-98c1-6d5a3fec6717/image.mov
두 원은 겉보기에는 별반 차이가 없다.
하지만, 브라우저 렌더링 과정을 확인해보면 차이가 분명하다!
개발자 도구의 성능을 사용하여 비교해보았다.
Performance 비교
우선 Reflow가 발생하는 작업부터 알아보면,
작업이 빽뺵하게 진행 중인 것을 알 수 있고,
이 작업들을 자세히 들여다 보면,
위와 같이 스타일 계산과 레이아웃, 페인트 과정이 진행되는 것을 알 수 있다.
이렇게 되면 문제가 발생하게 되는데,
레이아웃은 위에 설명한 것처럼, 스레드 큐에 존재하는 자바스크립트 실행이 끝나야 실행이 된다.
혹여나 reflow가 진행이 되어야 하는데, 자바스크립트 로직이 진행중이라면 사용자들은 애니메이션이 느리다고 판단할 것이다.
아래 영상을 보아 확인해보자
alert가 발동하고 나니, alert창으로 인해 스크립트가 동작하지 못하여 reflow 또한 진행이 되질 않는다.
따라서, 애니메이션은 동작을 중단하게 된다.
그럼, Reflow가 진행되지 않는 animation을 보면,
스타일 계산, 레이아웃 , 페인트 아무런 동작을 진행하지 않는다.
위 두 이미지를 통해, 렌더링 시간과 페인팅 시간 소요에 대한 차이를 명확하게 확인할 수 있다.
그렇다면, 과연 alert창이 나타날때 애니메이션은 동작할까?
당연히, reflow가 발생하지 않으므로 애니메이션은 계속 동작하게 된다.
추가
Position : fixed
<div id="container">
<div id="circle"></div>
</div>일반 상황의 경우에서는 circle이 reflow발동이 되면 container 또한 동시에 같이 reflow가 발생한다.
하지만 circle에 fixed를 넣어준다면, 아래와 같이 Layer가 분리됨을 확인할 수 있으며
따라서, circle의 reflow로 인한 container요소의 reflow를 막을 수 있다.
아래 이미지로 성능을 확인할 수 있다.
결론
동일해 보이는 Animation일지라도, 내부를 비교해보면 reflow의 여부에 따른 엄청난 성능차이가 발생하고, 그 차이로 인해 향후 동작에 영향으 끼치게 된다.
결국, reflow를 발생하지 않도록 해야 한다.
reflow를 발생하지 않게 하기 위해서는, width와 height같은 layout 계산이 필요한 값을 변경하지 않게 해야한다.
만약, reflow가 발생하게된다면, 자식 요소와 부모 요소를 동일한 layer에 두지 않는 것이 중요하므로, Position의 fixed를 사용하여 layer 계층을 분리하여 부모 또는 자식 요소에 대하여 reflow를 줄여야 한다.
추가로, 다른 글을 보면 reflow가 발동하면 자식 요소와 부모 요소가 reflow가 발동한다고 한다.
하지만, 나는 동일한 Layer에 존재하는 요소가 reflow 진행된다고 말하는게 더 명확한 표현이라고 생각한다.
GPU를 통해 각각의 Layer끼리 reflow와 repaint가 진행되고,
Layer를 Composite하여 합쳐주기 때문이다.
