鱼C论坛

 找回密码
 立即注册
查看: 3962|回复: 39

[奇技淫巧] 传统与现代<script>位置之争 |【延迟/异步】

[复制链接]
发表于 2018-4-25 14:59:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-17 18:34 编辑

giphy 上午11.33.37.gif
斯坦·李:漫威之父的名言,excelsior,精益求精


本帖灵感来自,小甲鱼大佬的延迟执行代码 vs 异步执行代码,热情膜拜后,有几点心得。

关于<script>(<--传送门)的定义,可以参阅鱼C-HTML5宝典




标签的位置

按照传统的写法(曾经的开发经历),所有<script>标签都用放在页面的<head>元素中

例如:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script</title>
  6.     <script type="text/javascript" src="js/fishc1.js"></script>
  7.     <script type="text/javascript" src="js/fishc2.js"></script>
  8. </head>
  9. <body>
  10. <!--页面内容-->
  11. <div></div>
  12. <div></div>
  13. </body>
  14. </html>
复制代码


这种做法的目的:
把所有的外部文件(包括CSS和JS文件)的引用都放在相同的地方。


可是,在文档的<head>元素中包含所有的JS文件,意味着:
必须等到全部的JS代码都被下载解析执行完成以后,才能开始呈现页面的内容(<body>中元素)


下载解析执行是三个很重要的流程,暂时不用深入理解,只需要知道存在这三个步骤就行。

假如,不经意在上万行的JS文件中,存在一些不合理的bug,然后用户就会看到一个空白页面...

这种浏览器中很明显的页面呈现延迟,会让我们失去很多的用户。

为了避免上述的尴尬情况,现代Web应用程序一般都把全部的JS引用放在<body>元素中页面元素的后面

如下所示:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script</title>

  6. </head>
  7. <body>
  8. <!--页面内容-->
  9. <div></div>
  10. <div></div>

  11. <!--放在页面元素的后面-->
  12. <script type="text/javascript" src="js/fishc1.js"></script>
  13. <script type="text/javascript" src="js/fishc2.js"></script>
  14. </body>
  15. </html>
复制代码


页面元素就是网页要生成的内容,会有很多的标签。

通过把JS文件放在</body>前,这样解析JS之前,页面的内容将完全呈现在浏览器中。

而且用户也会因为浏览器窗口显示空白页面的时间缩短而感到加载速度变快。




defer(延迟)代码

HTML4.01开始便为<script>标签定义了defer属性。

defer属性适用于外部JS文件(src引入)。

这个属性的用途是:
表明代码执行时不会影响页面的构造。


代码会被延迟到整个页面执行完毕后再运行。

没错,聪明如鱼油一定发现这个属性很像上面代码中一样,将JS代码放在<body>中所有内容元素之后。

是不是呢?请继续往下看~

现在我们可以把JS代码放在<head>中,然后添加defer属性,代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script</title>
  6.     <script type="text/javascript" defer="defer" src="js/fishc1.js"></script>
  7.     <script type="text/javascript" defer="defer" src="js/fishc2.js"></script>

  8. </head>
  9. <body>
  10. <!--页面内容-->
  11. <div></div>
  12. <div></div>
  13. </body>
  14. </html>
复制代码


在上面的例子中,虽然把<script>放在了<head>中,但其中包含的代码将延迟到浏览器遇到</html>后再执行。

上面的问题解开了,延迟放到</html>之后,而标签位置中我们演示放在</body>之前。

从正常的DOM结构上来讲,二者区别不是很大,只不过:
游客,如果您要查看本帖隐藏内容请回复


HTML5规范要求:
代码按照它们的出现的先后顺序执行


因此第一个延迟代码会在第二个延迟代码之前执行。

而且这两个代码会先于DOMContentLoaded(HTML 文档被完全加载和解析完成之后, DOMContentLoaded 事件被触发,)事件执行。




asyn(异步)代码

HTML5为<script>元素定义了async属性。

async属性适用于外部JS文件(src引入)。

与上面的defer不同,设置async属性后,代码不能按照指定它们的先后顺序执行。

例如:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>script</title>
  6.     <script type="text/javascript" async="async" src="js/fishc1.js"></script>
  7.     <script type="text/javascript" async="async" src="js/fishc2.js"></script>

  8. </head>
  9. <body>
  10. <!--页面内容-->
  11. <div></div>
  12. <div></div>
  13. </body>
  14. </html>
复制代码


在上面的代码中,第二个代码是很有可能在第一个代码之前被执行。

因此,如果两个代码没有相互依赖关系,可以用异步。

指定async属性的目的是:
不让页面等待代码下载和执行,从而异步加载页面其他内容。


强烈建议:
不要再加载期间修改DOM,很有可能DOM树都未建立。




                               
登录/注册后可看大图




如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
Loki的小锤锤 + 5 + 5 + 3 鱼C有你更精彩^_^
睦ちゃん她爹 + 5 + 5 + 3 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-5 17:27:28 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-7-30 10:50:36 | 显示全部楼层
HTML
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-3 10:11:58 | 显示全部楼层
看到关键,不要停
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-7 01:48:45 | 显示全部楼层
我要看答案~~~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-6 16:38:45 | 显示全部楼层
我觉得吧应该把
FBI Warning
鱼C工作室出品
的代码发出来
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-19 17:05:40 | 显示全部楼层
哈哈哈
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-4 12:31:37 | 显示全部楼层
猜不到答案
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-20 09:45:11 | 显示全部楼层
看看隐藏的内容啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-23 12:40:01 | 显示全部楼层
回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-3 22:41:28 | 显示全部楼层
看看是什么
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-5-26 11:03:13 | 显示全部楼层
各位加油
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-17 17:27:53 | 显示全部楼层
6
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-4-17 23:03:31 | 显示全部楼层
求解答
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-13 11:18:55 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-16 10:39:01 | 显示全部楼层
还卖关子?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-24 11:34:07 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-26 16:59:33 | 显示全部楼层
谁打的死
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-13 15:26:30 | 显示全部楼层
回复啥
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-23 00:33:28 From FishC Mobile | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 17:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表