浏览器对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. cat命令

    [cat]          合并文件和打印到标准输出 命令格式: cat [OPTION]... [FILE]... 命令功能: 拼接文件或者做标准输入输出 命令格式: cat [OPTION].. ...

  2. Unity3D访问Android系统目录

    file:///sdcard/Movies/3D/互动.mp4file:///storage/emulated/0/Movies/3D/互动.mp4/storage/emulated/0/Movies ...

  3. cocos2d-x for android配置 & 运行 Sample on Linux OS

    1.从http://www.cocos2d-x.org/download下载稳定版 比如cocos2d-x-2.2 2.解压cocos2d-x-2.2.zip,比如本文将其解压到 /opt 目录下 3 ...

  4. java复杂枚举

    枚举以红绿灯为例,红灯30s后为绿灯,绿灯45s后为黄灯,黄灯5s后为红灯.具体的枚举代码如下: public enum TrafficLamp{ RED(30){ public TrafficLam ...

  5. $.extend()、$.fn和$.fn.extend()

      理解$.extend().$.fn和$.fn.extend()   原文链接:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.ht ...

  6. android 任意类 获得屏幕大小

    方法一 WindowManager managet=(WindowManager) context.getSystemService(Context.WINDOW_SERVICE); Display ...

  7. jquery 替换文本内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. https单向认证和双向认证

    单向认证: .clinet<--server .clinet-->server .client从server处拿到server的证书,通过公司的CA去验证该证书,以确认server是真实的 ...

  9. python学习笔记-进程线程

    1.什么是进程(process)? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述 ...

  10. 【Java EE 学习 83 上】【SpringMVC】【基本使用方法】

    一.SpringMVC框架概述 什么是SpringMVC?SpringMVC是一个和Struts2差不多的东西,他们的作用和性质几乎是相同的,甚至开发效率上也差不多,但是在运行效率上SpringMVC ...