html5里面的延迟加载属性
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里面的延迟加载属性的更多相关文章
- 基于HTML5树组件延迟加载技术实现
HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...
- HT for Web的HTML5树组件延迟加载技术实现
HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- HTML5系列一(属性概述)
HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- html5 input的type属性启动数字输入法
html5 input的type属性启动数字输入法 当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
随机推荐
- MyBatis通用Mapper技巧
一.排序 错误代码:example.orderBy(BaseEntity.Field.GMTUpdate + " desc"); 正确方式: 一是:通过注解 @OrderBy(va ...
- Python入门学习:网络刷博器爬虫
1.比较有趣,可以不断刷新指定的网址 2.源码: #!/usr/bin/env python3 # -*- coding: utf-8 -*- import webbrowser as web imp ...
- git基于历史commit创建分支
基于以前的commit创建一个分支 步骤: 1.确定需要取出版本的commit值 git log 2.基于该commit创建分支 git branch <branch name> < ...
- git 出错 bad index file sha1 signature
error: bad index file sha1 signature fatal: index file corrupt 解决方法:使用git命令执行: $ rm -f .git/index $ ...
- hibernate DetachedCriteria 分页
# 具有一个直观的.可扩展的条件查询API是Hibernate的特色. # # 15.1. 创建一个Criteria 实例 # org.hibernate.Criteria接口表示特定持久类的一个查询 ...
- AJAX简单介绍
什么是AJAX Ajax 是 AsynchronousJavaScript and XML(以及 DHTML 等)的缩写. HTML 用于建立 Web表单并确定应用程序其它部分使用的字段. ·J ...
- js 去掉重复数组
js去掉重复数组 重点一:字符串转数组 strArr.join(',') 重点二:做循环数组删除的时候,每次循环就把color[i] 去对比i之前所有数组color组合起来的字符串 比如 : i=1 ...
- DEFINE_PER_CPU,如何实现“数组”
引述自:http://www.unixresources.net/linux/clf/linuxK/archive/00/00/47/91/479165.html Kevin.Liu 的<调度器 ...
- svg文字与图像
摘要: svg与canvas一样都可以将文本和图像放在画布中,制作出不一样的效果.下面是如何使用svg来渲染文本与图像. 简介: SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度 ...
- c#中如何退出程序后自动重新启动程序
//触发退出程序事件 private void button1_Click(object sender, EventArgs e) { Application.E ...