브라우저의 일반적인 파싱 과정

seongwon·2020년 12월 24일

browser

웹

목록 보기

3/4

계산식 파싱

2 + 3 - 1 :

이러한 계산식이 있을 경우 2, +, 3, -, 1(토큰)으로 나누어 parse tree를 만든다.

브라우저가 HTML을 파싱하는법(DOM tree)

<html>
  <body>
    <p>
      Hello
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>
브라우저는 html(마크업)을 엘리먼트(요소)들 즉 html, body, paragraph, div 로 나누어 트리형 식으로 만들어 브라우저가 처리를 한다. 이 트리를 DOM Tree라고 한다

CSS 파싱

CSS :

p, div {
	margin-top:3px;
}
.error {
	color:red;
}

Render Tree

HTML 파싱중 script 태그를 만나면?

예시
<html>
  <body>
  	<script src="http://www.naver.com"></script>
  	<script>alert(1)</script>
  	<p>Hello</P>
  </body>
</html>
브라우저가 HTML 파일을 읽을 때(파싱 할 때) script 태그를 만난 순간 서버에 그 파일을 요청하고 먼저 실행할 js가 가 있으면 실행한다. 또한 문제는 예시와 같이 alert(1) 가 사용자가 확인 버튼을 누를 때까지 p 태그는 출력 되지 않는다 그래서 보통 script는 body 태그의 끝 한 라인 전후에 위치한다.
<html>
  <body>  	
  	<p>Hello</p>  	  
  	<script src="http://www.naver.com"></script>
  	<script>alert(1)</script>
  </body>
</html>