how to build mobile web app based on open source: the...

How to Build Mobile Web App based on Open Source: The Practice

임상석 박사[email protected]플랫폼 기술원,SK 플래닛

1

Contents

Mobile Web Application 정의

● Server-hosted, Hybrid

Mobile Web Application SW Architecture 구성

● UI/UX 개발: jQuery, jQuery Mobile

● Audio 기능 개발: Sound Manager2

● Fragmentation handling: Modernizr

● Common utilities: touch library, URL bar control

Mobile Web Application 구동 환경의 이해

● Mobile browser engine architecture

Mobile Web Application End-To-End 성능 최적화 방법론

● From server to client 최적화: profiling tool 및 best practice

2

HTML5 Mobile Web App 전망

SAP's Head of Mobility, Sanjay Poonen predicted that by 2015, 50% of enterprise mobility applications would be HTML5 based. In another interview I conducted this week with

Sencha's CEO, Michael Mullany, he predicted that by 2014,50% of enterprise mobility applications would be HTML5 based, 20% would be native, and

30% would be a hybrid of HTML5.

from http://www.sys-con.com/node/2263927

2015년 Mobile OS Market share 예상Android: 50.6%, iOS 20.6%, Microsoft 24.0%, Bada 1.8%

Source: Gartner (April 2012)

http://www.sencha.com/

HTML5 Web App 기술 분야

ss

AlgorithmNative

API

Java/C++/Objective C

Compiling

HTML5

CSS3.0 CSS2.1

JavaScript (system/module/logic)

HTML4 Flash

DOMJavaScript(DHTML)

SW 개발자(Programming)

Web designer(Publishing)

HTML5/Web App 개발자(Programming)

HW최적화

ARM GPUBrowser

4

Runaway from App Store

App Store

● run/own/censored by platform/OEM/carrier● Sale/in-app billing commision

Runaway from app store, into browser

● Amazon

– Offline access, cloud sync● Facebook

– App center strategy– W3C community group for browser fragmentation and

billing● Financial Times

– Offline access– Auto download

6

시장 사례 분석9

Melon 사례● Server hosted: m.melon.com, t.melon.com

● Hybrid: iOS 및 Android app

11 번가 사례● Server hosted: m.11st.co.kr

● Hybrid: iOS 및 Android app

Web App 개발 요구사항

본 강좌에서 가정하는 Mobile Web app 의 상위 수준 요구사항으로 이를 만족하는 audio application 개발 상품화하는 시나리오를 설정

● 단말에서 구동되는 Mobile browser 내에서 동작 해야함● Native 수준의 뒤 떨어지지 않는 GUI/UX 를 제공하여야 함● Audio playback 을 제공해야함● Cross-platform 지원 해야함

– Android 2.1/2.2/2.3/3.0/4.0 및 Chrome for Android– IOS 3.0/4.0/5.0– Blackberry OS 6.0/7.0

● UX 저하가 없는 수준의 성능을 제공 해야함● 작성한 코드는 다른 Application 개발에도 재활용이 가능해야함

10

Web App 개발 요구사항11

UI 상세 명세서 일부

아래의 3 분류의 화면 Template 제공하고 화면간 이동 및 이동시transition effect 를 지원 해야함

노래 목록은 위 아래 scroll 이 가능해야하고 이때 상단 및 하단 메뉴 는 화면에 고정 되어있어야 함

고정

고정

화면 전환및 효과


12

Web App SW Architecture

Open source 기반 Web application SW 구조● Open source 활용시 다양한 configuration 이 가능하고 하나의 예임

Open source 선택시 필수 고려사항● Community 가 활성화정도, 안정 버전 release 주기● License 종류, 회사 편향도

Android/iOS/Blackberry OS/Kindle Fire

BrowserWebView (WebKit)

DOM (Document Object Model)

Application processor, GPU

jQuery + plug-in

jQuery Mobile + plug-inSound

Manager2Modernizr

FastButton

iScroll

HTML5 audio application

URLBar

Handler

UI FrameworkAudioFW

FragmentationHandling

13

jQuery Mobile (JQM)

Smart phone 과 tablet 을 위한 touch 최적화된 UI widget 제공

cross-platform 을 진중히 추구하는 Touch 최적화 Web Platform

jQuery plugin 및 widget pattern 으로 개발됨: $.mobile

Theming 지원: http://jquerymobile.com/themeroller/

http://jquerymobile.com/demos/1.1.0/

14

JQM Widget

지원하는 widgets

● Pages, dialogs, toolbars, listview, button, form ele-ment, accordion, collapsibles

15

Listview 예제

<!DOCTYPE html> <html>

<head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

</head> <body>

<div data-role="page"><div data-role="header">

<h1>I’am header</h1></div>

<div data-role="content"><ul data-role="listview" data-inset="true" data-filter="true"><li><a href="#">Acura</a></li><li><a href="#">Audi</a></li><li><a href="#">BMW</a></li><li><a href="#">Cadillac</a></li><li><a href="#">Ferrari</a></li></ul></div>

<div data-role="footer"><h1> Footer </h1>

</div></div></body></html>

16

Navbar 추가

<div data-role="footer" data-position="fixed"><div data-role="navbar">

<ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li>

</ul></div>

</div>

<div data-role="header" data-position="fixed"><div data-role="navbar">

<ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li>

</ul></div>

</div>

상단 고정

하단 고정

17

Multi page template

<body>

<div data-role="page" id="foo">

<div data-role="header"><h1>Foo</h1>


<div data-role="content"><p>I'm first in the source order so I'm shown as the page.</p>

<p>View internal page called <a href="#bar" data-transition="pop">bar</a></p></div>

<div data-role="footer"><h4>Page Footer</h4>

</div></div>

<div data-role="page" id="bar">

<div data-role="header"><h1>Bar</h1>


<div data-role="content"><p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>

<p><a href="#foo" data-transition="slide">Back to foo</a></p></div>

<div data-role="footer"><h4>Page Footer</h4>

</div></div></body>

Page foo

Page bar

popslide

18

Web based WISWYG Editor

Codiqa

● GUI editor

ThemeRoller Mobile

● Theme editor

ThemeRoller Mobile

Codiqa (charged)

19

UI 명세서 중간 점검

JQM widget set 구성으로 구현 가능

