Shulou(Shulou.com)06/02 Report--

This article shows you how to load your JS page more quickly, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

JavaScript is extremely important now. Some sites use JavaScript to add charm, and many Web applications today rely on it, some of which are even written entirely in JavaScript. In this article, I will point out some important rules on how to use your JavaScript, what tools to use, and what benefits you will get from it.

Make sure the code is as concise as possible

Don't rely on JavaScript for everything. Don't write repetitive scripts. To use JavaScript as a candy tool is just to beautify it. Don't add a lot of JavaScript code to your website. Use it only when necessary. Use it only if it does improve the user experience.

Minimize DOM access

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

Compressed code

To provide compressed JavaScript pages, the most effective way is to first use JavaScript compression tool to compress your code, this compression tool can compress variables and parameter names, and then provide the resulting code, using gzip compression.

Yes, I didn't compress my main.js, but you need to check to see if there are any uncompressed jQuery plug-ins, don't forget to compress. I have listed several schemes for compression below.

YUI compression tool (my favorite, which is used by the jQuery development team), 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 it takes to transfer data between the browser and the server. After shortening the time, you get a file titled Accept-Encoding: gzip,deflate. However, this compression method has some disadvantages. It consumes processor resources (for compression and decompression) and disk space on both the server side and the client side.

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

A tool to speed up JavaScript loading: Lab.js

There are many excellent tools that can speed up the loading of JavaScript. One tool worth mentioning is Lab.js.

With LAB.js (load and block JavaScript), you can load JavaScript files in parallel, speeding up the overall loading process. In addition, you can set a certain order for the scripts that need to be loaded, which ensures the integrity of the dependencies. In addition, developers claim that the speed on their sites has tripled.

Use the appropriate CDN

Many web pages now use the content Distribution Network (CDN). It can improve your caching mechanism because everyone can use it. It can also save you some bandwidth. You can easily use ping to detect or debug those servers with Firebug to figure out where you can speed up the data. When choosing CDN, take into account the location of the visitors to your site. Remember to use public repositories whenever possible.

Several CDN schemes for jQuery:

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

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).

Load JavaScript at the end of the page

If you follow the user, the user does not leave your page because of the slow Internet connection, which is a very good practice. Ease of use and users come first, and JavaScript comes last. This may be painful, but you should be prepared that some users will disable JavaScript. You can place some JavaScript that needs to be loaded in the header, but only if it is loaded asynchronously.

Load tracking code asynchronously

This is very important. Most of us use Google Analytics (Google Analytics) to get statistics. That's good. Now take a look at where you put your tracking code. Is it on the head? Or does it use [xss_clean]? Then, if you don't use Google Analytics to track code asynchronously, you have only yourself to blame.

This is what Google Analytics tools look like to track code asynchronously. We have to admit that it uses DOM instead of [xss_clean], which may be more suitable for you. It is important that it can detect some of these events before the page is loaded. Now think about this situation. Your page hasn't even loaded yet, and all users have closed the page. A solution has been found to solve the problem of missing page views.

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 [XSS _ clean] .insertBefore (ga, s);}) ()

Didn't use Google Analytics tools? This is not a problem, most of today's analysis tool providers allow you to use asynchronous tracking.

Ajax optimization

Ajax requests have a significant impact on the performance of your site. Next I'll introduce a few key points about Ajax optimization.

Cache your ajax

Take a look at your code first. Can your ajax be cached? Yes, it relies on data, but most of your ajax requests should be cacheable. In jQuery, your request is cached by default, excluding script and jsonp data types.

Use GET for Ajax requests

The POST type requests that two TCP packets be sent (first the header and then the data). The GET type request only needs to send one packet (this may depend on your number of cookie). So, when your URL is less than 2K long and you want to request some data, you might as well use GET.

Use ySlow

When it comes to performance, ySlow is both simple and extremely effective. It can rate your site, showing what needs to be corrected and what you should focus on.

Another trick: package your JavaScript into a PNG file

Imagine adding your JS and CSS to the end of the picture, then trimming it with CSS, and getting all the information you need in your application with a HTTP request.

I recently found this way. It basically packages your JavaScript/css data into PNG files. After that, you can unpack, as long as you use the canvas API's getImageData (). In addition, it is very efficient. You can compress about 35% more without shrinking the data. And it's lossless compression! I have to point out that for larger scripts, you will feel a "period" of loading time as the picture points to the canvas and reads the pixels.

The above content is how to load your JS page more quickly. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.