JS performance optimization How to faster load your JavaScript page _javascript tips

Make sure your code is as concise as possible

Don't rely on javascript for everything. Do not write repetitive scripts. To make JavaScript as a candy tool, it only plays a role in beautification. Don't add a lot of JavaScript code to your site. Use it only when necessary. Use it only when it does improve the user experience.

Minimizing DOM Access

Using JavaScript to access DOM elements is easy, the code is easier to read, but the speed is slow. Here are a few key points: restrict the use of JavaScript to decorate a page, and cache references to access elements. Sometimes, when your site relies on a lot of DOM changes, you should consider limiting your markup. This is a good reason to switch to HTML5 and discard the original XHTML and HTML4. You can view the number of DOM elements as long as you enter: document.getElementsByTagName (' * ') in the console of the Firebug plug-in. Length.

Compress code

The most effective way to provide a compressed JavaScript page is to compress your code with the JavaScript compression tool, which compresses variables and parameter names and then provides the resulting code, using gzip compression.

Yes, I did not compress my main.js, but you have to check for any jquery plugins that are uncompressed and don't forget to compress them. Here's a list of several scenarios for compression.

Yui Compression Tools (jquery development team to use it), Beginner's Guide

(Http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor), second guide (http://vilimpoc.org /research/js-speedup/) and the official website (http://developer.yahoo.com/yui/compressor/).

Dean Edwards Packer (http://dean.edwards.name/packer/)

Jsmin (Http://crockford.com/JavaScript/jsmin)

　gzip Compression: The idea behind it is to shorten the time to transfer data between browsers and servers. After shortening the time, you get a file titled Accept-encoding:gzip,deflate. But there are some drawbacks to this compression method. It consumes processor resources (in order to compress and decompress) on both the server side and the client, and also takes up disk space.

　　Avoid eval (): although eval () sometimes brings some efficiency in terms of time, it is absolutely wrong to use it. Eval () causes your code to look dirtier and will escape the compression of most compression tools.

Tools to speed up JavaScript loading: lab.js

There are a number of great tools to speed up JavaScript loading. One of the tools worth mentioning is lab.js.

With lab.js (loading and blocking JavaScript), you can load JavaScript files in parallel, speeding up the overall loading process. In addition, you can set an order for the scripts that need to be loaded, which ensures the integrity of the dependencies. In addition, developers claim that the speed of their web site has increased twice times.

Using the appropriate CDN

Many web pages now use a Content distribution network (CDN). It can improve your caching mechanism because everyone can use it. It also saves you some bandwidth. You can easily use ping detection or use Firebug to debug those servers in order to figure out which aspects of the data will speed up. When choosing a CDN, take care of the location of the visitors to your site. Remember to use the common repository whenever possible.

Several CDN schemes for jquery:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js--Google Ajax, for more information on the library see http://code.google.com/ Apis/libraries/devguide.html#libraries.

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js--Microsoft's CDN

Http://code.jquery.com/jquery-1.4.2.min.js--edgecast (MT).

To mount JavaScript at the end of a Web page

If you are concerned about the user, it is a good idea for the user not to leave your Web page because of the slow Internet connection. Ease of use and users in the first place, JavaScript at the bottom. This may be painful, but you should be prepared and some users will disable JavaScript. You can place some JavaScript that needs to be mounted in the header, but only if it is loaded asynchronously.

To mount the trace code asynchronously

This is very important. Most of us use the Google Analytics tool (Google Analytics) to get statistical data. This is good. Now take a look at where you put your tracking code. Is it in the head? Or does it use document.write? Then, if you don't use the Google Analytics tool to track code asynchronously, you can only blame yourself.

This is the way Google Analytics tools are tracking code asynchronously. We have to admit that it uses DOM instead of using document.write, which might be more suitable for you. It is important that you detect some of these events before the page is mounted. Now think about this situation, your page has not even mounted, all users have closed the page. You have found a way to resolve the missing page views.

Copy Code code as follows:

var _gaq = _gaq | | [];
_gaq.push ([' _setaccount ', ' ua-xxxxxxx-xx ']);
_gaq.push ([' _trackpageview ']);
(function () {
var ga = document.createelement (' script '); Ga.type = ' Text/javascript '; Ga.async = true;
GA.SRC = (' https: ' = = Document.location.protocol? ' Https://ssl ': ' http://www ') + '. Google-analytics.com/ga.js ';
var s = document.getelementsbytagname (' script ') [0]; S.parentnode.insertbefore (GA, s);
})();

Not using Google Analytics tools? This is not a problem, and most of today's analytics tool providers allow you to use asynchronous tracing.

Ajax optimization

Ajax requests have a significant impact on the performance of your site. Here are some of the key points about Ajax optimization.

Caching your Ajax

Take a look at your code first. Can your AJAX cache? Yes, it relies on data, but most of your AJAX requests should be cached. In jquery, your request is cached by default, excluding the script and JSONP data types.

Use Get for AJAX requests

Post type requests that two TCP packets be sent (headers are sent first, then data is sent). Get type requests only need to send a packet (this may depend on the number of cookies you have). So, when your URL is less than 2K long, and you want to request some data, you might as well use get.

Using YSlow

When it comes to performance, YSlow is both simple and extremely effective. It can score your site, show which areas need to be corrected, and what to focus on.

Another trick: Pack your JavaScript into a PNG file

Imagine: Add your JS and CSS to the end of the picture, and then trim with CSS to get all the information you need in your application with an HTTP request.

I have found this method recently. It basically packs your javascript/css data into a PNG file. After that, you can split the package as long as you use the Canvas API Getimagedata (). In addition, it is very efficient. You can compress more than 35% of the data without shrinking it. and lossless compression! I have to point out that for larger scripts, you feel a "piece of" Loading time when the picture is pointing to the canvas and reading the pixel.
Original English: http://www.1stwebdesigner.com/design/load-JavaScript-faster/