Script on-demand import (load) of the three modes of contrast _javascript techniques

What is an on-demand load?
Scripts are generally downloaded after the execution, when the script library is very large, one-time download time is very time-consuming, the traditional solution is to write the script in a functional module in a different file, the page manually added to the scripts to load the specified content, but there are some shortcomings, The user of the class library needs to know that there is no relationship between the scripts, order requirements, etc., and that it is not possible to require each class library user to be familiar with it, and the likelihood of error is great. So many frameworks are starting to support import directives, and what you want to use is the end of an import function, without the need for a bunch of script files to be careful about their dependencies.

The dilemma of an on-demand load:
Early-load (on-demand) loading has a fatal weakness, and the browser blocks the problem. When some class libraries are loaded on demand, they are typically implemented by XMLHttpRequest synchronous Mount script files, in which case the browser stops responding to user events and stops page redraw operations before the resource download completes. If the speed is very slow, this time will be very annoying, like a crash.

The previous solution was to package the common class library resources directly into the framework file, and on-demand imports became a cover for propaganda, without much practical value.

An on-demand loading can be divided into three modes as follows:


L Simultaneous on-demand loading (blocking, JSi, JSVM, Dojo).

The simplest on-demand mount implementation is implemented by XMLHttpRequest synchronous loading of script files. The problem is that browsers that use this way to synchronize to get resources will cause the browser to block: Stop responding to user events, stop page redraw operations. So, while programming is the simplest, the user experience is the worst.



2 Asynchronous on-demand loading (non-blocking, jsi2.0+).

Asynchronous import, do not have to do more explanation, the user experience is good, but because of its asynchronous characteristics, processing more cumbersome.



3 delayed synchronization on-demand loading (non-blocking, jsi2.0+).

JSi a method of synchronizing the acquisition of resources through a dynamic preloaded function, although it is synchronous but not blocked, it can be counted as a solution for ease of use and user experience. There is a certain delay in the current script tag, which is not available.





How to use (JSi sample)
Take a code syntax shader as an example:

Class Library Location: Org/xidea/example/code/code.js

Page Location: example/xxx.html



Instant Sync on Demand mount

Import ("Org.xidea.example.code.Code");

var code1 = new Code ();

Code1.id = "Libcode";

Code1.decorate ();




Load on Demand asynchronously

$import ("Org.xidea.example.code.Code", Function (code) {

var code1 = new Code ();

Code1.id = "Libcode";

Code1.decorate ();

})




Delayed synchronization on-demand mount (Non-blocking, jsi2.0+).

<script> ". /scripts/boot.js "></script>

<script>

$import ("Org.xidea.example.code.Code", true);

</script>



<script>

var code1 = new Code ();

Code1.id = "Pagecode";

Code1.decorate ();

</script>




Test Example:
Address:

Http://jsintegration.sourceforge.net/example/code.html

Http://www.xidea.org/project/jsi/example/code.html

Examples are the default examples of JSI, which can be downloaded to run locally, preferably on a server that can be limited by the speed limit, to see the blocking problem.

Reference:
JSI Import Function: function $import (path, callbackorlazyload, target)



JSI2 Preview Download: http://groups.google.com/group/jsier/files