본문 바로가기

개발이야기/웹개발

[코드잇 스프린트 풀스택 4기] 브라우저의 동작 원리

반응형
  1. 브라우저 작동 원리
    1. 브라우저의 구조
      1. 사용자 인터페이스: 주소표시줄, 버튼 등
      2. 브라우저 엔진: UI와 랜더링 엔진 사이의 동작을 제어
      3. 랜더링 엔진: 요청한 콘텐츠를 표시
      4. 통신: 네트워크 호출
      5. JS 해석기
      6. UI 백엔드
      7. 자료 저장소: 로컬 저장
    2. 통신 과정
      1. 사용자가 브라우저에 URL 입력
      2. URL 정보를 DNS로 보냄
      3. DNS에서 IP주소를 받아 정보를 받아올 컴퓨터(웹서버) 정보 확인
      4. URL 정보를 http프로토콜을 통해 요청 메시지 전송
      5. TCP/IP 이용
      6. http프로토콜을 통해 다시 URL정보로 변환되어 웹서버에 전송
      7. 웹서버에서 URL에 맞는 정보를 찾음
      8. http를 통해 응답 메시지로 전송
      9. TCP/IP 이용
      10. http를 통해 해당 정보를 브라우저로 전달
      11. 브라우저 엔진을 통해 사용자가 볼 수 있는 정보로 변화되어 화면에 출력
    3. 랜더링 과정
      1. DOM, CSSOM 생성
        1. html과 css는 단순 텍스트인데 parser를 통해 object model로 변환
      2. Render tree 생성
      3. Layout 그리기
      4. paint: layout 계산 후 요소들을 실제 화면에 그림. 이때 텍스트, 색, 이미지 등이 완성
반응형