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. php json_decode无法解析特殊问好字符

    在通过别人接口请求信息的时候,偶尔会遇到由于部分字符,如以下情况,则通过json_decode是会返回null的 但是这种情况通常不是由于整体编码的问题,因为在解析的时候就是以utf-8的编码解析的 ...

  2. 多目标线性规划求解方法及matlab实现

    转载: https://blog.csdn.net/wzl1997/article/details/79120323

  3. 关于js中namespace命名空间模式

    命名空间有助于减少程序中所需要的全局变量的数量,并且同时有助于避免命名冲突或过长的名字前缀. 关于命名空间的例子: /** * 创建全局对象MYAPP * @module MYAPP * @title ...

  4. 算法-Java组合

    code: import org.assertj.core.util.Lists; import java.util.ArrayList; import java.util.Collections; ...

  5. 简单理解AOP(面向切面编程)

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. AOP与OOP是面向不同领域的两种设计思想. ...

  6. ecshop学习1

    ECSHOP开发中心(www.68ecshop.com) 研究一下ecshop,先安装一下.下面是整个安装步骤: 1.下载ecshop程序包,下载地址: http://download.ecshop. ...

  7. 怎么用ABBYY重组PDF文档

    ABBYY PDF Transformer+是一款可创建.编辑以及将PDF文件转换为其他可编辑格式的通用工具,除此之外,还可以使用ABBYY PDF Transformer+重新组织PDF文档,如在文 ...

  8. Apache+php5

    .下载回来的是解压文件,解压好放到要安装的位置.(我这里以D:\Acpache24为例) .打开Apache24\conf下httpd.conf 文件,用记事本打开即可. ()第37行ServerRo ...

  9. mysql中,通过json_insert函数向json字段插入键值?json_insert函数的使用?

    需求描述: 通过json_insert向json字段中插入值,在此进行实验,记录下. 操作过程: 1.查看已经有的包含json数据类型的表 mysql> select * from tab_js ...

  10. python对日志处理的封装

    一个适应性范围较广的日志处理 # coding=utf8 """ @author bfzs """ import os import log ...