入职新公司,看代码的时候注意到有的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区别

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

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

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

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

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

  4. 浅谈script标签中的async和defer

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...

  5. 将javascript函数写在Html标签里

    有些时候不想把函数写在script标签里了,想直接在html标签里直接加上js代码,可以这样写: <body onload="javascript:{window.location.h ...

  6. 在&lt;s:iterator&gt;标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  7. 面试小记---外部脚本必须包含 &lt;script&gt; 标签吗?

    外部脚本必须包含 <script> 标签吗? 答案是否定的. 身为小白的我一开始也是以为这句话的对了,因为本来嘛,引用外部脚本不都用的是<script>标签中的src属性吗.所 ...

  8. script标签不带属性与带async、defer的区别

    <script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...

  9. 1关于script标签属性,注意点,浏览器文档模式,各种数据类型的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 如何获得Webapp的根项目路径 即ServletContext.getRealPath() 的输入参数要以&quot;/&quot;开头

    ServletContext.getRealPath() 的输入参数要以"/"开头 2014-03-26 15:54 5738人阅读 评论(1) 收藏 举报 版权声明:本文为博主原 ...

  2. 了解HTML 盒模型

    HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对 ...

  3. postgresql 中replace 函数

    select replace(字段名,E'\r','') from 表名 where 字段名 like E'%\r%';:  查看修改后结果,并不真实修改数据库 update 表名 set 字段名=r ...

  4. MD5 加密的密码在数据库重置

    如果不小心更改掉了项目管理员帐号的密码而又忘了,存在数据库里的密码又是MD5加密后的,这时候怎么办呢? 1. oracle数据库,可以用DBMS_OBFUSCATION_TOOLKIT.MD5 ( i ...

  5. webpack 插件: html-webpack-plugin

    插件地址:https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在 ...

  6. iOS:搭建本地的服务器

    一.介绍 作为一个专业的程序员,不管你是前端还是移动端或者是后台,能够自己试着搭建一个本地的服务器还是很有必要的,有的时候,我们可以自己测试一些数据,很方便开发.其实,mac是自带有本地的服务器的,用 ...

  7. 160913、ionic + 高德地图定位

    实例一: var AMapArea=document.getElementById('amap'); AMapArea.parentNode.style.height="100%" ...

  8. C#fixed关键字

    fixed 语句禁止垃圾回收器重定位可移动的变量. fixed 语句只在 不安全的上下文中是允许的. Fixed 还可用于创建 固定大小缓冲区. fixed 语句设置指向托管变量的指针,并在执行该语句 ...

  9. HBase Shell输入命令无法删除问题解决技巧

    一.引言: HBase shell使用过程中,使用CRT客户端,命令输入后无法删除一直困绕着我,今天终于受不了,几番度娘,谷哥之后,终于有了解决方法,特共享给大家. 二.操作步骤 secureCRT中 ...

  10. Unity-碰撞

    固定位置和角度 选择项目视图中的 Prefab. 打开检视面板中的 Rigidbody 标签可以看到 Constraints 项. 点击左边的三角形图标, 下面会进一步显示 Freeze Positi ...