JS file loading optimization controljs

Ontroljs mainly aims to solve the performance problems of JS files in Webpage loading,Principle of controljs

Controljs itself is asynchronously loaded. First, change the tag type attribute value of the script to a type that cannot be recognized by the browser, so that the browser does not regard it as a script. When controljs loaded in different steps is executed, it starts to traverse the script tag (including embedded scripts) of type = "text/CJS ), if the DATA-CJSSRC property exists, an image or object is created (depending on the browser), asynchronously pre-download the script file and cache the file until window. parse and execute JavaScript during onload, and traverse the missing script tag for the second time.

Asynchronous loading

Controljs itself is asynchronously loaded. First, change the tag type attribute value of the script to a type that cannot be recognized by the browser, so that the browser does not regard it as a script.
When controljs is asynchronously loaded, it starts to traverse the script tag (including embedded scripts) of type = "text/CJS". If "data-
The cjssrc attribute will create an image or object (depending on the browser), asynchronously pre-download the script file and cache the file until parsing during window. onload
Execute JavaScript and traverse the missing script tag for the second time. For more information, see async with controljs.

Delayed execution

In the parsing and execution of JavaScript, the browser blocks any operation. In this case, the browser is in the suspended state. Steve analyzed the initial scripts of the top 10 Websites of Alexa in the United States.
The execution status needs to be loaded. It is found that only 29% of the scripts need to be initialized and parsed during page loading, while other 71% of the scripts will be executed when interaction is triggered. After compression, the average loading of these scripts is 229.
KB, not compressed is kb, which is a large amount of data.

The expected result is that the file is pre-downloaded in advance without parsing and executing JavaScript during page loading. For example, the general click pop-up second-level navigation, the user may never click to export
In this case, the navigation function script is useless. However, people do not want to wait too long for javascript execution when clicking the navigation, so controljs will download the file in advance.
Javascript only performs parsing and does not take time to download files.CodeFor more information, see menu with controljs.

Override document. Write

By default, these asynchronous scripts are all parsed and executed in window. onload. If the script calls the window. Write method at this time, an undesired question will occur.
The entire page is replaced by the output content of window. Write. All page content will be deleted, and IE will be stuck. The cause of the problem is that
When the docuemnt. Write method is called after loading, the document. Open will be triggered automatically. writing any open doucment will replace the content of the entire page. This causes all asynchronous scripts to be unable to delay document. Write so far. controljs's solution is to rewrite document. Write as follows:

 
Cjs.doc writeorig = Document. Write; document. Write = cjs.doc write;
 

Controljs creates a DOM element (SPAN), inserts it before the script tag being parsed, and sets the innerhtml value of span to docuemnt. Write. For more information, see document. Write with controljs.

• Use controljsOptimize alimama ads

Most of the current advertising forms are written in document. Write mode, so it is a headache for developers to be unable to process these contents asynchronously. Controljs can solve such troubles for us.

No network diagram with controljs applied. Demo can see http://chesihui.github.com/ad-demo.html

Apply the controljs optimized network diagram. Demo can see http://chesihui.github.com/ControlJS-demo.html

• Limitations of controljs

Controljs has a problem: when multiple levels of nested script labels in document. Write, the page still has the problem of triggering document. Open. ViewSource codeIt is found that the native method of document. Write will be restored after a javascript is executed:

 
Document. Write = cjs.doc writeorig;
 

Asynchronous loading of dynamic scripts also enables the document. Write method to be executed asynchronously. Therefore, the native function of document. Write cannot be restored. The recurrence is like demo.
Although this script solves the problem of not triggering window. Open, the position of Advertisement Writing cannot be correctly located due to the same asynchronous loading and execution. Set alimama ads
When alimama_type = "I", the loaded image advertisement is implemented based on multi-layer document. Write. Only the last image advertisement can be correctly rendered. Replay is like demo.

Because the asynchronous loading of controljs does not have any dependency order, all scripts are loaded and executed in parallel. If your page has too many dependencies, controljs will not be suitable for your project.

Finally, let's summarize what controljs has done for us. We need to weigh the advantages and disadvantages by ourselves:
1. Download all scripts Asynchronously
2. Process Embedded and external link scripts simultaneously
3. Delayed script execution until the page is rendered
4. Allow the script to be downloaded but not executed
5. Solved the document. Write issue in the asynchronous script.
6. controljs itself is asynchronously loaded