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

9,404 views

Published on

1 Comment
84 Likes
Statistics
Notes
No Downloads
Views
Total views
9,404
On SlideShare
0
From Embeds
0
Number of Embeds
1,577
Actions
Shares
0
Downloads
193
Comments
1
Likes
84
Embeds 0
No embeds

No notes for slide

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

  1. 1. 제13회 한국자바개발자 컨퍼런스웹사이트에 부스터 엔진을 달아보자!Front-End 성능 최적화 JavaCafe 김흥래
  2. 2. 제13회 한국자바개발자 컨퍼런스Front-End vs Back-End웹페이지 로딩 과정웹페이지 랜더링 과정Front-End 최적화
  3. 3. 제13회 한국자바개발자 컨퍼런스Intro Front-End vs Back-End
  4. 4. 제13회 한국자바개발자 컨퍼런스 성능을 결정하는 3가지 영역서버 (Back-End)네트워크UI (Front-End)
  5. 5. 제13회 한국자바개발자 컨퍼런스 성능을 결정하는 3가지 영역서버 (Back-End)네트워크UI (Front-End)
  6. 6. 제13회 한국자바개발자 컨퍼런스
  7. 7. 제13회 한국자바개발자 컨퍼런스웹페이지 로딩 시간의 80% 이상이Front-End 단에서 일어난다.
  8. 8. 제13회 한국자바개발자 컨퍼런스Front-End
  9. 9. 제13회 한국자바개발자 컨퍼런스Part 1. 웹페이지 로딩 과정
  10. 10. 제13회 한국자바개발자 컨퍼런스
  11. 11. 제13회 한국자바개발자 컨퍼런스
  12. 12. 제13회 한국자바개발자 컨퍼런스
  13. 13. 제13회 한국자바개발자 컨퍼런스
  14. 14. 제13회 한국자바개발자 컨퍼런스
  15. 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. 16. 제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응답
  17. 17. 제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응답
  18. 18. 제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응답
  19. 19. 제13회 한국자바개발자 컨퍼런스테스트툴 : http://www.webpagetest.org/
  20. 20. 제13회 한국자바개발자 컨퍼런스테스트툴 : http://www.webpagetest.org/
  21. 21. 제13회 한국자바개발자 컨퍼런스테스트툴 : http://www.webpagetest.org/
  22. 22. 제13회 한국자바개발자 컨퍼런스
  23. 23. 제13회 한국자바개발자 컨퍼런스
  24. 24. 제13회 한국자바개발자 컨퍼런스
  25. 25. 제13회 한국자바개발자 컨퍼런스
  26. 26. 제13회 한국자바개발자 컨퍼런스
  27. 27. 제13회 한국자바개발자 컨퍼런스
  28. 28. 제13회 한국자바개발자 컨퍼런스
  29. 29. 제13회 한국자바개발자 컨퍼런스
  30. 30. 제13회 한국자바개발자 컨퍼런스
  31. 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. 32. 제13회 한국자바개발자 컨퍼런스 Document Loading Stateuninitialized Loading이 시작되지 않음loading Loading 진행중interactive 사용자와 상호작용이 가능함complete 모든 Loading이 완료됨
  33. 33. 제13회 한국자바개발자 컨퍼런스 Document Loading Stateuninitialized Loading이 시작되지 않음loading Loading 진행중interactive 사용자와 상호작용이 가능함complete 모든 Loading이 완료됨
  34. 34. 제13회 한국자바개발자 컨퍼런스 Document Loading Stateuninitialized Loading이 시작되지 않음loading Loading 진행중interactive 사용자와 상호작용이 가능함complete 모든 Loading이 완료됨
  35. 35. 제13회 한국자바개발자 컨퍼런스
  36. 36. 제13회 한국자바개발자 컨퍼런스Navigation Timing (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx)
  37. 37. 제13회 한국자바개발자 컨퍼런스Navigation Timing (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx)
  38. 38. 제13회 한국자바개발자 컨퍼런스Navigation Timing (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx)
  39. 39. 제13회 한국자바개발자 컨퍼런스Navigation Timing (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx)
  40. 40. 제13회 한국자바개발자 컨퍼런스Navigation Timing (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx)
  41. 41. 제13회 한국자바개발자 컨퍼런스Navigation Timing (출처 : http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx)
  42. 42. 제13회 한국자바개발자 컨퍼런스
  43. 43. 제13회 한국자바개발자 컨퍼런스
  44. 44. 제13회 한국자바개발자 컨퍼런스Navigation Timing API 지원 브라우저 (출처 : http://caniuse.com/#search=performance.timing )
  45. 45. 제13회 한국자바개발자 컨퍼런스Part 2. 웹페이지 랜더링 과정
  46. 46. 제13회 한국자바개발자 컨퍼런스브라우저의 기본 구조 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
  47. 47. 제13회 한국자바개발자 컨퍼런스브라우저의 기본 구조 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
  48. 48. 제13회 한국자바개발자 컨퍼런스전세계 Browser 사용률 (출처 : http://gs.statcounter.com/#browser-KR-monthly-201201-201301 )
  49. 49. 제13회 한국자바개발자 컨퍼런스한국 Browser 사용률 (출처 : http://gs.statcounter.com/#browser-KR-monthly-201201-201301 )
  50. 50. 제13회 한국자바개발자 컨퍼런스 랜더링 엔진 BrowserGecko FirefoxTrident Internet ExplorerWebKit Chrome, SafariPresto Orera
  51. 51. 제13회 한국자바개발자 컨퍼런스 랜더링 엔진 BrowserGecko FirefoxTrident Internet ExplorerWebKit Chrome, SafariPresto Orera
  52. 52. 제13회 한국자바개발자 컨퍼런스랜더링 엔진 Process (출처 : http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ )
  53. 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. 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. 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. 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. 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) 생성된 정보를 바탕으로 실제 화면을 그린다.
  58. 58. 제13회 한국자바개발자 컨퍼런스WebKit 동작방식 (출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )
  59. 59. 제13회 한국자바개발자 컨퍼런스 DOM Tree  Document Object Model의 구조체  HTML 기반의 문서의 구조를 객체로 정의  W3C가 표준화 진행  Tree 기반의 DOM API 제공  플랫폼, 프로그래밍 언어에 독립적 브라우저마다 DOM 구현을 독자적으로 진행하여 일부 API가 호환이 되지 않는다.
  60. 60. 제13회 한국자바개발자 컨퍼런스DOM Tree 구조 (출처 : http://www.w3.org/TR/DOM-Level-2-Core/introduction.html )
  61. 61. 제13회 한국자바개발자 컨퍼런스www.javacafe.or.kr DOM Tree 구조
  62. 62. 제13회 한국자바개발자 컨퍼런스 Render Tree  CSS 파일을 분석하여 정보를 구축  Element들의 Style 정보, Font 정보, Link 정보, 크기와 위치 등의 정보를 Tree 형태로 제공  Reflow가 발생할 때마다 Render Tree를 새롭 게 재구축  랜더링 엔진은 Render Tree를 이용하여 Reflow 작업과 Repaint 작업을 수행함
  63. 63. 제13회 한국자바개발자 컨퍼런스Render Tree 구조 (출처 : http://www.slideshare.net/joone/ss-9376827 )
  64. 64. 제13회 한국자바개발자 컨퍼런스 랜더링 엔진에서 제공하는 대표적인 기능  Display Rendering (Reflow & Repaint)  HTML Editing  Javascript DOM Binding
  65. 65. 제13회 한국자바개발자 컨퍼런스 랜더링 엔진에서 제공하는 대표적인 기능  Display Rendering  실제 Browser 화면을 그리는 작업  Reflow  Element를 화면에 그리기 위해서 레이아웃 (Layout)을 생성  Element들의 레이아웃(Layout)이 변경될 때마다 발생 (성능 향상을 위해 Reflow를 최소화해야 한다.)  Style, Link, Font, Size, 위치 정보  Repaint  실제 화면을 그리는 단계  Reflow가 발생하면 화면 전체를 다시 그린다. (일부만 다시 그릴수도 있다. 이때는 Repaint만 발생)
  66. 66. 제13회 한국자바개발자 컨퍼런스 랜더링 엔진에서 제공하는 대표적인 기능  HTML Editing
  67. 67. 제13회 한국자바개발자 컨퍼런스 랜더링 엔진에서 제공하는 대표적인 기능  Javascript DOM Binding DOM API Handling (출처 : http://www.sitepoint.com/forums/showthread.php?627986-What-exactly-is-the-DOM )
  68. 68. 제13회 한국자바개발자 컨퍼런스Part 3. Front-End 최적화
  69. 69. 제13회 한국자바개발자 컨퍼런스Browser Cache 활용
  70. 70. 제13회 한국자바개발자 컨퍼런스테스트툴 : http://www.webpagetest.org/
  71. 71. 제13회 한국자바개발자 컨퍼런스
  72. 72. 제13회 한국자바개발자 컨퍼런스
  73. 73. 제13회 한국자바개발자 컨퍼런스
  74. 74. 제13회 한국자바개발자 컨퍼런스
  75. 75. 제13회 한국자바개발자 컨퍼런스 Browser에 Cache 된 파일이 변경된다면?  Brower Cache의 경우 기본적으로 Static 자원 에 활용된다.  파일이 변경될 때마다 Browser에 알려야 한다.  변경된 파일에 Parameter를 붙여준다. http://www.javacafe.or.kr/resources/openAPI.js?paramDate=20130210
  76. 76. 제13회 한국자바개발자 컨퍼런스Script와 CSS 코드 위치
  77. 77. 제13회 한국자바개발자 컨퍼런스 브라우저의 화면 그리는 방식  코드 첫 라인부터 Line 순서대로 해석 됨  CSS 파일이 먼저 다운로드 되어 DOM Tree와 Render Tree가 함께 구성되어야 랜더링이 시 작됨  <head> 위치에 Script가 위치할 경우 Script가 먼저 수행됨  Resource 요청시 먼저 나온 파일부터 다운로 드가 진행됨 (Connection에 제한이 있음)
  78. 78. 제13회 한국자바개발자 컨퍼런스브라우저별 도메인 동시접속 가능 횟수 (출처 : http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ )
  79. 79. 제13회 한국자바개발자 컨퍼런스
  80. 80. 제13회 한국자바개발자 컨퍼런스도메인별 동시 Connection (출처 : http://blog.httpwatch.com/2008/03/31/blocked-time-and-ie-8/ )
  81. 81. 제13회 한국자바개발자 컨퍼런스
  82. 82. 제13회 한국자바개발자 컨퍼런스Reflow 최소화
  83. 83. 제13회 한국자바개발자 컨퍼런스 Reflow 발생시 일어나는 일들  Element의 레이아웃 수치(Size, Width, Height)가 변경 되면 영향을 받는 모든 Element의 레이아웃 수치를 다 시 계산한다.  계산된 수치값을 이용해 Render Tree를 재구축한다.  생성된 Render Tree를 이용하여 Repaint 한다. Reflow가 발생할 경우 Render Tree를 재구축하는 데 많은 리소스가 낭비된다.
  84. 84. 제13회 한국자바개발자 컨퍼런스Reflow가 발생하여 Render Tree 재구성 후 Repaint 된다.레이아웃 변화가 없기 때문에 그냥 Repaint 된다.
  85. 85. 제13회 한국자바개발자 컨퍼런스• Reflow가 발생하는 경우 – 윈도우 Resize – Font 변경 – Style 추가나 삭제 – Element 추가나 삭제 – Element 위치 변경 – Element 크기 변경
  86. 86. 제13회 한국자바개발자 컨퍼런스Style 객체 API를 여러번 호출하므로 여러번의 Reflow가 발생한다.한번의 Style 객체 API 호출로 한번의 Reflow가 발생한다.
  87. 87. 제13회 한국자바개발자 컨퍼런스Style 객체 API를 10번 호출하므로 총10번의 Reflow가 발생한다.display 속성을 none으로 변경후 처리하면 화면상에 Repaint 되지않으므로 Reflow가 발생하지 않는다.
  88. 88. 제13회 한국자바개발자 컨퍼런스결론
  89. 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. 90. 제13회 한국자바개발자 컨퍼런스 웹페이지 랜더링 최적화  Render Tree를 고려한 CSS 우선 다운로드  CSS 파일 <HEAD> 정의  JS 파일 문서 최하단 정의  DOMContentLoaded() 이벤트 사용  onLoad() 이벤트보다 효율적  최소한의 DOM Tree 구성시 바로 Action 가능  일부 브라우저 미지원 확인
  91. 91. 제13회 한국자바개발자 컨퍼런스 DOM 핸들링 최적화  Reflow 발생 최소화  최소한의 레이아웃 변경  display=“none”, diplay=“block”  DOM Tree 순환 최소화  Ajax Script 동적 생성
  92. 92. 제13회 한국자바개발자 컨퍼런스JavaCafe 김흥래 hrkim3468@gmail.com
  93. 93. 제13회 한국자바개발자 컨퍼런스
  94. 94. 제13회 한국자바개발자 컨퍼런스웹사이트 테스트http://www.webpagetest.org/Navigation Timinghttps://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.htmlNavigation Timing API 지원 브라우저http://caniuse.com/#search=performance.timingBrowser 사용률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.htmlRender 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

×