docs: add script标签中的defer和async

source/_posts/front-end/angular-mock-interview.md

@@ -3,7 +3,7 @@ title: Angular的模拟面试
 date: 2024-10-26 16:16:38
 tags: [css, angular, 面试]
 categories: [前端]
----
+----
 
 # 前言
 

source/_posts/front-end/html-scripts-defer-async.md

@@ -0,0 +1,67 @@
+---
+title: script标签中的defer和async
+date: 2024-11-04 23:16:56
+tags: [前端, javascript]
+categories: [前端]
+---
+
+# 浏览器中script标签中的defer和async有什么区别，优缺点是什么，应用场景是什么？
+
+在 HTML 中，`<script>` 标签的 `defer` 和 `async` 属性用于控制脚本的加载和执行方式，尤其是在处理 JavaScript 文件时。它们之间的主要区别和应用场景如下：
+
+### 1. `defer`
+
+- **功能**：脚本在文档解析完成后执行，但在 DOMContentLoaded 事件之前执行。
+- **加载顺序**：`defer` 脚本会按照它们在文档中的出现顺序加载并执行。
+- **应用场景**：适用于依赖于 DOM 完全加载的脚本，或者需要按顺序执行多个脚本的情况。
+
+#### 优点：
+- 确保 DOM 元素在脚本执行时已存在，避免了因元素未加载而导致的错误。
+- 不会阻塞 HTML 的解析，可以提高页面加载性能。
+
+#### 示例：
+```html
+<script src="script1.js" defer></script>
+<script src="script2.js" defer></script>
+```
+
+### 2. `async`
+
+- **功能**：脚本会在下载完成后立即执行，而不会等待 DOMContentLoaded。
+- **加载顺序**：`async` 脚本不保证执行顺序。如果有多个 `async` 脚本，执行顺序可能与它们在文档中的出现顺序不同。
+- **应用场景**：适合于独立于其他脚本的脚本，例如分析工具或广告脚本。
+
+#### 优点：
+- 脚本在加载时不阻塞页面的渲染，提升页面加载速度。
+- 对于不依赖于 DOM 结构的脚本，能更快地执行。
+
+#### 示例：
+```html
+<script src="script.js" async></script>
+```
+
+### 3. 区别总结
+
+| 特性               | `defer`                               | `async`                            |
+|--------------------|--------------------------------------|------------------------------------|
+| 执行时机           | DOM 解析完成后，DOMContentLoaded 之前 | 下载完成后立即执行                  |
+| 加载顺序           | 按照在文档中的顺序加载并执行       | 不保证执行顺序                     |
+| 适用场景           | 依赖于 DOM 的脚本，顺序执行       | 独立的脚本，不依赖其他脚本         |
+
+### 4. 选择使用场景
+
+- **使用 `defer`**：
+  - 需要依赖于页面 DOM 完全加载的脚本（如操作 DOM 元素的脚本）。
+  - 需要按顺序执行多个脚本。
+
+- **使用 `async`**：
+  - 独立于其他脚本的第三方脚本（如广告、分析工具）。
+  - 不依赖于 DOM 的脚本，可以在页面加载过程中立即执行。
+
+### 5. 结论
+
+在实际开发中，合理使用 `defer` 和 `async` 属性可以提高页面性能和用户体验。根据脚本的依赖关系和执行顺序选择适合的方式，有助于优化页面的加载和渲染速度。
+
+# 引用
+
+1. [chatgpt](https://chatgpt.com/c/6714f7ef-9400-8013-b1dc-9c283200754b)

source/_posts/front-end/mock-interview.md

@@ -1,7 +1,7 @@
 ---
 title: 模拟面试
 date: 2024-10-20 20:45:06
-tags: []
+tags: [前端, javascript]
 categories: [前端,nodejs, 敏捷开发,  面试]
 ---