[웹프로그래밍 부스트코스]4. 브라우저의 동작

Browser

Explorer, Chrome, Fire Fox, Safari 등 다양하다.
www에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어

- https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 

• Browser Engine : 소스코드를 실행해서 브라우저 소프트웨어를 동작시켜주는 핵심 엔진
• Rendering engine : 화면에 위치를 잡고 색칠을 하여 픽셀 단위로 화며에 렌더링 하여 우리 눈에 보여주는 
• Networking : HTTP를 통해 특정 인터넷 주소를 해석하여 그 주소로의 통신을 위한 모듈
• Data persistence : Cache, Cookies 등 저장해야 할 정보 유지하기 위해 사용

Rendering engines

Parsing : 문자 단위로 html을 해석하여 이것이 어떤 의미를 가지고 있는지 파악하여 어떤 데이터 객체로 구조화 시키는 것. 토큰 단위로 소스를 잘라 의미를 해석한 다음, 의미에 따라 어떤 실행을 해주는 것
ex) 2+3-1 -> 2,3,1, +, - 를 모두 분해하고 (2 + 3) 의 결과 값과 -1 을 합쳐 답을 얻어내는 형태

DOM (Document Object Model) tree - 일종의 트리구조의 형태로 데이터를 보관

Layout of the render tree

  스타일 정보 + 구조 매칭 작업

webkit main flow

DOM tree

parsing CSS

- Selector / Declaration 으로 구분되어있다는 점 기억

css box model

1. 우리가 흔히 브라우저 탐색을 할 때 스크롤을 하거나, 어떤 것을 클릭하면서 화면의 위치를 바꿀 때, 브라우저는 어떻게 다시 화면을 그릴까요? / 위에서 표현된 그림 처럼 다시 렌더링 되지 않을까요?

  > 스크롤같이 문서 (html, css, js) 등이 변경되지 않을 경우는 재렌더링이 필요없으므로 재페인팅이 될 것 같고 클릭으로 인해 문서들에 변화가 생길 경우 재렌더링 과정이 필요하다.

또한 cookie로 저장되었던 리소스를 불러옴으로써 refresh 시에 화면을 다시 그리는 과정을 생략할 수 있다.

• 스크롤하거나, 화면의 위치를 바꿀때
  DOM repaint - 위치를 제외한 CSS가 변경될 때
  Render Tree(Layout)에 영향을 주지 않는 background-color, font color 변경시 발생
  
  DOM reflow - 위치와 클래스가 변경될 때, 브라우저 창 크기가 변경될 때도 발생
  Render Tree가 새롭게 재정립되는 과정
  (repaint보다 reflow가 자원소모 크다.)
  
  최소화하는 방법
  1)인라인 스타일 지양
  2)table-layout:fixed 제외, 테이블 사용 지양
  3)변경이 자주 일어나는 요소는 Absolute에 배치(전체노드에서 분리)
  배치방법
  -Normal : 문서안 위치는 유형, 면적에 따라 배치, 랜더트리에서 DOM트리 위치와 동일
  -Float : Normal과 같이 배치된 우 왼쪽 or 오른쪽으로 이동
  -Absolute : DOM트리와 다른 트리에 배치
  4)스타일 변경은 DOM 구조상 제일 끝단 노드에서 수행
  5)스타일 변경은 한번에 처리하기
  6)스타일 최적화 하기(CSS최소화)
  7)IE의 경우 CSS에서 js 표현식 쓰지 않기
  8)position:relative 사용시 주의하기