● Page 3개, Listview, header/footer with position fixed

고정

고정



20

HTML5 Data- attribute

data-* attribute 추가● Custom attribute 정의하여 사용 가능

저장값 접근 방식

● JavaScript/DOM API 활용

● Jquery

● Jquery Mobile

<li id="appDeveloperInfo"class="user" data-name="sangseok" data-company="SK planet" data-lang="korea" data-food="Noodle"> <span>고맙습니다</span></li>

var appDeveloperInfo = document.getElementById(‘appDeveloperInfo’);var appDeveloperName = appDeveloperInfo.getAttribute(‘data-name’);

$("li:jqmData(role=’name’")

jQuery.find(‘[data-name="sangseok"]’);

21

JQM Data- attribute

JQM 은 HTML 5 Data- attribute 를 Widget 마다 정의하여 사용

● data-role, data-inset, data-position, data-corner, data-dom-cache

● http://jquerymobile.com/demos/1.1.0/docs/api/data-at-tributes.html

JQM 의 data enhance

● 초기화시 해당 data- attribute 에 따라 element 를 선택후 해당 element 를 enhance 를 수행함

– Extra markup 추가– 새로운 CSS class 적용– Event handler 등록

JQM 1.1.0 에서는 data- attribute 를 통한 enhance 를 막는 기법을 제공

● data-enhance=``false’’

22

JQM Event (1/2)

Touch event

● tap, taphold, swipe, swipeleft,swiperight

Virtual mouse events

● vmouseover, vmousedown, vmousemove, vmouseup● vclick, vmousecancel

Orientation change

● orientationchange

Scroll events

● scrollstart, scrollstop

23

JQM Event (2/2)

Page load events

● pagebeforeload, pageload, pageloadfailed

Page change events

● pagebeforechange, pagechange, pagechangefailed

Page transition events

● pagebeforeshow, pagebeforehide, pageshow, pagehide

Page initialization evets

● pagebeforecreate, pagecreate, pageinit

Layout events

● updatelayout

24

JQM Event Binding

jQuery 의 live() 또는 bind() 를 사용

● live(): jQuery selector 에 현재 또는 미래 에 match 되는 모든element 에 event handler 를 attach

● bind():jQuery selector 에 현재 match 되는 모든 element 에event handler 를 attach

$( document ).bind( "pagebeforeload", function( event, data ){

// Let the framework know we're going to handle the load.

event.preventDefault();

// ... load the document then insert it into the DOM ...// at some point, either in this callback, or through// some other async means, call resolve, passing in// the following args, plus a jQuery collection object// containing the DOM element for the page.

data.deferred.resolve( data.absUrl, data.options, page );

});$( 'div' ).live( 'pageshow',function(event, ui){ alert( 'This page was just hidden: '+ ui.prevPage);});

25

JQM Method

Jquery.mobile object 를 통해 각종 method 를 제공함

● $.mobile.changePage● $.mobile.loadPage: external page load● $.mobile.fixedToolbars.hide● $.mobile.silentScroll

– 주어진 Y 위치로 onscroll trigger 하지 않고 scroll

● $.mobile.activePage

Full list 는 아래에서 확인 가능● http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

//transition to the "confirm" page with a "pop" transition without tracking it in history$.mobile.changePage( "../alerts/confirm.html", {

transition: "pop",reverse: false,changeHash: false

});

26

External page handling

현재 html 이 아닌 별도의 html 에 있는 page 를 AJAX load 후 DOM 에 inject 하는 기능

● <head> 내부 부분 parsing 하지 않음– JS 파일, <script> block, CSS 를 load 하지 않음

● Page-specific JavaScript 및 CSS 는 직접 loading 해야함– Page div 내에 포함– <body> tag 내에 포함

후 pageInit 에서 초기화

<!DOCTYPE html> <html>

<head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://jquery.mobile-1.1.0.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://jquery.mobile-1.1.0.min.js"></script>

</head> <body> <div data-role="page">

<div data-role="header"><h1>I’am header</h1>

</div><div data-role="content"></div>

</div></body></html>

external.html

<div data-role="content">

<a href="external.html" data-transition="pop">bar</a></div>

main.html

27

JQM VS Sencha Touch (1/2)

jQuery Mobile Sencha Touch

개발사 jQuery 진영에서 개발 ExtJS 개발사에서 개발

개발자 Pool 125 contributor, 9 company supporter※ 11 Sencha Employer

개발 Script jQuery 기반 ExtJS 기반

개발 방식 마크업 기반 (Web Designer 친화적) 스크립트 기반 (JS Programmer 친화적)

테마 특징 CSS3 활용, 테마롤러 도구 지원 Sass 기반

핵심 라이브러리 jquery-mobile-1.0.js(210KB)jquery.mobile-1.0css(81KB)

jquery.mobile-1.0.min.js(80KB) – 경량화 버전jquery.mobile-1.0.min.css(48KB) – 경량화 버전

(1.1.1 기준) sencha-touch.js (367KB)

sencha-touch.css (144KB)sencha-touch-debug.js(746KB) –개발 버전

(2.0.0 기준)sencha-touch.js (92KB)

sencha-touch.css (143KB)sencha-touch-debug.js(423KB) –개발 버전

지원 모바일 플랫폼 iOS 3.2-5.0, Android 2.1-2.3/3.0, Window Phone 7-7.5, Black Berry 6.0+ , Palm WebOS (1.4-2.0)/3.0,

iOS3.0 +, Android 2.1+ ,Black Berry 6.0 +

공식 Homepage http://jquerymobile.com http://sencha.com/products/touch

개발 버전 1.1.0 2.0

개발 난이도 중 상

특이사항 개방성: 순수 Open Source 과제로 운영Product 개발 지원을 위한 외부 전문 Consulting 업체 운영중

Sench Touch Charts 유료버전 제공AT&T의 Browser 기반 HTML5 AppStore

라이선스 MIT (jQuery 프로젝트와 동일) GPL (jQuery 프로젝트와 동일)

Commercial S/W License (현재 무료)Commercial OEM License(유료) Open Source License (GPL v3)

*Saas: Ruby기반의 CSS 생생 library

※Mozilla, Palm, BlackBerry, Adobe, Jive, DotMobi, Nokia, DeviceAtalas, filament

28

JQM VS Sench Touch (2/2)

