i've noticed strange technique in javascript i've used increase performance in repetitive processes paint on canvas. in future, plan use sharedbufffer or sharedcanvas when become implemented, in meantime, general idea use:
function somecontinuousprocess(intervals, delay) { var count = 0; var span = document.queryselector('span'); function someexpensivefunction() { if (count >= 1e9) { return false; } { count++; } while (count % 1e5); span.textcontent = count; return true; } function wrapper(index) { var start = performance.now(); if (someexpensivefunction()) { var delta = performance.now() - start; // logic here determine new // values `intervals` , `delay` scheduler[index] = settimeout( wrapper.bind(null, index), delay ); } } var scheduler = []; function startscheduler() { (var = 0; < intervals; i++) { scheduler[i] = settimeout( wrapper.bind(null, i), delay ); } } function stopscheduler() { (var = 0; < scheduler.length; i++) { cleartimeout(scheduler[i]); } scheduler = []; } startscheduler(); } int.onchange = del.onchange = () => { var intervals = parseint(int.value); var delay = parseint(del.value); if (!isnan(intervals) && !isnan(delay)) { somecontinuousprocess(intervals, delay); } };<input placeholder=intervals id=int> <input placeholder=delay id=del> <span></span>if mess around parameters, you'll find of course delay , intervals both make significant difference in performance. point, if set many intervals delay, performance gain turn performance drop, along rendering thread unresponsive.
my question is, possible adaptively select intervals , delay based on given someexpensivefunction? let's assume can have someexpensivefunction() return high resolution timestamp, performance.now(), how can use vary intervals , delay intelligently optimize performance?
this seems perfect opportunity use webworkers. executed in separate thread, not impact animations on main thread.
however, still required not postmessage often, or event loop in main thread chokes on sheer number of messages.
function simple() { var span = $('#v1'); var worker = new worker('data:text/javascript;charset=utf-8,' + encodeuri($('#someexpensivefunction').text())); worker.onmessage = progress => span.text(progress.data); worker.onerror = x => { debugger; }; } function withanim() { var span = $('#v2'); var worker = new worker('data:text/javascript;charset=utf-8,' + encodeuri($('#someexpensivefunction').text())); var latestmessage = 0; worker.onmessage = progress => latestmessage = progress.data; worker.onerror = x => { debugger; }; var myreq; function step(timestamp) { span.text(latestmessage); if (latestmessage < 1e9) myreq = requestanimationframe(step); } myreq = requestanimationframe(step); } simple(); withanim();<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> <div id=v1></div> <div id=v2></div> <script type="text/worker" id="someexpensivefunction"> var count = 0; var start = performance.now(); var reportpersec = 100; //change var delay = 1000/reportpersec; { //some un-interrupable task //it might useful put in settimeout(0), if want use onmessage data work on main thread { count++; } while (count % 1e2); //report progress if (performance.now() - start > delay) { postmessage(count); start = performance.now(); } } while (count < 1e9); postmessage(count); //make sure send 'done' </script>
Comments
Post a Comment