javascript - Faster way of scaling text in browser? (help interpret test) -

i need scale lots of text nodes in browser (support of modern desktop , mobile browsers).

if right there 2 options offer performance: scaling text objects in canvas or scaling text nodes in dom using transform:matrix.

i have created scenario test both versions results inconclusive. uncomment testdom() or testcanvas() function start test. (i using jquery , createjs framework because convenient. possible use vanilla js don't think bottleneck here). (it matters portion of screen see please switch full screen view in codepen).

http://codepen.io/dandare/pen/pejyyg

var width = 500; var height = 500; var count = 200; var step = 1.02; var min = 0.1; var max = 10; var stage; var canvas; var bg; var canvastexts = []; var domtexts = []; var dommatrix = []; var dom;  function testdom() {     (var = 0; < count; i++) {         var text = $("<div>hello world</div>");         var scale = min + math.random() * 10;         var matrix = [scale, 0, 0, scale, math.random() * width, math.random() * height];         text.css("transform", "matrix(" + matrix.join(',') + ")");         domtexts.push(text);         dommatrix.push(matrix);     }     dom = $('#dom');     dom.append(domtexts);     settimeout(tickdom, 1000); }  function tickdom() {     (var = 0; < domtexts.length; i++) {         var text = domtexts[i];         var matrix = dommatrix[i];         var scale = matrix[0];         scale *= step;         if (scale > max)             scale = min;         matrix[0] = matrix[3] = scale;         text.css("transform", "matrix(" + matrix.join(',') + ")");     }     requestanimationframe(tickdom); }  function testcanvas() {     $('#dom').hide();     stage = new createjs.stage('canvas');     createjs.touch.enable(stage);     createjs.ticker.timingmode = createjs.ticker.raf;     canvas = stage.canvas;     devicepixelratio = window.devicepixelratio || 1;     stage.scalex = devicepixelratio;     stage.scaley = devicepixelratio;     console.log('devicepixelratio = ' + devicepixelratio);     stage.mousemoveoutside = true;     stage.preventselection = false;     stage.tickenabled = false;     stage.addchild(bg = new createjs.shape());     bg.graphics.clear();     bg.graphics.f('#f2f2f2').drawrect(0, 0, 2 * width, height);     canvas.width = 2 * width * devicepixelratio;     canvas.height = height * devicepixelratio;     canvas.style.width = 2 * width + 'px';     canvas.style.height = height + 'px';     stage.update();     (var = 0; < count; i++) {         var text = new createjs.text("hello world", "10px", "#333333");         text.scalex = text.scaley = min + math.random() * 10;         text.x = math.random() * width;         text.y = math.random() * height;         stage.addchild(text);         canvastexts.push(text);     }     stage.update();     settimeout(tickcanvas, 1000); }  function tickcanvas() {     (var = 0; < canvastexts.length; i++) {         var text = canvastexts[i];         text.scalex = text.scaley *= step;         if (text.scalex > max)             text.scalex = text.scaley = min;     }     stage.update();     requestanimationframe(tickcanvas); }  testdom(); //testcanvas(); 

my questions:

1. is possible improve performance of tests? doing wrong?
2. the first 5-10 seconds slower don't understand why. browser somehow cashes text objects after time? if yes, test unusable real world scenario testing objects don't zoom in loop longer period of time?
3. according chrome profiling tool dom version leaves 40% more idle time (is 40% more faster) canvas version canvas animation looks smoother (after initial 5-10 seconds of lagging), how should interpret profiling tool results?
4. in dom version trying hide parent of text nodes before apply transformations , unhide not matter because transform:matrix on absolutely positioned element not cause reflow, right?
5. the dom text nodes have advantages on canvas nodes native mouse on detection cursor: pointer or support decorations (you can not have underlined text in canvas). else should know?
6. when setting transform:matrix have create string compiler must parse numbers, there more efficient way of using transform:matrix?

q.1

is possible improve performance of tests? doing wrong?

yes , no. (yes improve , no nothing inherently wrong (ignoring jquery))

performance browser, , device dependent, example firefox handles objects better arrays, while chrome prefers arrays. there long list of differences javascript.

then rendering dependent on hardware, how memory, capabilities, , particular drivers. hardware hates state changes, while others handle them @ full speed. limiting state changes can improve speed on 1 machine while code complexity impact devices don't need optimisation.

the os plays part.

---

q.2

the first 5-10 seconds slower don't understand why. browser somehow cashes text objects after time? if yes, test unusable real world scenario testing objects don't zoom in loop longer period of time?

performance testing in javascript complicated , whole application (like test) not @ practical.

why slow? many reasons, moving memory display device, javascript optimising compilers run while codes runs , recompile if sees fit, impacts performance un-optimised js slooooowwwwwwww... , seeing run unoptimised.

as well. in environment code pen having deal code runs in same context yours, has memory, dom, cpu, gc demands in same environment yours , code can not said isolated , profiling results accurate.

---

q.3

according chrome profiling tool dom version leaves 40% more idle time (is 40% more faster) canvas version canvas animation looks smoother (after initial 5-10 seconds of lagging), how should interpret profiling tool results?

that nature of requestanimationframe (raf), wait till next frame ready before calls function. if run 1ms past 1/60th of second have missed presentation of current display refresh , raf wait till next due 1/60th minus 1ms before presentation , next request called. result in ~50% idle time.

there not can done make render function smaller , call more often, overhead calls.

raf can called many times during frame , present renders during frame @ same time. way not overrun idle time if keep eye on current time , ensure not overrun 1/60th second window of opportunity.

---

q.4

in dom version trying hide parent of text nodes before apply transformations , unhide not matter because transform:matrix on absolutely positioned element not cause reflow, right?

reflow not triggered until exit function, hiding parent @ start of function , unhiding @ end not make difference. javascript blocking, means nothing happen while in function.

---

q.5

the dom text nodes have advantages on canvas nodes native mouse on detection cursor: pointer or support decorations (you can not have underlined text in canvas). else should know?

that depend on intended use is. dom offers full api ui , presentation. canvas offers rendering , pixel manipulation. logic use if takes more code via dom canvas, canvas job , visa versa

---

q.6

when setting transform:matrix have create string compiler must parse numbers, there more efficient way of using transform:matrix?

no. css way.