<body> <div data-role="page" id="sub" data-add-back-btn="true" data-fullscreen="true"><div data-role="header" data-position="fixed" >

<h1>sub page</h1></div><div data-role="content">

<ul data-role="listview"><li><a href="#">Acura</a></li><li><a href="#">Audi</a></li><li><a href="#">BMW</a></li><li><a href="#">Honda</a></li><li><a href="#">Hyundai</a></li></ul>

</div></body>

Ext.regModel('Contact', { fields: ['Name']});

demos.ListStore = new Ext.data.Store({ model: 'Contact', data: [ {Name: 'Acura'}, {Name: 'Audi'},

{Name: 'BMW'},{Name: 'Honda'},{Name: 'Hyundai'}

]});

demos.List = new Ext.TabPanel ({ items: [{ title: 'Simple', layout: Ext.is.Phone ? 'fit' : { type: 'vbox', align: 'center', pack: 'center' } }]});

<head> js파일 include

</head> <head>

jQuery Mobile Sencha Touch

29

UI 명세서 중간 점검

Native 수준에 뒤 떨어지지 않는 GUI/UX 제공해야함

Cross-platform 지원 해야함

– Android 2.1/2.2/2.3/3.0/4.0 및 Chrome for Android– IOS 3.0/4.0/5.0

CSS position:fixed property 지원 여부

– WebKit version 533 미만 미지원고정

고정


position:fixed: window를 기준으로 위치를 고정

30

CSS position:fixed issue

CSS position:fixed 정의● element 의 위치를 containing block 이 아닌 window 를 기준점으로

위치를 정함

● Web page 를 scroll 하여도 위치가 고정되어 각종 메뉴구성에 쓰임

CSS position fixed 구현 방식● Android 2.3 이상, iOS 5.0 이상 정상 동작● Android 2.2 이하 오동작

– window 기준으로 첫번째 rendering 위치에 고정● IOS 4.0이하

– Web page 의 끝 ( 마지막 element 다음) 에 붙임● Android 2.3 삼성 단말 오동작

고정

고정

31

CSS position:fixed 처리

JQM 에서 position:fixed 처리 방식● Browser 엔진에서 지원시 사용● Browser 엔진에서 미지원시 처리 방식

– Scroll 시작시 사라지게하고 종료시 다시 그려줌– Page 최상단과 하단에 position:static 으로 붙임

● 중간 위치로 scroll 되어있을시 화면에 보이지 않게됨

문제점

첫번째 방식– scroll 시 JavaScript 수행을 중지시키는 경우 화면 update 문제 발생 (삼

성 Android 2.3 단말 포함)

– 지속적으로 깜빡 거려서 UX 저하

두번째 방식– UX 관점에서 application 이라기 보다는 web page 의 느낌임

32

Fixed toolbar 지원 대안 1

overflow:scroll 을 이용한 우회법● Fixed toolbar 의 position 은 fixed 가 아닌 absolute, static, inline 을

사용하여 scroll 하는 영역 위 아래에 고정● overflow:scroll 을 이용하여 content 영역만을 scroll

문제점● overflow:scroll Android 2.3 이하에서 미지원● IOS 4.0 이상 지원하나 두손가락 gesture 를 사용: UX 일관성 깨짐● 지원이되더라도 화면 갱신 속도가 매우느림

position:fixed

position:fixed

viewport

contentposition:inline

position:inline

viewport

contentoverflow:scroll

IOS 5.0 부터는 -webkit-overflow-scrolling:touch 지원

33

JavaScript Scroller: iScroll

iScroll JavaScript scroller: cubiq.org/iscroll-4

● overflow:auto, touch event, -webkit-transform 을 활용한 개선● -webkit-transfrom “미지원 단말 top” property 를 JS 변경

position:absolute

position:absolute

viewport

<div class = wrapper>overflow:hiddenposition:absolutez-index:1

touchmove event를 wrapper에 binding

<div class = scroller>-webkit-transform:translate3d(0,dy,z)z-index:1

<div data-role="page"><div data-role="header">

<h1>I’am header</h1></div>

<div data-role="content"><div class="wrapper"><div class="scroller"><ul data-role="listview"><li><a href="#">Acura</a></li><li><a href="#">Audi</a></li><li><a href="#">BMW</a></li><li><a href="#">Cadillac</a></li><li><a href="#">Ferrari</a></li></ul>

</div></div></div>

<div data-role="footer"><h1> Footer </h1>

</div></div>

34

iScroll 기능

iScroll 의 기능

● Pull to refresh

● Pinch zoom

● Scrollbar customize

● Transition mode

– webkit-transform-timing-function: cubic-bezier 사용● Touch 미지원시 mouse fallback

Public method

● refresh()

● scrollTo(x, y, time, relative)

● destroy

35

JQM 내에서 iScroll활용

JQM 에서 page 는 visible 하기 전까지 그것의 height 값이 계산되어지지 않음

● refresh 시점은 해당 page 가 load 되고 layout 이 완료된후

기타 JQM specific 한 동작 styling handling 이 필요함

JQM widget plugin 활용 가능

● https://github.com/watusi/jquery-mobile-iscrollview

제약 사항

● webkit-transform 을 사용하더라도 속도가 느려지는 경우 있음● scroller 의 style 은 CPU 사용량이 최소한이 되도록 최적화 해야함

36

JQM 사용 Disclaimer

Android 3.0 이하 및 iOS 4.0 이하에 적용시에는 단말별 동작 검증 필수

● 성능 문제

– Style 값에 따른 CPU 과다 사용– <a> link 포함시 단말별도 반응속도 저하

● Fixed element 동작 문제● Transition 지원 문제

– 1.1.0 부터는 target 에 따라 문제가 있으면 fade 로 fallback– 그러나 문제가 없다고 detect 되는 단말에서 실제 구현상의이슈, 또는 제조사 변경에 따라서 오동작 하는 경우가 다수임

37

Audio 기능 제공

Audio 관련 상세 requirement

● cross-platform 으로 audio playback 지원● LCD off 시 연속 재생 지원● Background mode 진입시 재생 지원● Playlist 지원

<audio> tag 지원

● Android 2.1 및 2.2 미지원

38

<audio> tag

IOS 4.0 >

● Only user action (e.g. onclick, touchevent) action can play sound: audioElm.play()

