Tag Archives: firebug

CSS effective selector

css, micro tutorial, , , , , ,

CSS optimization

Recently I posted an article about CSS optimization describing five simple steps you can do to speed up the page load time and the bowser execution time. One of the key features is to use effective selectors, but what exactly that means.

Parents and children

In CSS, after the name of cascading, there is a very powerful feature of inheritance and you can simply describe a child style by a selector which can be something like that:

div table tr td a { color: red; }

In reality is very, but very inefficient. Event it is a working example, the browser will find every anchor <a tag within the page than check if it’s child of a td, than tr and so on until the closing outer most div tag.

That’s why the browser is really hard to find every one of these tags just to apply a simple font color. What the big problem is that once you have thousands of tags in that page the browser starts to use CPU and the application starts to be irresponsive.

The solution

Of course there’s a simple solution, which can be described as transformation from inefficient to efficient selectors. Because the browser can find a tag way faster by a given ID or CLASS you can simply convert the code above with something like:

a.my-class { color: red; }

and than change a bit the markup with a tags with that specific class name. Which is a bit tricky, but speedups the performance a lot.

How can I find bad selectors?

Actually that is the big problem. Once you’re into the deep of web development the applications are so big, with so many CSS selectors and so many CSS rules that you simply cannot track that any more.

Hopefully there comes some tools that can describe you everything and point you the inefficient selectors. My personal choice is the Google’s Page Speed plugin, which can be installed to the Firebug on Mozilla Firefox. It can analyze the page and extract a list of inefficient and so called very inefficient selectors that must be fixed!

Firebug’s console.profile vs console.time

javascript, micro tutorial, , , , , , , ,

Firebug’s console.time!

This post is directly related to the previous post where I explain how to use the Firebug’s console object and in that case its time method. That is really powerful and gives the opportunity to track the performance of a sample JavaScript chunk of code. What it does not do is to give you a more detailed profile of that particular JS code.

That’s because the console’s profile method works on functions and if you’d like to profile a loop it will give you there’s nothing to be profiled. One workaround to that is to use closures.

JavaScript closures

A JavaScript closure is to make an anonymous function and to put the code in it, like so:

(function() {
 for (var i = 100000; i--; ) {
  var a = new Array();
 }
})();

Firebug’s console.profile()

That code can be than wrapped with both console.profile() and console.profileEnd() in something like:

console.profile('my profile');
(function() {
 for ( var i = 100000; i--; ) {
  var a  = new Array();
 }
})();
console.profileEnd('my profile');

That will give a more precise measurement like that one shown on the picture bellow:

firebug console.profile

Firebug’s console.time() accuracy

javascript, micro tutorial, , , ,

Firebug’s console.time()

As I wrote in my previous post Firebug is giving the ability to test performance of any chunk of JavaScript code with its console.time() method. One of the most discussed topics about performance and one of the most recently examples given in the web is the way to instanciate a new empty array in JavaScript.

new Array() vs. []

Which one is faster? This is the question we’ve seen so many times in the web. I decided to check it with the console.time() method. For my experiment I made 100000 new arrays both way:

var arr = new Array();

and

var arr = [];

Thus the sample code of the first experiment is:

<html>
 <body>
  <script>
   console.time('profile 1');
   for ( var i=0; i < 100000; i++) {
      var arr = new Array();
   }
   console.timeEnd('profile 1');
  </script>
 </body>
</html>

and the results are 12 ms. OK, so far so good. Now I’d like to test the same construction with the other way to make new array instance:

<html>
 <body>
  <script>
   console.time('profile 2');
   for ( var i=0; i < 100000; i++) {
      var arr = [];}
   console.timeEnd('profile 2');
  </script>
 </body>
</html>

And the result is pretty much the same – 11 ms. That’s why I choose to increase the number of iterations of this loop from 100,000 to 10,000,000 and the second chunk of code using the construction arr = [] is finishing its job for around 3400ms or a little bit more than 3 seconds, while the first one is a little bit faster – 2450ms or faster with almost a second.

