Speed up your JavaScript load time

Find content that can be speeded up

You must first find out what pictures of you and HTML are loading slowly with your script speed, here are the methods:

1. Firefox web-developer Toolbar

2. Firebug Plugin

3. octagate Sitetimer

Compress your code

1. Run jslint (online or downloadable version) to calculate your code and make sure the format is correct

2. YUI Compressor Use the command line to compress your code.

Install Yui Compressor (need to use Java), use the command line to run (x.y.z is the version number you downloaded)

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

The above code compresses the myfile.js into Myfile-min.js

Debug JavaScript that has been compressed

The already compressed code is difficult to debug, and you can debug it using a unit test framework Jsunit or save the code before compression.

Reduce duplicate Input compression command

Because the constant repetition of the input compression command is tedious, you can use the Create a script file to package the compression.

The following. bat file will compress all. js files and package. js

Compress_js.bat:  for class="tex-inline-html" alt="" in ('  dir/b ·. JS'do2>&1

You can also use other languages to meet your needs.

Optimizing JavaScript Code Writing locations

If you can, place your JS code at the end of the HTML file (before the </body> tag), because you can load and render the contents of the Web page (examples, tables, text, etc.) first. The user can see the loading of the content, so the page looks as if it were immediately corresponding.

Load JavaScript only when there is a need

Loads the JavaScript script dynamically, or loads the specified script when the user needs it.

You can use the following function to load arbitrary scripts from your domain name:

function$import (src) {varScriptelem = document.createelement (' script '); Scriptelem.setattribute (' SRC ', SRC); Scriptelem.setattribute (' Type ', ' Text/javascript '); document.getElementsByTagName (' head ') [0].appendchild (Scriptelem);}//import with a random query parameter to avoid cachingfunction$importNoCache (src) {varms =NewDate (). GetTime (). toString (); varSeed = "?" +MS; $import (src+seed);}

The function $import(‘http://example.com/myfile.js‘) creates and adds a script element to the head of your HTML file, just as if you were calling script directly in the head load.

The function $importNoCache will add a timestamp to the request to force your browser to get a new script.

If the test script is all loaded, you can use the following code:

if (myfunction) {  //  loaded}Else// not loaded yet  $import (' http://www.example.com/myfile.js ');}

Delay your JavaScript

var delay = 5; SetTimeout ("loadextrafiles ();", delay * 1000);

You can use the method above to detect the load status of a periodic check function and load it if it is not loaded.

You can tell the program to call the function at the end of the script.

Cache your files

Sets the browser cache cycle. You need to set up PHP or Apache. htaccess files.

The myfile.js myfile.js.php following code is renamed and written on the head:

<? PHP     Header ("Content-type:text/javascript; Charset:utf-8 ");     Header ("Cache-control:must-revalidate");     $offset = * 3 *;     $ExpStr = "Expires:".    gmdate ("D, D M Y h:i:s",     Time $offset) . "GMT";     Header ($ExpStr);? >

In the above example, the cache period is (60*60*24*3) seconds, which is 3 days.

For your own files, use this technique with care, especially for files that are being developed, and I recommend that you use caching techniques for files that do not change frequently.

If you accidentally cache for too long time, you can use the $importnocache above to add a timestamp method to load the new file, because the file name is different, so the browser will send a new version of the request.

Setting the browser cache does not optimize the speed of the original file load, but is useful for the same files that are used on many web pages.

Combine your files

Combine many JS files into a single JS file. Because the browser can only establish a limited number of network links within a certain time, so the small JS file into a large JS file it.

But you do not need the manual setting, you can load all the other JS files in a JS file. Because the content of all JS files in a JS file will become difficult to debug.

Do I need to use gzip?

You may need to use it, but know that the old browser is having problems processing the compressed content.

But the web is moving forward, and mainstream web sites such as Google and Yahoo are using this technology, and the old browser usage will only go back and not forward.

And the advantage of using this technology is that you can compress your website by 75% or more, and it's tempting to say that.

Original: http://betterexplained.com/articles/speed-up-your-javascript-load-time/

Speed up your JavaScript load time