Home > Developer > JavaScript
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 the 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 parallel downloading of scripts, the problem is still unresolved)
location of scripts
for the above reasons, scripts should always be placed at the bottom of the page, that is, the </body> front.
A simple example:
Copy Code as follows:
<title>script examplewww.111cn.net</title >
<link rel= "stylesheet" type= "text/css Tutorial" href= "Styles.css" >
<body>
;p >hello world!</p>
<script type= text/javascript tutorial 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> labels, 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. The secret to
Non-blocking scripts
is to load the script when the page is loading complete, before the OnLoad event for the window object is triggered. Here are some ways to implement it:
1. Use Defer
to copy the code as follows:
<title>script Defer example</t Itle>
<body>
<script defer>
Alert ("defer");
</script>
<script>
Alert ("script");
</script>
<script>
window.onload = function () {
Alert ("Load");
};
</script>
</body>
The order in which page pop-ups appear: Script/defer/load, the disadvantage of this technique is that ie4+ and ff3.5+ support.
non-blocking Script (cont.)
2. Dynamic scripting elements
to know <script> and normal HTML tags are not fundamentally different, so you can use the standard DOM method 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 The script executes immediately after the script file is downloaded (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. Depending on the status of the download
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
IE is implemented:
Copy code code as follows:
var script = document.cr Eateelement ("script")
Script.type = "Text/javascript";
Script.onreadystatechange = function () {
if (script.readystate = = "Loaded" | | script.readystate = = "complete") { br> script.onreadystatechange = null;
Alert ("Script loaded.");
}
};
Script.src = "File1.js";
document.getElementsByTagName ("Head") [0].appendchild (script);
Here is a general method for synthesizing later:
Copy code code as follows: Www.111cn.net
function loadscript (URL, callback) {
var script = Document.createel Ement ("script")
Script.type = "Text/javascript";
if (script.readystate) {//ie
Script.onreadystatechange = function () {
if (script.readystate = = "Loaded" | | s Cript.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 load Ed! ");
});
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:
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
