브라우저의 동작

브라우저의 동작 방식에 대해서는 사실 개발자들도 잘 알 필요없다고 생각해왔다. 왜냐하면 브라우저들이 알아서 해결해주었기 때문이다.
하지만 이제는 개발한 코드가 브라우저 상에서 다르게 해석되는 경우가 있고, 브라우저에서 빨리 실행되게 하려면 어떻게 해야될까에 초점이 옮겨져서 브라우저 동작 방식에 대해 알 필요가 있게 되었다.

Browser components

User Interface(UI) : 화면에 보이는 것들 (nav, button 덩어리 등등)

Browser engine : 브라우저 소프트웨어를 동작 시켜주는 핵심 엔진

Rendering engine : 그 화면에 직접 어떤 위치를 잡고 픽셀 단위로 색칠을 해주어 사용자에게 다양한 시각적 형태를 제공.
(ex: Chrome-Blink(지금은 크로미움) / Safari-WebKit 등)

Data Persistence : 브라우저도 일부의 data를 캐시를 하고 저장함. 데이터관리

Networking Module : 브라우저가 바로 HTTP를 통해서 웹서버, 특정 인터넷 주소를 해석한 후 그 주소와 통신할 수 있게 함.

JavaScript Interpreter :js code 해석

UI Backend : UI 영역 처리하는 백엔드

스크롤 및 사용자 동작에 따른 layout이 바뀌게 될 경우, 동일 부분을 제외하고 달라지는 부분만 parsing하여 render Tree를 재배치하고 그린다.
반면 layout말고 스타일 부분만 바뀌게 될 경우 재배치 하지 않고 다시 그리는 과정만 수행한다.

동작 순서

1. Parsing HTML/CSS to construct the DOM Tree
html/css을 각각 파싱 (문자 단위로 하나하나 해석하여 의미 파악)하여 어떠한 데이터 객체로 구조화시킨다. html은 대개 구조화된 정보이기 때문에 해석하여 일종의 트리 구조의 형태로 데이터들을 다시 가지고 있게 됨.
DOM : Document Object Model

2. Render tree construction
DOM Tree와 Style Rules(CSS Parser의 결과) 두 가지를 합쳐서 렌더 트리를 만든다.
렌더 트리는 객체화 시켜서 보통 key:value 구조로 만들게 된다.
3. Layout of the render tree
만들어진 렌더 트리를 기준으로 스타일 정보와(CSS) 구조(DOM) 를 합쳐서 매칭을 하게 된다. 화면에 어떻게 배치할지도 모두 정한다. ex) div tag, 픽셀 떨어진 위치 등등

4. Painting the render tree
결정된 사항을 가지고 직접 그림을 그린다.

출처:html5rocks

브라우저의 html 코드 해석 및 렌더링 순서에 관하여..

브라우저는 HTML 문서를 한줄씩 순서대로 처리한다.
(렌더링 : 리소스들을 하나로 합쳐서 보여주는 작업 )

script 태그 위치 : JavaScript가 Rendering을 방해하므로, JavaScript의 위치는 HTML 태그가 끝나기 전이나, HTML 밖에서 사용한다.

css파일 위치 : CSS파일은 Head에 위치하여 좀 더 빨리 로딩 되도록 할 수 있다.

참고

1. Where to place JavaScript in an HTML file?
   https://stackoverflow.com/questions/196702/where-to-place-javascript-in-an-html-file#

2. Best Practices for Speeding Up Your Web Site - Yahoo Developer
   https://developer.yahoo.com/performance/rules.html

-> 결론 : stylesheet는 head 영역 안, script는 body 맨 아래쪽이 웹페이지 로딩을 빠르게 해준다고 함.

+정리

• 1. HTML문서에는 HTML, CSS, Javascript가 존재한다.

• 2. CSS는 HTML 태그안에 직접 작성(inline),
     < style>< /style> 태그안에 작성(internal),
     < link rel="stylesheet" href="css 파일위치">를 통해 외부 css파일을 이용(external)하여 사용.
     우선순위는 inline > internal > external

• 3. javascript는 HTML에서 < script>< /script>태그를 통해 직접 입력하거나,
     < script src="javascript파일 위치">를 통해 외부 javascript 파일을 사용할 수 있다.

• 4. CSS는 브라우저가 렌더링 처리시, CSS의 내용을 빨리 적용할 수 있게 < head>< /head>안에 넣어주는 것이 좋다. Javascript는 브라우저의 렌더링과정을 방해할 수 있기 때문에 < /body>직전에 입력하는 것이 일반적이다.