script标签里的defer属性
入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下。在这里分享出来。
需要注意的有三点,其中前两点是在错误中分辨出来的:
错误来源:http://www.w3school.com.cn/tags/att_script_defer.asp
1,defer属性只有IE支持;应该说是在主流浏览器都是支持的;
http://www.runoob.com/tags/att-script-defer.html 中说了,在所有主流浏览器都支持defer属性;在Chrome,FF上亲测可用。
2,defer必须用在引入js文件的script标签中;内嵌在html页面中的script标签是不起作用的。
如下图所示,这样的用法是错误的, 直接报错误: Uncaught TypeError: Cannot read property 'firstChild' of null
3,需要明白defer属性的真正含义,我参考的是http://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html
精髓的话,就是js文件与dom结构一起加载,但是js文件会等html渲染完之后再执行。
最后再说一下,之所以用defer属性,是要把js文件在页头那里就引入,但是你要是放在了页尾,那就不用再使用这个属性。否则就是画蛇添足了。
PS:w3school是不是已经停更了啊?以后还是去菜鸟教程看吧。。。
script标签里的defer属性的更多相关文章
- <script>标签里的defer和async属性 区别(待补充)
defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...
- 用PHP 去掉所有html标签里的部分属性
用PHP 去掉所有html标签里的部分属性 http://zhidao.baidu.com/question/418471924.html 用PHP 去掉所有html标签里的部分属性 tppabs & ...
- <script>标签中的 defer 与 async区别
在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...
- script标签async和defer的区别及作用
作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...
- script 标签里的 async 和 defer
无 async 和 defer 浏览器立即加载并执行指定脚本(读到即加载并执行),阻塞文档解析 async 脚本的加载执行和文档的加载渲染 并行. defer 脚本的加载和文档的加载渲染并行,但脚本的 ...
- 用js动态的改变img标签里面的src属性实现图片的循环切换
JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’): 具体: i ...
- JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)
一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...
- script标签加载顺序(defer & async)
script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
随机推荐
- class命名
常见class关键词: 布局类:header, footer, container, main, content, aside, page, section 包裹类:wrap, inner 区块类:r ...
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
摘要: JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外,还有jps.jstack.jmap.jhat.jstat.hprof等小巧的工具,本博客希望 ...
- [python] 常用正则表达式爬取网页信息及分析HTML标签总结【转】
[python] 常用正则表达式爬取网页信息及分析HTML标签总结 转http://blog.csdn.net/Eastmount/article/details/51082253 标签: pytho ...
- 几种jQuery 实现无限滚动的插件
1.EndLess Scroll 2.infinite-scroll插件的使用
- ElasticSearch部署安装
测试版本:elasticsearch-5.1.1 1.Windows环境下安装(win10系统) 1)解压elasticsearch-5.1.1.zip. 2)执行elasticsearch.bat启 ...
- CodeForces #362 div2 B. Barnicle
题目链接: B. Barnicle 题意:给出科学计数法 转化成十进制的整数或小数 并输出. 思路:暑假训练赛见过了,当时大腿A掉了,并表示是道水题. 刷CF再次遇见,毫不留情WA了几次.比如: 0. ...
- AndroidTouch事件总结
1.自定义的控件几乎都要用到触摸事件,不交互怎么响应,相关的事件处理函数由dispatchTouchEvent.onInterceptTouchEvent.onTouchEvent,处理这些事件的由v ...
- asp.net和js读取文件的MD5值的方法
前言 文件的md5值,即文件签名,为了验证文件的正确性,是否被恶意篡改等.每个文件有一个唯一的md5值. 最近公司开发的app文件包的校验就有用到文件md5值. 一.asp.net获取 ①和上传文件一 ...
- RSA加密,应用授权及MSSQL备份与还原
01.QBRSA加解密处理 --> a.利用 RSA密钥生成器生成密钥(e,n,d) [e,n]为私钥, [d,n]为公钥 b.正向加密: 用私钥加密,用公钥解密 c.反向加密: 用公钥加密 ...
- Excel 行列转置 解决竖向拉,字母跟着递增的问题
今天工作中遇到需要将Excel行列转置涉及到的数据单元格一共几千个 查询网上说可以通过复制粘贴单元格,粘贴选项中转置一项实现,但是所涉及的sheet页中,数据格式和单元格格式各不一样,转置失败! 怎么 ...