[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화

1.
제13회 한국자바개발자 컨퍼런스 웹사이트에부스터 엔진을 달아보자! Front-End 성능 최적화 JavaCafe 김흥래

2.
제13회 한국자바개발자 컨퍼런스 Front-Endvs Back-End 웹페이지 로딩 과정 웹페이지 랜더링 과정 Front-End 최적화

3.
제13회 한국자바개발자 컨퍼런스 Intro Front-End vs Back-End

4.
제13회 한국자바개발자 컨퍼런스 성능을 결정하는 3가지 영역 서버 (Back-End) 네트워크 UI (Front-End)

5.
제13회 한국자바개발자 컨퍼런스 성능을 결정하는 3가지 영역 서버 (Back-End) 네트워크 UI (Front-End)

6.
제13회 한국자바개발자 컨퍼런스

7.
제13회 한국자바개발자 컨퍼런스 웹페이지로딩 시간의 80% 이상이 Front-End 단에서 일어난다.

8.
제13회 한국자바개발자 컨퍼런스 Front-End

9.
제13회 한국자바개발자 컨퍼런스 Part1. 웹페이지 로딩 과정

10.

11.

12.

13.

14.

15.
제13회 한국자바개발자 컨퍼런스 요청 www.javacafe.or.kr 10.45.123.123 DNS DNS Lookup SYN SYN+ACK 3Way Handshaking ACK HTTP request Server Processing HTTP response Resource 응답

16.

17.

18.

19.
제13회 한국자바개발자 컨퍼런스 테스트툴: http://www.webpagetest.org/

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

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) 가 로딩이 완료되면 발생하는 이벤트

32.
제13회 한국자바개발자 컨퍼런스 Document Loading State uninitialized Loading이 시작되지 않음 loading Loading 진행중 interactive 사용자와 상호작용이 가능함 complete 모든 Loading이 완료됨

33.

34.

35.

36.
제13회 한국자바개발자 컨퍼런스 NavigationTiming (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using- the-w3c-navigation-timing-api.aspx)

37.

38.

39.

40.

41.

42.

43.

44.
제13회 한국자바개발자 컨퍼런스 NavigationTiming API 지원 브라우저 (출처 : http://caniuse.com/#search=performance.timing )

45.
제13회 한국자바개발자 컨퍼런스 Part2. 웹페이지 랜더링 과정

46.
제13회 한국자바개발자 컨퍼런스 브라우저의기본 구조 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )

47.
제13회 한국자바개발자 컨퍼런스 브라우저의기본 구조 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )

48.
제13회 한국자바개발자 컨퍼런스 전세계Browser 사용률 (출처 : http://gs.statcounter.com/#browser-KR-monthly-201201-201301 )

49.
제13회 한국자바개발자 컨퍼런스 한국Browser 사용률 (출처 : http://gs.statcounter.com/#browser-KR-monthly-201201-201301 )

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.

55.

56.

57.

58.
제13회 한국자바개발자 컨퍼런스 WebKit동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )

59.
제13회 한국자바개발자 컨퍼런스 DOM Tree  Document Object Model의 구조체  HTML 기반의 문서의 구조를 객체로 정의  W3C가 표준화 진행  Tree 기반의 DOM API 제공  플랫폼, 프로그래밍 언어에 독립적 브라우저마다 DOM 구현을 독자적으로 진행하여 일부 API가 호환이 되지 않는다.

60.
제13회 한국자바개발자 컨퍼런스 DOMTree 구조 (출처 : http://www.w3.org/TR/DOM-Level-2-Core/introduction.html )

61.
제13회 한국자바개발자 컨퍼런스 www.javacafe.or.krDOM Tree 구조

62.
제13회 한국자바개발자 컨퍼런스 Render Tree  CSS 파일을 분석하여 정보를 구축  Element들의 Style 정보, Font 정보, Link 정보, 크기와 위치 등의 정보를 Tree 형태로 제공  Reflow가 발생할 때마다 Render Tree를 새롭 게 재구축  랜더링 엔진은 Render Tree를 이용하여 Reflow 작업과 Repaint 작업을 수행함

63.
제13회 한국자바개발자 컨퍼런스 RenderTree 구조 (출처 : http://www.slideshare.net/joone/ss-9376827 )

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만 발생)

66.
제13회 한국자바개발자 컨퍼런스 랜더링 엔진에서 제공하는 대표적인 기능  HTML Editing

67.
제13회 한국자바개발자 컨퍼런스 랜더링 엔진에서 제공하는 대표적인 기능  Javascript DOM Binding DOM API Handling (출처 : http://www.sitepoint.com/forums/showthread.php?627986-What-exactly-is-the-DOM )

68.
제13회 한국자바개발자 컨퍼런스 Part3. Front-End 최적화

69.
제13회 한국자바개발자 컨퍼런스 BrowserCache 활용

70.

71.

72.

73.

74.

75.
제13회 한국자바개발자 컨퍼런스 Browser에 Cache 된 파일이 변경된다면?  Brower Cache의 경우 기본적으로 Static 자원 에 활용된다.  파일이 변경될 때마다 Browser에 알려야 한다.  변경된 파일에 Parameter를 붙여준다. http://www.javacafe.or.kr/resources/openAPI.js?paramDate=20130210

76.
제13회 한국자바개발자 컨퍼런스 Script와CSS 코드 위치

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/ )

79.

80.
제13회 한국자바개발자 컨퍼런스 도메인별동시 Connection (출처 : http://blog.httpwatch.com/2008/03/31/blocked-time-and-ie-8/ )

81.

82.
제13회 한국자바개발자 컨퍼런스 Reflow최소화

83.
제13회 한국자바개발자 컨퍼런스 Reflow 발생시 일어나는 일들  Element의 레이아웃 수치(Size, Width, Height)가 변경 되면 영향을 받는 모든 Element의 레이아웃 수치를 다 시 계산한다.  계산된 수치값을 이용해 Render Tree를 재구축한다.  생성된 Render Tree를 이용하여 Repaint 한다. Reflow가 발생할 경우 Render Tree를 재구축하는 데 많은 리소스가 낭비된다.

84.
제13회 한국자바개발자 컨퍼런스 Reflow가발생하여 Render Tree 재구성 후 Repaint 된다. 레이아웃 변화가 없기 때문에 그냥 Repaint 된다.

85.
제13회 한국자바개발자 컨퍼런스 •Reflow가 발생하는 경우 – 윈도우 Resize – Font 변경 – Style 추가나 삭제 – Element 추가나 삭제 – Element 위치 변경 – Element 크기 변경

86.
제13회 한국자바개발자 컨퍼런스 Style객체 API를 여러번 호출하므로 여러번의 Reflow가 발생한다. 한번의 Style 객체 API 호출로 한번의 Reflow가 발생한다.

87.
제13회 한국자바개발자 컨퍼런스 Style객체 API를 10번 호출하므로 총10번의 Reflow가 발생한다. display 속성을 none으로 변경후 처리하면 화면상에 Repaint 되지 않으므로 Reflow가 발생하지 않는다.

88.
제13회 한국자바개발자 컨퍼런스 결론

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 동적 생성

92.
제13회 한국자바개발자 컨퍼런스 JavaCafe김흥래 hrkim3468@gmail.com

93.

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

[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화

More Related Content

What's hot

Viewers also liked

Similar to [JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화

More from 흥래 김

[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화