● autoplay is disabled by Apple on purpose

Browser in background mode (OEM customization)

● JavaScript timer paused● Network paused● Script execution paused● setInterval suspended

<body onLoad="document.myMovie.play()"> will not work<input type="button" value="Play" onClick="document.myMovie.play()> will work

39

https://github.com/watusi/jquery-mobile-iscrollview

Sound Manager 2

<audio> tag 와 Flash 를 이용한 cross-platform audio playback 지원

● App developer 에게는 단일 API 를 제공

Sound Manager 2 API (program template)<script type="text/javascript" src="/path/to/soundmanager2.js"></script><script type="text/javascript">

soundManager.url = '/path/to/sm2-flash-files/'; // directory where SM2 .SWFs live.// soundManager.debugMode = false;

// The basics: onready() callback

soundManager.onready(function(){

// SM2 has loaded - now you can create and play sounds!

var mySound = soundManager.createSound({ id: 'aSound', url: '/path/to/an.mp3' // onload: myOnloadHandler, // other options here.. }); mySound.play();});</script> Not verified for Mobile OS YET!!

40

Playlist 연속 재생

LCD off 및 background 모드에서 연속재생 (Browser)

● <audio> tag 의 구현 및 browser 의 동작 방식에 따라 연속 재 생 기술적으로 불가

– iOS Safari (possible, but not robust)– Android browser (almost impossible)

● 기술 이슈 예

– LCD off mode 시 JavaScript timer fire 를 suspend– 이미 DOM loading 된 음악 재생은 가능하나, network 를 통

해 신규로 음악 loading 불가 현 시점에서 가장 안전한 방법

● Hybrid application 으로 변경

– Hybrid application 내의 WebView 에서 HTML app load-ing 시 LCD off 모드에서 연속 재생 가능

41

Native-like GUI: Full screen

iOS 의 Web App mode 로 full screen 만들기

● Full screen 만들기– <meta name=”apple-mobile-web-app-capable” content=”yes>

● Status bar 설정– <meta name="apple-mobile-web-app-status-bar-style" content="black-

translucent">

● 시작 화면– <link rel="apple-touch-startup-image" href="loading.png" />

Android 에서 Web app mode

● Full screen mode 미지원● Bookmark 등록 지원

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

42

Native-like GUI: Full screen

URL bar hiding 되는 browser 에서 URL bar 를 hiding 시키는 조건을 만족시키는 logic 구현

● Android 및 Web app mode 가 아닌 iOS Safari browser 적용● Web page 의 height 를 URL bar height 와 window.innerHeight 를

더한 값으로 set

Disclaimer

● Device 별 URL bar 크기 차이● URL bar hiding animation

도중 window 는 계속적으로 resize 됨● URL bar hiding animation 도중 멈추는 현상 발생

( 삼성 Galaxy Note/HD)

https://gist.github.com/1172490

var setupScroll = window.onload = function() { if (ios) { var height = document.documentElement.clientHeight; if (iphone && !fullscreen) height += 60; page.style.height = height + 'px'; } else if (android) page.style.height = (window.innerHeight + 56) + 'px' } setTimeout(scrollTo, 0, 0, 1);};

43

Fast button 제작

browser 의 onclick event 는 double tap/panning 등의 처리 로 지연 (e.g. 300msec iOS) 를 포함하고 이는 game 에서와

같이 빠른 response 를 필요로 하는 web app 개발시 제약임

onTouchStart 는 지연없이 동작

<div ontouchStart=“doSomething()”> 구성 가능하나 누르는 순간 발생

onTouchEnd 에서 발생시켜서 onclick 을 emulation

http://cubiq.org/remove-onclick-delay-on-webkit-for-iphonehttp://code.google.com/intl/ko-KR/mobile/articles/fast_buttons.html

44

Fast Button 예제: Matteo

function NoClickDelay(el) { this.element = typeof el == 'object' ? el : document.getElementById(el); if( window.Touch ) this.element.addEventListener('touchstart', this, false); } NoClickDelay.prototype = { handleEvent: function(e) { switch(e.type) { case 'touchstart': this.onTouchStart(e); break; case 'touchmove': this.onTouchMove(e); break; case 'touchend': this.onTouchEnd(e); break; } },

onTouchStart: function(e) { e.preventDefault(); this.moved = false; this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY); if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode; this.theTarget.className+= ' pressed'; this.element.addEventListener('touchmove', this, false); this.element.addEventListener('touchend', this, false); },

onTouchMove: function(e) { this.moved = true; this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, ''); },

onTouchEnd: function(e) { this.element.removeEventListener('touchmove', this, false); this.element.removeEventListener('touchend', this, false); if( !this.moved && this.theTarget ) { this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, ''); var theEvent = document.createEvent('MouseEvents'); theEvent.initEvent('click', true, true); this.theTarget.dispatchEvent(theEvent); } this.theTarget = undefined; } };

45

Fast Button: Google Click-buster

google.ui.FastButton = function(element, handler) {this.element = element;this.handler = handler;

element.addEventListener('touchstart', this, false);element.addEventListener('click', this, false);};

google.ui.FastButton.prototype.handleEvent = function(event) {switch (event.type) {case 'touchstart': this.onTouchStart(event); break;case 'touchmove': this.onTouchMove(event); break;case 'touchend': this.onClick(event); break;case 'click': this.onClick(event); break;}};google.ui.FastButton.prototype.onTouchStart = function(event) {event.stopPropagation();

this.element.addEventListener('touchend', this, false);document.body.addEventListener('touchmove', this, false);

this.startX = event.touches[0].clientX;this.startY = event.touches[0].clientY;};google.ui.FastButton.prototype.onTouchMove = function(event) {if (Math.abs(event.touches[0].clientX - this.startX) > 10 ||Math.abs(event.touches[0].clientY - this.startY) > 10) {this.reset();}};

google.ui.FastButton.prototype.onClick = function(event) {event.stopPropagation();this.reset();this.handler(event);

if (event.type == 'touchend') {google.clickbuster.preventGhostClick(this.startX, this.startY);}};

google.ui.FastButton.prototype.reset = function() {this.element.removeEventListener('touchend', this, false);document.body.removeEventListener('touchmove', this, false);};google.clickbuster.preventGhostClick = function(x, y) {google.clickbuster.coordinates.push(x, y);window.setTimeout(google.clickbuster.pop, 2500);};