What if we merge both chunks?

I decided to concatenate the code in something like:

<html>
 <body>
  <script>
  console.time('profile 1');
   for ( var i=0; i < 100000; i++) {
    var arr = new Array();
   }
  console.timeEnd('profile 1');
  console.time('profile 2');
   for ( var i=0; i < 100000; i++) {
    var arr = [];
   }
  console.timeEnd('profile 2');
  </script>
 </body>
</html>

results:

and yet again the same results as if they were separated tests, which of course seems to be pretty natural.

Use console.time()!

That’s the way to get clear example of how fast your code is. Actually this is not a pure sense profile, where you can get minimum and maximum performance times but it gives pretty accurate values.

Profiling JavaScript with Firebug. console.profile() & console.time()!

javascript, micro tutorial, , , , , , , , , , ,

Firebug and the console object

Although my impression is that most of the web developers use Firefox and most of them are using Firebug, I’m not sure that they use the full potential of this brilliant software.

Firebug’s console view

Firebug is a very powerful tool helping those like me doing his job. But what’s behind the mostly used Firebug’s tools and what’s in the API.

console.log()

For a typical JavaScript programmer the console.log() function is one of his best friends. It can dump useful information in the console tab of the Firebug making everything quite clear. But have you ever asked yourself how to improve your code, how to measure its performance against some constructions.

Performance of JavaScript

I’m sure many of us have read enough articles out in the web about JS performance. Nowadays when the web apps become bigger and bigger, this topic is rising from the bottom of the interesting topics pool. Now everybody’s concerned about it’s app performance and speed.

You’ve probably heart about some basic advices. What to use, what not to use. In a short example I’ll mention only that everybody knows that .appendChild is far slower than the innerHTML. But why is that? How can be sure it’s true.

As I wrote recently you should instantiate your new arrays in javascript with the following construction:

var a = [];

instead of:

var a = new Array();

but as I’ll write here that’s not always true.

console.profile()

One of the useful methods of the Firebug’s console object is the profile() method. It gives you the power to measure timing and performance of any JS function. As described in the Firebug’s web page:

The high-fi approach is to use the JavaScript profiler. Just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards. Firebug will log a detailed report about how much time was spent in every function call in between.

With the simple construction like:

<html>
<body>
<script>
    myFunc = function() {
        var a = [];
    }				

   console.profile();
   myFunc();
   console.profileEnd();
</script>
</body>
</html>

Firebug’s profile output

The simple problem is that thus you cannot just measure some code that’s not a function. This will result in empty profile output in the console’s view:

But hopefully there comes the other method of the console object.

console.time()

It gives anything you’d like to know even if it’s not closed into a function.

Note: remember that both profile and time methods goes with their related profileEnd and timeEnd methods. You’re supposed to enclose the chunk of code you measure with that to be sure that the Firebug’s console will stop the profilers on time.

Now you can simply ask the profiler: what is faster?

Writing a jQuery plugin – (part 2). Sample plugin.

javascript, micro tutorial, , , , ,

To be breve I’ll write some sample code and quickly describe it afterwards. So what’s a plugin. Lets make a simple logging plugin that overrides the console.log function and prevents MSIE browser to throw an error when this function misses.

The thing I’d like to achieve is something like:

$.log(‘my message’);

when I call it from a pure jQuery code.

function log( msg ) {
   console.log && console.log(msg);
}

That code looks quite correct, but to make all this into a jQuery plugin will need something more.

(function(jquery) {

   var log = function( msg ) {
      console.log && console.log(msg);
   };

   jquery.log = log;

}(jQuery));

After that we can call the $.log function with success and to perform logging of everything we want into the Firebug’s console.

The simple technique used here is a JavaScript closure and simple exportation of the single function log.