🏋 "RAIL", 프런트엔드 성능에 대한 중요한 사고 방식

😎 추측하지 말고 측정하세요!

❌ 이것이 이 웹사이트가 느린 이유입니다!! 알아!
✅ 음... 그냥 측정하고 커피 마시면서

하지만 성능을 측정하고 나면 이런 생각을 하게 될 것입니다.

😑 Hey, I measured... but I don't have goal! 1second? 2second? What is criterion??

😎 알겠습니다 기본 성능 기준인 tadaaamRAIL을 알려드리겠습니다.
😑 루비 온 레일즈?
😎 아니오, 그것과 전혀 관련이 없습니다. RAIL은 "Response, Animation, Idle, Load"를 기반으로 합니다.


콘텐츠
기준 시간


응답
100ms

생기
16ms

게으른
50ms

짐
1000ms

⭐ 응답

일부 작업은 사용자가 무언가를 입력한 후 100ms 미만으로 응답해야 합니다.

Click! ----- less than 100ms -----> open modal

⭐ 애니메이션

애니메이션(영상)은 사실 수많은 이미지들의 집합체일 뿐입니다. 따라서 "1초"에 몇 개의 이미지가 있는지 아는 것이 중요합니다.



콘텐츠
초당 이미지 수


TV
30

영화
24

게임
60

PC
60


이제 아주 쉬운 수학을 해봅시다

1s - 60images
↓
16ms - 1image

이것이 애니메이션이 16ms 미만으로 끝나야 하는 이유입니다.

그런데 이 1초에 몇 개의 이미지가 있는지 단위를 FPS(Frames per second)라고 해서 PC에서 애니메이션은 60fps입니다.

▼ 예를 들어 chartjs-plugin-streaming의 구성에는 "frameRate"가 있습니다.

⭐ 유휴

콘텐츠를 로드한 후 브라우저가 아무 작업도 수행하지 않는 것처럼 보이지만 여전히 XHR 또는 지연 로드 이미지를 통해 API에서 데이터를 가져오는 작업을 수행합니다. 이러한 작업은 50ms 미만이어야 합니다.

😀 click Url!
↓
😀 finish rendering and we see something on browser!
😭 wait, Im browser, I need to load images that I didn't on purpose at first
↓
↓ (50ms)
↓
😭 Ok I've done it! I don't use main thread finally!
😀 ohh I can handle now on browser now!!

⭐ 로드

웹 페이지 콘텐츠 로딩 시간

I wanna see dev.io! click url!
↓
↓ (1 second)
↓
I see dev.io contents on browser and handle something as well!

실제로 처음에 모든 콘텐츠를 로드할 필요는 없습니다.
중요한 것은 사용자가 브라우저에서 보는 콘텐츠를 로드하는 것입니다.




→ 다음글 "그럼 어떻게 측정할까??"