google.clickbuster.pop = function() {google.clickbuster.coordinates.splice(0, 2);};google.clickbuster.onClick = function(event) {for (var i = 0; i < google.clickbuster.coordinates.length; i += 2) {var x = google.clickbuster.coordinates[i];var y = google.clickbuster.coordinates[i + 1];if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {event.stopPropagation();event.preventDefault();}}};

document.addEventListener('click', google.clickbuster.onClick, true);google.clickbuster.coordinates = [];

46

Fragmentation handling

Modernizr

● Device 상에서 Run time 에 feature detection

● Feature detection scope

– CSS features: @font-face, border-image 등– HTML5 features: application cache, canvas 등– Plug- in 을 추가하여 기능 확장

● https://github.com/Modernizr/Modernizr/tree/master/feature-detects

47

http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

http://code.google.com/intl/ko-KR/mobile/articles/fast_buttons.html

Fragmentation handling

사용 방법● 초기화

● Modernizr.load

초기화 결과 저장<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions videoaudio localstorage sessionstorage webworkers applicationcache fontface">

<!DOCTYPE html><html><head>

<meta charset="utf-8"><title>My Beautiful Sample Page</title><script src="modernizr-1.5.min.js"></script>

</head>

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});

48

Web Application 구동 환경

WebKit engine 구조 및 동작49

WebKit Open Source Project

Apple, Google 주도의 Open Source Project

Committer/reviewer 분포Web 분야 투자/Leadership 간접 지표

Committer 자격 10-20 good patch

3 명의 reviewer 로부터 추천

Reviewer 자격 최소 80 good patch

4 명의 reviewer 로부터 추천 ( 최소 한명은 다른 회사)

약 3 백만 line 으로 분야별로 전문 reviewer 활동

Reviewer Commit-ter

Apple 39 6

Google 24 32

삼성전자 2

총합 83 60

국내 committer: 4명삼성전자: 2명 (EFL)Company100: 1명 (Brew)Collabora: 1명(Gtk)

50

WebKit 구조

WebKit 은 Browser 아닌 Web 표준 처리를 위한 LIBRARY 집합

Mozilla Firefox, Google Chrome 는 Browser 가 Open Source

UI, Graphics, network 등은 platform 별 별도 구현

대부분의 성능의 격차는 port 구현에서 발생함

HW 가속, Image Caching, API 등은 port 별 구현

Mac port 는 미공개

WebCoreJavaScriptCore

(SFX, V8)

Platform Port (HW 가속 포함)

WebView (Widget, API)

Browser GUI DB

Plug-in

Net-work

Native Platform

메모리 관리

Webkit open source 범위

Webkit 기반 Browser

Mac Efl Gtk QtAn-

droid

Mac Efl Gtk Qt Android

WebKit Graphics back-end 구조

WebKit

Native Widget

Cairo/Skia(2D

graphics)

OpenGL ES(3D graphics)

HTML, CSS, JavaScript

Native Windowin

g

51

UI FW

GPU Memory

Browser Process RenderProcess

Skia (2D graphics)

Gtk

X server compositor

OpenGL ES / EGL

GPU Process

URL BarGtk

Widget

URL bar Webview

Window Buffer

Indicator

Frame Buffer

PlatformPort

WebCore

V8

WebCoreSupportWebViewClient

JSFrontEnd

JIT

IPC Channel Resource Dispatcher ResourceLoaderBridge

RenderView

TabContents

RenderViewHost

RenderProcessHost

Glib main loop (Event Queue)

IPC Channel

Resource DispatcherHost

Web PageGtk

Widget

PluginProcess

IPC Channel

HTTP stack

File/DB

NPAPI::PluginHost

Graphics

LayerTree

RenderTree

Style

Rules

DOM

Tree

Parser

Loader

GPUProcess

Chromium Browser52

Browser Process

UI FW

GPU Memory

Main Thread

WebViewCoreThread

Skia (2D graphics) Gtk

Surface Manager compositor

OpenGL ES / EGL

Tool Bar

Canvas

Window Buffer

Indicator

Frame Buffer

PlatformPort

WebCore

V8

WebCoreSupportWebViewClient

JSFrontEnd

JIT

Message Handler

RenderView

Message Handler (Event Queue)

WebviewGraphi

csLayerTree

RenderTree

Style

Rules

DOM

Tree

Parser

Loader

Canvas

PictureSet

PartiallyCached

DOM Node

Android Browser Multi-threaded

53

DOM 과 Render Tree 개괄

http://image.google.com

<html> <head> <title>Google</title> <style>…</style> <script>…</script> </head> <body> <div> <nobr> <span> <a href=“http://news.google.com”>News</a> </span> <span>…</span> </nobr> </div> </body></html>

HTMLDocument RenderView

HTMLHtmlElement1. Element 생성

2. addChild()

3. rendererIsNeeded? YES

HTMLHeadElement

HTMLTitleElement

HTMLStyleElement

HTMLScriptElement

rendererIsNeeded? NO

5. setRender()RenderBlock 4. RenderBlock 생성

6. addChild()

HTMLBodyElement

HTMLDivElement

HTMLElement(nobr)

HTMLElement(span)

HTMLAnchorElement

Text

HTMLElement(span)

RenderBlock

RenderBlock

RenderInline

RenderInline

RenderInline

RenderText

RenderInline

DOM Tree

Render Tree

54

WebKit Rendering Basics(1/4)

내부 Data Structure

<html><head> </head><body><p> hello</p><div class=“page” ><p>world</p><div></body></html>

.page { position: absolute; width: 100%; height: 100%;-webkit-transform: translate3d(0, 0, 0); }

<head>

<html>

Document

<body>

<p>

hello

<div>

<p>

world

DOM TreeHTML/CSS file

Ren-derView

RenderText:”Hello”

RenderText:”World”

Render Tree RenderLayer Tree

Render-RootLayer

Render-Layer1

parsing DOM nodeattach

조건별 Layer 생성

55


내부 Data Structure

Ren-derView

Render-Text:”Hell

o”

Render-Text:”Worl

d”

Render Tree RenderLayer Tree

Render-RootLayer

RenderLayer

RenderBoxModelObject::requiresLayer()

