[jco 컨퍼런스] 웹사이트 front-end 성능 최적화

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

웹사이트에 부스터 엔진을 달아보자 !

Front-End 성능 최적화

JavaCafe 김흥래


Front-End vs Back-End

웹페이지 로딩 과정

웹페이지 랜더링 과정

Front-End 최적화


Front-End vs Back-End

Intro


성능을 결정하는 3 가지 영역

서버 (Back-End)

네트워크 UI (Front-End)


웹페이지 로딩 시간의 80% 이상이 Front-End 단에서 일어난다 .


Front-End


웹페이지 로딩 과정

Part 1.


DNS

3Way Handshaking

Server Processing

SYNSYN+ACK

ACK

www.javacafe.or.kr

10.45.123.123

HTTP request

HTTP response

요청

응답Resource

DNS Lookup


테스트툴 : http://www.webpagetest.org/

http://www.webpagetest.org/



로딩 구간 의미1 Blocked ( 차단 ) 브라우저가 요청을 처리하기 위해

대기하는 시간2 DNS Lookup DNS Lookup 에 소요된 시간3 Connecting 웹 서버와 TCP 연결을 위해서 소요된 시간4 Sending (Request) 웹 서버로 HTTP 요청을 하는데 소요된 시간 5 Waiting 웹 서버 처리 동안 기다리는데 소요된 시간6 Receiving (Re-

sponse)HTTP 응답을 받는데 소요된 시간

이벤트 의미DOMContentLoaded() DOM Tree 구성 완료 시 발생하는 이벤트 onLoad() 페이지의 모든 요소 (DOM Tree, Image, JS)

가 로딩이 완료되면 발생하는 이벤트


Document Loading State

uninitial-ized

Loading 이 시작되지 않음

loading Loading 진행중interactive 사용자와 상호작용이 가능함complete 모든 Loading 이 완료됨


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)

http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/08/02/measuring-mobile-site-performance-using-the-w3c-navigation-timing-api.aspx





