Javascript: problem while optimizing the performance of loading

[Betelgeuse]

The main problem in the loading of JavaScript lies in how they charge the same browser. In newer browsers, the resources accessed through a tag script are downloaded in parallel, as all the others (CSS, images, etc). However, they are interpreted and executed individually in order of loading while the interpretation and rendering of other resources is blocked. This scenario is even worse in browsers such as Internet Explorer 6 and 7, where the scripts are even downloaded individually blocking the download of all other resources. I think that developers of JavaScript must be knowing about it. More comments on Javascript as optimizing the performance of loading would be good.

[Joko]

The intention of the developers, this behavior is to ensure that any dependencies between scripts and functions are met from start to load the DOM is already available. In practice, the loading of two scripts 3KB 50KB and the browser will wait until the first is downloaded and played the second put on hold. The factors that contribute to the success of a website are many, ranging from the effectiveness of communication to the quality of content. From a technical point of view one of the main aspects to consider is the speed of loading pages. Poor performance in this area may be linked to multiple causes: unreliable connections, server overload, or too many images are not optimized. Since JavaScript has become ubiquitous on web sites, the developers' attention is paid to the management and optimization of the script, even considering that they are often a major factor of stress for your browser.

[Wannabe]

Given this problem, the solutions most commonly spread involved in three directions:

• reducing the weight of files across the collapsing code. YUI Compressor , Closure Compiler , and Packer are among the most reliable and effective tool in this process.
• decreasing the number of files to download through the concatenation of the script.
• placing the tag script before closing the body instead of nell'head, so that the rendering engine to meet them only after downloading the basic resources rendering the page as HTML and CSS, but before the full charge of the DOM.

Although there are online versions of the instruments described above, is also available as an Eclipse plugin called Web Optimizer that integrates easily with compression and optimization directly in your project.

[RogerFielden]

Although concatenation are considered good practice in the publishing phase of a project, it is important to highlight some side effects. First, the chain involves the generation of large files which, being downloaded from one process can increase download times paradoxically decreasing performance. Furthermore, the concatenation are effective when applied to large script and common to the entire project (eg libraries), while it would be unnecessary to include scripts used in only a few, certain pages (like Lightbox or client-side validators ) to prevent them from being loaded unnecessarily. The rule can be deduced from the preceding paragraphs is that, since each project has special features to blindly follow the basic rules of optimization does not always mean better results.

[Jevin]

There are several techniques that can help us properly mixed well in every situation, the most interesting of these is the asynchronous loading of the script to get around the blocking nature of the tag script. Although the latest versions of browsers to make available tools such as Web Workers, their limited support (blank in IE) has forced developers to implement alternative solutions. Other than that it should be noted that the Web Workers, just the kind of background processes can not interact with the DOM of the document needs to operate more. Today, a proven technique to bypass the blocking nature of the tag script is to dynamically inject the script in the document. A simple implementation of this strategy is as follows:

addScript function (src) {
     var tag = document.createElement ('script');
     tag.src = src;
     tag.type = 'text / javascript';
     document.getElementsByTagName ('head') [0]. appendChild (tag);

 }

As is easy to understand, losing their character blocking scripts loaded in this way will not be processed in order, so dependencies are not met. The best solution then is to rely on libraries that implement a system of dependency. In the framework of the family found a system of dependency in Dojo, YUI and Google Closure, but initially we will consider two solutions standalone LABjs and RequireJS.

[Lawford]

The main result of the adoption of this technique, as well as better management of the loading and interpretation of the Code is that the elimination of phase locking in the loading of the page load time makes it less general (average 2, 3 times lower) and above anticipates the DOM event ready to perform very often associated with libraries and interactions. In recent times, one of the techniques he has done a lot to talk about himself is the 'deferred interpretation of the code. The basic idea is to download the JavaScript code as a plain text file or as part of the textual document, specific events to differ in its interpretation and enforcement, thus avoiding to stop the browser for JavaScript logic necessary to time. At the same time, another advantage of this technique, especially in the mobile, is that you can download most of the JavaScript code on the page, saving on the number of network connections without having to engage the CPU for interpretation. The techniques used to achieve this are varied and unfortunately we can not guarantee optimal results for all devices. In this case it is necessary to identify a primary target and act accordingly. The main difference between these techniques is that the first three simply download the code, while the latter also involves the blocking phase of interpretation. Despite the complete process from downloading the execution is not particularly faster than the traditional technique, it should be noted that the total loading time is significantly less than one page, thus ensuring a better user experience.