GraphicsLayer Tree (Texture on GPU)

GraphicLayer

RenderLayer 생성 조건1) root object for the page2) explicit CSS position properties (relative, absolute or a transform)3) transparent4) overflow, an alpha mask, reflection5) <canvas> element with a 3D (WebGL) context6) <video> element

Hello

World

Z ordering

56


Painting 절차

SW path

하나의 graphic buffer 를 할당

Z order 에 따라 뒤에서 앞으로 칠함

Hello 를 주어진 buffer 에 paint

World 를 Hello 를 paint 한 buffer 에 칠함

HW accelerated path: Accelerated Compositing by GPU

CPU graphics buffer 와 GraphicsLayer 별 GPU buffer 생성

Layer 별로 painting

모든 결과를 sync 하여 compositing

GraphicsContext: Graphic Buffer

Hello

World

GraphicsContext:Graphic Buffer on CPU

Hello

World

GraphicsContext:Graphic Buffer on GPU

Hello

World

Compositingby GPU (Open GL ES)

57

http://news.google.com/


HW accelerated path: Accelerated Compositing by GPU

CSS 2D/3D transformation “시 World” 를 animation 각도에 따라 매번 다시 paint 하지 않고 만들어진 texture 를 GPU 로 회전 후 기타 Layer 와 compositing 수행

장점

속도가 CPU “대비 order of magnitude” 로 빠름

3D transformation 은 Accelerated Composting 이 enable 되어 있을때만 사 용 가능

단점

메모리 사용량 증가: GPU memory 를 별도로 할당

iOS 및 Android 4.0 이상에서 지원

GraphicsContext:Graphic Buffer on CPU

Hello

World

GraphicsContext:Graphic Buffer on GPU

Hello

Compositingby GPU (Open GL ES)

World

58

Silky Smooth Scroll 기술(1/3)

“60 frame/sec” rule: 인간의 눈 고려시 최적 값

최소 16 msec 마다 한번씩 화면 갱신 필요

Reflow 연산: 50 msec~(600MHz@ARM Coretex-A8)

주어진 DOM Tree 에서 invalidate 된 화면을 다시 re-paint

viewport

Finger touch

59


BackingStore

한번의 scroll 로 이동 가능한 영역에 대해서 pre-rendering 된 결과를image 로 caching

사용자 Scroll 시 pre-rendering 된 image 의 일부를 cut-n-paste 를 하 여 viewport 로 복사 Reflow/Repaint 제거

Single Image Buffer

60


BackingStore

한번의 scroll 로 이동 가능한 영역에 대해서 pre-rendering 된 결과를 image 로 caching

사용자 Scroll 시 pre-rendering 된 image 의 일부를 cut-n-paste 를 하여 viewport 로 복사Reflow/Repaint 제거

Ren-derView

Render-Text:”Hell

o”

Render-Text:”Worl

d”

Render-RootLayer

RenderLayer GraphicLayer

Z ordering

Viewport보다 큰 영역을미리 rendering해서 image cache를 해둠사용자 panning시 이미 rendering된 이미지를복사해주기만 함

61

End-to-End 성능 최적화(1/2)

● 성능 최적화 guideline 및 tip

● ( 성능 === Money) // true

Delay

0-100ms instant

100-300ms Feels sluggish

300-1,000ms Machine is working...

1s+ Mental context switch

10s+ I’ll come back later

Usability Engineering – Jakob Nielsen, 1993

62

End-to-End 성능 최적화 (2/2)

From W3C Navigation Timing specification

63

2D/3D Animation

[RULE] CSS 2D/3D transforms 를 이용한 2D/3D animation 구현은 HW 가속Accelerated Compositing 기능이 제공 되는 Mobile OS 에서만 사용한다

Mobile OS 에서 HW 가속 Accelerated Compositing 지원 현황

JavaScript 를 통한 지원 여부 검사 방법

User agent 를 통해 Mobile OS 버전을 알아내서 활용 가능

해당 property 는 read/write 가능하여 비추천

Modernizr※ JavaScript library 활용 (추천)

csstransforms, csstransforms3d, csstransitions

Android 2.1-2.3 은 true 이나 제대로 동작하지 않음

iOS 3.0 iOS 4.0 iOS 5.0 Android 2.1

Android 2.2

Android 2.3

Android 3.0

Android 4.0

지원 여부 X O O X§ X§ X§ X O

var ua = window.navigator.userAgent;

Mozilla/5.0 (Linux; U; Android 2.3; en-us) AppleWebKit/999+ (KHTML, like Gecko) Safari/999.9

※ http://www.modernizr.com: MIT&BSD licensed opens source project for HTML 5 and CSS feature detection§ http://daneden.me/2011/12/putting-up-with-androids-bullshit/ single property animation 만 적용 가능

64

2D/3D Animation

[RULE] Animation 이 수행되는 layer 수를 최소화 하고 크기를 power of 2 로 ad-just 하자. Layer 수의 증가는 animation 시 사용하는 GPU 메모리 사용량을 증가시킴

Open GL ES Texture ※생성 제약 조건

Texture 의 width 와 height 는 power of 2 이어야 함

2, 4, 8, 16, 32, …, 1024

PowerVR chip 의 PVRTC compressed image 사용시 정사각형 이어야 함: iOS device 계열에서 사용

Max size limit 있음

OpenGL ES 1.0 SGX: 1024x1024

OpenGL ES 2.0 SGX: 2048x2048

Layer 의 크기가 257x257 이면 실질적으로는 512x512 크기의 texture 를 생성하 게 됨

다수의 layer 를 위와 같이 생성시 비효율적인 메모리 사용 증가※ Graphics Chip Vendor 별로 특성 확인 필요

http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

65

2D/3D Animation

[RULE] Animation 을 수행하는 영역은 as simple as possi-ble 하게 유지하자

Animation 대상 block 이 painting 비용 관점에서 복잡해질수 록 Animation 시 사용하는 Texture 를 초기 생성하는 지연증가 로 Animation 개시 지연 발생

Not simple 의미: !(painting cost 가 높음)

CSS filter, shadow, canvas, SVG, 과도한 DOM node 개수, scaled 된 image 등

Blurred text일반 text

비용증가Texture 생성 시간 증가animation 개시 시간 증가

이해를 하고 꼭 알고 쓰자

