很多人以为 script 标签只是用来写 JavaScript 代码的地方。这种理解没错，但并不完整。实际上，这个看似简单的标签背后隐藏着许多值得探索的细节。

很多人以为 script 标签只是用来写 JavaScript 代码的地方。这种理解没错，但并不完整。实际上，这个看似简单的标签背后隐藏着许多值得探索的细节。

脚本加载的两种方式：async 与 defer

浏览器解析 html 文档时，是从上到下一边解析一边渲染的。当遇到普通的 script 标签时，它会暂停解析，直到脚本下载并执行完成后才会继续。这就是为什么我们通常把脚本放在 body 底部的原因。

不过，async 和 defer 属性提供了更好的解决方案。

使用 defer 属性的脚本会异步下载，但会等到整个页面解析完成后，按照它们在文档中出现的顺序执行。这意味着它不会阻塞页面解析，又能保证执行顺序。

<scriptdefersrc="js/script1.js"></script>
<scriptdefersrc="js/script2.js"></script>

async 属性的脚本也是异步下载，但它会在下载完成后立即执行，不保证执行顺序。这意味着如果多个脚本有依赖关系，使用 async 可能会导致错误。

<scriptasyncsrc="js/script1.js"></script>
<scriptasyncsrc="js/script2.js"></script>

简单来说，defer 适合需要按顺序执行且不急于执行的脚本，而 async 适合独立且需要尽快执行的脚本，比如网站统计分析代码。

跨域脚本处理：crossorigin 属性

script 标签可以加载跨域资源，JSONP 技术就是利用了这个特性。但随着网络安全要求的提高，crossorigin 属性变得越来越重要。

设置 crossorigin 属性后，浏览器会启用 CORS（跨域资源共享）检查。如果服务器没有正确配置 CORS 响应头，浏览器会拒绝执行脚本。

<scriptsrc="https://fly63.com/script.js"crossorigin="anonymous"></script>

crossorigin 有两个可选值：

• anonymous：启用 CORS 但不发送凭据
• use-credentials：启用 CORS 并发送凭据（如 cookies）

使用 crossorigin 的主要好处是：

1. 配合 integrity 属性可以验证资源完整性，防止脚本被篡改
2. 能够获取更详细的脚本错误信息
3. 符合内容安全策略（CSP）的要求

模块化脚本：type="module"

现代浏览器已经支持 ES 模块，只需设置 type="module" 即可使用 import 和 export 语法。

<scripttype="module">
import { utils } from'./utils.js';
// 使用导入的模块
</script>

使用模块化脚本有几个特点：

1. 自动启用严格模式
2. 支持顶级 await
3. 默认具有 defer 的行为（异步加载不阻塞页面）
4. 支持按需导入

对于需要导入映射的情况，可以使用 importmap：

<scripttype="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>

这样在代码中就可以直接使用 import Vue from 'vue'，而不需要写完整的 URL。

安全增强：nonce 属性

除了上述属性，nonce 也是一个重要的安全特性。它通常与内容安全策略（CSP）一起使用，防止跨站脚本攻击（XSS）。

nonce 是一个随机生成的字符串，只有匹配 CSP 头中指定的 nonce 值的脚本才会被执行。

服务器端设置 CSP 头：

Content-Security-Policy: script-src 'nonce-abc123'

HTML 中使用：

<scriptnonce="abc123">
// 只有 nonce 值匹配的脚本才会执行
</script>

这种方式可以有效防止恶意脚本注入，提高网站安全性。

实际应用建议

1. 对于主要功能脚本，优先使用 defer 而不是将脚本放在 body 底部
2. 加载第三方资源时，总是使用 crossorigin 属性
3. 在现代项目中，可以考虑使用 type="module" 利用浏览器原生模块支持
4. 对于重要网站，实施 CSP 策略并使用 nonce 增强安全性

理解这些属性和它们的用途，不仅能优化页面加载性能，还能提高网站的安全性。虽然有些细节看起来复杂，但掌握它们对于前端开发者来说是非常有价值的。

AI大模型学习福利

作为一名热心肠的互联网老兵，我决定把宝贵的AI知识分享给大家。 至于能学习到多少就看你的学习毅力和能力了 。我已将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

一、全套AGI大模型学习路线

AI大模型时代的学习之旅：从基础到前沿，掌握人工智能的核心技能！

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获取

二、640套AI大模型报告合集

这套包含640份报告的合集，涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师，还是对AI大模型感兴趣的爱好者，这套报告合集都将为您提供宝贵的信息和启示。

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获

三、AI大模型经典PDF籍

随着人工智能技术的飞速发展，AI大模型已经成为了当今科技领域的一大热点。这些大型预训练模型，如GPT-3、BERT、XLNet等，以其强大的语言理解和生成能力，正在改变我们对人工智能的认识。 那以下这些PDF籍就是非常不错的学习资源。

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获

四、AI大模型商业化落地方案

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获

作为普通人，入局大模型时代需要持续学习和实践，不断提高自己的技能和认知水平，同时也需要有责任感和伦理意识，为人工智能的健康发展贡献力量