关于异步加载

异步首先我们需要知道html中页面中插入<script></script>在正式的html规范中:
async属性:表示应该立即下载脚本,但不妨碍页面中的其他操作,比如下载资源或等待加载其他脚本。但这个属性只是对外部文件有效。
defer属性:表示脚本可以延迟到html文档完全被解析显示之后才开始加载,它也是对外部文件有效。也就相当于告诉浏览器,立即下载,但是延迟执行。
但是只要不存在async || defer属性,浏览器都会按照<script></script>元素在页面中的出现的先后顺序对他们依次解析。在第一个<script></script>元素包含的代码解析完成后,第二个包含<script></script>的代码才会被解析到,接下来才是第三个...第四个...

下面展示一段代码,理解async!

<!doctype html>
<html>
<head>
  <title></title>
  <script type="text/javascript" async src="js/e1.js"></script>
  <script type="text/javascript" async src="js/e2.js"></script>
    .cc {
      color: red;
    }
    .bb {
      color: blue;
    }
</head>
<body>
     <h1 id="a">我是红色?还是蓝色?</h1>
</body>
</html>

这个代码中,第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要。制定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本文总结一下浏览器在 javascript 的加载方式。关键词:异步加载(async loading),延迟加载(...
    4ea0af17fd67阅读 4,681评论 0 2
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,119评论 25 709
  • JavaScript脚本对现代网站来说是必不可少的。当用户访问站点,需要下载各种资源,例如JS脚本,CSS,图片,...
    张歆琳阅读 13,031评论 0 24
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,084评论 19 139
  • 外行看热闹,内行看门道……非开发的人关注的是功能实现和界面的友好,对于开发人员来说,除了这些还应该同样关注的是程序...
    黄老邪怪阅读 2,472评论 0 0

友情链接更多精彩内容