Showing posts with label performance. Show all posts
Showing posts with label performance. Show all posts

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!
Read More »
Posted by at No comments:
Labels: , ,

Tuesday, August 6, 2013

My Javascript to Guess Processor's Speed



Updated on 5th of February, 2014: There is an updated version for this posting here.



This is necessary when your web page runs a lots of animation using javascript. If the target browser is slow in computing speed, it is advisable to reduce the amount of animation to run on the machine.

Here's my simple way to check the speed of a computer using simple Javascript:

<script>

var count;
var d = new Date();
var startTime = d.getTime();

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

var d = new Date();
var endTime = d.getTime();
var myLatency = endTime - startTime;

</script>


myLatency contains my speed index.

After testing using this script, iPad 1 will give myLatency more than 200, iPad 2 between 100 and 200, and iPad 3/4 less than 100.

As for the PC/Mac, myLatency is around 20-100 for dual core processor and quad core processor less than 10. Anyway, the myLatency also depends on the tasks the computer is running in the background concurrently and the core speed in GHz. Anyway, it is just a guess speed Javascript and it should not be treated as a sure thing for the speed test.

Read More »
Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)