Comparison of three modes of script installation that need to be imported (loaded)_javascript skills

What is safe loading?
Script programs are generally downloaded and executed. When the script library is very large, it is very time-consuming to download it all at once. The traditional solution is to write the scripts in different files according to functional modules, and manually add script tags to the page. Loading specified content, but this has some disadvantages. Users of the class library need to know the relationship between each script, order requirements, etc., and it is impossible to require every user of the class library to be very familiar with it, and the possibility of errors Very big. As a result, many frameworks began to support import instructions. You can just use any import function you want. There is no need for piles of script files and no need to pay careful attention to their dependencies.

The dilemma of secure loading:
Early secure loading (instant synchronous on-demand loading) has a fatal weakness, browser blocking problem. When loading certain class libraries on demand, this is usually achieved by synchronously loading script files through XMLHttpRequest. In this case, the browser will stop responding to user events and stop page redrawing before the resource download is completed. If your internet connection is slow, this period of time can be very annoying, like a freeze.

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

On-demand loading can be divided into the following three modes:


l Instant synchronous on-demand loading (blocking, JSI, JSVM, dojo).

The simplest on-demand loading implementation, implemented through XMLHttpRequest synchronous loading of script files. The problem is that when the browser uses this method to synchronously obtain resources, it will cause the browser to block: stop responding to user events and stop page redraw operations. Therefore, although programming is the simplest, the user experience is the worst.



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

Asynchronous import requires no further explanation and provides a good user experience. However, due to its asynchronous characteristics, it is more troublesome to handle.



3 Delayed synchronization on-demand loading (non-blocking, JSI2.0).

JSI implements a method of synchronously obtaining resources through the dynamic preloading function. Although it is also synchronous, it does not block. It can be a solution that takes into account ease of use and user experience. The disadvantage is that there is a certain delay and it is not available in the current script tag.





Usage (JSI example)
Take a code syntax coloring program as an example:

Class library location: org/xidea/ example/code/code.js

Page location: example/xxx.html



Instant synchronization and on-demand loading

import("org.xidea .example.code.Code");

var code1 = new Code();

code1.id = "libCode";

code1.decorate();




Asynchronous on-demand loading

$import("org.xidea.example.code.Code",function(Code){    

var code1 = new Code();

code1.id = "libCode";

code1.decorate();

})




Delayed synchronous on-demand loading (non-blocking, JSI2.0).















Test example :
Address:

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

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

The examples are all default examples of jsi, which can be downloaded and run locally. After downloading, it is best to put it on a server that is limited by the network speed. Only in this way can the blocking problem be seen.

Reference:
JSI import function: function $import(path, callbackOrLazyLoad, target)


<script>"../scripts/boot.js"></script>JSI2 preview download: http://groups.google. com/group/jsier/files <script> <br><br>$import("org.xidea.example.code.Code",true); <br><br></script><script> <br><br>var code1 = new Code(); <br><br>code1.id = "pageCode"; <br><br>code1.decorate(); <br><br></script>