What I Learned
  • Introduction
  • Introduction
  • Javascript
    • 클로저 (closure)
    • 프로토타입 (Prototype)
    • 정규표현식 (RegExp)
    • 날짜 (Date)
    • jQuery 분석
    • 스코프 (this)
    • 성능 최적화 (Optimization)
  • Style
    • CSS
      • Prevent user select
      • Aspect Ratio
      • Sticky Footer
    • SASS
      • for loop
      • mixin example
      • Media Query
  • Web
    • 웹의 동작 과정
    • Cross Browser
    • Document Reflows
    • Open Graph
    • 이미지 압축 (Image optimization)
    • SPA, SSR 비교
  • Algorithm and Data Structure
    • 자료구조 (Data Structure)
      • 큐 (Queue)
      • 스택 (Stack)
      • 링크드 리스트 (Linked List)
    • 기초 이론
      • 복잡도 분석
    • 수학 (Math)
      • factorial (계승)
      • 피보나치 수 (Fibonacci)
    • 정렬 (Sorting)
      • 버블 정렬 (Bubble Sort)
      • 선택 정렬 (Selection Sort)
      • 삽입 정렬 (Insertion Sort)
      • 합병 정렬 (Merge Sort)
      • 퀵 정렬 (Quick Sort)
    • 탐색 (Search)
      • 순차 탐색 (linear search)
      • 이진 탐색 (Banary search)
    • 문제 풀이
      • 땅따먹기
      • 가장 큰 원소의 합 구하기
      • JS with HTML
  • Software Engineering
    • OOP
    • Development Process
    • TDD / BDD
  • Interview
    • HTML
    • CSS
    • Javascript
    • Other
    • General Questions
  • DevOps
    • gulp
  • PHP
    • Basic
Powered by GitBook
On this page
  • 네트워크 (http)
  • 브라우저
  1. Web

웹의 동작 과정

PreviousWebNextCross Browser

Last updated 6 years ago

브라우저에서 주소 입력 후 엔터쳤을 때 어떤 일이 일어날까

두 가지로 나누어 볼 수 있다. 먼저 HTTP 통신을 하는 네트워크 프로세스와 브라우저 단에서 문서가 랜더링되는 과정이다.

네트워크 (http)

  1. 브라우저에 입력된 주소는, DNS 서버를 통해 IP로 변환된다.

  2. 포트번호가 있다면 추출한다.

  3. 웹서버와 TCP 커넥션을 맺는다.

  4. 서버에 HTTP 요청을 보낸다.

  5. 브라우저에 HTTP 응답을 전달한다.

  6. 커넥션이 닫히면 브라우저는 해당 문자 타입에 맞는 양식으로 출력한다.

브라우저

  1. 돔 트리 구축을 위한 html 파싱

  2. 랜더 트리 구축

  3. 랜더 트리 배치 (layout)

  4. 랜더 트리 그리기

---

참고

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