浏览器对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. Java内存管理及GC算法

    概述 内存划分 虚拟机规范中将内存分为六大部分,分别为PC寄存器.JAVA虚拟机栈.JAVA堆.方法区.运行时常量及本地方法栈. 1.PC寄存器:线程独占: 2.JAVA虚拟机栈:线程独有:JAVA虚 ...

  2. Windows HTTP Services

    原文:https://msdn.microsoft.com/zh-cn/library/windows/desktop/aa384273(v=vs.85).aspx Purpose (目的) Micr ...

  3. git常用的命令集合

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone g ...

  4. REPL环境

    一.Node的REPL基本操作 REPL(Read-eval-print-loop):交互式解析器 在REPL环境下,可以定义和运行变量.函数.对象. REPL的常用命令: 进入node,即进入了RE ...

  5. win10下安装mysql5.7.16（解压缩版）

    注:本文涉及的是解压缩版的安装 安装教程 下载mysql 地址是:http://dev.mysql.com/downloads/mysql/ 解压缩下载的文件 修改ini文件(在解压缩后的mysql文 ...

  6. sql中NVARCHAR(MAX) 性能和占空间分析 varchar(n),nvarchar(n) 长度性能及所占空间分析

    varchar(n),nvarchar(n) 中的n怎么解释: nvarchar(n)最多能存n个字符,不区分中英文. varchar(n)最多能存n个字节,一个中文是两个字节. 所占空间: nvar ...

  7. 【转载】制作一个超精简的WIN7.gho

    首先说明一点,这个Resource不是我制作的,Google搜了下GHO镜像文件制作,挺复杂的.如果要从头到尾自己制作GHO文件可以参考: http://baike.so.com/doc/674790 ...

  8. ExtJS基础知识总结：自定义日历和ComboBox控件(二)

    概述 1.ExtJS 5不支持日期选择框中只选择年月,为了满足ExtJs5可以实现选择年月的功能,查询网上资料,整理出来了相应的处理方式,最终实现的效果如下图: 2.ExtJS 控件丰富,如果需要实现 ...

  9. javascrip中cookie的使用详细分析

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由J ...

  10. i春秋url地址编码问题

    i春秋学院是国内比较知名的安全培训平台,前段时间看了下网站,顺便手工简单测试常见的XSS,发现网站搜索功能比较有意思. 其实是对用户输入的内容HTML编码和URL编码的处理方式在这里不合理,提交到乌云 ...