传统与现代<script>位置之争 |【延迟/异步】
本帖最后由 不二如是 于 2020-3-17 18:34 编辑斯坦·李:漫威之父的名言，excelsior，精益求精
本帖灵感来自，小甲鱼大佬的延迟执行代码 vs 异步执行代码，热情膜拜后，有几点心得。
关于<script>(<--传送门)的定义，可以参阅鱼C-HTML5宝典。
标签的位置
按照传统的写法（曾经的开发经历），所有<script>标签都用放在页面的<head>元素中。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script</title>
<script type="text/javascript" src="js/fishc1.js"></script>
<script type="text/javascript" src="js/fishc2.js"></script>
</head>
<body>
<!--页面内容-->
<div></div>
<div></div>
</body>
</html>
这种做法的目的：
把所有的外部文件（包括CSS和JS文件）的引用都放在相同的地方。
可是，在文档的<head>元素中包含所有的JS文件，意味着：
必须等到全部的JS代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（<body>中元素）
下载，解析和执行是三个很重要的流程，暂时不用深入理解，只需要知道存在这三个步骤就行。
假如，不经意在上万行的JS文件中，存在一些不合理的bug，然后用户就会看到一个空白页面...
这种浏览器中很明显的页面呈现延迟，会让我们失去很多的用户。
为了避免上述的尴尬情况，现代Web应用程序一般都把全部的JS引用放在<body>元素中页面元素的后面。
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script</title>
</head>
<body>
<!--页面内容-->
<div></div>
<div></div>
<!--放在页面元素的后面-->
<script type="text/javascript" src="js/fishc1.js"></script>
<script type="text/javascript" src="js/fishc2.js"></script>
</body>
</html>
页面元素就是网页要生成的内容，会有很多的标签。
通过把JS文件放在</body>前，这样解析JS之前，页面的内容将完全呈现在浏览器中。
而且用户也会因为浏览器窗口显示空白页面的时间缩短而感到加载速度变快。
defer（延迟）代码
HTML4.01开始便为<script>标签定义了defer属性。
defer属性只适用于外部JS文件（src引入）。
这个属性的用途是：
表明代码执行时不会影响页面的构造。
代码会被延迟到整个页面执行完毕后再运行。
没错，聪明如鱼油一定发现这个属性很像上面代码中一样，将JS代码放在<body>中所有内容元素之后。
是不是呢？请继续往下看～
现在我们可以把JS代码放在<head>中，然后添加defer属性，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script</title>
<script type="text/javascript" defer="defer" src="js/fishc1.js"></script>
<script type="text/javascript" defer="defer" src="js/fishc2.js"></script>
</head>
<body>
<!--页面内容-->
<div></div>
<div></div>
</body>
</html>
在上面的例子中，虽然把<script>放在了<head>中，但其中包含的代码将延迟到浏览器遇到</html>后再执行。
上面的问题解开了，延迟放到</html>之后，而标签位置中我们演示放在</body>之前。
从正常的DOM结构上来讲，二者区别不是很大，只不过：
**** Hidden Message *****
HTML5规范要求：
代码按照它们的出现的先后顺序执行
因此第一个延迟代码会在第二个延迟代码之前执行。
而且这两个代码会先于DOMContentLoaded（HTML 文档被完全加载和解析完成之后, DOMContentLoaded 事件被触发,）事件执行。
asyn（异步）代码
HTML5为<script>元素定义了async属性。
async属性只适用于外部JS文件（src引入）。
与上面的defer不同，设置async属性后，代码不能按照指定它们的先后顺序执行。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script</title>
<script type="text/javascript" async="async" src="js/fishc1.js"></script>
<script type="text/javascript" async="async" src="js/fishc2.js"></script>
</head>
<body>
<!--页面内容-->
<div></div>
<div></div>
</body>
</html>
在上面的代码中，第二个代码是很有可能在第一个代码之前被执行。
因此，如果两个代码没有相互依赖关系，可以用异步。
指定async属性的目的是：
不让页面等待代码下载和执行，从而异步加载页面其他内容。
强烈建议：
不要再加载期间修改DOM，很有可能DOM树都未建立。
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） {:5_92:} HTML 看到关键，不要停 我要看答案~~~ 我觉得吧应该把
FBI Warning
鱼C工作室出品
的代码发出来
{:10_266:} 哈哈哈 猜不到答案 看看隐藏的内容啊
回复 看看是什么 各位加油 6 求解答 {:10_323:} 还卖关子？ {:10_334:} 谁打的死 回复啥 {:10_256:}
页:
[1]
2