script标签中的async和defer

　　在程序中代码是一行一行执行的，html标签都是由渲染引擎来执行，代码执行时从上往下一行一行执行，当执行到alert（如下图），alert会阻塞后面代码的执行，当点击完确定之后，代码继续往下执行。

　　javascript的内容同样可在外部进行引用，如下图所示，正常情况下执行结果和上面的内容相同，但当我们给html的script标签中加入async或者defer属性时，代码的执行过程也将会随之改变。

　　async 为异步，顾名思义就是多个人同时做多件事，这里区分sync，sync为同步，就是一个人有序的做多件事情。因此在script标签中加入async属性后，程序执行时，外部引用的js文件内容和html中的代码同时进行。在这里需要注意，因为代码的执行速度不同，显示的效果有可能不同，在此是js内容被下载完成后立即执行。

　　defer也会异步的下载去执行js内容，当然script标签中不会有两个相同功能的属性，它和async的区别是什么呢？defer和async的区别就是defer下载完js的内容后不会立即执行,直到html文档加载解析完成后才执行，下图就是使用defer的过程，代码虽然简单，但是这样可以清晰的表达defer的作用。

总结：前端项目中肯定少不了多多少少的js文件，defer和async就给我们在程序执行过程中提供了很方便的引用，更方便我们维护代码，避免代码中这一个那一个的js引用。

转载于:https://www.cnblogs.com/Codegenius/p/5835635.html

script标签中的async和defer相关推荐

浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了. 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲 ...
script标签中async与defer的区别
script标签内未设置async或者defer时: (1)script放在<head>,会阻塞HTML代码的解析和渲染,而放在<body>底部时,不会阻塞HTML代码的解析和 ...
script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
script标签中type为script type=text/x-template是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
script标签中defer和async的区别
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下: defer为true:延迟加载脚本,在文档完成解析完成开始执行,并且在DOMContentLoa ...
script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
script 标签中的defer 和 async 属性
浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕 ...
html script src属性,动态修改script标签中的src属性存在的问题
今天某个同事遇到一个诡异的问题,问题描述如下: 需求:通过脚本动态修改script标签的src来载入一段外部脚本并执行实现方式(#1): document.getElementById('exter ...
script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...

script标签中的async和defer

script标签中的async和defer相关推荐

最新文章

热门文章