script 元素

是将Javascript插入HTML的主要方法，有8个属性： 1、async：规定脚本在解析页面的同时进行并行下载，并在可用时立即执行（在解析完成之前）（仅适用于外部脚本）。 2、crossorigin：将请求的模式设置为 HTTP CORS 请求。 3、defer：规定脚本在解析页面的同时进行并行下载，并在页面完成解析后执行（仅适用于外部脚本）。 4、integrity：允许浏览器检查获取的脚本，以确保如果源代码被篡改，代码永远不会被加载。 5、nomodule：规定脚本不应在支持 ES2015 模块的浏览器中执行。 6、referrerpolicy：规定在获取脚本时发送哪些引用者信息。 7、src：规定外部脚本文件的 URL。 8、type：规定脚本的媒体类型。

script 位置

过去script位置放在head标签内，这么做的目的是把外部的 CSS 和 JavaScript 文件都集中放到一起。不过，把所有 JavaScript文件都放在里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到的起始标签时开始渲染）。对于需要很多 JavaScript 的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。所以现在都是放到body元素中页面内容后，这样页面会在JS代码之前完全渲染页面，用户会感觉页面加载更快乐，页面空白时间短了。

推迟执行脚本 defer

script元素定义了一个叫defer的属性，这个属性表明脚本在执行的时候不会改变页面的结构，会等整个页面解析完毕后再运行，因此设置defer等于告诉浏览器立即下载但延迟执行。

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

</body>

</html>

如同上面的例子虽然script元素再head元素内，但是有defer属性，则会推迟执行。

异步执行脚本 async

当标签设置了 async 属性时，浏览器会异步地加载脚本文件，并且在下载完成后立即执行脚本，而不会等待页面的渲染。这样可以避免脚本的下载和执行对页面渲染的阻塞，从而提高页面的加载速度。注意：由于 async 属性的设置会使得脚本的执行顺序不再保证，因此在编写代码时需要注意脚本之间的依赖关系。如果多个脚本之间有依赖关系，需要使用 defer 属性或者手动管理加载顺序来确保脚本的正确执行顺序。

行内代码与外部文件

可以直接在HTML中写入JS代码，但是为了代码的可维护性、缓存和适应未来等原因应该将JS代码写入到外部文件当中： 1、可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。 2、缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。 3、适应未来。通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。在配置浏览器请求外部文件时，要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中，预请求的消耗已显著降低，以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。

noscript

针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案。最终，元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持JavaScript，但对于禁用 JavaScript 的浏览器来说，这个元素仍然有它的用处。元素可以包含任何可以出现在中的 HTML 元素，除外。在下列两种情况下，浏览器将显示包含在中的内容： 1、浏览器不支持脚本； 2、浏览器对脚本的支持被关闭。任何一个条件被满足，包含在中的内容就会被渲染。否则，浏览器不会渲染中的内容。

原文：JavaScript 高级程序设计(第四版)