JavaScript 概述

<!-- HTML 结构省略，仅展示关键 JS 逻辑 -->

JavaScript 源码
     ↓
解析器(Parser) → 生成抽象语法树(AST)
     ↓
解释器(Interpreter) → 生成字节码
     ↓
JIT 编译器 → 优化编译热点代码
     ↓
执行机器码

### 事件循环机制

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作。

#### 执行栈与任务队列

#### 事件循环流程

事件循环的执行顺序：

1. 执行同步代码（调用栈）
2. 调用栈清空后，检查微任务队列
3. 执行所有微任务
4. 浏览器 UI 渲染
5. 执行一个宏任务
6. 回到第 2 步

**示例：**

```javascript
console.log("1. 同步代码开始")

setTimeout(() => {
  console.log("2. 宏任务 - setTimeout")
}, 0)

Promise.resolve()
  .then(() => {
    console.log("3. 微任务 - Promise")
  })
  .then(() => {
    console.log("4. 微任务 - Promise chain")
  })

console.log("5. 同步代码结束")

// 执行结果：
// 1. 同步代码开始
// 5. 同步代码结束
// 3. 微任务 - Promise
// 4. 微任务 - Promise chain
// 2. 宏任务 - setTimeout

## script 元素

将 `JavaScript` 插入 `HTML` 的主要方法是使用 `<script>` 元素，这是由网景公司创造出来，后来被正式加入到 HTML 规范。`script` 元素有下列 8 个属性：

| **属性**            | **说明**                                                                                                                                                                                                                                                                                                                     |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| async（可选）       | 表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效                                                                                                                                                                                                                   |
| charset（可选）     | 表示通过 `src` 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用                                                                                                                                                                                                                                  |
| crossorigin（可选） | 配置相关请求的 CORS（跨源资源共享）设置。默认不使用 CORS。`crossorigin= "anonymous"` 配置文件请求不必设置凭据标志。`crossorigin="use-credentials"` 设置凭据标志，意味着出站请求会包含凭据                                                                                                                                    |
| defer（可选）       | 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效                                                                                                                                                                                                                                                       |
| integrity（可选）   | 允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容                                                                        |
| language（已废弃）  | 原来用于表示编写代码使用的脚本语言（如 JavaScript、JavaScript1.2 或 VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用                                                                                                                                                                                               |
| src（可选）         | 表示包含要执行代码的外部文件                                                                                                                                                                                                                                                                                                 |
| type（可选）        | t 可以看成是 language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。目前 type 属性的值依旧还是 `text/javascript`。不过这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为 text/javascript。如果这个值是 module，则代码会被当成 ES6 模块，而且只有这时候代码中才能出现 import 和 export 关键字 |

使用 `script` 元素的方式有两种：直接在页面中嵌入 `JavaScript` 代码和包含外部 `JavaScript`文件。在使用 `<script>` 嵌入 `JavaScript` 代码时，不要在代码中的任何地方出现 `</script>` 字符串。而通过转义字符 `/` 可以解决这个问题

```html
<script type="text/javascript">
  // ✅ 正确的行内脚本写法
  function sayHi() {
    alert("Hi!")
  }

  // ✅ 使用转义字符避免闭合标签问题
  function sayScript() {
    // 不能直接写 </script>，需要转义
    alert("<\/script>") // 使用 \/ 转义斜杠
  }

  // 调用函数
  sayHi() // 弹出 "Hi!"
  sayScript() // 弹出 "</script>"
</script>

<!-- 方式1：引用本地文件 -->
<script type="text/javascript" src="example.js"></script>

<!-- 方式2：引用 CDN 文件 -->
<script src="https://cdn.example.com/library.min.js"></script>

<!-- 方式3：使用 integrity 属性验证文件完整性 -->
<script
  src="https://cdn.example.com/library.min.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
  crossorigin="anonymous"></script>

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" src="example1.js"></script>
    <script type="text/javascript" src="example2.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <!-- defer 脚本会立即下载，但延迟到 DOM 解析完成后执行 -->
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

页面加载流程：
1. 开始解析 HTML
2. 遇到 defer 脚本 → 立即下载，但不阻塞解析
3. 继续解析 HTML，构建 DOM 树
4. DOM 解析完成（DOMContentLoaded 事件触发前）
5. 按照 defer 脚本在文档中的顺序执行：
   - example1.js 执行
   - example2.js 执行

// ✅ 适合使用 defer 的场景
// 1. 操作 DOM 的脚本
// 2. 依赖 DOM 结构的初始化代码
// 3. 需要按顺序执行的脚本

