Wednesday, February 5, 2014

Guessing the Performance of Your Browser and Device Using Javascript

After coming out with the Javascript to guess the CPU speed previously, I discovered that the for-next looping codes are not enough to guess the performance of a device/browser.

I realized the looping is only good to guess the performance of the browser, it is not enough to guess the speed of the animation which is crucial in today's web presence.

I then came out with two sets of codes to assess the performance of the animation capability of a device of the browser. One is to test the moving of <SPAN> element, and the other is to test the performance of varying opacity of an element. Here are the codes:

<script>

var count1,d1,startTime1,endTime1,myLatency1;
var count2,d2,startTime2,endTime2,myLatency2;
var count3,d3,startTime3,endTime3,myLatency3;

function getSpeed() {

  var i,j;

  count1 = 0;
  d1 = new Date();
  startTime1 = d1.getTime();

  for (i=0; i<=1000000; i++) {
   count1++;
  }

  d1 = new Date();
  endTime1 = d1.getTime();
  myLatency1 = endTime1 - startTime1;

  document.getElementById('result').innerHTML = myLatency1;

  d2 = new Date();
  startTime2 = d2.getTime();

  moveSpan();

  d2 = new Date();
  endTime2 = d2.getTime();
  myLatency2 = endTime2 - startTime2;

  document.getElementById('result2').innerHTML = myLatency2;

  d3 = new Date();
  startTime3 = d3.getTime();

  for (j=0; j<8; j++) {
   changeOpacity();
  }

  d3 = new Date();
  endTime3 = d3.getTime();
  myLatency3 = endTime3 - startTime3;

  document.getElementById('result3').innerHTML = myLatency3;
}


function moveSpan() {
  var i;
  for (i=0; i<1000; i++) {
   document.getElementById('dummy').style.left = i+'px';
  }
  for (i=1000; i>-1; i--) {
   document.getElementById('dummy').style.left = i+'px';
  }
  for (i=0; i<1000; i++) {
   document.getElementById('dummy').style.left = i+'px';
  }
  for (i=1000; i>-1; i--) {
   document.getElementById('dummy').style.left = i+'px';
  }

}


function changeOpacity() {
  var i;
  for (i=0; i<10; i++) {
   document.getElementById('dummy').style.MozOpacity = i/10;
   document.getElementById('dummy').style.opacity = i/10;
   document.getElementById('dummy').style.filter = 'alpha(opacity=' + i*10 + ')';
  }
  for (i=10; i>-1; i--) {
   document.getElementById('dummy').style.MozOpacity = i/10;
   document.getElementById('dummy').style.opacity = i/10;
   document.getElementById('dummy').style.filter = 'alpha(opacity=' + i*10 + ')';
  }
}

function startMeasure() {
 setInterval("getSpeed()",500);
}


</script>

<body onload="startMeasure()">
<span id="dummy" style="background-color:#aabbcc;width:50px;height:50px;position:absolute"></span>
<br><br>
<font size=6>Your browser's Javascript Performance index is <font color=green><b><span id=result></span></b>.</font><br>
Your broswer's Animation Performance index is <font color=green><b><span id=result2></span></b>.</font><br>
Your broswer's Opacity Performance index is <font color=green><b><span id=result3></span></b>.</font></font>
</body>


Please note that you can modify the codes to iterate the looping more often if your device is of very high performance. For the devices I tested, as long as the index is less than 15, your device is capable of performing most of the animations you need without much problem. For those with higher numbers, the device may experience some speed problem when it comes to animation running with the browser.

Please also note that you need to assess the opacity and animation performance separately as I encountered vast speed variations for these two actions using different devices especially smartphones and tablet devices.

You can also calculate the average score for each test to get a accurate assessment of the target device. For example, you may decide to run less complicated animations if you get a high score (high latency) for the device.

Enjoy!
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)