<script>元素

将JavaScript插入HTML的主要方法是使用 script 元素。

1  script 的基本使用方式

使用 script 的方式有两种，第一种就是通过 script 直接在网页中嵌入JavaScript代码：

 script function sayHi() { console.log("Hi! "); } /script 

包含在 script 内的代码会被从上到下解释。在上面的例子中，被解释的是一个函数定义，并且该函数会被保存在解释器环境中。在 script 元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。在使用行内JavaScript代码时，要注意代码中不能出现字符串 /script 。比如，下面的代码会导致浏览器报错：

 script function sayScript() { console.log(" /script "); } /script 

如何正确的写：（只需要转义字符“\”）

 script function sayScript() { console.log(" \/script "); } /script 

使用 script 的方式有两种，第二种就是使用包含外部文件中的JavaScript，必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件，比如：

 script src="/img.php?pic=example.js" /script 

这个例子在页面中加载了一个名为example.js的外部文件。文件本身只需包含要放在 script 的起始及结束标签中间的JavaScript代码。与解释行内JavaScript一样，在解释外部JavaScript文件时，页面也会阻塞。

浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源。

2  script 标签的位置 

过去，所有 script 元素都被放在页面的 head 标签内，如下面的例子所示：

  ! DOCTYPE html   html head title Example HTML Page /title script src="/img.php?pic=example1.js" /script script src="/img.php?pic=example2.js" /script /head body ! -- 这里是页面内容 -- /body /html 

这种做法的主要目的是把外部的CSS和JavaScript文件都集中放到一起。不过，把所有JavaScript文件都放在 head 里，也就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到 body 的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。为解决这个问题，现代Web应用程序通常将所有JavaScript引用放在 body 元素中的页面内容后面，如下面的例子所示：

 ! DOCTYPE html html head title Example HTML Page /title /head body ! -- 这里是页面内容 -- scriptsrc="/img.php?pic=example1.js" /script scriptsrc="/img.php?pic=example2.js" /script /body /html 

这样一来，页面会在处理JavaScript代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

3 推迟执行脚本

HTML 4.01为 script 元素定义了一个叫defer的属性。这个属性表示脚本在执行的时候不会改变页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在 script 元素上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

 ! DOCTYPE html html head title Example HTML Page /title script defer src="/img.php?pic=example1.js" /script script defer src="/img.php?pic=example2.js" /script /head body ! -- 这里是页面内容 -- /body /html 

虽然这个例子中的 script 元素包含在页面的 head 中，但它们会在浏览器解析到结束的 /html 标签后才会执行。

HTML5规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在DOMContentLoaded事件之前执行。

defer属性只对外部脚本文件才有效。这是HTML5中明确规定的，因此支持HTML5的浏览器会忽略行内脚本的defer属性。

4 异步执行脚本

HTML5为 script 元素定义了async属性，async属性与defer类似，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载，但延迟执行，与defer不同的是，标记为async的脚本并不保证能按照它们出现的次序执行，比如：

 ! DOCTYPE html html head title Example HTML Page /title script async src="/img.php?pic=example1.js" /script script async src="/img.php?pic=example2.js" /script /head body ! -- 这里是页面内容 -- /body /html 

在这里，第二个脚本可能先于第一个脚本执行。

5 动态加载脚本

JavaScript可以使用DOMAPI，所以通过向DOM中动态添加script元素同样可以加载指定的脚本。只要创建一个script元素并将其添加到DOM即可。

 let script = document.createElement('script'); script.src = 'gibberish.js'; document.head.appendChild(script);

完毕