This JavaScript article tutorial provides many full-detailed solutions as well as JavaScript tools, online web-based applications for the web developers to optimize speed, loading time of JavaScript codes - one of the factors to gain better performance for our websites.

These solutions in this JavaScript article post are listed from basis, such as: load JavaScript files at the bottom of the HTML page, group JavaScript files together, compress JavaScript source codes, etc to many advance customized solutions, along with many web services, web tools, online website optimizers to make website optimizations better, more efficient.

Please go to the detailed-post page for full instructions and solutions, or read other related articles below:
- Speed Up JavaScript Performance with SharePoint Minifier
- 20+ Helpful Web Tools for Better Code Development
- Writing JavaScript Code Efficiently
- Organizing your JavaScript code Better

• Demo
• Enlarge
• Reload
• New window

Ajax

Favor lightweight formats in general; the best is JSON and
a character-delimited custom format. If the data set is large and parse
time becomes an issue, use one of these two techniques:

JSON-P data, fetched using dynamic script tag insertion. This treats the
data as executable JavaScript, not a string, and allows for extremely
fast parsing. This can be used across domains, but shouldn't be used
with sensitive data.

A character-delimited custom format, fetched using either XHR or dynamic
script tag insertion and parsed using split(). This technique parses
extremely large datasets slightly faster than the JSON-P technique, and
generally has a smaller file size.

XML has no place in high-performance Ajax.

Cache data! The fastest Ajax request is one that you don't have to make.
There are two main ways of preventing an unnecessary request:

• On the server side, set HTTP headers that ensure your response will be
  cached in the browser.
• On the client side, store fetched data locally so that it doesn't have
  be requested again.

Multipart XHR can be used to reduce the number of requests, and can
handle different file types in a single response, though it does not
cache the resources received.

Some more guidelines that will help your Ajax appear to be faster:

• Reduce the number of requests you make, either by concatenating
  JavaScript and CSS files, or by using MXHR.
• Improve the perceived loading time of your page by using Ajax to fetch
  less important files after the rest of the page has loaded.
• Ensure your code fails gracefully and can handle problems on the
  server side.
• Know when to use a robust Ajax library and when to write your own
  low-level Ajax code.

Programming Practices

• Avoid the use of eval() and the Function() constructor.
• Pass functions into setTimeout() and setInterval() instead of strings.
• Use object and array literals when creating new objects and arrays.
• Avoid doing the same work repeatedly.
• Use lazy loading or conditional advance loading when browser-detection
  logic is necessary.
• When performing mathematical operations, consider using bitwise
  operators that work directly on the underlying representation of the
  number.
• Native methods are always faster than anything you can write in
  JavaScript.

Building and Deploying

The build and deployment process can have a tremendous impact on the
performance of a JavaScript-based application. The most important steps
in this process are:

• Combining JavaScript files to reduce the number of HTTP requests
• Minifying JavaScript files using the YUI Compressor
• Serving JavaScript files compressed (gzip encoding)
• Making JavaScript files cacheable by setting the appropriate HTTP
  response headers
• Work around caching issues by appending a timestamp to filenames
• Using a Content Delivery Network to serve JavaScript files;
• All these steps should be automated using build tools

Tools

Minification

• The Google Closure Compiler.
• Smasher
• JSMin
• YUI Compressor

Profiling

• The YUI Profiler,
• Page Speed
• YSlow
• dynaTrace Ajax Edition

Development

• Firebug
• Internet Explorer Developer Tools
• Safari Web Inspector
• Chrome Developer Tools

Proxies

• Fiddler
• Charles Proxy

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New