Javascript and Web Performance

4,806 views

Published on

Javascript와 Web Performance에 대한 개략적인 소개 자료입니다. Web Performance와 Javascript 가속화에 대한 이슈들에 대해 정리해보았습니다.

Published in: Technology
3 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total views
4,806
On SlideShare
0
From Embeds
0
Number of Embeds
1,555
Actions
Shares
0
Downloads
0
Comments
3
Likes
24
Embeds 0
No embeds

No notes for slide

Javascript and Web Performance

  1. 1. Javascript & Web PerformanceJonghong JeonETRI, SRCEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.com http://twitter.com/hollobithttp://www.etri.re.kr
  2. 2. 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
  3. 3. Evolution of World Wide Web3
  4. 4. Evolution of World Wide Web 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
  5. 5. Evolution of World Wide Web 1989 2000 2005 2010 Web Document Web Services Open Web Web App & APIs 웹사이트의 시대, 웹서비스의 시대 웹 2.0, 웹 앱의 시대, HTML과 WAP 웹 플랫폼 시대 모바일과 N-Screen 시대5
  6. 6. 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
  7. 7. HTML5 ? Web Application은 HTML, CSS, JavaScript의 협주곡 통칭되는 “HTML5” HTML5 CSS3 JavaScript 콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해 기능을 표현  Web Storage  문서구조의 상세화  표현 기능 모듈화  Web Worker  멀티미디어  웹 폰트  Web Socket  폼과 이벤트 등  Geolocation API 서로 다른 다양한 브라우저 상에서 문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수 일관된 표현 기능 제공, 효과적이고 디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션 편리한 표현 방식의 변경7
  8. 8. 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
  9. 9. 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 DOM4Specs. CSS1 CSS2 CSS3 HTTP Javascript AJAX hollobit@etri.re.kr XHR29
  10. 10. HTML5 & Web ApplicationPerformance
  11. 11. Web Browser Architecture11
  12. 12. Web Page Loading procedure12
  13. 13. Web Page Loading procedure13
  14. 14. W3C Navigation Timing API http://www.w3.org/TR/navigation-timing/14
  15. 15. 15 Networking HTML CSS Collections JavaScript Marshalling DOM Formatting Block Building Web Performance bottleneck? Layout Rendering
  16. 16. Evolution of Web Contents16
  17. 17. Case : Video http://www.justafriend.ie/17
  18. 18. Case : WebGL + LocalStorage http://chrome.angrybirds.com/18
  19. 19. Case : SVG + WebGL http://www.cuttherope.ie/19
  20. 20. Case : Audio http://daftpunk.themaninblue.com/20
  21. 21. Case : Web Audio http://www.technitone.com21
  22. 22. Case : Web Audio http://airtightinteractive.com/demos/js/reactive/ http://aikelab.net/websynth/22
  23. 23. Dynamic Editor by Bret Victor http://worrydream.com/23
  24. 24. 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 Googles Chrome OS.24
  25. 25. The Web as an application platformStandards for Web Applications on Mobile: Feb 2013 current state and roadmap  http://www.w3.org/2012/05/mobile-web-app-state/25
  26. 26. HTML5 관련 비즈니스 영역26
  27. 27. Modern Web Applications JS Frameworks & JS Library http://www.slideshare.net/infect2/web-app-20120527
  28. 28. 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 Graphics28 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
  29. 29. Measuring JavaScript performance29 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
  30. 30. Javascript : Event Processing30
  31. 31. Javascript : Object control31
  32. 32. Javascript : DOM control32
  33. 33. 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);33 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
  34. 34. Javascript: Application Frameworks34
  35. 35. What is Javascript ?
  36. 36. History of Javascript Aug 1996 Microsoft Mar 1999 Firefox XHR Safari Chrome Mobile // Sept 1995 Netscape Aug 2001 IE6 June 1997 ECMAScript Feb 2005 Ajax36 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
  37. 37. History of Javascript http://en.wikipedia.org/wiki/JavaScript37
  38. 38. Javascript Implementations Technical Committee 39 (TC39) of Ecma International. http://en.wikipedia.org/wiki/ECMAScript38
  39. 39. Javascript Conformance tests http://test262.ecmascript.org/39
  40. 40. Javascript Performance Issues
  41. 41. Javascript Performance http://www.slideshare.net/chanezon/hdc09-keynote-browser-mobile-cloud-social-geo-portrait-of-the-developer-as-a-kid-in-a-candy-store41
  42. 42. 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=javascriptweekly42
  43. 43. 성능 개선을 위한 노력들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 & Benchmark43
  44. 44. 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 Practices44
  45. 45. 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/52245
  46. 46. 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 Soure: http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly46
  47. 47. 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 - KDEs ECMAScript/JavaScript engine originally developed by Harri Porten for the KDE projects 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
  48. 48. 2. Javascript Engine Race Soure: http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly48
  49. 49. 3. Javascript Interpreter Dynamic (JIT) Static (AOT) 플랫폼 중립성 있음 없음 코드 품질 높음 좋음 동적 작동 활용 활용함 활용하지 않음 클래스와 계층에 대한 인식 인식함 인식하지 않음 컴파일 시간 제한됨. 런타임 비용이 든다. 제한이 적다. 런타임 비용이 없다. 런타임 성능 영향 있음 없음 컴파일 대상 JIT가 핸들함. 자가 핸들함. 동적 (JIT) 정적 (AOT) 시작 성능 조정 가능하지만, 좋지는 최상 않다. 스테디(steady) 상태 성능 최상 좋음 인터랙티브 성능 보통 좋음 결정적 성능 조정 가능하지만, 좋지는 최상 않다 http://www.ibm.com/developerworks/java/library/j-rtj2/index.html49
  50. 50. 3. Lifecycle of your JavaScript code Core #1 Source Parser AST Byte Code Interpreter Foreground Code Core #2 Background Native Code Background Compiler50
  51. 51. 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 runs51 entirely in the browser
  52. 52. 4. Hardware Acceleration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
  53. 53. 4. Hardware Acceleration From WebKit to the Screen Architectural Interlude: The GPU Process53 http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
  54. 54. 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/webgl54
  55. 55. 4. WebCL Demo55 http://www.youtube.com/watch?v=9Ttux1A-Nuc&lr=1
  56. 56. 4. GPU Acceleration IE Firefox Chrome56
  57. 57. 4. GPU Acceleration Test http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html57
  58. 58. 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_test58
  59. 59. 5. Performance Measuring http://www.webkit.org/perf/sunspider/sunspider.html59
  60. 60. 5. Performance Measuring 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#run60
  61. 61. 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/wiki61
  62. 62. 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 OR62

×