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. hdu 3530 "Subsequence" （单调队列）

    传送门 题意: 给出一个序列,求最长的连续子序列,使得 m ≤ Max-Min ≤ k 我的理解: 定义数组 a[] 存储输入的 n 个数: 定义两个双端队列: deque<int >qM ...

  2. 象棋start

    这篇文章其实谈的不是象棋开局,更谈不上开局技巧,举个例子:第一步走炮二平五,也即是中炮局,但中炮局可以根据对手的应对着法演变成很多,比如:五七炮对屏风马,五六炮对屏风马,顺炮局,以及雷公炮等等,这些才 ...

  3. linux下静态库和动态库的制作

    一.静态库 1.编写.c文件,在其中实现函数源代码,同时制作头文件 2.将.c文件转为.o文件             gcc -c xxx.c -o xxx.o 3.将*.o转换成库文件     a ...

  4. Comet——反向Ajax （基础知识）

    Comet:服务器推送,与ajax页面向服务器请求数据相反.几乎可以实时将数据推送到客户端. 但本质一样:浏览器向服务器发起请求,服务器响应请求 Comet实现方式:长轮询.HTTP流 1.长轮询—— ...

  5. 高级组件——菜单栏JMenuBar

    菜单栏JMenuBar,菜单JMenu,菜单项JMenuItem 一旦A有子菜单项,则A为菜单JMenu,而不是菜单项JMenuItem import javax.swing.*; import ja ...

  6. asp.net 获得伪静态网址解决微信sdk签名问题

    手机网站是asp.net c#编写的,前几天因为要使用微信SDK在手机网站页面使用分享功能,但是程序使用了伪静态功能.如果原地址是:http://ww.xx.com/news/show.aspx?id ...

  7. Altium Designer 18 ------ 原理图和PCB元器件互相查找

    方法一:单击选中原理图中元器件,然后单击tools>Seclect PCBcomponents,即可在PCB中看到该器件的高亮显示: 方法二:单击Tools>Cross Select Mo ...

  8. Collection 接口

    Collection 接口中的方法 ArrayList implements List List extends Collection 主要方法:toArray(); 集合转数组 clear(); 清 ...

  9. systemd 编写

    转载文章:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-part-two.html https://wizardforcel.gitb ...

  10. E2E测试框架

    1. 目前E2E测试工具有哪些? 项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 41427 nightma ...