Internet Explorer 9
Platform Preview
Internet Explorer 9
HTML5
4000
3500
3000
ミリ秒
2500
2000
1500
1000
500
0
Internet
Explorer 8
Internet
Explorer 9
PDC 2009
Demo
Firefox 3.6.3 IE9 Platform Firefox 3.7
Preview #1 Pre-Release
Alpha6
Internet
Explorer 9
Platform
Preview #2
Internet
Explorer 9
Platform
Preview #3
Safari 5.0
Opera 10.53
Chrome
5.0.375.70
3.0 GHz Core 2 Duo Intel プロセッサ、4 GB RAM、Intel Integrated Video を
搭載した Windows 7 が動作する Dell Optiplex でのテスト
Chrome 6
Nightly
6.0.427.0
Opera 10.6
Beta
インターフェイス
目的
window.msPerformance.navigation
ナビゲーション情報:
• リダイレクト数
• 要求数
• 個別ドメイン数
window.msPerformance.timing
イベント発生の絶対時間:
• connectStart
• connectEnd
window.msPerformance.timingMeasures
タスク完了までの所要時間
timing と timingMeasures
URL の入力
unloadStart
unloadEnd
その他の
タイミング
window.load
時間軸
window.msPerformance.timing.navigationStart
window.msPerformance.timing.loadEnd
window.msPerformance.timingMeasures.navigation
*すべてのタイミング イベントを網羅しているわけではありません
サンプル コード
var myBody;
this.onload = function ()
{
myBody = document.getElementById ("myBody");
if (window.msPerformance)
{
myBody.innerHTML = 'navigationStart: ' +
window.msPerformance.timing.navigationStart
+'ms ('
+ Date
(window.msPerformance.timing.navigationStart)+
') <br>';
}
return;
};
デモ ファイル: msPerformance.htm
Web Open Font Format (WOFF)
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
This will render using MyFontName in FontFile.woff
</div>
機能
Canvas
SVG
描画モード
即時
保存
DOM サポート
DOM の <CANVAS> 部分
SVG 要素のそれぞれが
DOM の一部
アニメーション
キャンバス内で
直接スクリプトを使用
DOM でオブジェクトを
操作
IE9 GPU
アクセラレーション
可能
可能
this.onload = function() {
var myCanvas = document.getElementById('myCanvas');
if (myCanvas.getContext){
var ctx = myCanvas.getContext("2d");
var img = new Image();
img.src = "IELogo.png";
img.onload = function(){
ctx.drawImage(img,0,0);
}
}
}
デモ ファイル: CanvasImage.htm
myCanvas = document.getElementById (“myCanvas”);
if (myCanvas.getContext)
{
ctx= myCanvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
// Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
}
…
<canvas id="myCanvas" width="500" height="500">
Canvas is not supported.
デモ ファイル: Canvas.htm
</canvas>
var distance=5, lastFrameTime = 0;
setInterval(drawTimeBased, 16);
function drawFrameBased() {
y1 += distance;
ctx.clearRect(0, 0, ctx.canvas.width,
ctx.canvas.height);
ctx.drawImage(img, x1, y1, imgWidth,
imgHeight);
}
デモ ファイル: CanvasAnimation.htm
var speed = 250, lastFrameTime = 0;
setInterval(drawTimeBased, 16);
function drawTimeBased() {
// time since last frame
var now = new Date().getTime();
dt = (now - lastFrameTime) / 1000;
lastFrameTime = now;
y2 += speed * dt;
ctx.clearRect(x2, 0, ctx.canvas.width,
ctx.canvas.height);
ctx.drawImage(img, x2, y2, imgWidth, imgHeight);
}
デモ ファイル: CanvasAnimation.htm
<video src="video.mp4 autoplay controls>
<!-- Only shown when browser doesn’t support video -->
<!-- You could embed Flash or Silverlight video here -->
</video>
<script language=javascript>
function skipTo()
{
var myVideo = document.getElementById("myVideo");
if (myVideo.currentTime) {
myVideo.currentTime = document.getElementById("time").value;
myVideo.play();
}
}
</script>
<video id="myVideo" src="video.mp4" autoplay controls>
Video is not supported.
</video>
Enter seconds to skip to: <input type=text id="time">
<input type=button value="Skip" onclick=skipTo()>
デモ ファイル: video.htm
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</audio>
ietestdrive.com
デモ ファイル: es5.htm
https://connect.microsoft.com
https://connect.microsoft.com/IE
https://connect.microsoft.com/IE/Feedback
http://windowssummit.tri-digital.com/video-gallery/software/sow-t102.aspx
http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
http://dev.w3.org/2006/webapi/WebTiming/
http://www.w3.org/Fonts/
http://www.IETestDrive.com
http://live.visitmix.com/Sessions#/tags/InternetExplorer
http://live.visitmix.com/MIX10/Sessions/KEY02
http://blogs.msdn.com/ie/
© Copyright 2024 ExpyDoc
