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. Django session相关操作

    Django session 是存储在数据库中的所以要先跟数据库建立连接 本连接有Django跟数据库建立连接的操作:https://www.cnblogs.com/Niuxingyu/p/10296 ...

  2. 内部git常用总结

    上库git常用命令总结   http://3ms.huawei.com/hi/group/1531/wiki_4955279.html?for_statistic_from=all_group_wik ...

  3. RGBColorspace 与 GRAYColorspace 图片混合后，生成的视频有点问题

    最近有一个用户遇到一个情况: 有3张图片,其中前两张是 RGBColorspace,最后一张是 GrayColorspace: 生成的视频,在显示最后一张图片的时候,明显出现奇怪的色彩区域,看下图: ...

  4. win32: WM_PAINT 实现双缓冲缓图

    相关参考资料: GDI下实现双缓冲 - http://jingyan.baidu.com/article/e73e26c0f8df2424acb6a76e.html <Win32_19>用 ...

  5. django基于restframework的CBV封装

    一.models数据库映射 from django.db import models # Create your models here. class Book(models.Model): titl ...

  6. postman 测试套件collection

    测试套件collection就是为了跑一套case,整体的一套case,为了解决一个一个的case单独跑 1.点击小加号 2.填写套件的名字 3.右键增加folder,一个folder里面可以增加多个 ...

  7. text-overflow文本溢出隐藏“...”显示

    一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...

  8. 使用rdbtools工具来解析redis rdb文件

    工欲善其事必先利其器,日常工作中,好的工具能够高效的协助我们工作:今天介绍一款用来解析redis rdb文件的工具,非常好用.会之,受用无穷! 一.rdbtools工具介绍 源码地址:https:// ...

  9. 4.django学习模板

    ##引用模板 步骤: 在应用目录下创建templates目录,在目录下创建html文件 在views.py返回render(渲染) 1.requests请求本身,2.模板文件,3.后台传递到前端的数据 ...

  10. 转载：C++ 二维数组new

    来源:http://developer.51cto.com/art/201002/183127.htm C++编程语言中有一种叫做new的二维数组,它的应用方式比较灵活,可以有多种方法来帮助我们实现一 ...