Navigation Timing API 지원 브라우저 ( 출처 : http://caniuse.com/#search=performance.timing )

http://caniuse.com/#search=performance.timing



웹페이지 랜더링 과정

Part 2.


브라우저의 기본 구조 ( 출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/



전세계 Browser 사용률 ( 출처 : http://gs.statcounter.com/#browser-KR-monthly-201201-201301 )

http://gs.statcounter.com/#browser-KR-monthly-201201-201301



한국 Browser 사용률 ( 출처 : http://gs.statcounter.com/#browser-KR-monthly-201201-201301 )




랜더링 엔진 Browser

Gecko Firefox

Trident Internet Explorer

WebKit Chrome, Safari

Presto Orera


랜더링 엔진 Process ( 출처 : http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ )

http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/


랜더링 엔진 동작방식 ( 출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )

단계 하는일DOM Tree 생성 랜더링 엔진에서 HTML 파일을 읽어 들인 후 HTML

태그를 파싱하여 DOM Tree 를 생성한다 .Render Tree 생성 DOM 을 화면에 그리기 위한 정보들을 Rendering

Tree 로 생성한다 . ( 위치 , 크기 )Render Tree 객체 레이아웃 (Layout) 생성

생성된 Rendering Tree 로 Element 의 위치나 크기 정보를 생성한다 .

화면 그리기 (Painting) 생성된 정보를 바탕으로 실제 화면을 그린다 .




WebKit 동작방식 ( 출처 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ )




DOM Tree Document Object Model 의 구조체 HTML 기반의 문서의 구조를 객체로 정의 W3C 가 표준화 진행 Tree 기반의 DOM API 제공 플랫폼 , 프로그래밍 언어에 독립적

브라우저마다 DOM 구현을 독자적으로 진행하여 일부 API 가 호환이 되지 않는다 .


DOM Tree 구조 ( 출처 : http://www.w3.org/TR/DOM-Level-2-Core/introduction.html )

http://www.w3.org/TR/DOM-Level-2-Core/introduction.html


www.javacafe.or.kr DOM Tree 구조

http://www.javacafe.or.kr/


Render Tree CSS 파일을 분석하여 정보를 구축 Element 들의 Style 정보 , Font 정보 , Link

정보 , 크기와 위치 등의 정보를 Tree 형태로 제공

Reflow 가 발생할 때마다 Render Tree 를 새롭게 재구축

랜더링 엔진은 Render Tree 를 이용하여 Re-flow 작업과 Repaint 작업을 수행함


Render Tree 구조 ( 출처 : http://www.slideshare.net/joone/ss-9376827 )

http://www.slideshare.net/joone/ss-9376827




랜더링 엔진에서 제공하는 대표적인 기능 Display Rendering (Reflow & Repaint) HTML Editing Javascript DOM Binding


랜더링 엔진에서 제공하는 대표적인 기능 Display Rendering

실제 Browser 화면을 그리는 작업 Reflow

Element 를 화면에 그리기 위해서 레이아웃 (Layout) 을 생성 Element 들의 레이아웃 (Layout) 이 변경될 때마다 발생

( 성능 향상을 위해 Reflow 를 최소화해야 한다 .) Style, Link, Font, Size, 위치 정보

Repaint 실제 화면을 그리는 단계 Reflow 가 발생하면 화면 전체를 다시 그린다 .

( 일부만 다시 그릴수도 있다 . 이때는 Repaint 만 발생 )


랜더링 엔진에서 제공하는 대표적인 기능 HTML Editing


랜더링 엔진에서 제공하는 대표적인 기능 Javascript DOM Binding

DOM API Handling ( 출처 : http://www.sitepoint.com/forums/showthread.php?627986-What-exactly-is-the-DOM )

http://www.sitepoint.com/forums/showthread.php?627986-What-exactly-is-the-DOM




Front-End 최적화

Part 3.


Browser Cache 활용


테스트툴 : http://www.webpagetest.org/




Browser 에 Cache 된 파일이 변경된다면 ? Brower Cache 의 경우 기본적으로 Static

자원에 활용된다 . 파일이 변경될 때마다 Browser 에 알려야 한다 . 변경된 파일에 Parameter 를 붙여준다 .

http://www.javacafe.or.kr/resources/openAPI.js?paramDate=20130210


Script 와 CSS 코드 위치


브라우저의 화면 그리는 방식 코드 첫 라인부터 Line 순서대로 해석 됨 CSS 파일이 먼저 다운로드 되어 DOM Tree 와

Render Tree 가 함께 구성되어야 랜더링이 시작됨

<head> 위치에 Script 가 위치할 경우 Script 가 먼저 수행됨

Resource 요청시 먼저 나온 파일부터 다운로드가 진행됨 (Connection 에 제한이 있음 )


브라우저별 도메인 동시접속 가능 횟수 ( 출처 : http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ )

http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/



도메인별 동시 Connection ( 출처 : http://blog.httpwatch.com/2008/03/31/blocked-time-and-ie-8/ )

http://blog.httpwatch.com/2008/03/31/blocked-time-and-ie-8/

http://blog.httpwatch.com/2008/03/31/blocked-time-and-ie-8/


Reflow 최소화


Reflow 발생시 일어나는 일들 Element 의 레이아웃 수치 (Size, Width, Height) 가

변경되면 영향을 받는 모든 Element 의 레이아웃 수치를 다시 계산한다 .

계산된 수치값을 이용해 Render Tree 를 재구축한다 . 생성된 Render Tree 를 이용하여 Repaint 한다 .

Reflow 가 발생할 경우 Render Tree 를 재구축하는데 많은 리소스가 낭비된다 .


Reflow 가 발생하여 Render Tree 재구성 후 Repaint 된다 .

레이아웃 변화가 없기 때문에 그냥 Repaint 된다 .


• Reflow 가 발생하는 경우–윈도우 Resize– Font 변경– Style 추가나 삭제– Element 추가나 삭제– Element 위치 변경– Element 크기 변경


Style 객체 API 를 여러번 호출하므로 여러번의 Reflow 가 발생한다 .

한번의 Style 객체 API 호출로 한번의 Reflow 가 발생한다 .


Style 객체 API 를 10 번 호출하므로 총 10 번의 Reflow 가 발생한다 .

display 속성을 none 으로 변경후 처리하면 화면상에 Repaint 되지 않으므로 Reflow 가 발생하지 않는다 .


결론


웹페이지 로딩 최적화

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 )

http://www.crockford.com/javascript/jsmin.html

http://www.crockford.com/javascript/jsmin.html


웹페이지 랜더링 최적화

Render Tree 를 고려한 CSS 우선 다운로드 CSS 파일 <HEAD> 정의 JS 파일 문서 최하단 정의

DOMContentLoaded() 이벤트 사용 onLoad() 이벤트보다 효율적 최소한의 DOM Tree 구성시 바로 Action 가능 일부 브라우저 미지원 확인


DOM 핸들링 최적화

Reflow 발생 최소화 최소한의 레이아웃 변경 display=“none”, diplay=“block”

DOM Tree 순환 최소화

Ajax Script 동적 생성


JavaCafe 김흥래[email protected]


웹사이트 테스트 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



https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html




















http://mohwaproject.tistory.com/category/Browser

http://mohwaproject.tistory.com/category/Browser

[jco 컨퍼런스] 웹사이트 front-end 성능 최적화

Documents