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. 如何使用Senparc.Weixin SDK 底层的Redis缓存并设置过期时间

    最近在微信第三方平台项目开发中,有一个需求,所有绑定的公众号的回复规则按照主公众号的关键词配置来处理,我的处理思路是获取主公众号配置的关键词回复规则,缓存10分钟,由于需要使用Redis缓存来存储一些 ...

  2. 关于 tlb 文件

    来自:http://blog.csdn.net/lcl_data/article/details/7418387 tlb文件是什么?tlb文件是一个说明文件,通过TLB文件,用户可以得知你的DLL中的 ...

  3. SWOT分析法——进行项目管理的高效方法

    SWOT分析法是什么 SWOT分析法,即态势分析法,就是将与研究对象密切相关的各种主要内部优势.劣势和外部的机会和威胁等,通过调查列举出来,并依照矩阵形式排列,然后用系统分析的思想,把各种因素相互匹配 ...

  4. session/cookie/token

    1.cookie是把登录信息存放在客户端 2.session是把登录信息存放在服务器 3.token是在登录的时候服务器提供一个令牌标识,可以存放在local storage,请求资源时带上token ...

  5. 移动端click事件延时

    在移动端使用click事件会产生300ms的延迟 问题的产生: 移动端存在双击放大的问题,所以在移动端点击事件发生时,为了判断用户的行为(到底是要双击还是要点击),浏览器通常会等待300ms,如果30 ...

  6. POJ 3352 Road Construction ； POJ 3177 Redundant Paths （双联通）

    这两题好像是一样的,就是3177要去掉重边. 但是为什么要去重边呢??????我认为如果有重边的话,应该也要考虑在内才是. 这两题我用了求割边,在去掉割边,用DFS缩点. 有大神说用Tarjan,不过 ...

  7. bzoj1106 树状数组

    https://www.lydsy.com/JudgeOnline/problem.php?id=1106 一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介 ...

  8. 收获，不止_Oracle读书笔记

    PMON:含义为Processes Monitor,是进程监视器,如果你在执行某些更新语句,未提交时进程崩溃了,这时PMON会自动回滚该操作,,无需你人工去执行ROLLBACK命令.除此之外还可以干预 ...

  9. ThinkPHP3.2中字段unique验证出错的解决方法

    protected $_validate=array( array('stu_id','','学号已存在',1,'unique',1), ) 当一次插入多条数据时: 在进行循环 使用create验证时 ...

  10. python 正则表达式re模块

    #####################总结##############    优点:  灵活, 功能性强, 逻辑性强.               缺点:  上手难,旦上手, 会爱上这个东西    ...