translate vs position left/top vs css margin left/top
JavaScript performance comparison
Preparation code
<div id="elem" style="position: relative; background:#ccc; width:10px; height:10px;">
</div>
<script>
var elem = document.getElementById("elem");
var style = elem.style;
var template = document.getElementById("elem").cloneNode();
var transform = (function() {
if (undefined !== style.WebkitTransform) {
return "WebkitTransform";
} else if (undefined !== style.MozTransform) {
return "MozTransform";
} else if (undefined !== style.OTransform) {
return "OTransform";
} else if (undefined !== style.msTransform) {
return "msTransform";
} else if (undefined !== style.WebkitTransform) {
return "WebkitTransform";
} else {
return "transform";
}
})();
</script>
<script>
Benchmark.prototype.setup = function() {
var newElem = template.cloneNode();
elem.parentNode.replaceChild(newElem, elem);
elem = newElem;
var style = newElem.style;
var x = Math.random() * 10;
};
</script>
Preparation code output
<div id="elem" style="position: relative; background:#ccc; width:10px; height:10px;">
</div>
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
Test | Ops/sec | |
---|---|---|
translate
|
|
pending… |
translate X/Y
|
|
pending… |
translateX/Y/Z
|
|
pending… |
translate, translateZ
|
|
pending… |
translate3d
|
|
pending… |
position left/top
|
|
pending… |
margin left/top
|
|
pending… |
Compare results of other browsers
Revisions
You can edit these tests or add even more tests to this page by appending /edit
to the URL.
- Revision 1: published galambalazs
- Revision 2: published
- Revision 3: published
- Revision 4: published
- Revision 5: published Dmitry
- Revision 6: published
- Revision 7: published Disturbed
- Revision 10: published Acap
- Revision 11: published
- Revision 13: published Steve
- Revision 18: published
- Revision 19: published
- Revision 20: published
- Revision 22: published
- Revision 23: published Justin
- Revision 24: published
- Revision 25: published
- Revision 26: published David Aurelio
- Revision 27: published ikarienator
- Revision 28: published
- Revision 29: published atrl
- Revision 30: published
- Revision 32: published Cameron
- Revision 35: published
- Revision 36: published
- Revision 37: published
- Revision 38: published
- Revision 39: published
- Revision 40: published Derek Lucas
- Revision 41: published
- Revision 42: published
- Revision 43: published Donato
- Revision 44: published Donato
- Revision 45: published
- Revision 46: published molant
- Revision 47: published molant
- Revision 49: published levinwong
- Revision 50: published levinwong
- Revision 51: published
- Revision 52: published
- Revision 53: published
- Revision 54: published
- Revision 55: published
- Revision 56: published dstereo
- Revision 57: published Thomas Giles
- Revision 58: published vamp
- Revision 59: published
- Revision 60: published
- Revision 61: published
- Revision 62: published Rob
- Revision 63: published
- Revision 64: published
- Revision 65: published
- Revision 66: published
- Revision 68: published
- Revision 69: published
- Revision 70: published
- Revision 71: published
- Revision 72: published
- Revision 73: published nomiadcode
- Revision 74: published
- Revision 75: published
- Revision 76: published
- Revision 77: published
- Revision 78: published
- Revision 79: published
- Revision 80: published
- Revision 81: published
- Revision 82: published
- Revision 83: published
- Revision 84: published
- Revision 86: published
- Revision 88: published
- Revision 89: published
- Revision 90: published
- Revision 91: published
- Revision 92: published
- Revision 93: published
- Revision 94: published
- Revision 95: published
- Revision 96: published
- Revision 97: published
- Revision 98: published
- Revision 99: published Serge Karchmit
- Revision 100: published
- Revision 101: published
- Revision 102: published micha.com
- Revision 103: published for length
- Revision 104: published
- Revision 106: published Bryan Crow
- Revision 107: published Bryan Crow and last updated
- Revision 108: published monil
- Revision 109: published
- Revision 110: published
- Revision 111: published
- Revision 113: published
- Revision 114: published
- Revision 115: published
- Revision 116: published
- Revision 117: published Katniss
- Revision 118: published
- Revision 119: published senc
- Revision 120: published XPoli
- Revision 121: published
- Revision 122: published
- Revision 123: published Mikko
- Revision 124: published
- Revision 125: published Rafael Grillo
- Revision 126: published TakuyaMotoshima
- Revision 127: published
- Revision 128: published raina77ow
- Revision 129: published
- Revision 130: published tm
- Revision 131: published
- Revision 132: published Steve
- Revision 133: published
- Revision 134: published Steve
- Revision 135: published
- Revision 136: published Reece Lucas
- Revision 137: published Reece Lucas
- Revision 138: published Octave Raimbault
- Revision 139: published
- Revision 140: published
- Revision 141: published Hang Ye
- Revision 142: published Hang Ye
- Revision 143: published Hang Ye
- Revision 144: published Rich Choy
- Revision 145: published Allan Raquin
- Revision 146: published George Tsafas
- Revision 147: published George Tsafas
0 Comments