浏览器对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. 如何方便的保存WinForm窗体控件的位置大小等等配置信息

    由于分辨率.屏幕主题.字体大小的不同,窗体显示效果在不同机器上不尽相同.窗体的弹性设计并不能满足多样的需求.为保证在各种情况下,能有满意的效果.窗体的多样显示方式能改变,并且保存.载入配置,显得很重要 ...

  2. oracle中trunc()和to_char()函数用法

    -----trunc(for date) select sysdate from dual; --当前时间  2016/9/7 10:32:04select trunc(sysdate) from d ...

  3. 修改git的远程仓库命令

    1. 修改命令 git remte origin set-url URL 2.先删后加 git remote rm origin git remote add origin git@github.co ...

  4. 测试css

    <h1>shell使用指南</h1> <h2>ZMODEM功能</h2> <pre><code>yum install lrzs ...

  5. kettle系列-我的开源kettle管理平台[kettle-manager]介绍

    kettle管理工具 专门为kettle这款优秀的ETL工具开发的web端管理工具. 项目简介 kettle作为非常优秀的开源ETL工具得到了非常广泛的使用,一般的使用的都是使用客户端操作管理,但问题 ...

  6. popupwindow的基本使用以及基本动画效果

    1.创建一个popupwindow view的布局文件自己写一个就好了,这里就不说了 View view= LayoutInflater.from(context).inflate(R.layout. ...

  7. 动态规划求最长公共子序列（Longest Common Subsequence, LCS）

    1. 问题描述 子串应该比较好理解,至于什么是子序列,这里给出一个例子:有两个母串 cnblogs belong 比如序列bo, bg, lg在母串cnblogs与belong中都出现过并且出现顺序与 ...

  8. html视频播放器的代码 及其参数详解

    播放视频最实用的一段代码是: 程序代码 <"></embed></object> 其他的看参数自己修改吧 .avi格式 代码片断如下: 程序代码 < ...

  9. ABP中单元测试的技巧：Mock和数据驱动

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:虽然ABP为大家提供了测试的脚手架了,不过有些小技巧还是需要自己探索的. ASP.NE ...

  10. jsp include flush true

    设置flush为true,就是说,如果你的缓冲区的内容很多了,就将数据读出,以免数据泄漏,造成错误服务器端页面缓冲,大致的意思是,在将生成的HTML代码送到客户端前,先在服务器端内存中保留,因为解释J ...