浏览器对js文件的操作主要有两部分：下载和执行；

js文件下载在有些浏览器中是并行的，在有些浏览器中是串行的，如：IE8、firefox3、chrome2都是串行下载的；

执行在所有浏览器中默认是阻塞的，当js在执行时不会进行html解析和其他操作，所以，页面顶部的js不宜过大，过大会导致页面长时间处于空白状态，对于外链的js文件，async和defer属性可以减少对页面加载的影响

async表示js是否异步执行，当有这个属性时则不阻塞当前页面的加载，并在js下载完后立刻执行，但是不能保证多个script标签的执行顺序

defer表示js是否延迟执行，当有这个属性时js的执行会推迟到页面解析完成之后，可以保证多个script标签的执行顺序，需要注意的是这两个属性目前对于内嵌的js是无效的而对于dom中创建的script标签在浏览器中则是异步的

如果async为true，那么脚本在下载完成后异步执行

如果async为false，defer为true，那么脚本会在页面解析完毕之后执行

如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行

注：本文来自摘抄

script async 和script defer的区别的更多相关文章

  1. JS—ajax及async和defer的区别

    ###1.ajax  “Asynchronous Javascript And XML”(异步 JavaScript 和 XML) 使用: 如不考虑旧版本浏览器兼容性, // 第一步创建xhr对象 v ...

  2. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  3. <script>, <script async>, <script defer> 三种标签的区别

    <script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...

  4. script标签async和defer的区别及作用

    作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...

  5. script标签不带属性与带async、defer的区别

    <script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...

  6. <script>属性async和defer的区别

    async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...

  7. script async / defer

    script async / defer preload / prefetch https://abc.xgqfrms.xyz/ https://javascript.info/script-asyn ...

  8. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

  9. <script runat=server>、<%%>和<%#%>的区别

    ①<script runat="server">代码段与<%%>内联代码段的区别 在asp.net页面的aspx文件中允许使用<script runa ...

随机推荐

  1. Asp.Net 数据库连接字符串

    <configuration> <connectionStrings> <add name="DefaultConnection" providerN ...

  2. c#延迟加载

    public class BlogUser { public int Id { get; private set; } public Lazy<List<Article>> A ...

  3. Reverse Core 第三部分 - 21章 - Windows消息钩取

    @author: dlive @date: 2016/12/19 0x01 SetWindowsHookEx() HHOOK SetWindowsHookEx( int idHook, //hook ...

  4. 常用的java正则表达式

    常用的正则表达式主要有以下几种: 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了哦 获取日期正则表达式:\d{4}[年|\-|\.] ...

  5. mac 给某个目录添加权限

    1  cd 到这个目录的上一层目录 2  sudo  chmod  -R 777 3 输入密码 4 完成

  6. Java笔记：Number

    序号 方法与描述 1 xxxValue()将number对象转换为xxx数据类型的值并返回. 2 compareTo()将number对象与参数比较. 3 equals()判断number对象是否与参 ...

  7. C# RSA加密解密

    1.解析密钥 /// <summary> /// 把二进制密钥解析成RSACryptoServiceProvider /// </summary> /// <param ...

  8. DOCKER 为新启用的容器配置外网IP

    网卡的配置文件存储在 /etc/sysconfig/network-scripts/ 目录下.每个网卡的详细内容将会以不同的名字存储,比如ifcfg-enp0s3. 让我们看下ifcfg-enp0s3 ...

  9. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  10. AngularJS 相关小问题解决方案合集

    1  解决 Select选择框遍历时,出现一个空白选项: <select style="width: 20%;margin-left: 5px;height: 31px;" ...