入职新公司,看代码的时候注意到有的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属性的更多相关文章

  1. <script>标签里的defer和async属性 区别(待补充)

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

  2. 用PHP 去掉所有html标签里的部分属性

    用PHP 去掉所有html标签里的部分属性 http://zhidao.baidu.com/question/418471924.html 用PHP 去掉所有html标签里的部分属性 tppabs & ...

  3. <script>标签中的 defer 与 async区别

    在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...

  4. script标签async和defer的区别及作用

    作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...

  5. script 标签里的 async 和 defer

    无 async 和 defer 浏览器立即加载并执行指定脚本(读到即加载并执行),阻塞文档解析 async 脚本的加载执行和文档的加载渲染 并行. defer 脚本的加载和文档的加载渲染并行,但脚本的 ...

  6. 用js动态的改变img标签里面的src属性实现图片的循环切换

    JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’): 具体: i ...

  7. JavaScript <script>标签的位置、延迟脚本(defer属性)与 异步脚本(async属性)

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  8. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  9. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

随机推荐

  1. 只需一点小修改,HTC Vive画面会更清晰锐利

    这里要先谢谢@NB81rkd0qB,他的那个帖子里其实很多碰到的问题都可以解决,但是目前有点乱,所以我这里斗胆整理一下,希望能帮助一下朋友们.第一步:我们要找到[steamvr.vrsettings] ...

  2. ExtJS Grid导出excel文件

    ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...

  3. SPSS数据分析—广义线性混合模型

    广义线性混合模型是目前线性模型范畴内最为完备的模型框架,它是广义线性模型的进一步延伸,进一步突破适用条件,因变量既 可以非正态,也可以非独立,由于其最为复杂,因此SPSS对其输出结果采用模型格式,而不 ...

  4. flask+html selected 根据后台数据设定默认值

    先给代码 <script> $("#selector_political_status").val('{{ archive.political_status }}'); ...

  5. 关于 XMLHttpRequest对象的onreadyStateChange方法

    最近做了一个Ajax的demo,前台用HTML+javascript,后台用一个servlet来响应,流程如下: 页面点击链接事件,由js捕获,生成一个请求到后台,servlet处理后给出响应信息,并 ...

  6. vs中部分快捷键

    ctrl + r ctrl + r     ctrl 按两次r修改变量名(修改被引用到的变量名),不同于ctrl + f(修改全部相同名字的) ctrl +r ctrl + m    先选中一部分da ...

  7. Javascript理解this对象

    this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象. 通过以下几个例子加深对this的理解. (1)作为函数调用 var name = 'Jenny'; functi ...

  8. Javascript学习笔记3 Javascript与BOM简介

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...

  9. Linux mount的使用

    大家在使用Linux系统的时候,肯定用过一些共享文件的东西,比如FTP,Mount 等等,接下来我重点说一下Mount的用法: 现在有一台测试环境上面需要部署Mount服务器(10.10.10.27) ...

  10. 16090202(剑灵GPA)

    [目标] 剑灵GPA [思路] 1 2 绘制角色DrawCall body 5526面片 2.1[第一个DrawCall]63 RT 这个DrawCall PS VS 参数列表 VS // // Ge ...