1. window.requestIdleCallback()
window.requestIdleCallback() - Web API | MDN
- UI가 바쁘지 않을 때 함수들 실행하기
- Queue에 있는 함수들을 실행하는 부분에 debounce를 걸어두고, 실행 시에는 requestIdelCallback으로 실행을 하면 UI가 바쁠 때는 작업을 지연했다가, 렌더링 등이 어느정도 끝났을 때 함수를 실행하게 됨 ⇒ 성능 최적화 방법
- 사파리는 지원하지 않음.
⭐ 모든 네트워크를 UI와 실시간으로 진행할 필요는 없다. 상황에 따라 DB와 실시간으로 sync할지 말지를 결정할 수 있으며, 그 때 위와 같은 기능을 사용할 수 있다.
2. Web Workers API
웹 워커 사용하기 - Web API | MDN
JS가 싱글쓰레드이기 때문에 작업들이 밀릴 수 있는데 웹워커를 사용하면 메인 쓰레드 바깥에서 작업하기 때문에 좀 더 성능 측면에서 더 나은 방법을 제시할 수 있다.
🔥 3. VanillaJS 과정을 마무리하며...🔥
-
다른 라이브러리 없이 JavaScript만으로 웹앱 만들기 훈련
- 실제 업무에서 이런 환경을 만나기는 드물지만, VanilaJS만으로도 할 수 있다는 것을 아는 것
- 다른 라이브러리나 프레임워크가 어떻게 동작할 것이다...와 같은 이해력을 키우는데 도움을 준다.
-
화면을 독립적으로 동작하는 컴포넌트에 대해 생각하고 만드는 것에 대한 훈련
- 화면을 선언적으로 생각하여 확장가능하고 버그를 덜 만드는 UI프로그래밍에 대해 익혀보기
-
상태, 데이터 중심으로 UI를 표현하고 이를 통해 화면의 변화를 생각하고 추적하는 것