브라우저는 어떻게 작동하는가?

들어가면서

현대인들이 가장 많이 사용하는 프로그램은 무엇일까?

 

단순히 프로그램이라고 하면, 사용하는 휴대전화의 OS를 가장 많이 사용하겠지만, 응용단에서 가장 많이 쓰는 프로그램은 아마도 브라우저 일 것이다.

 

하지만, 웹 브라우저가 어떻게 돌아가는지 아는 사람은 몇 명이나 있을까?

 

나는 최근에 프론트로서 프로젝트에 참여하면서 이 신기하고 오묘한 웹브라우저라는 친구에게 꽂혀버렸다.

 

내가 만든 아주 바보 같은 코드들도 철석같이 알아듣고 내가 원하는 대로 그려주는 이 친구에게 개인적으로 호감이 생겼고, 이런 호감은 이 녀석이 어떻게 작동하는지 알아봐야겠다는 생각으로 이어졌다.

 

그런 마음을 바탕으로, 나는 웹 브라우저에 대해 잘 알지도 못했지만 수요지식회에 "브라우저는 어떻게 작동하는가?"라는 주제로 발표를 잡아버렸고, 오늘 발표를 위해 준비한 내용들을 글로 작성해보려 한다.

---

자료 준비 과정

자료는 대부분 인터넷을 통해서 얻었다.

인터넷을 작동시키는 녀석이니까 인터넷에서 자료를 얻는게 맞을 것이다

 

대부분 Chrome Developers와 web.dev 등 크롬 개발자들이 남겨놓은 좋은 글들을 바탕으로 학습하였고, https 그리고 DNS과 같은 개념들은 해당 서비스를 제공하는 업체들(CloudFlare 등)에서 설명해놓은 친절한 글들을 바탕으로 학습하였다.

 

최대한 믿을 수 있는 사람의 글들을 골랐고, 이를 바탕으로 대략적으로 브라우저의 구조에 대해 이해하는 것이 가능했다.

 

글의 신뢰성을 높이기 위해 뒤에 이어질 내용들의 출처를 미리 작성하려 한다.

---

레퍼런스 

Chrome Developer “Inside look at modern web browser (part 1 ~ 4)”

• https://developer.chrome.com/blog/inside-browser-part1-
• https://developer.chrome.com/blog/inside-browser-part2
• https://developer.chrome.com/blog/inside-browser-part3
• https://developer.chrome.com/blog/inside-browser-part4

 

HTML Living Standard

• HTML : https://html.spec.whatwg.org/
• Parsing : https://html.spec.whatwg.org/multipage/parsing.html
• Overview of parsing model : https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model

 

Chromium

• Basic CSS : https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css
• Process Model : https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md

 

How browsers work

• https://web.dev/howbrowserswork/

 

HTTPS

• https://howhttps.works/ko/

 

So how does browser actually rendser a website (JSConf EU 2015)

• https://youtu.be/SmE4OwHztCc

 

Critical Rendering Path

• https://web.dev/critical-rendering-path/

 

How browsers work (JSConf 2017)

• https://youtu.be/0IsQqJ7pwhw

 

Rendering on the Web

• https://web.dev/rendering-on-the-web/

 

How DNS work (CloudFlare)

• https://www.cloudflare.com/ko-kr/learning/dns/what-is-dns/

 

Behind the Browser

• https://dzone.com/articles/behind-browser-basicspart-1

 

브라우저는 어떻게 동작하는가?

• https://d2.naver.com/helloworld/59361

 

웹 브라우저의 동작원리를 알아보자

• https://velog.io/@thyoondev

 

자 그럼 즐거운 웹브라우저 작동원리로 들어가 보자 (브라우저의 프로세스)