<script>标签用于嵌入或引用可执行脚本，通常为javascript代码。1. 它允许直接在html中编写脚本或通过src属性引用外部文件；2. 使用async和defer属性控制加载与执行顺序，优化性能；3. 将脚本放在<body>底部、使用模块化、合并压缩脚本及cdn加速等手段能进一步减少性能影响。
<script> 标签在 HTML 中用于嵌入或引用可执行脚本，通常是 JavaScript 代码。它定义了客户端脚本，这些脚本可以增强网页的交互性、动态性和功能性。脚本可以包含在 <script> 标签内，也可以通过 src 属性引用外部脚本文件。
<script> 标签的主要作用：
- 嵌入脚本：直接在 HTML 文档中编写 JavaScript 代码。
-
引用外部脚本：通过
src属性链接到外部 JavaScript 文件，实现代码的复用和维护。 -
控制脚本执行：使用
async和defer属性控制脚本的加载和执行时机，优化页面加载性能。
为什么 <script> 标签的位置会影响页面加载速度？
<script> 标签的位置至关重要，尤其是在没有 async 或 defer 属性的情况下。浏览器在解析 HTML 文档时，遇到 <script> 标签会暂停解析，下载并执行脚本。如果 <script> 标签位于 <head> 中，会导致浏览器在下载和执行脚本期间阻塞页面的渲染，用户会感觉到页面加载缓慢。
立即学习“前端免费学习笔记（深入）”；
将 <script> 标签放在 <body> 标签的底部，</body> 标签之前，可以避免阻塞页面的初始渲染。这样浏览器会先解析并渲染 HTML 结构和内容，然后再加载和执行脚本，提升用户体验。当然，使用 async 或 defer 属性可以更灵活地控制脚本的加载和执行，即使 <script> 标签位于 <head> 中，也不会阻塞页面的渲染。
async 和 defer 属性有什么区别？如何选择？
async 和 defer 都是用于异步加载脚本的属性，可以避免脚本阻塞页面的渲染。它们的区别在于脚本的执行时机：
-
async：异步下载脚本，下载完成后立即执行。多个带有async属性的脚本的执行顺序是不确定的，它们会并行下载，哪个先下载完成就先执行哪个。 -
defer：异步下载脚本，但会等到整个 HTML 文档解析完成后，按照脚本在 HTML 中出现的顺序依次执行。
如何选择 async 和 defer：
- 如果脚本不依赖于其他脚本，并且可以独立运行，可以使用
async。例如，一些统计分析脚本或广告脚本。 - 如果脚本依赖于其他脚本，或者需要操作 DOM 元素，可以使用
defer。defer保证了脚本的执行顺序，并且会在 DOMContentLoaded 事件触发之前执行。
总结：async 适用于独立的脚本，defer 适用于有依赖关系的脚本。如果你的脚本需要操作 DOM，或者依赖于其他脚本，defer 是更好的选择。如果你的脚本是独立的，并且不需要立即执行，async 可以更快地加载和执行脚本。
<script type="module"> 有什么作用？与普通 <script> 有什么区别？
<script type="module"> 用于加载 ES 模块。ES 模块是 JavaScript 的一种模块化规范，它支持 import 和 export 语法，可以将代码分割成独立的模块，方便代码的组织和复用。
与普通 <script> 的区别：
- 模块化：ES 模块支持 import 和 export 语法，可以将代码分割成独立的模块。
- 严格模式：ES 模块默认运行在严格模式下，可以避免一些 JavaScript 的潜在问题。
-
延迟执行：
<script type="module">默认具有defer属性，会等到整个 HTML 文档解析完成后再执行。 - 跨域限制：ES 模块有跨域限制，需要配置 CORS 才能加载跨域的模块。
使用 <script type="module"> 可以更好地组织和管理 JavaScript 代码，提高代码的可维护性和可复用性。
如何避免 <script> 标签引起的性能问题？
-
将
<script>标签放在<body>底部：避免阻塞页面的初始渲染。 -
使用
async或defer属性：异步加载脚本，避免阻塞页面的渲染。 - 合并和压缩脚本：减少 HTTP 请求的数量，减小脚本的大小。
- 使用 CDN：使用 CDN 加速脚本的加载速度。
- 避免在脚本中执行耗时的操作：避免阻塞主线程，影响页面的响应速度。
通过以上优化措施，可以有效地避免 <script> 标签引起的性能问题，提升页面的加载速度和用户体验。
