| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
Tags
- 서버 사이드 렌더링
- 세션 스토리지
- react
- 깊은 복사
- webpack
- 호이스팅
- 자바스크립트 함수
- 주소창에 naver 입력시 일어나는 일
- props와 state 차이점
- undeclared
- async/await
- MPA
- 클라이언트 사이드 렌더링
- polyfill
- CSS
- 실행 컨텍스트
- 자바스크립트의 클래스
- 가상 dom
- 이벤트 캡처링
- 리액트
- 로컬 스토리지
- 스코프 체인
- 이벤트 버블링
- 변수 생성 단계
- 자바스크립트
- 리액트의 생명 주기
- 프로미스
- 얕은 복사
- 브라우저 렌더링원리
- CORS
Archives
- Today
- Total
목록브라우저 렌더링원리 (1)
Gapus Dev Blog
[CS] 브라우저 렌더링 원리
브라우저 렌더링 원리 브라우저 렌더링의 과정은 HTML, CSS, JavaScript 등을 브라우저 화면에 그리는 과정 렌더링 엔진에서 HTML문서를 파싱하여 태그들을 노드로 변환시켜 계층구조를 형성 DOM(Document Object Model)을 만든다. 파싱 중 태그를 만나면 렌더링 엔진은 정지 자바스크립트 엔진이 처리를 하고 정지된 시점에서 다시 렌더링 엔진 실행 CSS을 파싱하여 스타일시트 객체를 노드화 시켜 CSSOM(Css Object Model)을 만든다. DOM과 CSSOM을 결합시켜 실제 배치될 요소만 렌더 트리를 형성한다. 렌더 트리에 위치를 알려줄 위치와 크기를 알려줘서 레이아웃 구성을 한다. 렌더 트리를 그린다. 참고링크 https://bbangson.tistory.com/87 h..
CS
2023. 10. 19. 17:31