|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>SVG Path Benchmark</title> |
|
<style type="text/css"> |
|
body { margin: 0px 10px; } |
|
h1 { font-size: 1.3em; line-height: 1.0em; } |
|
table { font-size: 0.8em; margin: 0px 10px; padding: 2px } |
|
th { text-align: center; font-weight: bold; padding: 0px 10px 0px 10px; } |
|
td { text-align: center; font-weight: normal; padding: 0px 10px 0px 10px; } |
|
ul.hlist { display: inline-block; list-style-type: none; margin: 0px; padding-left: 15px; } |
|
ul.hlist li { display: inline-table; vertical-align: top; list-style-type: none } |
|
svg { width: 400px; height: 400px } |
|
.line { fill: none; stroke: orangered; stroke-width: 1.0px; } |
|
</style> |
|
<script type="text/javascript"> |
|
window.requestAnimFrame = (function() { |
|
return window.requestAnimationFrame || |
|
window.webkitRequestAnimationFrame || |
|
window.mozRequestAnimationFrame || |
|
window.oRequestAnimationFrame || |
|
window.msRequestAnimationFrame || |
|
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { |
|
return window.setTimeout(callback, 1000/60); |
|
}; |
|
})(); |
|
window.cancelRequestAnimFrame = (function() { |
|
return window.cancelCancelRequestAnimationFrame || |
|
window.webkitCancelRequestAnimationFrame || |
|
window.mozCancelRequestAnimationFrame || |
|
window.oCancelRequestAnimationFrame || |
|
window.msCancelRequestAnimationFrame || |
|
window.clearTimeout; |
|
})(); |
|
</script> |
|
</head> |
|
<body> |
|
<h1>SVG Path Benchmark</h1> |
|
<p id="user-agent"></p> |
|
<ul class="hlist"> |
|
<li> |
|
<svg id="svg" width="400" height="400"> |
|
<g transform="translate(0,0)"> |
|
<rect width="400" height="400" style="fill: #eeeeee;"></rect> |
|
<path id="path" class="line" d="M200,200"></path> |
|
</g> |
|
</svg> |
|
</li> |
|
<li> |
|
<table> |
|
<thead> |
|
<th>Line Segments</td> |
|
<th>Elapsed Time</td> |
|
<th>Time of Last Set</td> |
|
</thead> |
|
<tbody id="results"></tbody> |
|
</table> |
|
</li> |
|
</ul> |
|
<script type="text/javascript"> |
|
window.onload=function() { |
|
|
|
var user_agent = document.getElementById("user-agent"); |
|
user_agent.innerHTML = navigator.userAgent; |
|
|
|
var path = document.getElementById("path"); |
|
var path_seglist = path.pathSegList; |
|
|
|
var svg = document.getElementById("svg"); |
|
|
|
var half_width = svg.width['baseVal'].value / 2; |
|
var half_height = svg.height['baseVal'].value / 2; |
|
|
|
var xpos = half_width; |
|
var ypos = half_height; |
|
|
|
var i, j; |
|
|
|
var factor = 15; |
|
var factor_div_2 = factor / 2; |
|
var correction = 0.0035; |
|
|
|
function addLineSegments(num) { |
|
for (i=0; i < num; i++) { |
|
xpos += (factor * Math.random() - factor_div_2) + (half_width - xpos) * correction; |
|
ypos += (factor * Math.random() - factor_div_2) + (half_height - ypos) * correction; |
|
path_seglist.appendItem(path.createSVGPathSegLinetoAbs(xpos, ypos)); |
|
} |
|
}; |
|
|
|
var results = document.getElementById("results"); |
|
var table_row, table_data; |
|
|
|
function addToResults(samples, elapsed_time, sample_time) { |
|
table_row = document.createElement('tr'); |
|
table_data = document.createElement('td'); |
|
table_data.innerHTML = samples; |
|
table_row.appendChild(table_data); |
|
table_data = document.createElement('td'); |
|
table_data.innerHTML = elapsed_time; |
|
table_row.appendChild(table_data); |
|
table_data = document.createElement('td'); |
|
table_data.innerHTML = sample_time; |
|
table_row.appendChild(table_data); |
|
results.appendChild(table_row); |
|
}; |
|
|
|
var increment = 1000; |
|
var count = 0; |
|
var elapsed_time = 0; |
|
var sample_time, sample_start, sample_end; |
|
|
|
function runSet() { |
|
sample_start = +new Date(); |
|
addLineSegments(increment); |
|
sample_end = +new Date(); |
|
sample_time = sample_end-sample_start; |
|
elapsed_time += sample_time; |
|
count += increment; |
|
addToResults(count, elapsed_time, sample_time); |
|
} |
|
|
|
function benchmark(){ |
|
if (count < 10000) { |
|
requestAnimFrame(benchmark); |
|
runSet(); |
|
} |
|
}; |
|
requestAnimFrame(benchmark); |
|
}; |
|
</script> |
|
</body> |
|
</html> |