html5中给script标签引入了 async 和 defer 属性。

原理:
带有async属性的script标签,会在浏览器解析时立即下载脚本同时不阻塞后续的document渲染和script加载等事件,从而实现脚本的异步加载。

使用:
带有defer属性的script标签,和async拥有类似的功能。并且他们有可以附带一个onload事件<script src="" defer onload="init()">

区别:
async和defer的区别在于:async属性会在脚本下载完成后无序立即执行,defer属性会在脚本下载完成后按照document结构顺序执行。

由于defer和async的兼容性问题,我们通常使用动态创建script标签的方式来实现异步加载脚本,即

    <script>
document.write('<script src="./plugin/lazysizes.min.js" async><\/script>');
</script>

该方式也可以避免阻塞。

注意:document.write()也能写入含有script标签的字符串,但是需要转义。写入的script标签中的内容会正常运行。

html5里面的延迟加载属性的更多相关文章

  1. 基于HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  2. HT for Web的HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  4. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  5. HTML5系列一(属性概述)

    HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...

  6. html5的自定义data-*属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  7. html5 input的type属性启动数字输入法

    html5 input的type属性启动数字输入法   当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  9. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

随机推荐

  1. 微信小程序开发1_资料收集

    [前言] 小程序 [一.资料] 微信官网 开发文档.工具 等 https://mp.weixin.qq.com/cgi-bin/wx [二] 创建小程序和编辑代码,先安装 开发者工具 ,根据所使用的操 ...

  2. 软件设计模式之代理模式(JAVA)

    貌似停笔了近半个月了,实在不该啊,新的一年,时刻让自己归零. Back To Zero,就从这篇文章拉开今年的序幕吧. 这篇文章准备介绍下有关代理模式的基本概念和静态代理.动态代理的优缺点及使用方法( ...

  3. Vue.nextTick和Vue.$nextTick

    `Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 参考原文:http://w ...

  4. 续:纠正:ubuntu 【6.04 LTS】可以安装安装 ! for《Oracle-10.2.0.1,打补丁10.2.0.5:在 debian 版本4【不含4】以上,及 ubuntu 7.04【不含7.04】以上都可以安装!》

    经过长时间的试错.探索,终于查明无法顺利安装oracle10g的原因,并且找到顺利安装的方式. 要点: 无法安装的根本原因有2: 1:libc6-dev的版本为2.23-0ubuntu10,其中的cr ...

  5. WebGL 浏览器函数

    1.requestAnimationFrame(func) 请求浏览器在将来某时刻回调函数func以完成重绘.requestAnimationFrame()成功的一个关键是确定你在执行其他用户diam ...

  6. 微信支付id出现的重复支付解决方法和app应用中多种支付方式之间的对比

    1.微信支付的transId发起支付请求,未登录微信,先帐号登陆,否则直接去支付.这样的话,该transId跟该帐号绑定起来了, 如果下一次再重新使用该transId来支付请求,但是想切换其他的微信帐 ...

  7. pyqt与拉勾网爬虫的结合

    人力部需要做互联网金融行业的从业人员薪酬分析,起初说的是写脚本,然后他们自己改.但这样不太好,让人事部来修改py脚本不太好,这需要安装py环境和一些第三方包,万一脚本改来改去弄错了,就运行不起来了. ...

  8. 5 -- Hibernate的基本用法 --4 4 数据库方言

    Hibernate底层依然使用SQL语句来执行数据库操作,虽然所有关系数据库都支持使用标准SQL语句,但所有数据库都对标准SQL进行了一些扩展,所以在语法细节上存在一些差异.因此,Hibernate需 ...

  9. The list of pre-build cross-compiler

    Recently, I need compile toybox and busybox for my router. This is a list of cross-compiler for MIPS ...

  10. .Net使用DES加密,.Net和java分别解密,并正则匹配替换加密密码为明文

    在VS中用WindowsApplication做一个exe程序,用来给数据库密码加密,加密代码如下 private void generateBtn_Click(object sender, Even ...