250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 항해99 사전스터디
- next js
- 실행컨텍스트
- Js module
- 항해99 부트캠프
- 타입스크립트
- JS module system
- jwt
- v8 원리
- 알고리즘
- 리덕스
- gql restapi 차이
- toggle-btn
- 항해99
- 테스트 코드 툴 비교
- 코어자바스크립트
- 자바스크립트 엔진 v8
- 웹 크롤링
- 리액트 렌더링 최적화
- 리액트 메모
- 함수형 프로그래밍 특징
- 웹팩 기본개념
- this
- 리액트 메모이제이션
- js배열 알고리즘
- 리액트
- 항해99 미니프로젝트
- chromatic error
- 렌더링 최적화
- FP 특징
Archives
- Today
- Total
목록브라우저 렌더링 과정 (1)
Jaeilit
브라우저 렌더링
앞에 글에서 URL 을 입력했을 때 DNS 서버에서 IP 를 반환받아 해당 IP 주소의 서버에서 리소스를 받아오는 것까지 알아봤습니다. 받아온 리소스를 어떻게 브라우저에 렌더링하는지 알아보려고 합니다. 브라우저 렌더링 과정 파싱 브라우저는 렌더링 엔진을 통해서 HTML 을 파싱하기 시작합니다. 파싱하던 중 Javascript 코드인 script 태그를 만나게 됩니다. script 태그를 만난 렌더링 엔진은 파싱을 일시중단하고 JS 리소스를 다운로드 하고, JS 를 파싱하기위해 제어권을 JS 엔진에게 넘깁니다. HTML 을 동기적으로 파싱하고 있었기 때문에 JS 엔진에게 넘긴 script 태그도 끝날때까지 기다려야합니다. 이 부분에서 지연이 발생할수있고 JS가 돔을 조작하는 이벤트를 가지고 있다면 scri..
TIL
2023. 6. 7. 11:00