Home > Developer > JavaScript

Compile high-performance JavaScript scripts for loading and execution

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The script can be placed in the head of the HTML page or in the body.
Put the script in the body. When the browser encounters the <SCRIPT> tag, the browser does not know whether the script inserts the text or HTML Tag. Therefore, the browser stops analyzing the HTML page and executes the script. When you use SRC to add scripts, the browser also performs the same action. During script processing, page rendering and user interaction are completely blocked. Script download and execution block the download of other resources, such as rendering images used on the page. (Although many browsers implement the technology of parallel script download, this problem remains unsolved)
Script location
For the above reason, the script should always be placed at the bottom of the page, that is, before </body>.
A simple example: CopyCode The Code is as follows: <HTML>
<Head>
<Title> script example </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "styles.css">
</Head>
<Body>
<P> Hello world! </P>
<SCRIPT type = "text/JavaScript" src = "file1.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "file2.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "file3.js"> </SCRIPT>
</Body>
</Html>

merge script
because the script download blocks page rendering, you should reduce the use of the



the order in which the pop-up dialog box appears: script/defer/load. The disadvantage of this technology is that ie4 + and ff3.5 + are supported.
non-blocking script (continued)
2. dynamic script elements
you must know that there is no essential difference between

once the tag is added to HTML, the script file starts to be downloaded. One feature of this method is that file download and execution do not block the processing of other parts of the HTML page. Generally, placing such a script in is more secure than , especially the Code contained in the file needs to be executed in the load event of the page. If the body content has not been fully loaded, the "prohibit operation" error will pop up in IE.
after the script file is downloaded, execute the script immediately (FF and opera will wait for the previous script to be added in the same way ). This is okay when the script is self-executed. However, if the script contains the interfaces used by other scripts on the page, make sure that the script has been loaded and is available. Fortunately, after obtaining the SRC value of the script tag, Firefox, opera, chrome, and Safari 3 + triggers a load event. copy Code the code is as follows: vaR script = document. createelement ("script")
script. type = "text/JavaScript";
// Firefox, opera, chrome, Safari 3 +
script. onload = function () {
alert ("script loaded! ");
};
script. src = "file1.js";
document. getelementsbytagname ("head") [0]. appendchild (SCRIPT);

IE provides another solution-readystatechange event. Based on the status of the downloaded
script file, readystate has the following values:
"uninitialized"
default status
"loading"
Start download
"loaded"
download complete
"interactive"
download complete, but not all are available
"complete"
all data is available
Implementation of IE: copy Code the code is as follows: var script = document. createelement ("script")
script. type = "text/JavaScript";
script. onreadystatechange = function () {
If (script. readystate = "loaded" | script. readystate = "complete") {
script. onreadystatechange = NULL;
alert ("script loaded. ");
}< BR >};
script. src = "file1.js";
document. getelementsbytagname ("head") [0]. appendchild (SCRIPT);

The following is a general method after integration: copy Code the code is as follows: 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. onreadystatech Ange = NULL;
callback ();
}< BR >};
}else {// others
script. onload = function () {
callback ();
};
}< br> script. src = URL;
document. getelementsbytagname ("head") [0]. appendchild (SCRIPT);
}< br> the loadscript () function is used as follows:
loadscript ("file1.js", function () {
alert ("file is loaded! ");
});

Now you can load scripts in this dynamic way, but you still need to consider the download sequence of these files. In mainstream browsers, only FF and opera ensure that the script execution sequence is the same as the download sequence you specified. other browsers will execute the script files in the order they are returned from the server. However, we still have alternative solutions:Copy codeThe Code is as follows: loadscript ("file1.js", function (){
Loadscript ("file2.js", function (){
Loadscript ("file3.js", function (){
Alert ("all files are loaded! ");
});
});
});

In this way, we can ensure that the script file download order strictly in accordance with the way of file1-file2-file3.
Note: The above content comes from: <High Performance JavaScript> by Nicolas C. zakas

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More