HTML5を使ったウェブアプリケーションの高速化

HTML5

2010/6/17

hagino3000

id

hagino3000

( : hagino_3000)

• JavaScript
• Oracle
• Java, PL/SQL
• Excel
• Ext JS
• new → Python

• Java-ja
• Python ( / Hack-a-thon)
• Google
• Hackathon
• Google Dev Fest (Developers Day)

Chaos Proxy
LAN

http://wiki.github.com/yuiseki/chaos_proxy/for-

JavaScript

• CSS3 Animation
• WebWorker

CSS3 Animatioin
/*********** CSS **********/
div#hoge img {
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes hide {
0% { opacity : 1} // JavaScript ///////////////////////
100% { opacity : 0 } // fadeout
} $(‘#target’).addClass(‘hide’);
.hide { -webkit-animation-name: hide; }

WebWorker

• XMLHttpRequest
•
• DOM

WebWorker
// main thread // worker thread
var loader = new Worker('loader.js'); onmessage = function(e) {
loader.onmessage = function(event) { var data = JSON.parse(e.data);
var d = JSON.parse(event.data); if (data.eventName == 'setup') {
if (d.eventName == 'setup') { setup(data);
loader.postMessage(JSON.stringify({ } else
eventName:'start' if (data.eventName == 'start') {
})); start();
} else } else {
if (d.eventName == 'load') { ...
renderImages(d.data); }
} }
};
loader.postMessage(JSON.stringify({ function setup(data) {
eventName:'setup', ...
interval : 5000 postMessage(JSON.stringify({eventName:'setup'}));
})); }

WebSocket

• Server-Push
•

WebSocket
•
• “¥0x00Hello World¥0xff”
• Flash

• 10message/

DOM
User Input DOM Manipuration

DOM Event
Main Thread

WebSocket WebSocket
Connection Connection

messaging messaging

Worker Worker

XHR XHR

WebSocket WebSocket HTTP Server
Server Server

HTML5 API
• Device API
• Web SQL Database API

HTML5を使ったウェブアプリケーションの高速化

HTML5を使ったウェブアプリケーションの高速化

More Related Content

What's hot

Viewers also liked

More from hagino 3000

HTML5を使ったウェブアプリケーションの高速化