// ❌ 不适合使用 defer 的场景
// 1. 页面渲染前必须执行的代码
// 2. document.write() 操作（不推荐使用）

<!DOCTYPE html>
<html>
  <head>
    <title>Example HTML Page</title>
    <!-- async 脚本会在下载完成后立即执行，不保证执行顺序 -->
    <script type="text/javascript" async src="example1.js"></script>
    <script type="text/javascript" async src="example2.js"></script>
  </head>
  <body>
    <!-- 这里放内容 -->
  </body>
</html>

页面加载流程：
1. 开始解析 HTML
2. 遇到 async 脚本 → 立即下载，不阻塞解析
3. 继续解析 HTML
4. 哪个脚本先下载完成，就先执行哪个（不保证顺序）
   可能的执行顺序：
   - example2.js 先下载完成 → 立即执行
   - example1.js 后下载完成 → 立即执行
   或者反过来

// ✅ 适合使用 async 的场景
// 1. 独立的第三方库（如统计代码、广告脚本）
// 2. 不依赖 DOM 和其他脚本的代码

// 示例：加载 Google Analytics
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

// ❌ 不适合使用 async 的场景
// 1. 依赖其他脚本的代码
// 2. 依赖 DOM 的初始化代码
// 3. 需要按顺序执行的模块

普通脚本（无属性）：
[解析 HTML] → [暂停] → [下载脚本] → [执行脚本] → [继续解析 HTML]
❌ 阻塞页面渲染

defer 脚本：
[解析 HTML] ←→ [下载脚本（并行）]
     ↓
[DOM 解析完成]
     ↓
[执行 defer 脚本（按顺序）]
✅ 不阻塞，按顺序执行

async 脚本：
[解析 HTML] ←→ [下载脚本（并行）]
     ↓           ↓
[继续解析]   [下载完成立即执行（不保证顺序）]
✅ 不阻塞，独立执行

let script = document.createElement("script")
script.src = "gibberish.js"
document.head.appendChild(script)

let script = document.createElement("script")
script.src = "gibberish.js"
script.async = false
document.head.appendChild(script)

<link rel="preload" href="gibberish.js" />

<script type="text/javascript">
  //<![CDATA[
  function compare(a, b) {
    if (a < b) { console.log("A is less than B") }
    else if (a > b) { console.log("A is greater than B") }
    else { console.log("A is equal to B") }
  }
  //]]>
</script>

<!-- 使用 ES6 模块 -->
<script type="module" src="main.js"></script>

<!-- 内联模块代码 -->
<script type="module">
  import { helper } from "./helper.js"
  helper()
</script>

// helper.js
export function helper() { console.log("Helper function") }
export const API_URL = "https://api.example.com"

// main.js
import { helper, API_URL } from "./helper.js"
helper()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>页面标题</title>
    <!-- 关键 CSS -->
    <link rel="stylesheet" href="critical.css" />
    <!-- 预加载重要资源 -->
    <link rel="preload" href="main.js" as="script" />
  </head>
  <body>
    <!-- 页面内容 -->

    <!-- 非关键脚本放在 body 末尾 -->
    <script src="main.js"></script>

    <!-- 或者使用 defer -->
    <!-- <script defer src="main.js"></script> -->
  </body>
</html>

<html>
  <head>
    <title>Example HTML Page</title>
    <script type="text/javascript" defer="defer" src="example1.js"></script>
    <script type="text/javascript" defer="defer" src="example2.js"></script>
  </head>
  <body>
    <noscript> <p>本页面需要浏览器支持（启用）JavaScript。</p></noscript>
  </body>
</html>

<noscript>
  <div style="padding: 20px; background: #f0f0f0; border: 1px solid #ccc;">
    <h2>需要启用 JavaScript</h2>
    <p>此页面需要 JavaScript 才能正常工作。请启用浏览器的 JavaScript 功能。</p>
  </div>
</noscript>

// ❌ 避免：频繁的 DOM 操作
for (let i = 0; i < 1000; i++) {
  const div = document.createElement("div")
  document.body.appendChild(div) // 每次都触发重排
}

// ✅ 推荐：使用文档片段批量操作
const fragment = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  const div = document.createElement("div")
  fragment.appendChild(div)
}
document.body.appendChild(fragment) // 只触发一次重排

// ❌ 常见内存泄漏：未清理的事件监听器
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this)
    document.addEventListener("click", this.handleClick)
  }
  // ✅ 必须在组件销毁时清理
  destroy() {
    document.removeEventListener("click", this.handleClick)
  }
}

