Home > Developer > JavaScript
A common practice is to put the <script> tag before the closed </body>. This allows the page to be displayed to the user first, so that the page loading speed is not very slow. It's a good idea to put the CSS file in the head and load the DOM while rendering the style.
We know that multiple HTTP requests can also degrade page performance. So we can combine multiple script files into a single file download. This reduces the HTTP request, but this adds a lot of extra work to us because each time we publish we merge the files. To do this, we can use a group download method to achieve the goal. A group download is a request to download more than one script file at a time. For example, the following URL: http:www.abc.com/combo.do?file1.js&file2.js each time a fixed service request to the server downloads multiple files. The server merges multiple files together and returns them to the client. This is the best way for an HTML page to contain multiple external JavaScript.
If the script file is big and large, then I'm afraid how we can compress the file how to reduce the number of HTTP requests, script loading will lock the browser for a large period of time. The better way to do this is to wait for the page to load and then load the script, that is, after the Window.onload event is issued, download the code. the Defer property in HTML4 can be implemented without blocking the browser's other processing when the script is downloaded, and will not be executed after the code is downloaded, but not until the DOM is loaded (before the window.onload is completed). But the defer property is supported only by ie4+ and ff3.5+, which is not supported by other browsers, so this is not an ideal cross-browser solution. one common way to delay loading is to dynamically create script elements. A new <script> element can be created very easily through standard DOM functions:var script = document.createelement ("script");Script.type = "Text/javascript";script.src = "Xxx.js";when the script element is added to the page, it starts downloading the scripts file. The advantage of this technology is that no matter where the download is initiated, the download and operation of the file will not block the other page processing processes. When the script file is downloaded, the returned code is usually executed immediately (in addition to FF and opera, they will wait for all previous dynamic script nodes to complete. )document.getElementsByTagName ("Head") [0].appendchild (script);
function Loadscript (URL, callback) {
var script = document.createelement ("script");
Script.type = "Text/javascript";
if (script.readystate) {//IE
Script.onreadystatechange = function () {
if (script.readystate = = "Loaded" | | script.readystate = = "complete") {
Script.onreadystatechange = null;
Callback ();
}
};
}else{//FF, Chrome, Opera, ...
Script.onload = function () {
Callback ();
};
}
script.src = URL;
document.getElementsByTagName ("Head") [0].appendchild (script);
}test1.js for testing:<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Dynamic Loading </title>
<script type= "Text/javascript" src= ". /scripts/loadscript.js "></script>
<script type= "Text/javascript" >
Loadscript (".. /scripts/test1.js ", function () {
Loadscript (".. /scripts/test2.js ", function () {
Loadscript (".. /scripts/test3.js ", function () {
Test3.print ("Hi, i ' m abc.");
})
});
});
</script>
<body>
</body>
the TEST3.JS,TEST3 used for testing relies on Test2:var test2 = { print:function (msg) { test1.print (msg); alert ("from test2:" + msg); } };
The run page will have a popup "from Test1:hi, I ' m abc.", "from Test2:hi, I ' m abc.", "from Test3:hi, I ' m abc."var test3 = { print:function (msg) { test2.print (msg); alert ("from test3:" + msg); } };
/**
* Create Xmlhelper
* */
(function (window) {
var Xhrhelper = (function () {
var xhrhelper = function () {};
Xhrhelper.extend = function () {
var len = arguments.length, target = this;
for (var i = 0; i < len; i++) {
var source = Arguments[i];
For (var p in source) {
if (target[p] = = undefined) {
TARGET[P] = source[p];
}else{
throw new error ("Extend error:" + P + "is already existed.");
}
}
}
};
return xhrhelper;
})();
Window.xhrhelper = Xhrhelper;
}) (window);
/**then the function that uses XHR to download JS file:
* Extend Xmlhelper
* */
Xhrhelper.extend ({
/**
* Create XMLHttpRequest object.
* */
Createxmlhttp:function () {
var xmlhttp;
/* @cc_on
@if (@_jscript_version >= 5)
try{
XMLHTTP = new ActiveXObject ("Msxml2.xmlhttp");
} catch (e) {
try{
XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (E) {
XMLHTTP = false;
}
}
@else
XMLHTTP = false;
@end
@*/
if (!xmlhttp && typeof XMLHttpRequest! = ' undefined ') {
try{
XMLHTTP = new XMLHttpRequest ();
} catch (e) {
XMLHTTP = false;
}
}
return XMLHTTP;
},
/**
* Send request.
* */
Req:function (options) {
var defaults = {
Method: "Get",//Get,post,put,delte
Url:null,
Data:null,
Async:true,
Username:null,
Password:null,
Onloading:function (XHR) {},
Onloaded:function (XHR) {},
Oninteractive:function (XHR) {},
Oncomplete:function (XHR) {},
Onabort:function (XHR) {},
Onerror:function (XHR) {}
};
For (var p in options) {
DEFAULTS[P] = options[p];
}
var xmlhttp = xhrhelper.createxmlhttp ();
if (XMLHTTP) {
Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate = = 1) {//not initialized
Defaults.onloading (XMLHTTP);
} else if (xmlhttp.readystate = = 2) {//initialized
Defaults.onloaded (XMLHTTP);
} else if (xmlhttp.readystate = = 3) {
Defaults.oninteractive (XMLHTTP);
} else if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 0) {
Defaults.onabort (XMLHTTP);
} else if (xmlhttp.status >= && xmlhttp.status <= | | xmlhttp.status = 304) {
Defaults.oncomplete (XMLHTTP);
} else{
Defaults.onerror (XMLHTTP);
}
}
};
if (defaults.username! = NULL && Defaults.password! = null &&
Defaults.username.length! = 0 && Defaults.password.length! = 0) {
Xmlhttp.open (Defaults.method, Defaults.url, Defaults.async,
Defaults.username, Defaults.password);
}else{
Xmlhttp.open (Defaults.method, Defaults.url, Defaults.async);
}
if (defaults.method.toLowerCase () = = "Get") {
}else if (defaults.method.toLowerCase () = = "Post") {
Xmlhttp.setrequestheader (' Content-type ', ' text/html; Charset=utf-8 ');
}
Xmlhttp.send (Defaults.data);
}
return XMLHTTP;
}
});
function xhrload (URL, callback) {
Xhrhelper.req ({
Method: "Get",
Url:url,
Oncomplete:function (XHR) {
var script = document.createelement ("script");
Script.type = "Text/javascript";
Script.text = Xhr.responsetext;
Document.body.appendChild (script);
Callback ();
}
});
}The advantage of this approach is that you can download JavaScript code that is not executed immediately. Because the code is downloaded from the <script> tag, it is not executed immediately after it is downloaded. Another advantage is that almost all browsers support this approach.xhrload (".. /scripts/test1.js ", function () { test1.print (" ABC "); });
(RPM) High-performance javascript: Loading and running (dynamically loading JS code)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
