入职新公司,看代码的时候注意到有的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. 『.NET Core CLI工具文档』(一).NET Core 命令行工具(CLI)

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:.NET Core Command Line Tools 翻译:.NET Core命令行工具 什么是 .NET Core ...

  2. simplestyle

    simplestyle-spec A simple specification for styling GeoJSON data. Versions 1.1.0 Adds properties to ...

  3. [转]如何在ASP.NET Core中实现一个基础的身份认证

    本文转自:http://www.cnblogs.com/onecodeonescript/p/6015512.html 注:本文提到的代码示例下载地址> How to achieve a bas ...

  4. PythonNote01_HTML标签

    >头标签<head> >>位置 头标签要放在头部之间 >>种类 <title> : 指定整个网页的标题,在浏览器最上方显示. <meta&g ...

  5. SGA(System Global Area)

    系统激活时在内存内规划的一个固定的区域,用于存储每位使用者所需存取的数据和必备的系统信息.这个区域成为系统全局区. 数据块缓存区:存放读取数据文件的数据块副本,或者曾经处理过的数据.有效减少读取数据时 ...

  6. git将本地代码 和服务器git@osc 上的代码 关联

    将本地代码 和服务器git@osc 上的代码 关联 要使用git 首先,你得安装一个git 下载 http://git-scm.com/downloads 安装完成后,需要简单的配置一下,打开 Git ...

  7. FZU みねちゃんの修罗场(从一堆出现三次的数中找出出现两次的数)

    みねちゃんの修罗场 Time Limit: 5000 mSec     Memory Limit: 1024 KB Description みねちゃん是个成绩优秀大学二年级学生,本来是和像自己妹妹一般 ...

  8. 转!!mysql order by 中文排序

    1. 在MySQL中,我们经常会对一个字段进行排序查询,但进行中文排序和查找的时候,对汉字的排序和查找结果往往都是错误的. 这种情况在MySQL的很多版本中都存在. 如果这个问题不解决,那么MySQL ...

  9. A+B Problem 详细解答 (转载)

    此为详细装13版 转载自:https://vijos.org/discuss/56ff2e7617f3ca063af6a0a3 全文如下,未作修改,仅供围观,不代表个人观点: 你们怎么都在做网络流,不 ...

  10. 兼容所有浏览器---无缝上下左右交叉运动----原生js+css

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...