No.1 —答案

15. js延迟加载和异步加载的区别,各自实现方法?

(参考:《javascript高级程序设计第3版》 P13 2.1.2 2.1.3 点击了解更多
个人理解,欢迎指出问题和讨论。

差别主要在于�何时进行脚本的执行,如果说defer是一种�超市结账口有序排队场景,那么async就是路边摊甩卖时混乱的疯抢状态。

正常情况下,当浏览器在解析HTML源文件时如果遇到外部的script,那么解析过程会暂停,并发送请求来下载script文件,只有script完全下载并执行后才会继续执行DOM解析。

async 和 defer 标注的 script 会被立即下载,html解析不会暂停

XHTML文档中写法:

延迟脚本:defer = "defer"
异步脚本: async = "async" (读作:[ə'sɪŋk] )

区别:

defer:顺序加载,延迟执行
<!DOCTYPE html>
<html>
    <head>
        <title>延迟</title>
        <script type="text/javascript" defer = "defer" src="no1.js"></script>
        <script type="text/javascript" defer = "defer" src="no2.js"></script>
    </head>
<body>
</body>
</html>

延迟脚本:脚本会被延迟到整个页面都解析完毕后再运行,即“立即下载,延迟执行”,延迟是延迟到</html>之后再执行,HTML5要求脚本按照出现顺序执行,但实际可能不同,所以最好只包含一个延迟的script脚本

为了预防有浏览器不支持的defer属性,把延迟脚本放在页面底部即“body”中内容之后是最好的选择,也可以将所有延迟脚本的代码都封装在诸如jQuery 之$(document).ready 之类的结构中。

支持情况:

IE4~IE7支持嵌入脚本的defer属性
IE8之后支持HTML5规定。
HTML5规定:defer属性只适用外部脚本文件,忽略内置脚本设置的defer属性。
浏览器:IE4 、Firefox3.5、 Safari 5 、Chrome

async:�下载完就立即执行,无序
<!DOCTYPE html>
<html>
    <head>
        <title>异步</title>
        <script type="text/javascript" async = "async" src="no1.js"></script>
        <script type="text/javascript" async = "async" src="no2.js"></script>
    </head>
<body>
</body>
</html>

异步脚本:目的是不让页面等待脚本的下载和执行,即“告诉浏览器立即下载脚本文件,同时异步加载页面其他内容”。
若有多个脚本文件,则不会保证脚本执行的顺序(不同于defer)。比如no2.js可能在no1.js之前执行.
异步脚本一定会在页面的load事件之前执行。

支持情况:

与defer类似,只支持外部脚本文件
浏览器:Firefox3.6 、Safari 5 、Chrome

---------------我是分割线 ----->。< -----我是分割线-------------------

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

推荐阅读更多精彩内容

  • 本文总结一下浏览器在 javascript 的加载方式。关键词:异步加载(async loading),延迟加载(...
    4ea0af17fd67阅读 1,071评论 0 2
  • 简单介绍JavaScript的发展历史 JavaScript因互联网而生,回顾它的历史要从浏览器的历史讲起。 19...
    _Dot912阅读 512评论 0 3
  • JavaScript脚本对现代网站来说是必不可少的。当用户访问站点,需要下载各种资源,例如JS脚本,CSS,图片,...
    张歆琳阅读 9,133评论 0 24
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,498评论 1 5
  • 今天来石家庄办事,闲暇之际来到了平安公园小转一圈,景色宜人,风景如画,瞬间使心情变得很放松! ...
    独狼007阅读 263评论 0 1