// 防抖（Debounce）
function debounce(func, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }
}

// 节流（Throttle）
function throttle(func, delay) {
  let lastTime = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastTime >= delay) {
      func.apply(this, args)
      lastTime = now
    }
  }
}

### 代码质量与可维护性

**1. 使用严格模式**

```javascript
"use strict"
// 严格模式捕获常见错误、禁止 this 指向全局对象、更容易优化

// ✅ 优先使用 const
const MAX_SIZE = 100
const config = { debug: true }

// ✅ 需要重新赋值时使用 let
let count = 0
count++

// ❌ 避免使用 var
var x = 1 // 函数作用域，容易导致问题

// ✅ 单一职责：一个函数只做一件事
function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return regex.test(email)
}

// ✅ 纯函数：相同输入总是产生相同输出
function add(a, b) {
  return a + b
}

async function fetchData(url) {
  try {
    const response = await fetch(url)
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
    return await response.json()
  } catch (error) {
    console.error("获取数据失败:", error)
    throw error
  }
}

const user = { profile: { name: "张三" } }
// ✅ 可选链操作符 ?.
const city = user?.profile?.address?.city // undefined（不会报错）
// ✅ 空值合并运算符 ??
const displayCity = city ?? "未知城市" // "未知城市"
// 与 || 的区别：空字符串用 ?? 不会被当作 falsy

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combined = [...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]

const defaults = { theme: "light", lang: "zh" }
const userConfig = { lang: "en" }
const config = { ...defaults, ...userConfig } // { theme: 'light', lang: 'en' }

// utils.js
export const PI = 3.14159
export function calculateArea(radius) { return PI * radius * radius }
export default class Calculator {}

// main.js
import Calculator, { PI, calculateArea } from "./utils.js"
// 动态导入（按需加载）
const module = await import("./heavy-module.js")

// var：函数作用域，存在变量提升
console.log(a) // undefined
var a = 1

// let：块级作用域，暂时性死区
// console.log(b) // ReferenceError
let b = 2

// const：块级作用域，必须初始化，不能重新赋值（但对象属性可修改）
const c = 3

// ==：宽松相等，会进行类型转换
1 == "1" // true
null == undefined // true

// ===：严格相等，不进行类型转换
1 === "1" // false
null === undefined // false
// ✅ 推荐：始终使用 ===

function createCounter() {
  let count = 0
  return {
    increment() { count++; return count },
    getCount() { return count }
  }
}
const counter = createCounter()
console.log(counter.increment()) // 1

// 回调函数（Callback）— ❌ 回调地狱
fetchData(function(data) {
  processData(data, function(result) {
    displayResult(result, function() { console.log("完成") })
  })
})

// Promise — ✅ 链式调用
fetchData()
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => console.error(error))

// async/await — ✅ 同步风格的异步代码
async function handleData() {
  try {
    const data = await fetchData()
    const result = await processData(data)
    await displayResult(result)
  } catch (error) { console.error(error) }
}

// 并行执行
const [users, products] = await Promise.all([fetchUsers(), fetchProducts()])
// 竞争执行
const result = await Promise.race([fetchFromServer1(), fetchFromServer2()])

// 1. 减少重排和重绘：使用 cssText 批量修改样式
element.style.cssText = "width: 100px; height: 100px; background-color: red;"

// 2. 使用事件委托
document.getElementById("list").addEventListener("click", (e) => {
  if (e.target.classList.contains("item")) handleClick(e)
})

// 3. 懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src
      observer.unobserve(entry.target)
    }
  })
})

// 1. 意外的全局变量
function leak() { bar = "I'm global now" } // ❌

// 2. 未清理的定时器
class Timer {
  constructor() { this.timer = setInterval(() => {}, 1000) }
  destroy() { clearInterval(this.timer) } // ✅ 必须清理
}

// 3. 闭包引用大对象 — 只保存需要的值

// 常用 console 方法
console.table([{ name: "张三", age: 25 }, { name: "李四", age: 30 }])
console.group("分组"); console.log("内容"); console.groupEnd()
// debugger 语句：代码会在此处暂停
function debugExample() { const data = getData(); debugger; processData(data) }
// 查看调用栈
console.trace()

// 1. 特性检测
if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(callback)
} else {
  window.addEventListener("scroll", throttle(callback, 100))
}
// 2. Polyfill + Babel 等转译工具将 ES6+ 转换为兼容代码