웹 성능 최적화의 척도 - RAIL
raf를 사용해 보려다 알게 된 내용이라 메모해둔다.
웹 성능 최적화의 척도로 60FPS를 유지하는 것이 있다는 것을 알게되었고 이것을 위해 raf를 사용해 Ghost Defense를 리팩토링해보려고 한다.
그런데 매순간 60FPS를 정확히 유지할 수 있을까?
불가능에 가깝기 때문에 정확히 어느 순간을 최적화해야 하는지 판단하기 위한 기준이 필요하다.
이 기준이 바로 RAIL이다.
🔹 Response
유저와의 상호작용에 얼마나 빨리 반응할 수 있는가
사용자가 버튼을 클릭하는 등 액션을 취했을 때 시각적인 변화를 볼 수 있기까지의 걸리는 시간을 말하는데, 이 소요시간은 100ms이하여야 한다.
🔹 Animation
부드러운 애니메이션이 되기 위해서는 한 프레임을 보여주는데 16ms가 필요하다.
브라우저는 애니메이션 외에도 다른 작업들을 함께 처리해야 하기 때문에, 이것 까지 고려해서 10~12ms 사이에 한 프레임이 처리되도록 만드는 것이 좋다.
이를 위한 팁은 transform 과 opcity 속성을 적극적으로 활용해 layout이나 paint가 아닌 composition과정만 다시 일어나도록 만드는 것이다.
🔹 Idle
사용자는 로드가 끝난 뒤 다음 상호작용을 시작하기까지 50ms 정도가 걸린다.
아주 짧은 순간이지만, 브라우저는 이 시간동안 많은 연산이 필요한 작업을 수행할 수 있다.
예를 들어 마무리하지 못한 이미지나 비디오를 로드하거나, 크게 중요하지 않은 요소 렌더링을 이 시점에 수행할 수 있다.
🔹 Load
사용자가 사이트에 접속한 뒤 시각적으로 볼 수 있는 요소들이 화면에 나타나기까지 걸리는 시간이다. 이 시간은 1s 이하를 권장한다.
1s 안에 사용자가 로드가 완료되었음을 알 수 있도록 기본적이고 핵심적인 기능만 동작할 수 있도록 로드하는 것이 좋다.
많은 css 선택자 문법들이 있지만, 이것들 또한 브라우저에 추가적인 연산을 요구한다고 한다.
따라서 CSS 선택자를 잘 써주는 것 만으로도 성능 향상에 도움이 된다
(이런 측면에서 BEM 클래스 명명 규칙은 성능 측면에서 이점이 있다.)
CSS 선택자 활용법
- 가능하면 id, class 를 이용한 속성 명시를 수행하고, tag 에 대한 속성 명시는 수행하지 않는 것이 좋습니다.
- 자식, 자손 선택자를 최대한 쓰지 않도록 하십시오. 특히, tag 에 대한 자식, 자손 선택자는 끔찍한 성능을 보여줍니다.
- :not, :nth-child, [] 과 같은 조건을 붙이지 마십시오. 이는 추가적인 연산을 필요로 합니다.
- 상속을 최대한 활용하십시오. 상속을 최대한 활용하면 CSSOM 트리 자체의 크기를 줄일 수 있습니다.
Reference