66

HW 가속 Layer 이용

image zoom in/out 시 잘 보이기 위해서 그것을 HW com-positing layer 로 mapping 가능

해당 image 에 아래 CSS 적용

-webkit-transform:translate3d(0,0,0) 별도 layer 에mapping

resource 사용량이 늘어남

67

http://www.modernizr.com/

http://daneden.me/2011/12/putting-up-with-androids-bullshit/

CSS overflow property

[RULE] CSS 의 overflow:scroll 속성의 사용은 신중히하자

Platform 별 대처 방식

iOS 에서는 two finger 로 scroll 가능

-webkit-overflow-scrolling: touch

iOS 5 부터 지원: native 수준 성능 제공

Android 는 one finger scroll 가능

3.0 이후 버전만 scroll 지원 (2.3 이하 미지원)

단점

일반 화면 scroll 에 비해 속도가 느림

BackingStore 에 cache 되지 않고 매번 Render Tree 으로부터 다시 paint

iOS 5 와 Firefox 는 별도의 Layer 로 구성되고 layer 별 BackingStore 지원으로 빠르나 메모 리 사용량 증가

poor discoverability: 사용자가 scrollable 여부 인지하기 힘듦

화면 자산때문에 scroll bar 를 지원하지 않음

div {width:150px;height:150px;overflow:scroll;}

68

http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

Layout 발생 및 비용 분석

[RULE] layout 발생을 최소화 하자

Layout 은 전체 또는 부분 DOM traversing 을 수행 후결과로 repaint 를 수반

Layout 은 serialize 된 CPU intensive 작업

Repaint 는 대량의 data copy 연산 발생 야기 battery 소진

DOM tree 가 커지면 layout 비용은 비례하여 증가함

11st (3,370개), mobile 11st (785개), latimes.com (5,563개), lemonde.fr (6,856개)

Layout 발생 조건

Browser window resize, Orientation 변경

style information 정보 요청

DOM 변경: Adding, removing, updating nodes

display property, CSS box model 값 변경

Desktop 에서의 zooming 및 scrolling

Mobile 단말에서 layout 없이 zoom factor 에 따라 content 를 repaint

69

Layout 비용 절감

[RULE] styling 변경은 꼭 필요시, 꼭 필요한 부분만 국소적으로 하라

Text 크기 변경, margin/padding/border 크기 변경, font type 변 경등은 전체 또는 부분 page layout 수행을 야기한다

Layout 후 해당 부분은 다시 repaint 를 수행

Repaint 만 발생하는 경우 (layout 미 발생)

Visibility, colors, transforms, backgroud images, trans-parency

CSS Box Model

70

CSS 삽입 위치

[RULE] rendering 성능을 위해서 CSS, inline style block 은 문서의 header 에 위치 시키자

Stylesheet 위치에 따른 제약 사항

WebKit 엔진은 모든 external stylesheet 을 load 할 때까 지 rendering 을 block 함

Inline style block 은 reflow 를 야기해서 content 를 shift 시킬 가능성이 높음

아래 webkit code 에서와 같이 모든 style sheet 의 적재가 끝 나지 않으면 해당 문서의 style 값 계산을 미루어 layout 과 그

에 따른 rendering 까지가 지연이 된다

71

Expensive CSS property

[RULE] 하기 CSS 기능은 CPU 사용률이 매우 높기 때문에 신 중히 사용하자

Rounded corners

Box-shadow, Text-shadow

Shadowing 은 static bitmap 이미지가 아니고 매번 re-paint 때마다 evaluate 됨

Backgroud-position

Background-repeat

Multiple background images

Border-image

Gradients

72

Rounded Corners 표현

[RULE] 속도를 위하여 CSS 3 specification 의 border-ra-dius, -moz-border-radius, -webkit-border-radius 신중히사용

