1일 1커밋 !

브라우저의 동작 ​ 브라우저의 동작이 숨겨져 있고, 개발자의 의도와 다르게 브라우저가 다르게 해석해서 보여줄 때도 있었다. 그리고 자신의 소스코드가 브라우저에서 빨리 실행되고 효율성을 높이기 위해서는 어떻게 해야할까? 라는 궁금증으로부터 브라우저의 동작에 대한 관심이 생겨났다. ​ 브라우저의 구조 ​

  • User Interface : 인터넷 창에서 주소창이나 이전 페이지, 새로고침 등 사용자에게 보여지는 모든 부분을 나타낸다.
  • Browser engine : 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진이다.
  • Rendering engine : HTML과 CSS를 parsing 해서 화면에 띄워주는 역할을 한다.
  • Networking : HTTP를 통해 서버와 통신하기 위한 네트워크 모듈이다.
  • JavaScript Interpreter : JavaScript를 해석하기위한 모듈이다.
  • UI Backend : UI 영역을 처리하기 위한 모듈이다.
  • Data Persistence : 브라우저가 일부 데이터를 캐시하고 저장하면서 데이터를 관리하는 영역이다. ​ [##Image|kage@dEsiD1/btqBmU4z4I7/k01hnuf3M8vyRR4DLz6mTk/img.png|CDM|1.3|{“originWidth”:500,”originHeight”:339,”style”:”alignCenter”,”caption”:”그림1 : Browser Component”}##] ​ Main flow ​
  • HTML을 parsing(문자 단위로 하나하나 해석해서 의미를 파악하고 그것들을 어떤 데이터 객체로 구조화시키는 것)하고 DOM(Document Object Model) Tree로 만들어낸다. 즉 HTML은 구조화된 정보이므로 해석해서 일종의 트리형태를 가지는 DOM 형태로 바꾸는 것이다.
  • Render tree를 만든다.
  • Render tree를 기준으로 CSS를 합쳐 스타일 정보와 구조를 합친다. 이후 화면에 어떻게 배치할지를 결정한다.
  • 결정된 배치대로 화면에 그려낸다. ​ [##Image|kage@Zn23b/btqBj57j10Z/CRG7ILQdFC4vlnWSr1Ch3k/img.png|CDM|1.3|{“originWidth”:600,”originHeight”:66,”style”:”alignCenter”,”caption”:”그림 2 : Rendering engine basic flow”}##] ​ WebKit Main Flow ​
  • HTML, CSS 의 parsing이 이루어지고 attachment에서 두가지를 합친다. 어떤 엘리먼트에 어떤 색을 입힐지 등을 결정한다.
  • Render tree의 각각의 DOM tree 별로 어떤 스타일 정보를 가지고 있는지 Render tree를 다시 한번 객체화시킨다.
  • 엘리먼트의 크기와 위치를 레이아웃 단계에서 결정한다.
  • 결정된 레이아웃에 따라서 화면에 페인팅작업을 실시한다. ​ [##Image|kage@JJ4qX/btqBlArR6Fn/NQTUdKyq4tXinnkqwenpmK/img.png|CDM|1.3|{“originWidth”:624,”originHeight”:289,”style”:”alignCenter”,”caption”:”그림 3 : WebKit main flow”}##] ​ 브라우저에서의 웹개발 ​ 크롬 개발자도구를 통해서 HTML 문서 구조를 열어볼 수 있고 계층적인 HTML을 직접 확인할 수 있다. ​ 실습코드 ​
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>boostcourse</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./start.js"></script>
  </head>
  <body>
    <div>웹프론트엔드</div>
    <script src="./library.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

​

  • 보편적으로 CSS 코드는 <head> 안에 작성한다.

업데이트:

댓글남기기

참고