CODEWITHSUNDEEP
javascriptjqueryperformance
Intuitisoft
Intuitisoft

Reputation: 1417

is it possible to pre-compiling library JavaScript to pure JavaScript?

I use JQuery to code in JavaScript. It's easy, less coding, more readable. When we compare JQuery to pure JavaScript, the JQuery is around 80% slower than pure JS.

So, JQuery (or other JS library) is a very good thing for the developer but at the end become a bad thing for the user : slower to load, slower to run.

JavaScript is running on the client side.

So, in my opinion, if I want to code easily with a frameworks it's my business.

It the developer's problem and the client don't have to see the difference.

I am wondering if is possible to code in JQuery, and compile it (locally) on a pure JavaScript.

I mean something like lesscss.

DOM access with Jquery

this JQuery code is faster to write but is 80% slower than pure JS : performance report

for example, the JQuery code :

   $('#mydiv').css('backgroundColor', 'red');
   $('#mydiv').hide();
   $('#mydiv').html('hello');

   $('#content .col').each(function () {
       $(this).html('ok')
   });

would be compiled to pure JS :

 document.getElementById('mydiv').style.backgroundColor = 'red';
 document.getElementById('mydiv').style.display = 'none';
 document.getElementById('mydiv').innerHTML = 'hello';

 var query = document.querySelectorAll('#content .col');
 for (var i = 0; i < query.length; i++) {
      query[i].innerHTML = 'ok';
 }

prototype.js class declaration

this prototype.js déclaration is faster to write but is 98% slower than pure JS : performance report

for example the prototype.js code : 

var Animal = Class.create({
  initialize: function(name, sound) {
    this.name  = name;
    this.sound = sound;
  },

  speak: function() {
    alert(this.name + " says: " + this.sound + "!");
  }
});
var cat = new Animal('Kitty', 'Meow');
cat.speak();

would be compiled to pure JS :

function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}

Animal.prototype.speak = function() {
  result = (this.name + " says: " + this.sound + "!");
}

var cat = new Animal('Kitty', 'Meow');
cat.speak();

At the end, the question is about to have good tools to code quickly without impact on the user.

Upvotes: -1

Views: 625

Answers (1)

Lacius
Lacius

Reputation: 11

I've not had any personal experience with this, but Google Closure Compiler might be your best bet.

https://developers.google.com/closure/compiler/?csw=1

"It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left."

This should make your code more efficient, although I'm not sure how effective it would be at specifically optimizing jQuery. It is unlikely you'll actually get fully "native" JavaScript.

Upvotes: 1

Related Questions