브라우저 기준 최적화
html,css ,js 는 block resource라고 부른다. 위의 사진은 critical rendering path이다.
위의 순서로 진행되는데 중간에 js block을 만나면 html parsing을 멈추고 지금까지 만든 DOMtree 와 CSSOM을 준비를 하게 된다. js 에서 access 하고 변경이 가능하기 때문이다.
html parsing이 멈춘것을 확인. css 와 js 블록을 만났기 때문이다.
따라서 html parsing을 중간에 멈추지 않게 javascript tag를 하단에 위치시켜서 html parsing이 완료되어 렌더링이 잘 된다.
하얀 화면이 오래 나오는게 사라진다.
TTFB = time to first byte == 브라우저가 요청을 날리고 css의 첫 바이트까지 받아오는데 걸리는 시간이다.
인라인 스타일로 기다리는 시간을 줄였다.
하지만 로딩바만 빠르게 뜨지 실제 컨텐츠가 뜨는 시간은 차이가 없었다.
사용자 기준의 최적화
로딩바를 먼저 로딩하는것보다 의미있는 (first meaningful paint) 것을 먼저 렌더링하는것이 좋다.
spa + ajax = 로딩 ,랜더링이 길어짐
웹펙에 preredner - loader 라는 기능을 통해 빌트타입에 만들어진 html,css를 빠르게 로딩할 수 있다.
랜더링 최적화
강제 동기 레이아웃 = dom 을 변경하지도 않았는데도 한 사이클을 돌게 된다.
DOM 의 어떤 property를 읽기만 해도 사이클이 돌게 되면 -> 레이아웃 스레싱이 발생하게 된다.
virtual dom = 변경된 dom 만 업데이트되게 해주는 기술이다.
web worker = 메인스레드에서 오래 걸리는 작업을 다른스레드에게 넘기는것