Script标签中 defer 和 async

defer延迟脚本

js的引入<script></script>被放在body的结束符之前,这主要是为了让页面的所有节点被加载完了之后在执行js代码,不仅为了防止js获取dom节点失败的情况出现,也是为了提高并行下载。
如果一定要将script标签放在head中,又担心无法获取到dom节点的话,可以如以下代码形式定义延迟脚本defer:

<script type="text/javascript" defer="defer" src="js/hom.js" ></script>

defer的作用在于将脚本延迟到整个页面都解析完毕之后再运行。等同于告诉浏览器立即下载js脚本,但延迟执行。同时defer=“defer”定义的js脚本也会按照它们出现的先后顺序执行。

ps:defer只对外部脚本文件起作用

async 异步脚本:

<script type="text/javascript" async="async" src="js/hom.js" ></script>

异步脚本的作用与延迟脚本相对一致,同样将脚本延迟到整个页面都解析完毕之后再运行,也只对外部脚本文件起作用。唯一区别在于,标记为async的脚本并不保证按照它们的先后顺序执行

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记。 向html页面中...
    加油小杜阅读 3,777评论 0 0
  • 简单介绍JavaScript的发展历史 JavaScript因互联网而生,回顾它的历史要从浏览器的历史讲起。 19...
    _Dot912阅读 3,427评论 0 3
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,159评论 24 450
  • 2017半年过去了,收获很多,感悟也很多,平时有喜欢把心情写出来的习惯,就当是给自己的人生留个小档吧。却是好久没有...
    沙漠渔妇阅读 2,755评论 0 0
  • 萧萧冬半晴方好,青青新草疑春到。 婴媪唱檐廊,残菊犹递香。 门前风景簇,枕畔诗书慕。 搔首素笺泊,句斟字又酌。 ...
    烟火里的诗和远方阅读 3,106评论 2 3