Javascript and Web Performance

Javascript & Web Performance

Jonghong Jeon
ETRI, SRC

Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit

http://www.etri.re.kr

In The Beginning .....
 World Wide Web (Tim Berners-Lee, 1989)
 universe of network-accessible information
 anyone, anywhere, anytime
 Client to server interactions
• HTML Ftp News Email
• URL Internet
• HTTP Web
Server Resources
Db & other
software
URLs
HTML Internet (location
(data/display) communication e.g -- http://www.foo.org/boo.html )
protocols
Hello There
Here’s a zippy
HTML page,
with lots of
Colors and
Links ...!!!
Fun, Eh?

HTTP
(transfer)
2

Evolution of World Wide Web

3

 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP
 HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다
나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계
 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹
 XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아
니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는
단계
 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장
 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이
끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련
 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대
 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web
API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정
보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계

4

1989 2000 2005 2010

Web Document Web Services Open Web Web App & APIs

웹사이트의 시대, 웹서비스의 시대 웹 2.0, 웹 앱의 시대,
HTML과 WAP 웹 플랫폼 시대 모바일과
N-Screen 시대

5

HTML5 ?
 HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것

통칭되는 “HTML5”

HTML5 CSS3 JavaScript
(Hypertext Markup Language 5.0) (Cascading Style Sheet 3.0)
콘텐츠 내용과 형식을 표현 각종 API를 통해
콘텐츠 표현 방법을 정의
기능을 표현
 Web Storage
 문서구조의 상세화
 표현 기능 모듈화  Web Worker
 멀티미디어
 웹 폰트  Web Socket
 폼과 이벤트 등
 Geolocation API

서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
편리한 표현 방식의 변경

6

HTML5 ?
 Web Application은 HTML, CSS, JavaScript의 협주곡

통칭되는 “HTML5”

HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
 Web Storage
 문서구조의 상세화
 표현 기능 모듈화  Web Worker
 멀티미디어
 웹 폰트  Web Socket
 폼과 이벤트 등
 Geolocation API

서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
편리한 표현 방식의 변경

7

HTML5 ?
HTML5 기술의 주요 특징 시사점
보다 지능화되고
Semantics:
다양한 형태의 풍부한
보다 구조화되고 다양한 기능의 HTML 태그를 제공
웹 문서 표현 가능
Multimedia:
액티브X와 플래쉬 같은 별도 외부 플
비디오, 오디오 지원 기능의 자체 지원을 통한 강력한 멀티미디어 기능 제
러그 필요성 제거
공

Offline & Storage: 웹의 한계로 여겨졌던 네트워크 단
네트워크가 지원되지 않는 환경에서도 웹 이용을 가능케하는 오프라인 처 절시 처리 방법과 데이터 저장 기능
리 기능과 로컬 스토리지, DB, File 액세스 처리 기능 문제 해결

3D, Graphics & Effects: 외부 플러그인 기능 없이 다양한
SVG, 캔버스, WebGL 등을 통한 다양한 2차원/3차원 그래픽 기능의 제공 2D/3D 그래픽 처리 가능

Device Access: 웹 기반 디바이스 제어 기능을 통해
GPS, 카메라, 동작센서 등 디바이스의 하드웨어 기능을 웹에서 직접 제어 본격적인 웹 애플리케이션 개발 가
할 수 있도록 하는 기능 능

Performance & Integration: 웹의 가장 큰 문제 중 하나였던 성능
비동기 통신, 다중 쓰레드 기능 등을 통한 웹에서의 처리 성능을 향상 문제를 대폭 개선

Connectivity: 웹에서의 다양한 통신기능(메시징,
클라이언트와 서버간의 효율적인 통신 기능 제공을 통한 웹 기반 커뮤니케 응용간 통신 등) 제공을 통한 응용
이션 효율 대폭 강화 개발 범위 확대
CSS3 Styling Effect:
UI 측면에서 N-스크린 서비스 제공
기존 웹 문서의 변경과 성능저하 없이 웹 애플리케이션의 UI(스타일과 효
가능
과 등) 기능을 대폭 강화

8

HTML5 & Web App Technology Timeline

2010 2011 2012 2013

HTML5 Working Draft

Canavs Web Workers AppCache

Web form Geolocation FileAPI
W3C WebGL
Audio/Video WebFont
Web
App.
DOM1 DOM2 DOM3 DOM4
Specs.

CSS1 CSS2 CSS3
HTTP Javascript AJAX hollobit@etri.re.kr XHR2

9

HTML5 & Web Application
Performance

Web Browser Architecture

11

Web Page Loading procedure

12

Web Page Loading procedure

13

W3C Navigation Timing API

http://www.w3.org/TR/navigation-timing/

14

15
Networking

HTML

CSS

Collections

JavaScript

Marshalling

DOM

Formatting

Block Building
Web Performance bottleneck?

Layout

Rendering

Evolution of Web Contents

16

Case : Video
 http://www.justafriend.ie/

17

Case : WebGL + LocalStorage
 http://chrome.angrybirds.com/

18

Case : SVG + WebGL
 http://www.cuttherope.ie/

19

Case : Audio
 http://daftpunk.themaninblue.com/

20

Case : Web Audio
 http://www.technitone.com

21

Case : Web Audio
http://airtightinteractive.com/demos/js/reactive/

http://aikelab.net/websynth/

22

Dynamic Editor by Bret Victor

http://worrydream.com/
23

Firefox OS
Firefox OS is a HTML 5 web-based browser, which sits on top of Android
kernals, with all the features on handsets basically being accessed
through a browser – similar to Google's Chrome OS.

24

The Web as an application platform
Standards for Web Applications on Mobile: Feb 2013 current state and roadmap
 http://www.w3.org/2012/05/mobile-web-app-state/

25

HTML5 관련 비즈니스 영역

26

Modern Web Applications
 JS Frameworks & JS Library

http://www.slideshare.net/infect2/web-app-201205

27

The Reach of JavaScript is expanding

Web Applications
HTML5 Games
Basic Web Pages Windows 8 HTML Apps

Page Load JavaScript Execution
Time Speed
DOM Interactions
Accelerated Graphics

28 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly

Measuring JavaScript performance


Javascript : Event Processing

30

Javascript : Object control

31

Javascript : DOM control

32

Javascript : Graphics - HTML5 games

setInterval(animate, 1000/60)

bs[i] = new Bubble(0, 1);
for (var i = 0; i < 1000; i++) {
bs[i].move();
for (var j = 0; j < i + 1; j++) {
Bubbles.collide(bs[i], bs[j]);
}
}

var distance2 = (b1.x–b2.x)*(b1.x–b2.x)+(b1.x–b2.x)*(b1.x–b2.x);

Bubble
var magnitude = (dvx * dx + dvy * dy) / d2;

s
this.elem.style.left = this.x + "px";
this.elem.style.top = this.y + "px";

this.canvas.getContext("2d").putImageData(canvasImageData, 0, 0);


Javascript: Application Frameworks

34

History of Javascript

Aug 1996
Microsoft
Mar 1999 Firefox
XHR Safari
Chrome
Mobile
//
Sept 1995
Netscape
Aug 2001
IE6
June 1997
ECMAScript
Feb 2005
Ajax


History of Javascript

http://en.wikipedia.org/wiki/JavaScript
37

Javascript Implementations

Technical Committee 39 (TC39) of Ecma International. http://en.wikipedia.org/wiki/ECMAScript
38

Javascript Conformance tests

http://test262.ecmascript.org/

39

Javascript Performance

http://www.slideshare.net/chanezon/hdc09-keynote-browser-mobile-cloud-social-geo-portrait-of-the-developer-as-a-kid-in-a-candy-store
41

MOST COMMON PROBLEMS

1. Slow Execution
2. Memory leaks
3. Poor Code Organization
4. Lack of Understanding

Soure: http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly

42

성능 개선을 위한 노력들
Developer Level
 Programming Best Practices & Tips
Engine Level
 Javascript Engine Race
 Javascript Interpreting mechanism Enhancement
Device Level
 Hardware Acceleration
• Web CL
• GPU Acceleration
Performance Measuring & Benchmark

43

1. JavaScript Best Practices

• Provide a clean separation of content, CSS,
and JavaScript
• De-reference unused objects
• Think Asynchronous
• Working with Objects
• Defer Loading Resources
• General JavaScript Coding Best Practices

44

1. Javascript 성능향상을 위한 10가지 팁
1. 지역변수를 정의하라.
2. with() 구문을 사용하지 말라.
3. 클로저를 적절하게 사용하라
4. 객체의 프로퍼티와 배열의 요소는 변수보다 느리다.
5. 배열속으로 너무 깊이 들어가지 말라
6. for-in 루프를 피하자 ( 그리고 함수호출에 기반한 반복도..)
7. 루프를 사용할 때 제어 조건과 제어 변수 변화를 결합하라
8. HTML 공통 객체(collection objects)를 사용하기 위한 배열을 만
들어라.
9. 웬만하면 DOM을 건드리지 마라!
10.CSS 클래스를 변경하라. 스타일 말고!
http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas
http://nodejs-kr.org/insidejs/archives/522

45

1. JavaScript Best Practices
 Do write fast objects
 Add all properties in constructor
 Don’t delete properties
 Use identifiers for property names
 Use getters and setters sparingly
 Avoid conditionally adding properties
 Avoid default property values on prototype objects

 Do use fast type-specialized arithmetic
 Be aware of number boxing
 Avoid unnecessary floating point math
 Enable type-specializing JIT compilers

 Do use arrays efficiently
 Don’t use objects as arrays and vice versa
 Pre-allocate on creation
 Enumerate efficiently
 Use typed arrays to avoid float boxing

46

2. Javascript Engine Race
 Mozilla
 Rhino, managed by the Mozilla Foundation, open source, developed entirely in Java
 SpiderMonkey (code name), the first ever JavaScript engine, written by Brendan Eich at Netscape Communications
 TraceMonkey, a tracing JIT compiler introduced with Firefox 3.5
 JägerMonkey, the engine introduced with Firefox 4[16]
 IonMonkey, further JIT compiler optimizations for SpiderMonkey,[17] introduced with Firefox 18[18]
 Tamarin, by Adobe Labs
 Google
 V8 - open source, developed by Google in Denmark, part of Google Chrome
 Opera
 Futhark, by Opera Software, replaced by Carakan in Opera 10.50 (released March 2010)
 Carakan, by Opera Software, used since Opera 10.50
 Safari
 JavaScriptCore, renamed to SquirrelFish and marketed as Nitro, for Safari
 Webkit
 SFX(SquirrelFish Extreme), a JavaScript engine for WebKit
 Other
 KJS - KDE's ECMAScript/JavaScript engine originally developed by Harri Porten for the KDE project's Konqueror web browser
 Narcissus open source, written by Brendan Eich, who also wrote SpiderMonkey
 Chakra, for Internet Explorer 9[19]
 dyn.js, open source, written by Douglas Campos and others[20]
 Nashorn, open source (pending), written by Oracle Java Languages and Tool Group[21]

47 http://en.wikipedia.org/wiki/JavaScript_engine

2. Javascript Engine Race

48

3. Javascript Interpreter

Dynamic (JIT) Static (AOT)

플랫폼 중립성 있음 없음

코드 품질 높음 좋음

동적 작동 활용 활용함 활용하지 않음

클래스와 계층에 대한 인식 인식함 인식하지 않음

컴파일 시간 제한됨. 런타임 비용이 든다. 제한이 적다. 런타임 비용이
없다.

런타임 성능 영향 있음 없음

컴파일 대상 JIT가 핸들함. 자가 핸들함.

동적 (JIT) 정적 (AOT)

시작 성능 조정 가능하지만, 좋지는 최상
않다.
스테디(steady) 상태 성능 최상 좋음
인터랙티브 성능 보통 좋음

결정적 성능 조정 가능하지만, 좋지는 최상
않다

http://www.ibm.com/developerworks/java/library/j-rtj2/index.html

49

3. Lifecycle of your JavaScript code

Core #1 Source
Parser AST Byte Code Interpreter
Foreground Code

Core #2 Background
Native Code
Background Compiler

50

4. Hardware Acceleration
There are many needs require a level of compute
performace beyond the web platform as it exists today,
such as:
 consumption of high-quality digital video or music streams,
 complex image or speech recognition,
 manipulation and processing large pictures of nature or space,
 processing large sets of tabular data locally in the browser,
 complex animations with DOM elements (via DirectX or
OpenGL),
 exploring 3D worlds, Augmented Reality
 real-time audio and video editing,
 having an integrated development environment that runs
51
entirely in the browser


Why offload workloads to GPU from Javascript?
1. The browser is becoming an application platform.
2. Because of latency and for application
responsiveness, not everything can be done on the
server.
3. Examples: audio, video, games, rich internet
applications, bitcoin mining, etc.
4. Heterogeneous multicore parallel programming.
5. Offloading stuff to the GPU frees up the CPU.

52

From WebKit to the Screen

Architectural Interlude: The GPU Process

53 http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

4. Web CL
 WebCL (Web Compute Language / Web OpenCL), from the
Khronos Group, executes on the GPU:
 http://webcl.nokiaresearch.com/index.html
 Extends Javascript.
 Runs in browser (Firefox + some mobile browsers).
 “OpenCL” centric; not surprising given its origins.
 Fairly wide base of support: Khronos, Nokia, Samsung …

 Chrome WebGL
 http://www.chromeexperiments.com/webgl

54

4. WebCL Demo

55 http://www.youtube.com/watch?v=9Ttux1A-Nuc&lr=1

4. GPU Acceleration

IE

Firefox

Chrome
56

4. GPU Acceleration Test
 http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

57

5. Performance Measuring
 Peacekeeper
 Online speed test by Futuremark, mainly using rendering, mathematical and memory operations. Takes approx. 5 minutes
for execution and tells results of other browsers with different CPUs. Does not respect operating system.
 Speed-Battle
 Test of JavaScript engine using simple algorithms. Displays results of other visitors (best, average, poorest) with same
operating system and browser version. Additional statistics page with browser ranking.
 SunSpider
 SunSpider is a benchmark suite that aims to measure JavaScript performance on tasks relevant to the current and near
future use of JavaScript in the real world, such as encryption and text manipulation.[1] The suite further attempts to be
balanced and statistically sound.[2] Version 0.9 was released by the WebKit team in December 2007.[3] It was well
received,[4] and other browser developers also use it to compare the JavaScript performance of different
browsers.[5] Version 0.9.1 was released in April 2010.[6] Internet Explorer 10 shows better results than Google Chrome.
IE10 managed to run the test in 123ms, while Chrome 19 ran the test in 155ms.[7] During Developer Summit in June 2012,
Microsoft demonstrated Internet Explorer Mobile 10out-performing the Galaxy S III, HTC One S, and iPhone 4S on iOS 6
Beta.[8]
 V8Bench
 JavaScript test suite by Google, used to optimize Google Chrome web browser. Chrome 15 achieves about two and half times
better results than Firefox 8 and Opera 11, and about three times better results than Safari 5 with this benchmark (tested on
Windows 7).[9] Does not test rendering performance.
 Dromaeo
 Mozilla test suite based on SunSpider tests. Takes several minutes for execution and displays very detailed information about
every single test task.
 JSLitmus
 Tests JavaScript speed.
http://en.wikipedia.org/wiki/Browser_speed_test

58

http://www.webkit.org/perf/sunspider/sunspider.html

59

 jsPerf: JavaScript performance playground
 자바스크립트 코드 블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이
더 성능이 좋은가 테스트
 250 test cases
• http://jsperf.com/browse
 Popular test cases
• http://jsperf.com/popular
 Example - StringMerge plusoperator VS arrayJoin
• http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run

60

Resources for Study
 Books
 JavaScript: The Good Parts (Crockford)
 JavaScript: The Definitive Guide (Flanagan)
 JavaScript Patterns (Stefanov)
 High Performance JavaScript (Zakas)
 Pro Javascript Performance
 High Performance JavaScript
 Web CL
 http://www.khronos.org/webcl/
 http://www.chromium.org/developers/demos-gpuacceleration-and-webgl
 River Trail (Intel)
 https://github.com/RiverTrail/RiverTrail/wiki

61

Thank you
For more discussion :
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333

Blog : http://mobile2.tistory.com/m
http://twitter.com/hollobit

OR
62

Javascript and Web Performance

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Javascript and Web Performance

Semelhante a Javascript and Web Performance (20)

Mais de Jonathan Jeon

Mais de Jonathan Jeon (20)

Último

Último (6)

Javascript and Web Performance