前端必刷系列之红宝书——1、2 章

"红宝书" 通常指的是《JavaScript 高级程序设计》，这是一本由 Nicholas C. Zakas（尼古拉斯·扎卡斯）编写的 JavaScript 书籍，是一本广受欢迎的经典之作。这本书是一部翔实的工具书，满满的都是 JavaScript 知识和实用技术。

不管你有没有刷过红宝书，如果现在还没掌握好，那就一起来刷红宝书吧，go！go！go！

第 1 章

1995 年，JavaScript 问世（为了处理输入验证）。

JS 快速成长为一门用来与网页交互的脚本语言，完整的 JS 实现包含：

核心（ECMAScript）
文档对象模型（DOM）
浏览器对象模型（BOM）

小结

第 1 章主要介绍了 JS 的起源、发展历程、标准化，以及它在现代 web 开发中的地位。

起源： JS 最初由 Netscape 公司的 Brendan Eich 开发，作为一种在浏览器中执行脚本的语言，以使页面具有动态性。

发展历程： 代替服务端语言处理输入验证 ------》设计为一种脚本语言，用于在浏览器中处理用户交互 ------》逐渐演变为一门强大的通用编程语言，可用于开发复杂的应用程序。

标准化： ECMAScript 定义了 JavaScript 的核心语法和特性。

重要性： web 端、node 服务端、小程序、桌面端、移动端、游戏开发、数据可视化......

第 2 章

script

<script> 元素下有 8 个属性：

src： 可选。表示包含要执行的代码的外部文件。不受同源策略限制。
defer： 可选。表示脚本立即下载但延迟到文档完全被解析和显示之后再执行。只对外部文件有效。
async： 可选。表示应该立即开始下载脚本（不能修改 DOM），但不能阻止其他页面动作。只对外部文件有效。（不推荐）
type： 可选。代替 language。表示代码块中脚本语言的内容类型（MIME 类型）。如果这个值是 module，则代码会被当成 ES6 模块，而且只有这个时候代码中才能出现 import 和 export 关键字。
crossorigin： 可选。配置相关请求的 CORS（跨源资源共享）设置。默认不使用 CORS。
integrity： 可选。允许比对收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。
charset： 可选。使用 src 属性指定的代码字符集。（非重点）
language： 废弃。

HTML 复制代码

<srcipt src="demo.js">
function sayScript(){
    console.log('hi, script!')
}
</script>

对于上述代码，浏览器只会下载并执行 demo.js 脚本文件，从而忽略行内代码 sayScript 函数。

动态创建 script 元素 是异步加载的，相当于添加了 async 属性。不过这样做可能有问题，因为浏览器都支持 createElement() 方法，但不是所有浏览器都支持 async 属性。因此要统一动态脚本的加载行为，可以明确设置为同步代码。script.async = false。

动态创建 script 获取资源对浏览器预加载是不可见的。严重影响在资源获取队列中的优先级，严重影响性能。解决该问题，需要：

HTML 复制代码

<link rel="preload" href="xxxxx.js">

行内代码 vs 外部文件

推荐使用外部文件：

可维护性。
缓存。
适应未来。规避一些注释黑科技等。

小结

在 script 中，性能优化中推荐使用 defer，尽量不推荐 async（看情况而定）。

crossorigin 是 <script> 标签的一个属性，而 CORS（跨源资源共享）是一种通过 HTTP 头部来允许或拒绝浏览器在一个源上请求加载的资源来处理跨域请求的机制。虽然它们都涉及到跨域，但它们解决的问题和实际应用场景有一些区别。

HTML 复制代码

// 表示脚本请求不包含用户凭据（如 cookie 或 HTTP 认证信息），
// 即使服务器返回了相应的响应头，浏览器也不会将凭据发送给服务器。
<script src="https://example.com/script.js" crossorigin="anonymous"></script>


// 表示脚本请求会包含用户凭据。
// 如果服务器允许使用凭据，它需要在响应中包含正确的 CORS 头部。
<script src="https://example.com/script.js" crossorigin="use-credentials"></script>

CORS 通过在服务器端的 HTTP 头部中设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等来控制允许的源、方法和头部信息。

未完待续....

参考资料

《JavaScript 高级程序设计》（第 4 版）