Sunday, 23 February 2014

Performance Dart vs Dart2JS vs JavaScript

After some time without having time for Dart I decided to do a little web project with Dart and MongoDB.
For doing that I have to go deeper in to the language.  I started reading "Dart in action" (I completely recommend this book for learning in Dart).

While I was reading the book, I read a chapter about the dart2js function. This function converts dart source code to JavaScript code. The author speaks about the hard work made by google to try to do the conversion between Dart and JavaScript as efficient as they can. After reading this I thought about writing an article about this topic.

What I am going to prove is the performance of Dart, JavaScript converted from Dart and JavaScript doing a easy task: Calculate the first 250.000 prime numbers.

There are thousand different forms to calculate if a number is prime or not. I am not trying to prove what is the most efficient one, what I am trying to prove what is the fastest combo (browser + "language") to calculate them using the same algorithm.

These are the source codes I have used.


performace_js.dart

import 'dart:html';
import 'dart:core';
import 'dart:async';

void main() {
  InputElement start = querySelector("#start");
  start.onClick.listen(prime_number);
}

void prime_number(Event e){
  for(int w=0;w<10;w++){
    int numberOfPrimes =0;
    var start = new DateTime.now();
    for (int i=0;i<=250000;i++){
      if (isPrime(i)) numberOfPrimes++;
    }
    var end = new DateTime.now();
    var timeElasped= end.difference(start);
    print(timeElasped);
  }
}

bool isPrime(int number){
 
  for(int i=2;i<number;i++) {
    if(number%i==0)
      return false;
  }
  return true;
}
performace_js.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Performace JS</title>
<link rel="stylesheet" href="performace_js.css">
</head>
<body>
  <h1>Performace JS</h1>

  <div id="sample_container_id">
    <input type="button" id="start" value="Click_me" />
  </div>

  <script type="application/dart" src="performace_js.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>
performace_js2.html (HTML+JAVASCRIPT)

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Performace JS</title>
<link rel="stylesheet" href="performace_js.css">
<script>
     function isPrime(num) {
        if(num < 2) return false;
        for (var i = 2; i < num; i++) {
           if(num%i==0)
               return false;
        }
      return true;
  }
     
     function prime_number(){
       for (var w=0;w<10;w++){
            var numberOfPrimes=0;
            var start = new Date().getTime();
          for (var j=0;j<=250000;j++){
            if(isPrime(j)==true){
              numberOfPrimes++; 
            }
          }
          var end = new Date().getTime();
          var time = end - start;
          console.log('Execution time: ' + time + ' aaaaa '+ numberOfPrimes);
       }
     }
</script>
</head>
</head>
<body>
  <h1>Performace JS</h1>
  <div id="sample_container_id">
    <input type="button" id="start" value="Click_me" onclick="prime_number()" />
  </div>
</body>
</html>

With this code we get an easy web page :



After testing the Dart, JavaScript converted from Dart and the JavaScript code the results are these:

Run/BrowserDartiumChrome dart2jsFirefox dart2jsIE dart2jsChromium JSChrome JSFirefox JSIE
 JS
110,9013,6722,9434,7810,8110,8112,3420,74
210,8613,1122,9034,8810,8610,7811,5720,57
310,8913,1022,8934,6510,7910,7611,5720,58
410,9013,0922,8934,7010,7710,8411,5820,56
510,8913,1122,8734,6510,7510,7711,5320,65
610,8413,0922,8734,6810,8110,8011,5520,63
710,8013,1522,8834,6810,8310,8011,5320,66
810,8513,1322,8934,6710,8910,7811,5520,69
910,8413,2022,8934,6510,7810,8011,5520,89
1010,9413,2522,9134,6810,7710,8211,5620,62
Average10,871613,18922,89334,703410,805610,795511,631720,6599

From this research we can get several conclusions:
  • Dart is close to be as fast as JavaScript.
  • The conversion from dart to JavaScript is close to 2 seconds slower than pure JavaScript.
  • The JavaScript engine of Internet Explorer (version 11.0.96) is shit.
  • Firefox doesn't like working with JavaScript generated by dart2js.

This are the conclusions I can get. This week I will do another research about how they manage the DOM and I will write a post like this to try to explain what I find out.

P.S.: The number of prime number between 0 and 250.000 are 22044.