How to make this jQuery page faster?

Question

I have a contact script. It uses jQuery for it ajax queries and animations.

I also use it with the hashchange plugin to fix the back button. Here is the slow part.

After the flip animation finishes, the form slowly disappears. It seems that browsers are blocking for a second. I am trying to do this instantly (without blocking).

Here is the function responsible for handling the hash change event:

handleHashChange : function () { // Get the name of the object and cache it var self = this, // Get the current hash hash = window.location.hash, // Cache the form height var formHeight = ''; // If the hash is #send or #error, don't do anything if (hash === "#sent" || hash === "#error") { return; } // Change the page title back to the default if(self.documentTitle && self.documentTitle != undefined) { document.title = self.documentTitle; } // Reset all inputs in the form self.inputs.val('').removeAttr('checked').removeAttr('selected'); // Get the height of the form formHeight = self.getHeight(self.form); // Show the transition self.showTransition(self.response, formHeight, function() { // Show the form self.form.fadeIn('fast', function() { // Show the button self.button[0].style.display = 'block'; // Focus the first input self.inputs[0].focus(); }) }) } 

All code can be seen at the link below, it is fully documented:

http://www.coolcontact.co.cc/beta/1.3/js/main.js

You can see that I used a lot of tips that I found on the Internet to optimize this script, except for using javascript native 'for' instead of '$ .each ()', but this is not that big deal here.

If someone wants to see slowness, try sending an empty message (verification is disabled) from the link below, then click the "Back" button in your browser:

(note: this is not in English, but guess it is pretty clear) ^ /)

http://www.coolcontact.co.cc/beta/1.3/

So how can I make this faster?

Answer 1

I think this is pretty fast, but here is what I noticed with your code.

This "if" statement is a bit redundant.

 if(self.documentTitle && self.documentTitle != undefined) { document.title = self.documentTitle; } 

A call to "self.documentTitle" returns false if its value is "undefined", so you do not need a second "self.documentTitle! = Undefined".

Instead, you can use the following:

 if(self.documentTitle){ document.title = self.documentTitle; } 

Remember that false, null, undefined, 0 and an empty string are evaluated as a false boolean.