Home > Developer > JavaScript
The script can be placed inside the head of the HTML page or inside the body.
Put the script in the body, when the browser meets the <script> tag, the browser does not know whether the script will insert text or HTML tags, so the browser will stop parsing the HTML page to execute the script. When you add a script using SRC, the browser does the same thing. When the script is processed, page rendering and user interaction will be completely blocked. Script download and execution blocks the download of other resources, such as rendering images used by the page. (Although many browsers implement the technology of parallel downloading of scripts, this problem is still unresolved)
Location of the script
For the reasons above, the script should always be at the bottom of the page, that is, the </body> front.
<title>script example</title>
<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
<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>
Merge Scripts
because script downloads block page rendering, you should reduce the use of page <script> tags, whether the script is inline or external. When dealing with external scripts, the situation is very special, the browser download a 100kb script will be much less than 4 25kb script, because it takes a lot of time to establish a request. So the page should minimize references to external scripts.
Non-blocking scripts
The secret is to load the script when the page loading is finished, that is, before the OnLoad event of the Window object is triggered. Here are some ways to implement it:
1. Use Defer
<title>script Defer example</title>
<body>
<script defer>
Alert ("defer");
</script>
<script>
Alert ("script");
</script>
<script>
window.onload = function () {
Alert ("Load");
};
</script>
</body>
Page Popup order: Script/defer/load, the disadvantage of this technique is ie4+ and ff3.5+ support.
Non-blocking scripts (cont.)
2. Dynamic scripting elements
to know that <script> and ordinary HTML tags are not fundamentally different, so you can use the standard DOM method to dynamically add script file references. The
method is as follows
var script = document.createelement ("script");
Script.type = "Text/javascript";
Script.src = "File1.js";
document.getElementsByTagName ("Head") [0].appendchild (script);
When this tag is added to the HTML, the script file begins to download. One feature of this approach is that file downloads and executions do not block the processing of other parts of the HTML page. It is usually safer to put such a script in After the script file download is complete, the script executes immediately (FF, opera waits for the previous script to be added in the same way). This is fine when the script is self-executing. But if the script contains interfaces used by other scripts in the page, you need to make sure that the script is loaded and available. Fortunately, Firefox, Opera, Chrome, and Safari will trigger a load event after getting the SRC value of the script tag.
var script = document.createelement ("script")
Script.type = "Text/javascript";
//firefox, Opera, Chrome, Safari
Script.onload = function () {
Alert ("Script loaded!");
};
Script.src = "File1.js";
document.getElementsByTagName ("Head") [0].appendchild (script);
IE provides another solution to the--readystatechange event. According to the download
The state in which the script file is located, the value of ReadyState is as follows:
"Uninitialized"
Default state
"Loading"
Start download
"Loaded"
Download complete
"Interactive"
Download complete, but not all available
"Complete"
All data available
How IE is implemented:
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.");
}
};
SCRIPT.SRC = "File1.js";
document.getElementsByTagName ("Head") [0].appendchild (script);
Here is a general approach to synthesis:
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 {//others
Script.onload = function () {
Callback ();
};
}
script.src = URL;
document.getElementsByTagName ("Head") [0].appendchild (script);
}
The Loadscript () function is used as follows:
Loadscript ("File1.js", function () {
Alert ("File is loaded!");
});
Now you can load the script in this dynamic way, but you still need to consider the download order of the files. Only FF and opera in the mainstream browser guarantee that the order of execution of the scripts is consistent with the order in which you specify the download, and other browsers will execute in the order in which the script files are returned from the server. Nonetheless, we still have alternative solutions:
Loadscript ("File1.js", function () {
Loadscript ("File2.js", function () {
Loadscript ("File3.js", function () {
Alert ("All Files is loaded!");
});
});
});
This allows us to ensure that the script files are downloaded in a strictly file1-file2-file3 manner.
Note: The above content from:
Writing high-performance JavaScript scripts for loading and executing
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
