一般,我们通过src引入js文件时建议在页面末尾引入,因为会阻塞页面的渲染。defer和async可以达到同样效果


当HTML解析器遇到<script>元素时,它必须先执行脚本,然后再恢复文档的解析和渲染。

脚本的执行旨在默认情况下时同步和阻塞的,我们可以为script标签添加defer和async属性(当然并不是所有浏览器支持)

使用defer和async属性,浏览器可以在下载脚本时继续解析和渲染文档

如果标签同时有这两个属性,同时支持defer和async属性时会自动忽略defer属性

如下:

<script defer src="aa.js"></script>

<script async src="bb.js"></script>

注意:

延迟的脚本会按它们在文档中出现的顺序执行,而异步的脚本在它们载入后执行(顺序可能无序)。

js脚本同步、异步与延迟的更多相关文章

  1. js的同步异步

    由于js没有多线程,所以处理多任务的时候,可以用异步回调来解决.js中setTimeout.setInterval.ajax(jq中可以选择同步或异步)均会开启异步.遇到异步模块,会将其推入值任务队列 ...

  2. js的线程和同步异步以及console.log机制

    项目上线了,闲下来就写写东西吧.积累了好多东西都没有做笔记~挑几个印象深刻的记录一下吧. js的同步异步以及单线程问题: 都知道单线程是js的一大特性.但是通常io(ajax获取服务器数据).用户/浏 ...

  3. 异步执行js脚本——防止阻塞

    JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...

  4. 关于Js脚本的延迟执行

      关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面.这一次我们着重讲解一下放在标签内部.在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的. ...

  5. JavaScript值延迟脚本和异步脚本

    Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<scri ...

  6. JS中同步和异步

    首先,我们要知道,JavaScript的本质是一门浏览器脚本语言,在执行的时候是一行一行的执行,只有前面的代码执行完了才会执行后面的代码.JS是单线程语言指的就是这个意思. 同步和异步其实在进行任务执 ...

  7. 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  8. 无阻赛的脚本(js脚本延迟方法)

    js脚本的加载与执行 1.延迟脚本(defer属性) 带有defer属性的script标签,可以放置在文档的任何位置,在页面解析到该标签时,会开始下载该脚本,但是不会立即执行,直到dom加载完成(on ...

  9. js中的异步与同步,解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

随机推荐

  1. redis 自启动脚本

    看到网上许多手写的亦或复制的redis开机自启动脚本, 版本好多, 其实最简单的可以从下载的redis文件里找得到 我下载的redis是 3.0.3 版本的,  对于其他版本, 没有详细查看, 有需要 ...

  2. 如何学习H264协议

    如何学习h.264协议 首先,我假定你已经具有如下基础: 1 了解基本的视频知识,知道什么是YCbCr/YUV: 2 知道基本的视频压缩原理: 如果这两条还不具备,那么,停一下,补一下课.这方面的相关 ...

  3. jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个 ...

  4. NPOI对excel文件的导入导出

    现理解:将一个Excel文件(工作簿-IWorkBook)看做是一个你要操作的对象,每个工作簿包含多个工作表(ISheet)对象,每个工作表中又包含多个行对象(IRow),每行又包含多个单元格(ICe ...

  5. SpringMVC介绍之约定优于配置

    SpringMVC介绍之约定优于配置 所谓的约定优于配置就是指在程序开发过程中我们约定好一些规则可以使我们更少的进行配置和代码编写.就这么简单的一句话可能你还不是很懂什么是约定优于配置,没关系,看完后 ...

  6. RSA加密算法正确性证明

    RSA加密算法是利用大整数分解耗时非常大来保证加密算法不被破译. 密钥的计算过程为:首先选择两个质数p和q,令n=p*q. 令k为n的欧拉函数,k=ϕ(n)=(p−1)(q−1) 选择任意整数a,保证 ...

  7. C++变量的“总分性”(Mereology)

    Stroustrup 在自传中说自己在哲学上深受 Kierkegaard (吉爾凱高爾)的影响,而讨厌黑格尔.所以看 Stroustrup 的书,很少感受到抽象理论的重要性.这也影响了C++的文化:许 ...

  8. 用core dump来调试程序段错误

    有的程序可以通过编译, 但在运行时会出现Segment fault(段错误). 这通常都是指针错误引起的.但这不像编译错误一样会提示到文件->行, 而是没有任何信息, 使得我们的调试变得困难起来 ...

  9. static_cast、const_cast和reinterpret_cast学习

    static_cast 任何具有明确定义的类型转换,只要不包含底层const,都可以使用static_cast.例如,通过将一个运算对象强制转换成double类型就能表达式浮点数除法: //进行强制类 ...

  10. underscorejs-invoke学习

    2.13 invoke 2.13.1 语法: _.invoke(list, method, *args) 2.13.2 说明: 每个list属性值都执行method方法,根据method方法返回一个数 ...