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把数组、字符串 生成文件

    生成的代码 data/ss.php <?php return array ( ', ', ); php代码 $str = "<?php\nreturn \n"; $my ...

  2. 【LSTM】Understanding-LSTMs

    http://colah.github.io/posts/2015-08-Understanding-LSTMs/

  3. vue如何加入百度ssp广告位代码

    vue如何加入百度联盟广告,可以参考 :http://www.cnblogs.com/beileixinqing/p/8379184.html 这里讲述vue如何加入百度ssp媒体的广告 这里是百度异 ...

  4. go反射的规则

    第一次知道反射的时候还是许多年前在学校里玩 C# 的时候.那时总是弄不清楚这个复杂的玩意能有什么实际用途……然后发现 Java 有这个,后来发现 PHP 也有了,再后来 Objective-C.Pyt ...

  5. 随笔 -- IO -- Socket/ServerSocket -- Echo(BIO)实例

    随笔 -- IO -- Socket/ServerSocket -- 系统概述 Java中提供的专门的网络开发程序包------java.net Java的网络编程提供的两种通信协议:TCP和UDP ...

  6. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JavaScript-this理解

    javascript this可以绑定到:全局对象,自己定义的对象,用构造函数生成的对象,通过call或者apply更改绑定的对象    1.全局对象  function globalTest(nam ...

  8. iOS 添加Resource bundle target(静态库中使用图片等资源)

    一.首先将资源文件打包成bundle 新建工程:File -> New -> Project... -> OS X -> Framework & Library -&g ...

  9. Bypass D盾_IIS防火墙SQL注入防御(多姿势)

    0X01 前言 D盾_IIS防火墙,目前只支持Win2003服务器,前阵子看见官方博客说D盾新版将近期推出,相信功能会更强大,这边分享一下之前的SQL注入防御的测试情况.D盾_IIS防火墙注入防御策略 ...

  10. Oracle 常用函数备查

    ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 显示值:07 yyy three digits ...