Tag Archives: javascript

Array merge in JavaScript

What makes array to merge in JavaScript?

Actually there aren’t so many array functions in JavaScript. As you know you can join, sort, etc. which methods are pretty basic. What I’d like to do is something similar to PHPs’ array_merge and than array_unique.

With JavaScript that seems pretty impossible. You can merge them with the .concat function as in the example bellow:

var a = [1,2];
var b = [3,4];
a.concat(b);

this gives you array with four elements. But when it comes to trim all the duplicates as it’s array_unique in PHP, well that’s really impossible. You’ve to do it by yourself, and I don’t thing this is the best technique. That slows down the code and you should avoid it!

What if your site doesn’t use all of the CSS selectors?

Why my site doesn’t use all of the CSS however?

Well someone can ask how you can have CSS that contains selectors that aren’t used on the site. There are two reasons to happen and most of the cases both of them are true.

The first reason is that not all of the pages in a site need all of the selectors. Imagine large web based application with lines of CSS and one of the sites’ pages is the “about” page where you’ve only the header, the footer and some text. That’s my favorite example! In fact you don’t need to load the whole CSS file just to apply only few selectors for this page. In most of the cases this is the reason to have unused selectors.

The second reason is that during the development process most of the code become old and therefore unused. You start by writing some CSS selectors which after changing the requirements, and the layout are no longer used. But the fear to ruine the layout because some other page can break after the removal of some selectors make the CSS to grow and fill with unused code.

Now you can overcome this problem by simply using a software (JavaScript) that helps you determine which selectors are never used. Check out this brilliant solution called helium.

What should I optimize first in my web page?

I start with the optimization process …

It’s a common question! Where do I begin with the optimization process. Should I start with JavaScript or with some simple Apache optimizations? The answer is pretty simple and it’s related to a very, very simple technique.

Look what Firebug is saying

Yeah, look at the Firebug. You can check what’s taking most of the time to load. If it’s some server site script you can try caching it, if it’s a JavaScript file load, than you can try minify/compile it. Another good tool is the Safari developer tool. Than you can graphically understand what part of the sites’ components are slowing down the loading process. Whether the images or the JavaScript, well check that out with the Safari browser.

Finally what I do?

Once you know what’s the thing slowing down the site, start with its optimization! It’s really simple.

Google Closure Compiler?

Yes, it’s a question! After reading about jQuery version 1.4 I saw something that seemed to be pretty interesting to me. jQuery is now using Google Closure Compiler to minify and compile it’s source. The result was smaller output file.

Now I’m using YUI Compressor for my project and when I decided to make an experiment with Googles’ software it was just because I’d like to gain loading savings. In the project I’m working on I use two famous JavaScript libraries: jQuery and OpenLayers, and the result was really good. The compiled code was smaller than the YUI compressed source and the savings where more than 50% for non-gzipped requests.

The problem is that the resulting code, even successfully compiled after what Google said, was producing errors on the site and wasn’t working correctly. That why I’m leaving the title as a question and I’ll continue my experiments with this approach until I get any good results.