본문 바로가기

브라우저

(3)
브라우저의 이벤트 루프와 렌더링의 관계에 대해 알아보자 브라우저의 이벤트 루프와 렌더링은 어떤 관계가 있을까요? 원문 링크 : https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack https://xnim.me/blog/javascript-browser-event-loop-layout-paint-composite-call-stack The long journey to the runtime. Part 3. Event loop, layout, paint, composite, call stack The first 2 parts were dedicated to resource loading and application critical path. Today we will ..
[모던 브라우저 공부]브라우저 하이레벨 아키텍처 https://cabulous.medium.com/how-browser-works-part-i-process-and-thread-f63a9111bae9 How browser works (part I) — process and thread To me, a browser was a black box. It eats my HTML, CSS, and JavaScript files, and displays a page. Somehow, it works. cabulous.medium.com 지금 버전 브라우저의 동작과 다를 수 있음. 개념적으로 이해하자. 1. 브라우저의 하이 레벨 아키텍처 브라우저는 기능 별로 다양한 프로세스를 사용함 프로세스와 스레드 스레드는 프로세스 안에 존재한다 프로세스는 데이터, 코드, 파..
[프론트엔드 면접 대비] 브라우저의 렌더링 과정 알아보기 모던 자바스크립트 Deep Dive - YES24 모던 자바스크립트 Deep Dive - YES24 『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드 www.yes24.com 모던자바스크립트 Deep Dive 책의 38장을 정리한 내용임 브라우저의 렌더링 과정 개요 파싱 parse tree/ syntax tree를 생성하는 일련의 과정 파싱이 완료되면 파스 트리 기반으로 바이트 코드를 생성함 바이트 코드는 특정 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드 렌더링 html, css, js 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 CSSOM +..