The script can be placed inside the head of an HTML page, or it can be placed inside the body.
Put the script in the body, when the browser meets <script> tags, the browser does not know whether the script will insert text or HTML tags, so the browser will stop parsing HTML page to execute the script. When you add a script using SRC, the browser does the same thing. Page rendering and user interaction will be completely blocked when the script is processed. Script downloads and execution blocks other resources from downloading, such as rendering the picture used by the page. (Although many browsers implement the technique of scripting concurrent downloads, the problem remains unresolved)
Location of the script
For the above reasons, the script should always be placed at the bottom of the page, that is, </body> front.
A simple example:
Copy Code code as follows:
<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 the script download blocks page rendering, you should reduce the use of page <script> tags, whether the script is inline or external. When dealing with external scripts, the browser downloads a 100kb script much less than 4 25kb scripts, because it takes a lot of time to create a request. So the page should try to reduce the reference to the external script.
Non-blocking scripts
The trick is to load the script when the page loading is complete, before the OnLoad event of the Window object is triggered. Here are some ways to implement it:
1. Use of defer
Copy Code code as follows:
<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 appears in order: Script/defer/load, the disadvantage of this technology is ie4+ and ff3.5+ support.
Non-blocking script (cont.)
2. Dynamic Scripting elements
There is no essential difference between <script> and normal HTML tags, so you can use standard DOM methods to dynamically add script file references. The method is as follows:
Copy Code code 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 starts downloading. One feature of this approach is that file downloads and execution do not block the processing of other parts of the HTML page. It is generally safer to put such a script in When the script file is downloaded, the script executes immediately (FF, opera waits for the previous script to be added in the same way). This is no problem when the script is executed itself. But if the script contains interfaces used by other scripts in the page, you need to verify that the script is loaded and available. Luckily, Firefox, Opera, Chrome, and Safari 3+ will trigger a load event when the value of SRC for the script tag is obtained.
Copy Code code 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 an alternative solution--readystatechange event. According to download
The state of the script file, the ReadyState value has the following:
"Uninitialized"
Default state
"Loading"
Start download
"Loaded"
Download complete
"Interactive"
Download complete, but not all available
"Complete"
All data available
How to implement IE:
Copy Code code 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.");
}
};
SCRIPT.SRC = "File1.js";
document.getElementsByTagName ("Head") [0].appendchild (script);
Here's a general approach to synthesizing later:
Copy Code code 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.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. In the mainstream browsers only FF and opera guarantee that the scripts are executed in the same order that you specified the download, and other browsers will follow the sequence of script files returned from the server. Nevertheless, we still have alternative solutions:
Copy Code code as follows:
Loadscript ("File1.js", function () {
Loadscript ("File2.js", function () {
Loadscript ("File3.js", function () {
Alert ("All files are loaded!");
});
});
});
This allows us to ensure that the download sequence of the script files is strictly in the file1-file2-file3 manner.
Note: The above content from:
