6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
2012년 1월13일 알펜시아 리조트에서 열렸던 HCI2012 행사의 일환이었던 "모바일 웹 UI/UX 현재와 미래" 패널 토의에서 제가 기조 발제로 발표했던 자료입니다.
W3C에서 표준화 진행중인 HTML5와 Web API를 중심으로 새로운 UI/UX의 가능성들과 모바일 UI/UX에 대한 가능성들을 살펴보았습니다.
Basic of web ref.웹을지탱하는기술_01
1. 웹 이전의 인터넷 : 전자메일, FTP, Telnet, Gopher
2. 팀버너스리에 의해 웹이 탄생, Mosaic 브라우저를 통해 사용자 증가
3. 표준화의 필요성 > IETF, W3C등
4. SOAP vs REST 분쟁
HTML이 무엇인지, 지금까지 어떠한 흐름을 거치며 HTML5가 되었는지, HTML5의 설계원칙, 중요한 특징, Browser 지원현황, 웹표준(접근성, Semantic), content 모델에 따른 분류, API 사이트와 유용한 Tutorial 사이트들에 대해서 알아봅니다.
HyWAI is Hybrid Web Application Platform created by ETRI. Latest version of HyWAI 3.5 can support Bluetooth API for Hybrid Application. HyWAI's Bluetooth APIs is very similar with W3C's Web Bluetooth API.
If you have any comment or suggestions, please let me know freely.
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
2012년 1월13일 알펜시아 리조트에서 열렸던 HCI2012 행사의 일환이었던 "모바일 웹 UI/UX 현재와 미래" 패널 토의에서 제가 기조 발제로 발표했던 자료입니다.
W3C에서 표준화 진행중인 HTML5와 Web API를 중심으로 새로운 UI/UX의 가능성들과 모바일 UI/UX에 대한 가능성들을 살펴보았습니다.
Basic of web ref.웹을지탱하는기술_01
1. 웹 이전의 인터넷 : 전자메일, FTP, Telnet, Gopher
2. 팀버너스리에 의해 웹이 탄생, Mosaic 브라우저를 통해 사용자 증가
3. 표준화의 필요성 > IETF, W3C등
4. SOAP vs REST 분쟁
HTML이 무엇인지, 지금까지 어떠한 흐름을 거치며 HTML5가 되었는지, HTML5의 설계원칙, 중요한 특징, Browser 지원현황, 웹표준(접근성, Semantic), content 모델에 따른 분류, API 사이트와 유용한 Tutorial 사이트들에 대해서 알아봅니다.
HyWAI is Hybrid Web Application Platform created by ETRI. Latest version of HyWAI 3.5 can support Bluetooth API for Hybrid Application. HyWAI's Bluetooth APIs is very similar with W3C's Web Bluetooth API.
If you have any comment or suggestions, please let me know freely.
Smart Market Strategy for Mobile Web DeveloperJonathan Jeon
"모바일 웹 개발자의 스마트 시장 진입 전략"이란 제목으로 2011년 10월26일에 충남대에서 열렸던 KWISA 회원사 워크샵에서 발표했던 자료입니다.
모바일 웹 개발자, 특히 학생들을 대상으로 한 자료들을 담아 보았습니다.
혹 살펴보시다, 코멘트하실 내용이 있으면 언제든 남겨주시기 바랍니다.
Trends on Standardizations of HTML5 based Web Platform TechnologyJonathan Jeon
웹은 초기에 단순히 정적인 문서 형태 정보를 공유하는 기술에서, 서로 다른 서비
스를 연결하는 기술과 서로 다른 원격 데이터들을 연결하는 기술로 진화하였고,
이제는 단말의 HW을 제어하고 연결하는 단계를 넘어 모든 사물을 연결하는 기
술로도 발전하고 있다. 이제 웹은 단지 개별 콘텐츠와 서비스를 제공하는 기술로
서가 아니라, 다양한 응용과 서비스를 연동하고 제공하기 위한 명실상부한 플랫
폼이 되어가고 있다. 기술적으로도 과거 웹 기술이 단지 브라우저와 서버 기술에
만 초점을 맞추었다면, 최근에는 HTML5를 중심으로 리치 웹 애플리케이션 기
술, 시스템 API 기술, 서비스 플랫폼 기술, 웹 운영체제 기술들과 같은 플랫폼 지
향적인 기술개발 및 제품개발이 진행되고 있다. 본고에서는 이처럼 빠르게 발전
하고 있는 웹 플랫폼 기술과 웹 응용 기술 표준화 동향에 대해 살피고, 향후 웹 플
랫폼과 웹 응용 기술이 해결해야 할 이슈들과 나아갈 방향들에 대해 고찰해보고
자 하였다.
IoT 및 인공지능을 활용한 헬스케어 제품․서비스 개발 동향 및 주요 과제Jonathan Jeon
12월4일에 대구 한국정보화진흥원 본관에서 진행되었던 대구 혁신도시 헬스케어 기업 세미나에서 발표했던 자료입니다.
의료 사물인터넷과 의료 인공지능 기술을 활용한 제품 및 서비스 개발시에 고려해야 할 사항들을 현재 동향 등과 함께 간략하게 정리해봤습니다.
관심 있는 분들께 도움이 되시길 바랍니다.
최근 애플 워치4 등으로 다시 주목 받고 있는 헬스케어 웨어러블 동향에 대해 간략하게 정리한 자료입니다. 스마트 헬스케어의 변화 속에서 웨어러블 기기들이 어떤 의미를 갖는지를 살펴보았고, OCF의 헬스케어 사물인터넷, 그리고 IEC TC124를 통해 진행되고 있는 신뢰성 평가 표준, 국내 KS 표준으로 만들어진 웨어러블 인체안전성 평가 표준 등이 헬스케어 웨어러블 동향 속에서 어떻게 연관되고 어떤 가능성들을 갖는지도 살펴보았습니다. 그리고 웨어러블 분야에서 메디컬 헬스케어 시장에 어떻게 접근해야 할지, 앞으로 국내/국제 표준화가 어떻게 연계되어야 할지 등과 같은 고민도 함께 제시해봤습니다.
2018년 4월4일에 식품의약품안전처 주관으로 개최되었던 2018년도 의료제품 분야 국가표준 전문가 워크샵에서 발표했던 자료입니다. 의료 제품 분야에 ICT 기술이 결합되어야 하는 시대에, 어떤 표준화 이슈가 있고, 현재 국제표준화 기구에서의 대응이 어떻게 진행되고 있는지, 그리고 한국의 역할은 어떤지를 정리하였습니다. 나아가 4차산업혁명 시대에 의료기기 제품 개발을 위해 표준과 규제가 어떻게 함께 조화롭게 대응이 필요한지까지 언급 해보았습니다.
혹시 수정보완 등이 필요한 부분이 있으면 언제든 코멘트 남겨주시기 바랍니다.
AI and IoT : How do IoT and AI change the world?Jonathan Jeon
This is an Introduction presentation for college students. This presentation introduces the Intelligent Internet of things that are combined with artificial intelligence technology. And It shows the technical possibilities of Intelligent IoT through various advanced AI technology like as deep learning applications. Finally, I'd like to show what changes will come from the artificial intelligence and the Internet of things. and I hope to discuss also what we have to prepare for what kinds of relationship between human and machine in the era of superintelligence.
CES 2016에서 보고 느낀 것들을 정리한 출장 보고회 자료입니다. 전체 주제들을 A-Z까지의 26가지 키워드로 정리를 하였고, 이를 다시 대분류 기술동향인 Car, Fitness/Healthcare/Wearabel, Home/IoT, Startup과 중국, 그리고 기타 그룹으로 정리를 해보았습니다. 관심 있는 분들에게 도움이 되시길 바래봅니다.
HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores.
HyWAI leverages web technologies developers already know best... HTML and JavaScript.
WoT.js - WoT App. Framework for Open Source HardwareJonathan Jeon
Talk on WebAppsCamp. WoT.js is one of application framework based on node.js with open source hardware. It's a short introduction about WoT.js framework.
IoT and WoT (Internet of Things and Web of Things)Jonathan Jeon
Talk on 1st WebAppsCamp. It's a short review between IoT and WoT. In this slide, I'd like to talk about why we need to think about Web of Thing in IoT era.
It's a full day tutorial slides for KAIST students to understand the Web Technology. This full-day tutorial will show you what you need to know the web technologies when you have some plan to design future new services.
It presented on MOBAS 2014 Workshop - "Meet Mobile and IoT work together". I was focused on what we have make the preparation for future mobile and future web in the age of IoT.
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
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. 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. 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. HTML5 ?
Web Application은 HTML, CSS, JavaScript의 협주곡
통칭되는 “HTML5”
HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
Web Storage
문서구조의 상세화
표현 기능 모듈화 Web Worker
멀티미디어
웹 폰트 Web Socket
폼과 이벤트 등
Geolocation API
서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
편리한 표현 방식의 변경
7
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. 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
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 Google's Chrome OS.
24
25. 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
27. Modern Web Applications
JS Frameworks & JS Library
http://www.slideshare.net/infect2/web-app-201205
27
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 Graphics
28 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
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
Ajax
36 http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly
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=javascriptweekly
42
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 & Benchmark
43
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 Practices
44
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/522
45
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=javascriptweekly
46
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 - 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
49. 3. Javascript Interpreter
Dynamic (JIT) Static (AOT)
플랫폼 중립성 있음 없음
코드 품질 높음 좋음
동적 작동 활용 활용함 활용하지 않음
클래스와 계층에 대한 인식 인식함 인식하지 않음
컴파일 시간 제한됨. 런타임 비용이 든다. 제한이 적다. 런타임 비용이
없다.
런타임 성능 영향 있음 없음
컴파일 대상 JIT가 핸들함. 자가 핸들함.
동적 (JIT) 정적 (AOT)
시작 성능 조정 가능하지만, 좋지는 최상
않다.
스테디(steady) 상태 성능 최상 좋음
인터랙티브 성능 보통 좋음
결정적 성능 조정 가능하지만, 좋지는 최상
않다
http://www.ibm.com/developerworks/java/library/j-rtj2/index.html
49
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 runs
51
entirely in the browser
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. 4. Hardware Acceleration
From WebKit to the Screen
Architectural Interlude: The GPU Process
53 http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
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/webgl
54
57. 4. GPU Acceleration Test
http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html
57
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_test
58
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#run
60
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/wiki
61
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
OR
62