Using Controljs to optimize Ali's mom ads

For a long time, Ali's mother's advertising strategy has been a problem, many pages also because of blocking ads loaded and pulled low performance, affecting the user experience. Ali mother, after all, the advertising rendering relies on many nested document.write. Controljs's goal is to solve JS blocking-type rendering, so the spirit of the Jade impatient want to work with colleagues to uncover Controljs ...

In December 2010, Steve Souders released the Controljs project, which allows developers to better control the download and execution of JavaScript files, thus increasing the loading speed of page scripts.

Steve has put forward a very creative idea, that is, to download JavaScript files asynchronously without parsing the execution until the JavaScript processing is needed. This has been a lot of people's attention and verification. Nicholas Zaka also caused a lot of thinking because of Controljs, and analyzed the difference between Controljs and LABJS, the details can be read thoughts on script loaders and separating JavaScript Download and execution. Steve uses 3 details about CONTROLJS: Asynchronous loading, deferred execution, and rewriting document.write.

• the principle of Controljs

Asynchronous loading

Controljs itself is loaded asynchronously, the script's label Type property value is first changed to a type that the browser does not recognize, so the browser does not think it is a script. Controljs that itself asynchronously loads begins to traverse the script tag of the type= "Text/cjs" (including inline scripting), and if there is a "data-cjssrc" attribute that will create an image or object (depending on the browser), Go to the asynchronous pre-download script file and cache the file until window.onload to parse and execute JavaScript while traversing the missing script tag for the second time. The specific operation can be seen async with Controljs

Deferred execution

browser in the parsing of the JavaScript phase is blocking any operation, when the browser is in suspended animation, Steve Analysis of the United States Alexa 10 Web site script initial need to load execution, found that only 29% is required to initialize the page load parsing execution, while the other 71% The script is executed when the interaction is triggered, after compressing the average load of these scripts is 229 KB, uncompressed is 500KB, this is a large number of data.

The result we want is not to parse the execution JavaScript in the page load, but to download the files in advance. For example, a generic click on the pop-up two-level navigation, the user may never click Navigation behavior, at this time the function of the navigation script is useless. But people don't want to wait too long for JavaScript to execute when they click on the navigation, so controljs will download the files in advance so that JavaScript just parses the execution and doesn't take the time to put them on the download file. Code at a glance, the specific operation can see the menu with Controljs

Rewrite document.write

By default, these asynchronous scripts are executed in window.onload parsing, if the script calls the Window.write method, will cause a problem that does not want to occur, that is, the entire page is replaced by Window.write output content, all page content will be deleted, IE will be in a state of stagnation. The problem arises because the document.open is automatically triggered when the document is loaded and the Docuemnt.write method is invoked, and any doucment that is open will replace the contents of the entire page. This leads to the problem that all asynchronous scripts cannot delay document.write so far, and Controljs's approach is to rewrite document.write as follows:

Cjs.docwriteorig = document.write;
document.write = Cjs.docwrite;

Controljs creates a DOM element (span), inserts it before the currently parsed script label, and sets the innerHTML value for span to docuemnt.write content. The specific operation can be seen document.write with Controljs

• using Controljs to optimize Ali's mom ads

For most of today's advertising forms are written in a document.write way, the inability to asynchronously handle these content is a problem developers have a lot of headaches. Controljs can solve this kind of trouble for us.

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

Application of Controljs optimized Network diagram. Demo can see http://chesihui.github.com/ControlJS-demo.html

• Limitations of Controljs

One problem with Controljs is that the page still has a problem triggering document.open when nested script tags are layered in document.write. Viewing source code discovery restores the Document.Write native method after performing a javascript:

document.write = Cjs.docwriteorig;

The asynchronous loading of dynamic scripts also makes the Document.Write method execute asynchronously, so the native function of document.write can not be restored. Reproduce the situation like demo. Note This script solves the problem of not triggering the window.open, but the same asynchronous load execution causes the location where the advertisement writes cannot be positioned correctly. For Ali mom ads set Alimama_type= "I", load picture ads are based on multi-layer document.write, only the correct rendering of the last picture ads. Reproduced as demo.

Because there is no dependency order for Controljs asynchronous loading, all scripts are executed in parallel, and if your page has too many dependencies, Controljs will not fit your project.

Finally summed up what Controljs did for us, pros and cons need to weigh themselves:
1. Download all scripts asynchronously
2, simultaneously processing the embedded and the outside chain script
3, delay the execution of the script until the page is finished rendering
4, allow the script to download only do not perform
5, solve the problem of document.write in the asynchronous script
6, CONTROLJS itself is asynchronous loading