Some Basic Tips and Tricks for Speeding Up JavaScript

This JavaScript tutorial provides some basic tips and tricks to speed up the load and performance of JavaScript in your web application, JavaScript application.


Sampled by © JavaScriptBank.com

JavaScript is in the middle of a massive comeback and developers are abusing it. JavaScript addons and widgets are becoming are the norm for large sites and are so easy to install, in large numbers and quantities. For example Mashable loads nearly a mega byte in JavaScript files. In this article I will go through some tips to help you optimize your JavaScript and reduce both the load on your servers and make your pages respond faster.

js

Cut code

The first and biggest thing you should do in optimizing your JavaScript is to cut down on the size, cut out functions that don't do a lot and try and reduce the size of your file. This goes along side with the question do you need a framework? Think it through, is your site big enough to warrant loading a full framework (typically in excess of 3000 lines), if you just want to do some very simple functions write them in JavaScript without a framework.

If you really need to load a framework use the ones available on the Google AJAX libraries API, most frameworks are available. These are just the frameworks hosted on Google, they work of the principle that if one website uses these files then the user will still have the files in the browser cache and won't need load them again.

Minimize

Run your code through a JavaScript minimiser, this will shrink all the files to be really small there are a number of popular ones available (this is also applicable for CSS):

Expires headers

Set your expires headers, this should be standard for all your static content like CSS and Images as well. A browser may need to make many requests to your server in order to get all the content, by using an expires header you make those components cacheable for a set period of time, therefore the browser will need to make less HTTP requests. For a more detailed explanation, as well other components which need improving reading the Yahoo Developer Network Guide on optimisation.

Loading Scripts Asynchronously

Browsers are only single threaded, this means that it can only really load one thing at a time. However there are ways around this, and ways you can load multiple files without locking up the browser. Give Steve Souders articles on Loading Scripts without Blocking if you are interested in implementing this. I am currently working on a prototype based class to do this which will be published on this blog in the coming months.

Defer JavaScript Loading

Steve Souders talks about deferring JavaScript loading in his series about high performance websites. It's quite a simple idea really, don't load up the JavaScript until you require it. Therefore if your JavaScript is not needed on page load this should be deferred to be loaded up later.

Evaluate

Make sure you evaluate your performance when trying to optimize JavaScript. I personally love the Firefox plugin FireBug, and it's plugin YSlow. However there are lots of other methods and tools you can use to evaluate you performance, the best by far is the firebug profiler. Micheal Sync has a fantastic tutorial on the FireBug profiler which is well worth a read.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
16 Free Code Syntax Highlighters by Javascript For Better Programming
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com