요소의 위치를 정하는 CSS 속성 중 position에 다른 값보다 늦게 합류하게 된 sticky가 있다.
오늘은 무심코 써왔던 sticky에 대해 간략히 파헤쳐 볼 것이다.
sticky?
사전적 정의로는 끈적거리는, 착 달라붙는이라는 뜻이다.
fixed는 스크롤의 위치와 관계없이 가장 최상위 블록(시각상 뷰포트)을 기준으로 고정이 되고,sticky는 부모 요소의 스크롤이 되는 시점에 고정된다는 것이다. 부모의 스크롤이 사라지면 함께 고정이 풀린다.
sticky의 조상은?
element는 normal flow를 따라 element의 가장 가까운 scroll 조상과 containing block을 기준으로 상대적 위치가 정해진다.
이것은 다른 요소의 위치에 영향을 주지 않고 독립적으로 움직인다.
sticky element는 새로운 stacking context(z축 개념)를 생성한다.
sticky element는 scrolling 메커니즘을 가진 가장 가까운 조상에 고정되는데, 이 메커니즘은 overflow가 hidden, scroll, auto, overlay일 때 생성된다.
추가로 overflow의 default는 visible이다.
will-change: transform
여기서 재미있는 사실은 sticky와 fixed는 성능과 접근성 문제를 일으킬 수 있다.
이 속성들은 scroll이 발생할 때, 브라우저를 repaint하여 새로운 위치에 element를 그려야한다.
repaint 요소들은 컴퓨터와 브라우저 성능에 따라 60fps 내에 수행하기 어려울 수 있어 버벅이는 동작이 발생하거나 일부 예민한 사용자들에게 사용자 경험을 떨어뜨릴 수 있다.
왜 하필 60fps인가?
디스플레이는 초당 60회의 화면을 새로고침하고, 브라우저는 이를 고려하여 각 프레임을 생성하는데 16.66ms가 소요된다. 하지만 각 프레임에 대한 자체 오버헤드도 있기 때문에 적어도 10ms 이내에 작업이 완료되어야 실제로 부드러운 구현이 가능하다. 이 작업이 실패하면 화면상 버벅거림이 발생한다.
그래서 이런 문제가 발생했을 때, 권장되는 해결 방법은 will-change: transform을 사용하는 것이다. 이렇게 하면 해당 element의 자체 레이어에서 렌더링을 하여 리페인트 속도를 향상시킬 수 있다.
will-change는 속성 이름과 동일하게 브라우저에게 "이거 변경될거야!"라고 알려주는 역할을 한다.
그래서 이 속성이 있는 element는 브라우저 입장에서 변경을 예상하여 이에 대비한다.
chrome의 경우 새로운 합성 레이어를 구축하거나 새로운 stacking context를 생성한다. 하지만 이 속성을 남발하게 되면 안된다.
말은 안했지만 브라우저는 이미 최적화를 위해 너무너무 열심히 일하고 있다.
그런데 열심히 일하는 브라우저에게 필요 이상으로 계속 "이거 변경될거야!"라고 여러번 말하게 되면 브라우저는 안해도 될 일을 계속하게 된다.
그래서 오히려 과도하게 메모리를 사용하게 되어 변경에 대비하기 위한 시도를 계속하여 이로인한 성능 저하를 일으킨다.
ref
'개발' 카테고리의 다른 글
| substring과 slice (0) | 2025.02.22 |
|---|---|
| 생산성 있는 코딩, Github Copilot 구독부터 적용까지(+ 사용 후기) (0) | 2024.04.22 |
| 동시성과 병렬성 (0) | 2024.04.21 |
| 우선순위 큐와 힙은 뭘까? (0) | 2024.04.17 |
| 이진 검색 트리는 뭘까? (0) | 2024.04.17 |
