HTML5 practice and analysis of delayed scripts-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 practice and analysis of delayed scripts

黄舟

Feb 10, 2017 pm 02:26 PM

What is a delayed script? HTML5 actual combat and analysis of delayed scripts helps you solve some JavaScript loading problems. With the deferred script function of HTML5 actual combat and analysis, we can no longer worry about the messy structure of the page when it is loaded for JavaScript loading.

Speaking of delayed scripts in JavaScript, there was such an attribute as early as HTML4.01. It is very convenient to use, that is, add a "defer" attribute to the externally referenced script tag. Adding the "defer" attribute will not affect the structure of the page. In other words, the script will load but not run, and will be executed sequentially after the page is fully loaded. To understand better, take a look at the example below.

In this example, there will be a.html file. The script tag referenced in this file does not have the attribute of delayed script added, while the file b.html adds the attribute of delayed script. There are two JavaScript files respectively, a.js and b.js. Each of the two files pops up the name of its own file as a demonstration.

　a.js code

alert("a");

Copy after login

b.js code

alert("b");

Copy after login

　a.html code

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

Copy after login

　b.html code

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" defer="defer" src="a.js"></script>
<script type="text/javascript" defer="defer" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

Copy after login

It can be seen from the above example. Although we referenced a.js and b.js in the head tag, because we set the "defer" attribute. Therefore, the referenced a.js and b.js will be loaded, but they must be executed after the browser encounters the tag. Since browsers parse delay attributes differently, the order in which delay scripts are executed is different. The "defer" attribute only applies to externally referenced JavaScript files, and will ignore several other methods of referencing JavaScript files.

Supported browsers are: IE9, Firefox 3.5, Safari 5 and Chrome. Other unsupported browsers will load and process the script as normal.

The above is the content of HTML5 actual combat and analysis of delayed scripts. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

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