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. 【转】在64位windows下使用instsrv.exe和srvany.exe创建windows服务

    本文转自:https://www.iflym.com/index.php/computer-use/201205020001.html 在32位的windows下,包括windows7,windows ...

  2. linux中crontab命令

    一.crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动cro ...

  3. Docker命令之 search

    docker search : 从Docker Hub查找镜像 语法 docker search [OPTIONS] TERM OPTIONS说明: --automated :只列出 automate ...

  4. u3d animation运用明细

    u3d的动作legacy模式,经测试得出 using UnityEngine; using System.Collections; public class AnimateCon : MonoBeha ...

  5. ubuntu下gedit和vim输入中文和中文显示

    安装和配置VIM,参考   http://jingyan.baidu.com/album/046a7b3efd165bf9c27fa915.html?picindex=4 在home/你的用户名 这个 ...

  6. lkl风控.随机森林模型测试代码spark1.6

    /** * Created by lkl on 2017/10/9. */ import org.apache.spark.sql.hive.HiveContext import org.apache ...

  7. mongodb可视化工具连接报错

    failed to get address info 这时候注意看一下 IP地址是不是加了http了,如果加了一定要去掉.IP地址是不加http的.去掉就能正常连接了.

  8. python-类的方法与类的成员

    preface include: @classmethod @staticmethod @property 私有属性 类的成员 #!/usr/bin/env python class animal(o ...

  9. dos 批处理中%cd% 和%~dp0%的区别

    看网上介绍区别,写的好复杂,其实很简单: %cd%  在批处理和命令窗口都能使用.用于打印,当前工作路径. %~dp0% 则只能用于批处理中,用于获得当前批处理文件所在的路径. 做个试验试一下: @e ...

  10. QT3D场景快速绘制入门学习

    在QT中实现3D绘制的方式: 1)   使用QT OpenGL模块(QOpenGLWidget等) 2)   使用QT 3D C++类(QEntity等) 3)   使用QT 3D QML类(Enti ...