script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。默认情况下script标签的会阻止文档渲染，相关脚本会立即下载并执行。

属性

在HTML5中script主要有以下几个属性：async，defer，charset，src，type

  • async（可选）：

　　　　关键词：外部文件，异步下载，异步执行；

　　　　当标签中包含这个属性时会立即下载脚本（外部文件），下载的同时页面继续解析，一旦脚本可用，则会异步执行。不会阻塞DOM的渲染　　

多个带有async的脚本，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。

ps：HTML5的新特性，这意味着其兼容性并不乐观（IE10+）

　　 　  <script src="js/index2.js" async="async"></script> 　　

  • defer（可选）：

　　　　关键词：外部文件，异步下载，延迟执行（等页面解析完）；

　　　　当标签中包含这个属性时，脚本再页面完全被解析或显示之后执行

同时存在多个带有defer的脚本，按照顺序执行所有的script。不会阻塞DOM的渲染　

defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

ps：HTML5会忽略嵌入脚本所设置defer属性，目前只有IE4~IE7还支持defer属性，IE8以后完全遵循HTML5的标准

　　 　　<script src="js/index1.js" defer="defer"></script>

  • charset（可选）：

　　　　关键词：字符集

　　　　大多数浏览器已经忽略它的值了，所以很少有人使用。

  • src（可选）：

　　　　关键词：外部引用

　　　　表示需要引用的外部文件的地址。

  • type（可选）：

　　　　关键词：MIME（脚本语言的内容类型）

　　　　为保证最大限度的浏览器兼容，type的属性值主要时候用的依旧是text/javascript，如果没有写这个属性，其默认值仍然为text/javascript。

另外，在非IE浏览器中还可以使用以下值：application/javascript 和application/ecmascript。

　注意：在引用外部文件，标签中不要加入其它JS代码，浏览器在解析时，只会下载src引用的外部脚本文件，表中内嵌入的代码将会被忽略。

推文：浅谈script标签中的async和defer

defer和async两个属性是可以互相影响的

简单的归纳：

  • 仅有async属性，脚本会异步执行
  • 仅有defer属性，脚本会在文档解析完毕后执行
  • 两个属性都没有，脚本会被同步下载并执行，期间会阻塞文档解析

规范里没有提到两种属性都有时的效果，但这是文档中被允许的。

扩展：document.write（）

标签位置

通常，我们会把带有外部文件的的标签（包括CSS文件，JavaScript文件）的引用放在相同的位置，一般是在<head>标签里面。

但是在解析过程中一旦遇到多个JavaScript外部文件，就要等到所有的外部文件加载完成后，页面才能完全显示，所以通常我们会把它放在<body>标签里的底部，如下所示：

引用外部文件的优点

  • 利于维护：把所有的JavaScript的文件放在一起，不仅可以不触及HTML代码，而且更有利于开发者进行代码的编写和维护。
  • 加速浏览：如果有多个HTML页面引用了同一个JavaScript外部文件，这个文件只会加载一次（缓存），也就是说可以加快页面的加载速度。
  • 安全性：引用外部文件，如果用户查看HTML代码，将不会看到JavaScript的代码，比写在标签内安全性更高一些。

script标签的更多相关文章

  1. javaScript中的小细节-script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...

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

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

  3. HTML 5 <script> 标签

    HTML 4.01 与 HTML 5 之间的差异 async 属性是 HTML 5 中的新属性. 在 HTML 5 中,不再支持 HTML 4.01 中的一些属性. 提示和注释 注释:脚本按照如下方式 ...

  4. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

  5. 页面动态加入<script>标签并执行代码

    在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码 ...

  6. 面试小记---外部脚本必须包含 <script> 标签吗？

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

  7. javascript动态创建script标签,加载完成后调用回调

    代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...

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

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

  9. <script>标签应该放到</body>标签之前

    著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:贺师俊 链接:http://www.zhihu.com/question/20027966/answer/13727164 ...

  10. GZip压缩的js文件IE6下面不能包含<script>标签

    IE6下面,GZip压缩的js文件,如果js中包含<script>标签,一遇到这样的标签,后面的内容居然都截断了,狂晕! 花了我一个晚上来找原因.. 需要将字符串'<script&g ...

随机推荐

  1. CF1129D Isolation（分块+DP）

    一个很显然的DP方程式:f[i]=Σf[j],其中j<i且在[j+1,i]中出现1次的数不超过k个 乍一看挺神仙的,只会O(n^2),就是对于每个位置从后向前扫一遍,边扫边统计出现1次的数的个数 ...

  2. java中异常的面试

    https://blog.csdn.net/qq_36523638/article/details/79363652 1) Java中的检查型异常和非检查型异常有什么区别? 这又是一个非常流行的Jav ...

  3. JAVA后端生成Token（令牌），用于校验客户端，防止重复提交

    转:https://blog.csdn.net/u011821334/article/details/79390980 转:https://blog.csdn.net/joshua1830/artic ...

  4. 【清北学堂2018-刷题冲刺】Contest 6

    Task 1:子集 [问题描述]  若一个集合S中任意两个元素x和y,都满足x⊕y<min⁡(x, y) ,则称集合S是"好的".其中⊕为按位异或运算符.现在给定一个大小为n ...

  5. （矩阵快速幂）HDU1575 Tr A

    Tr A Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  6. 使用Nexus配置Maven私有仓库

    使用Nexus配置Maven私有仓库 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装配置Nexus 1>.下载nexus 下载地址:https://www.sonat ...

  7. H5新属性FileReader实现选择图片后立即显示在页面上

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Spark设计理念与基本架构

    1.基本概念 Spark中的一些概念: RDD(resillient distributed dataset):弹性分布式数据集. Partition:数据分区.即一个RDD的数据可以划分为多少个分区 ...

  9. sqlalchemy外键和relationship查询

    前面的文章中讲解了外键的基础知识和操作,上一篇文章讲解了sqlalchemy的基本操作.前面两篇文章都是作为铺垫,为下面的文章打好基础.记得初一时第一次期中考试时考的不好,老爸安慰我说:“学习是一个循 ...

  10. 使用Calender类获取系统时间和时间和运算

    使用Calender类获取系统时间和时间和运算: @Test public void testCal(){ //使用Calender对象获取时间,并对时间进行计算: Calendar instance ...