31. 제13회 한국자바개발자 컨퍼런스
로딩 구간 의미
1 Blocked (차단) 브라우저가 요청을 처리하기 위해
대기하는 시간
2 DNS Lookup DNS Lookup에 소요된 시간
3 Connecting 웹 서버와 TCP 연결을 위해서 소요된 시간
4 Sending (Request) 웹 서버로 HTTP 요청을 하는데 소요된 시간
5 Waiting 웹 서버 처리 동안 기다리는데 소요된 시간
6 Receiving HTTP 응답을 받는데 소요된 시간
(Response)
이벤트 의미
DOMContentLoaded() DOM Tree 구성 완료 시 발생하는 이벤트
onLoad() 페이지의 모든 요소(DOM Tree, Image, JS)
가 로딩이 완료되면 발생하는 이벤트
50. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 Browser
Gecko Firefox
Trident Internet Explorer
WebKit Chrome, Safari
Presto Orera
51. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 Browser
Gecko Firefox
Trident Internet Explorer
WebKit Chrome, Safari
Presto Orera
52. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 Process (출처 : http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ )
53. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
단계 하는일
DOM Tree 생성 랜더링 엔진에서 HTML 파일을 읽어 들인 후 HTML
태그를 파싱하여 DOM Tree를 생성한다.
Render Tree 생성 DOM을 화면에 그리기 위한 정보들을 Rendering
Tree로 생성한다. (위치, 크기)
Render Tree 객체 생성된 Rendering Tree로 Element의 위치나 크기
레이아웃 (Layout) 생성 정보를 생성한다.
화면 그리기 (Painting) 생성된 정보를 바탕으로 실제 화면을 그린다.
54. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
단계 하는일
DOM Tree 생성 랜더링 엔진에서 HTML 파일을 읽어 들인 후 HTML
태그를 파싱하여 DOM Tree를 생성한다.
Render Tree 생성 DOM을 화면에 그리기 위한 정보들을 Rendering
Tree로 생성한다. (위치, 크기)
Render Tree 객체 생성된 Rendering Tree로 Element의 위치나 크기
레이아웃 (Layout) 생성 정보를 생성한다.
화면 그리기 (Painting) 생성된 정보를 바탕으로 실제 화면을 그린다.
55. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
단계 하는일
DOM Tree 생성 랜더링 엔진에서 HTML 파일을 읽어 들인 후 HTML
태그를 파싱하여 DOM Tree를 생성한다.
Render Tree 생성 DOM을 화면에 그리기 위한 정보들을 Rendering
Tree로 생성한다. (위치, 크기)
Render Tree 객체 생성된 Rendering Tree로 Element의 위치나 크기
레이아웃 (Layout) 생성 정보를 생성한다.
화면 그리기 (Painting) 생성된 정보를 바탕으로 실제 화면을 그린다.
56. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
단계 하는일
DOM Tree 생성 랜더링 엔진에서 HTML 파일을 읽어 들인 후 HTML
태그를 파싱하여 DOM Tree를 생성한다.
Render Tree 생성 DOM을 화면에 그리기 위한 정보들을 Rendering
Tree로 생성한다. (위치, 크기)
Render Tree 객체 생성된 Rendering Tree로 Element의 위치나 크기
레이아웃 (Layout) 생성 정보를 생성한다.
화면 그리기 (Painting) 생성된 정보를 바탕으로 실제 화면을 그린다.
57. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진 동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
단계 하는일
DOM Tree 생성 랜더링 엔진에서 HTML 파일을 읽어 들인 후 HTML
태그를 파싱하여 DOM Tree를 생성한다.
Render Tree 생성 DOM을 화면에 그리기 위한 정보들을 Rendering
Tree로 생성한다. (위치, 크기)
Render Tree 객체 생성된 Rendering Tree로 Element의 위치나 크기
레이아웃 (Layout) 생성 정보를 생성한다.
화면 그리기 (Painting) 생성된 정보를 바탕으로 실제 화면을 그린다.
59. 제13회 한국자바개발자 컨퍼런스
DOM Tree
Document Object Model의 구조체
HTML 기반의 문서의 구조를 객체로 정의
W3C가 표준화 진행
Tree 기반의 DOM API 제공
플랫폼, 프로그래밍 언어에 독립적
브라우저마다 DOM 구현을 독자적으로 진행하여
일부 API가 호환이 되지 않는다.
60. 제13회 한국자바개발자 컨퍼런스
DOM Tree 구조 (출처 : http://www.w3.org/TR/DOM-Level-2-Core/introduction.html )
62. 제13회 한국자바개발자 컨퍼런스
Render Tree
CSS 파일을 분석하여 정보를 구축
Element들의 Style 정보, Font 정보, Link 정보,
크기와 위치 등의 정보를 Tree 형태로 제공
Reflow가 발생할 때마다 Render Tree를 새롭
게 재구축
랜더링 엔진은 Render Tree를 이용하여
Reflow 작업과 Repaint 작업을 수행함
64. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진에서 제공하는 대표적인 기능
Display Rendering (Reflow & Repaint)
HTML Editing
Javascript DOM Binding
65. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진에서 제공하는 대표적인 기능
Display Rendering
실제 Browser 화면을 그리는 작업
Reflow
Element를 화면에 그리기 위해서 레이아웃 (Layout)을 생성
Element들의 레이아웃(Layout)이 변경될 때마다 발생
(성능 향상을 위해 Reflow를 최소화해야 한다.)
Style, Link, Font, Size, 위치 정보
Repaint
실제 화면을 그리는 단계
Reflow가 발생하면 화면 전체를 다시 그린다.
(일부만 다시 그릴수도 있다. 이때는 Repaint만 발생)
67. 제13회 한국자바개발자 컨퍼런스
랜더링 엔진에서 제공하는 대표적인 기능
Javascript DOM Binding
DOM API Handling (출처 : http://www.sitepoint.com/forums/showthread.php?627986-What-exactly-is-the-DOM )
75. 제13회 한국자바개발자 컨퍼런스
Browser에 Cache 된 파일이 변경된다면?
Brower Cache의 경우 기본적으로 Static 자원
에 활용된다.
파일이 변경될 때마다 Browser에 알려야 한다.
변경된 파일에 Parameter를 붙여준다.
http://www.javacafe.or.kr/resources/openAPI.js?paramDate=20130210
77. 제13회 한국자바개발자 컨퍼런스
브라우저의 화면 그리는 방식
코드 첫 라인부터 Line 순서대로 해석 됨
CSS 파일이 먼저 다운로드 되어 DOM Tree와
Render Tree가 함께 구성되어야 랜더링이 시
작됨
<head> 위치에 Script가 위치할 경우 Script가
먼저 수행됨
Resource 요청시 먼저 나온 파일부터 다운로
드가 진행됨 (Connection에 제한이 있음)
78. 제13회 한국자바개발자 컨퍼런스
브라우저별 도메인 동시접속 가능 횟수 (출처 : http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ )
83. 제13회 한국자바개발자 컨퍼런스
Reflow 발생시 일어나는 일들
Element의 레이아웃 수치(Size, Width, Height)가 변경
되면 영향을 받는 모든 Element의 레이아웃 수치를 다
시 계산한다.
계산된 수치값을 이용해 Render Tree를 재구축한다.
생성된 Render Tree를 이용하여 Repaint 한다.
Reflow가 발생할 경우 Render Tree를 재구축하는
데 많은 리소스가 낭비된다.
89. 제13회 한국자바개발자 컨퍼런스
웹페이지 로딩 최적화
HTTP 요청 최소화
Cache 적용 (304 Not Modified)
Static 파일 통합 (js, image, css)
Static 자원 Domain 이원화 (CDN 적용)
파일 크기 최소화
Apache 압축(Gzip)을 통한 네트워크 트래픽 최소화
(html, js, css)
image resize 처리 후 다운로드
Script 압축으로 파일 사이즈 최소화
(JSMin http://www.crockford.com/javascript/jsmin.html )
90. 제13회 한국자바개발자 컨퍼런스
웹페이지 랜더링 최적화
Render Tree를 고려한 CSS 우선 다운로드
CSS 파일 <HEAD> 정의
JS 파일 문서 최하단 정의
DOMContentLoaded() 이벤트 사용
onLoad() 이벤트보다 효율적
최소한의 DOM Tree 구성시 바로 Action 가능
일부 브라우저 미지원 확인
91. 제13회 한국자바개발자 컨퍼런스
DOM 핸들링 최적화
Reflow 발생 최소화
최소한의 레이아웃 변경
display=“none”, diplay=“block”
DOM Tree 순환 최소화
Ajax Script 동적 생성
94. 제13회 한국자바개발자 컨퍼런스
웹사이트 테스트
http://www.webpagetest.org/
Navigation Timing
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
Navigation Timing API 지원 브라우저
http://caniuse.com/#search=performance.timing
Browser 사용률
http://gs.statcounter.com/#browser-KR-monthly-201201-201301
랜더링 엔진 동작방식
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
DOM Tree 구조
http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
Render Tree 구조
http://www.slideshare.net/joone/ss-9376827
브라우저별 도메인 동시접속 가능 횟수
http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/
Reflow 과정 및 최적화
http://mohwaproject.tistory.com/category/Browser
