Home >Web Front-end >JS Tutorial >How to make JavaScript loading and execution more efficient with detailed example code

How to make JavaScript loading and execution more efficient with detailed example code

伊谢尔伦Original: 2017-07-21 16:04:031298browse

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, the browser does not know whether the script will insert text or html tags, so the browser will stop analyzing the html page and execute it. script. When adding scripts using src, the browser will do the same thing. Page rendering and user interaction will be completely blocked while the script is processing. Script downloading and execution blocks the downloading of other resources, such as images used to render the page.
Location of script
For the above reasons, scripts should always be placed at the bottom of the page, in front of 36cc49f0c466276486e50c850b7e4956.
A simple example:

<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 script download blocks page rendering, the number of 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags on the page should be reduced Used regardless of whether the script is inline or external. The situation is special when dealing with external scripts. The time it takes for the browser to download a 100kb script will be much less than four 25kb scripts, because it takes a lot of time to establish a request. Therefore, the page should minimize references to external scripts.
Non-blocking script
The secret is to load the script after the page loading is completed, that is, before the onload event of the window object is triggered. The following are several ways to achieve it:
1. Use defer

<html> 
<head> 
<title>Script Defer Example</title> 
</head> 
<body> 
<script defer> 
alert("defer"); 
</script> 
<script> 
alert("script"); 
</script> 
<script> 
window.onload = function(){ 
alert("load"); 
}; 
</script> 
</body> 
</html>

The order in which page pop-up boxes appear: script/defer/load. The disadvantage of this technology is IE4+ and FF3. Only supported for 5+.
Non-blocking scripts (continued)
2. Dynamic script elements
You must know that there is no essential difference between 3f1c4e4b6b16bbbd69b2ee476dc4f83a and ordinary html tags, 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 starts to download. One feature of this method is that file downloading and execution does not block the processing of other parts of the html page. It is generally safer to place such scripts in 93f0f5c25f18dab9d176bd4f6de5d30e than in 6c04bd5ca3fcae76e30b72ad730ca86d, especially if the code contained in the file needs to be executed in the load event of the page. If the content of the body has not been completely loaded, IE will also pop up an "operation prohibited" error.
When the script file is downloaded, the script will be executed immediately (FF and Opera will wait for the execution of the previous script added in the same way). This is fine when the script executes itself. But if the script contains interfaces used by other scripts on the page, you need to make sure the script is loaded and available. Fortunately, Firefox, Opera, Chrome, and Safari 3+ will trigger a load event after obtaining the value of the script tag's src.

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. Depending on the state of the download
script file, the values of readyState are as follows:
"uninitialized"
Default state
"loading"
Start downloading
"loaded"
Download completed
"interactive"
Download completed, but not all available
"complete"
All data available
IE implementation:

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);

The above is the detailed content of How to make JavaScript loading and execution more efficient with detailed example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Code summary of four commonly used JavaScript dynamic loading methodsNext article：Code summary of four commonly used JavaScript dynamic loading methods

See more

How to make JavaScript loading and execution more efficient with detailed example code

Related articles