2022개발책100권읽기 2

『기초부터 완성까지, 프런트엔드』 15. 성능

15.1 Performance 탭과 성능 최적화 15.1.1 Performance 탭의 구성 크롬 개발자 도구의 Performance 탭에서 웹페이지의 성능을 측정할 수 있다. 특이한 점은 (1)의 새로고침버튼을 누르면 웹페이지를 새로고침해 측정을 시작한다는 것. (2)의 다운로드, 업로드 기능을 통해 성능개선결과를 확인하는 데 이용할 수 있다는 점. (3)의 버튼으로 성능측정할 것을 선택할 수 있다는 것. (4)의 휴지통 버튼을 누르면 가비지컬렉션이 된다는 것. 그리고 (5), (6), (7)의 영역에 성능측정 결과가 나타난다는 점이다. 15.1.2 렌더링 블록 렌더링 블록: 렌더링을 막는 것 블록 리소스: 렌더링 블록의 원인이 되는 리소스 15.1.2.1 CSS의 렌더링 블록 렌더링 블록의 원인 렌더..

프론트엔드 2022.02.02

『기초부터 완성까지, 프런트엔드』 8. 브라우저 렌더링 과정

8. 브라우저 렌더링 과정 브라우저의 구현 방법은 표준화되어 있지 않기 때문에 제조사별로 브라우저를 다르게 구현한다. 크롬의 경우 멀티프로세스 아키텍처를 차용하였다. 크롬 브라우저 아키텍처 At the top is the browser process coordinating with other processes that take care of different parts of the application. For the renderer process, multiple processes are created and assigned to each tab. Until very recently, Chrome gave each tab a process when it could; now it tries to give..

프론트엔드 2022.01.18