최적화2 트리 쉐이킹 (Tree Shaking) 이란 무엇인가 트리 쉐이킹 (Tree Shaking) 사용하지 않는 코드를 제거하는 방식을 말한다. (Rollup, Webpack에서도 찾아볼 수 있다) 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking 이라고 명명하였다고 한다. 트리 쉐이킹을 적용할 지점을 찾아보자 사용하는 모듈로부터 전체를 Import 하지 않고 사용하는 기능만 {} 부분적으로 Import 한다. import utils from 'utils-lib' let count = 0; const handlePlus = (a) => { count += a }; utils.parseResult(handlePlus(5)); // '현재까지 누적된 카운트는 : (a)' 누적값 앞뒤로 스트링 메시지가 감싸져 리턴값을 돌려주는 utils.p.. 2022. 1. 12. 브라우저 렌더링 성능 최적화 방법 Reflow, Repainting 흐름 맨 처음 브라우저가 로딩될 때 렌더링 과정을 통해 화면이 그려짐 -> 그려진 화면은 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 재구성 됨 Reflow DOM이 추가, 삭제 되거나 DOM 요소의 너비, 높이, 위치 등의 기하학적 영향을 주는 CSS 내용이 변경될 경우 '렌더 트리'가 재구성 된다. 이것을 'Reflow(재배치)' 라고 한다. Repaint 기하학적 영향을 주지 않는 CSS 속성이 변경되었을 경우에는 Reflow 과정을 건너뛰고 Paint 과정부터 수행한다. 'Reflow'가 일어나면 전체 픽셀을 다시 계산하여 재배치하는 과정을 거치기 때문에 부하가 ↑ 'Repaint'는 재배치 과정을 건너뛰고 화면에 그리는 작업만 수행하기 때문에 .. 2021. 10. 14. 이전 1 다음
