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. C++11并发——多线程条件变量std::condition_variable（四）

    https://www.jianshu.com/p/a31d4fb5594f https://blog.csdn.net/y396397735/article/details/81272752 htt ...

  2. Mybatis非mapper代理配置

    转: Mybatis非mapper代理配置 2017年04月26日 20:13:48 待长的小蘑菇 阅读数:870   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...

  3. 第三十一节，目标检测算法之 Faster R-CNN算法详解

    Ren, Shaoqing, et al. “Faster R-CNN: Towards real-time object detection with region proposal network ...

  4. 测试唯一ID支持多大的并发量

    昨天突然考虑到这个问题,在并发比较大的情况下,你用于生成唯一ID的函数是否还能正常运行?也就是说比如我一下子进来40000个订单,你需要生成不重复的订单ID吧? 对于这个问题我以前没考虑过,但是可能是 ...

  5. SSH框架调用scrapy爬虫

    毕设刚答辩完毕,不用担心查重了,所以补一篇毕设的内容. 毕设是图片搜索网站,使用python爬虫获取图片资源,再由javaweb管理使用图片的信息和图片,大部分实现起来十分简单,也不好意思炫耀.但是有 ...

  6. (二叉树 BFS) leetcode513. Find Bottom Left Tree Value

    Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...

  7. MySQL数据库详解之"双1设置"的数据安全的关键参数案例分享

    mysql的"双1验证"指的是innodb_flush_log_at_trx_commit和sync_binlog两个参数设置,这两个是是控制MySQL 磁盘写入策略以及数据安全性 ...

  8. TensorFlow入门学习(让机器/算法帮助我们作出选择)

    catalogue . 个人理解 . 基本使用 . MNIST(multiclass classification)入门 . 深入MNIST . 卷积神经网络:CIFAR- 数据集分类 . 单词的向量 ...

  9. 阅读：ECMAScript 6 入门(2)

    参考 ECMAScript 6 入门 ES6新特性概览 ES6 全套教程 ECMAScript6 (原著:阮一峰) JavaScript 教程 重新介绍 JavaScript(JS 教程) Modul ...

  10. Golang入门教程（三）beego 框架安装

    beego 是一个快速开发 Go 应用的 HTTP 框架,他可以用来快速开发 API.Web 及后端服务等各种应用,是一个 RESTful 的框架,主要设计灵感来源于 tornado.sinatra ...