div{border:2px solid #a1a1a1;padding:10px 40px; background-image: url("http://img1.coupangcdn.com/image/dd/64/30/15306430_bannerList.jpg");width:300px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}

Sample pattern

73

Shadows

[RULE] CSS 3 specification 의 text/box shadow 를 신중히 사용

-webkit-box-shadow, box-shadow

Shadowing 영역은 repaint 마다 매번 다시 shadowing 영역에 대한 값들을 evaluation 수 행하므로 매우 비싼 연산

이미지와 같이 once decoded, reuse repeatedly 가 아님

Div 영역에 box-shadow 시 webkit 에서 scroll 성능이 느린 defect 미해결

https://bugs.webkit.org/attachment.cgi?id=80611&action=prettypatch

div{width:300px;height:100px;background-color:yellow;-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */box-shadow: 10px 10px 5px #888888;border-radius:25px;background-image:url("http://img1.coupangcdn.com/image/dd/64/30/15306430_bannerList.jpg");}

74

Gradient

[RULE] –webkit-linear-gradient 등은 scroll 시 CPU 를 지속적으로 소비하여 webkit-transfrom 기반 scroll 성능을 저하시킴으로 mo-

bile 에서는 신중히 적용

background-image: -webkit-linear-gradient(linear, left top, left bottom, from (#666), to(#222) from jQuery Mobile 의 CSS

CSS gradient 소개

http://www.webkit.org/blog/1424/css3-gradients/

75

CSS property 접근

[RULE] JavaScript 를 통한 CSS Property 의 접근은 page loading 이 완료 된 시점에서 하자.

E.g. onload event후

Page loading 중 CSS property 접근시 문제점

JavaScript 를 통한 CSS property 의 접근은 WebKit 에서 가장 비싼 연 산인 layout() 강제함: 수백 msec 도 소요 가능성 있음

WebKit 엔진: Pending 되어있는 CSS stylesheet 를 무시하고 layout후 에 해당 값을 돌려준다

기타 Browser: CSS 가 완전히 loading 될때까지 JavaScript 를 sus-pension 시키거나// FIXME: This is a bad idea and needs to be removed eventually.// Other browsers load stylesheets before they continue parsing the web page.// Since we don't, we can run JavaScript code that needs answers before the// stylesheets are loaded. Doing a layout ignoring the pending stylesheets// lets us get reasonable answers. The long term solution to this problem is// to instead suspend JavaScript execution.

void Document::updateLayoutIgnorePendingStylesheets(){

76

JavaScript loading 최적화

[RULE] HTML 문서 적재 시점까지 호출되지 않는 JavaScript function 의 loading 은 미루자

Script 수행 철칙: 어길 시 수행 결과의 correctness 를 깨트림

“Script Execute In Order”

“Script Execute after fully loading all stylesheets”

JavaScript loading 방식: <script src =“file.js”> 및 inline JavaScript 는 HTML parsing, page rendering 을 block 시킴

HTML parsing 도중 inline 또는 external JavaScript 를 만나면

Inline JavaScript 는 parsing 후 호출이 되었으면 실행

External JavaScript 는 network 을 통해 적재, parsing 후 호출이 되었으면 실행

Loading,parsing, 실행중 계속적인 HTML parsing 은 suspend 가 기본 동작

Webkit 에서는 속도 향상을 위해 image object 는 speculative 하게 loading 을 수행

https://bugs.webkit.org/show_bug.cgi?id=17480 (WebKit PreloadScanner)

이는 JavaScript 의 수행으로 DOM 변경이 가능하므로 JavaScript 의 수행 완료가 보장되어 야만 하기 때문임

77

https://bugs.webkit.org/attachment.cgi?id=80611&action=prettypatch

document.write() 사용 제한

[RULE] 필요한 resource 는 HTML markup 으로 직접 정의하라

아래와 같이 loading 시 document.write 를 부른 js 와 sec-ond.js 가 모두 loading 될 때까지 blocking 됨

document.write('<script src="second.js"><\/script>');

http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

78

http://www.webkit.org/blog/1424/css3-gradients/

CSS @import 제약사항

[RULE] <link> tag 를 사용하여 CSS 를 load 하고 CSS @im-port 를 사용하지 말아라

Browser 는 일반적으로 import 된 stylesheet 을 병렬 load-ing 을 지원 하지 않음

79

Tool 을 사용한 profiling

Google 의 Page Speed 를 활용한 최적화 방식 소개

80

https://bugs.webkit.org/show_bug.cgi?id=17480

Google Page Speed

동작

Google 에서 작성한 Web 성능 best practices 들을 기준으로 작성된 site 에 적용하여100 점 만점으로 평가하여 점수를 제공

Best Practice 에 위배되는 경우에는 해당 사항을 최적화 하기 위한 guide 와 함께 적용한 결과물들까지 제공함

Best practice 기술 상세 정보

http://code.google.com/intl/ko-KR/speed/page-speed/docs/rules_intro.html

Online 형태로 제공되는 서비스

http://code.google.com/intl/ko-KR/speed/pss/

Google Chrome browser 통한 서비스 (Chrome extension)

http://code.google.com/intl/ko-KR/speed/page-speed/docs/using_chrome.html

사용성

Mobile 또는 desktop 용 Web site 제작시 사용 가능

Local 에 설치되는 web app 은 다수 적용 가능

81

http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

Page Speed: jQuery mobile

http://jquerymobile.com/demos/1.0/docs/lists/lists-formatting.html

22점

82

압축 사용

Web server 를 Content-Encoding 을 모든 compressible resource (HTML, CSS, JavaScript) 에 gzip 적용

150-100bytes 이상일 경우 compression/decompression overhead 를 상쇄 가능

83

JavaScript/CSS minification

Space, indent, line break 등을 제거

Closure Compiler, JSMin, YUI Compressor 사용

Page speed 를 적용하면 하기 directory 에 Closure Compiler 와 JSMin 을 적용한 결과를 저장함

Linux:/tmp/page-speed-[css | javascript | images]/

Windows: C:\Documents and Settings\username\Local Settings\Temp\page-speed-[css | javascript | images]\

Mac OS X: /Users/username/Library/Caches/page-speed-[css | javascript | images]/

84

http://code.google.com/intl/ko-KR/speed/page-speed/docs/rules_intro.html

http://code.google.com/intl/ko-KR/speed/pss/

http://code.google.com/intl/ko-KR/speed/page-speed/docs/using_chrome.html

Browser Caching 활용

캐시 가능한 resource 갱신 기간 증가 시키기85

http://jquerymobile.com/demos/1.0/docs/lists/lists-formatting.html

Character Set 지정86

Vary: Accept-Encoding

Proxy 에서 cache 성능 개선87

불필요한 Reflow 없애기

Layout (reflow) 를 최소로 하는 방식 제공 필요

Web app 은 incremental rendering 보다는 all-ready-shot rendering 이 더 적합

88

JavaScript 파싱 지연

해당 page 에서 사용하지 않는 다수의 JavaScript 파일의 다운 으로 인한 rendering 지연 발생

89

일관된 URL 에서 리소스 제공

두개는 동일한 파일이므로 동일한 URL 로 변경90

불필요한 reflow 제거91

Reference (Article)

Google Page Speed 문서 site

http://code.google.com/speed/page-speed/docs/overview.html

Google Web 관련 Tool 모음

http://code.google.com/intl/ko-KR/speed/tools.html

Gmail latency 개선 사례

http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

Mobile UI 개선 Tip(by Estelle Weyl)

http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/

Page Speed 적용 Web Site 분석 Online Tool (by AOL, open sourced)

http://www.webpagetest.org/

QuerySelect 와 QuerySelectAll 의 WebKit Article

http://www.webkit.org/blog/156/queryselector-and-queryselectorall/

92

Reference (Article)

www.jquery.com

www.jquerymobile.com

How Browsers Work : Behind the Scenes of Modern Web Browsers (Tali Garsiel)

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

http://www.youtube.com/watch?v=dndeRnzkJDU

http://www.webkit.org/coding/technical-articles.html

http://www.slideshare.net/joone/hardware-acceleration-in-webkit?ref=http://opensoftware.kr/

http://www.html5rocks.com/en/mobile/optimization-and-performance/

Google page speed: https://developers.google.com/speed/pagespeed/ (tool 및 tool 이 적용하는 기술에 대한 article있음)

jQuery 성능 최적화 tip: http://www.slideshare.net/AddyOsmani/jquery-performance-tips-and-tricks-2011

http://www.schillmania.com/projects/soundmanager2/

http://www.html5rocks.com/en/tutorials/detection/index.html

www.modernizr.com

HTML5 polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfillshttp://www.webkit.org/blog/156/queryselector-and-queryselectorall/

93