티스토리 뷰

ETC...

[Browser] 렌더링 최적화

버미노트 2019. 12. 9. 16:22

beomy.github.io에 브라우저에 관한 포스팅을 하였습니다.

주된 내용은 브라우저 구조, 초기 렌더링 최적화, 렌더링 업데이트 최적화에 관련된 내용입니다.

1. 자바스크립트 런타임이란?

자바스크립트 런타임이란, 간단하게 이야기 하자면 자바스크립트를 실행시키는 환경을 이야기 합니다. 브라우저 역시 자바스크립트를 실행시킬 수 있는 환경이기 때문에 브라우저도 자바스크립트 런타임이라고 이야기 할 수 있습니다.

[JavaScript] 자바스크립트 런타임에서 자바스크립트 런타임이 무엇인지 이야기 합니다.

2. 브라우저가 화면을 렌더링 하는 방법

브라우저의 구조는 어떻게 되고, 브라우저가 HTML, CSS, JavaScript를 어떻게 화면에 렌더링 하는지 [Browser] 브라우저 렌더링에서 이야기 합니다.

3. 초기 렌더링 최적화 방법

Critical Rendering Path란 브라우저가 페이지를 처음 렌더링 할 때, HTML과 CSS, JavaScript가 실행되는 순서를 말합니다.
HTML과 CSS, JavaScript가 실행되는 순서를 최적화 한다면 사용자에게 좀 더 빠른 초기 화면을 제공할 수 있습니다.

[Browser] Critical Rendering Path 최적화에서 초기 렌더링을 최적화 하는 방법에 대해 이야기 합니다.

4. 렌더링 업데이트 최적화 방법

요즘 웹페이지는 사용자 행동에 따라 변화무쌍하게 화면이 그려집니다. 렌더링을 업데이트 하는 과정인 reflow와 repaint, reflow를 최적화 하는 방법에 대해 [Browser] Reflow와 Repaint에서 이야기 합니다.

5. 기타: 렌더링 최적화 이해에 도움이 될 수 있는 포스팅

1~4번 까지 포스팅을 하면서 가볍게 이야기 한 내용들을 좀더 자세히 이야기하는 포스팅 들입니다.

[Browser] 리소스 우선순위 - preload, preconnect, prefetch에서는 브라우저에게 리소스 우선순위를 알려줘서 빠르게 렌더링 할 수 있는 힌트를 제공하는 방법에 대해 이야기 합니다.

브라우저는 <script>를 만나게 되면 파싱을 중단하고 스크립트를 다운받고 실행합니다. 파싱이 중단되고 스크립트를 실행하기 때문에 렌더링 속도는 당연히 느려지게 되고 사용성은 떨어집니다. [Browser] async와 defer에서 파싱을 중단하지 않고 스크립트를 다운 받을 수 있는 방법에 대해 이야기 합니다.



포스팅들...

'ETC...' 카테고리의 다른 글

[Svelte] 스벨트 입문 A부터 Z까지  (0) 2020.08.07
[Browser] 렌더링 최적화  (0) 2019.12.09
[디자인패턴] Flux, MVC 비교  (5) 2018.09.22
[디자인패턴] MVC, MVP, MVVM 비교  (16) 2018.09.15
[webpack] webpack 4 사용하기  (1) 2018.09.06
[webpack] webpack 개념  (0) 2018.09.03
댓글
댓글쓰기 폼