{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

调试控制:
F5: 启动调试
F9: 切换断点
F10: 单步执行
F11: 进入函数
Shift+F11: 跳出函数

1.2.2 浏览器调试

配置 launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

1.3 其他调试工具

Firefox Developer Tools:
类似 Chrome DevTools，但有一些独特功能
Edge DevTools:
基于 Chrome DevTools，与 Edge 浏览器深度集成
Safari Web Inspector:
Safari 浏览器的调试工具
Node.js 调试器:
命令行调试: node --inspect index.js
可视化调试: 使用 Chrome DevTools 连接

2. 常见错误

2.1 引用错误 (ReferenceError)

现象: Uncaught ReferenceError: x is not defined
原因: 访问了不存在的变量或函数
解决方案:
检查变量名拼写
确保变量已声明
检查作用域，确保变量在当前作用域内可见
使用 let 或 const 声明变量，避免使用全局变量

2.2 类型错误 (TypeError)

现象: Uncaught TypeError: x is not a function
原因: 对非函数类型调用了 ()，或对非对象类型访问属性
解决方案:
检查变量类型，使用 typeof 或 instanceof
确保函数存在且可调用
检查对象是否为 null 或 undefined
使用可选链操作符 ?. 避免空值访问

2.3 语法错误 (SyntaxError)

现象: Uncaught SyntaxError: Unexpected token
原因: 代码语法不正确
解决方案:
检查括号、引号是否匹配
检查分号是否正确使用
检查箭头函数、模板字符串等语法
使用 ESLint 等工具检查语法

2.4 范围错误 (RangeError)

现象: Uncaught RangeError: Maximum call stack size exceeded
原因: 函数调用栈溢出，通常是由于无限递归
解决方案:
检查递归函数是否有终止条件
避免无限循环
优化递归算法，考虑使用迭代

2.5 URI 错误 (URIError)

现象: Uncaught URIError: URI malformed
原因: URI 编码或解码错误
解决方案:
确保 URI 格式正确
使用 encodeURI() 和 decodeURI() 正确处理 URI

2.6 自定义错误

创建自定义错误:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}
// 使用自定义错误
function validateInput(input) {
  if (!input) {
    throw new ValidationError('Input is required');
  }
}

3. 性能瓶颈分析

3.1 性能分析工具

3.1.1 Chrome DevTools Performance

录制性能:

打开 Chrome DevTools
切换到 Performance 面板
点击 “Record” 按钮
执行要分析的操作
点击 “Stop” 按钮

分析结果:
Flame Chart: 查看函数调用栈和执行时间
Main Thread: 查看主线程活动，识别长任务
Network: 查看网络请求时间
Memory: 查看内存使用情况
Frames: 查看帧率，识别卡顿

3.1.2 Lighthouse

性能审计:

打开 Chrome DevTools
切换到 Lighthouse 面板
选择 “Performance” 选项
点击 “Generate report”

分析结果:
性能评分
各项性能指标
优化建议

3.1.3 WebPageTest

在线性能测试:
访问 https://www.webpagetest.org/
输入测试 URL
选择测试地点和浏览器
点击 “Start Test”
分析结果:
加载时间
瀑布图
性能指标
优化建议

3.2 常见性能瓶颈

3.2.1 渲染性能

重排 (Reflow):
原因: 修改元素的布局属性（如 width, height, position）
影响: 触发浏览器重新计算布局
优化: 批量修改样式，使用 CSS transform
重绘 (Repaint):
原因: 修改元素的视觉属性（如 color, background）
影响: 触发浏览器重新绘制
优化: 减少样式修改，使用 CSS will-change
合成 (Composite):
原因: 元素需要分层渲染
影响: 可能导致卡顿
优化: 合理使用 transform 和 opacity

3.2.2 网络性能

请求数量:
影响: 增加连接开销
优化: 合并请求，使用 HTTP/2
请求大小:
影响: 增加传输时间
优化: 压缩资源，使用 CDN
加载顺序:
影响: 关键资源加载延迟
优化: 优先加载关键资源，使用 preload

3.2.3 JavaScript 性能

长任务:
原因: 主线程执行时间超过 50ms
影响: 阻塞 UI 渲染
优化: 拆分长任务，使用 Web Workers
内存泄漏:
原因: 未清理的引用
影响: 内存使用持续增长
优化: 及时清理定时器、事件监听器
频繁 GC:
原因: 频繁创建和销毁对象
影响: 导致卡顿
优化: 对象池，减少临时对象

4. 优化策略

4.1 渲染优化

4.1.1 CSS 优化

选择器优化:
避免使用复杂选择器
优先使用类选择器
避免使用通配符选择器
样式优化:
减少 CSS 规则数量
避免使用 !important
使用 CSS 变量管理样式
合理使用 CSS Grid 和 Flexbox
关键 CSS:
内联关键 CSS
异步加载非关键 CSS

4.1.2 DOM 优化

减少 DOM 操作:
批量修改 DOM
使用 DocumentFragment
避免频繁查询 DOM
事件委托:
利用事件冒泡
减少事件监听器数量
虚拟列表:
只渲染可见区域的元素
适用于长列表

4.2 JavaScript 优化

4.2.1 代码优化

变量声明:
使用 const 和 let
避免全局变量
函数优化:
避免使用 eval()
避免使用 with
合理使用箭头函数
循环优化:
缓存循环长度
避免在循环中创建函数
使用 for...of 或 forEach 替代传统 for 循环
条件优化:
使用 switch 替代多个 if-else
合理使用短路求值

4.2.2 异步编程

Promise:
避免回调地狱
合理使用 Promise.all() 和 Promise.race()
async/await:
使异步代码更易读
便于错误处理
Web Workers:
处理耗时操作
避免阻塞主线程

4.2.3 内存管理

垃圾回收:
理解 V8 垃圾回收机制
避免内存泄漏
内存泄漏检测:
使用 Chrome DevTools Memory 面板
定期检查内存使用情况
内存优化:
及时清理定时器和事件监听器
避免循环引用
使用 WeakMap 和 WeakSet

4.3 网络优化

4.3.1 资源优化

压缩:
Gzip 或 Brotli 压缩
压缩 JavaScript 和 CSS
缓存:
设置合理的缓存策略
使用 Service Worker
CDN:
使用内容分发网络
减少网络延迟

4.3.2 加载优化

资源提示:
preload: 预加载关键资源
prefetch: 预加载未来可能使用的资源
dns-prefetch: 预解析 DNS
懒加载:
图片懒加载
组件懒加载
代码分割:
按需加载代码
减少初始加载时间

4.4 防抖与节流

4.4.1 防抖 (Debounce)

原理: 延迟执行高频操作，只有在操作停止后才执行
应用场景: 搜索输入、窗口 resize
实现:

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

4.4.2 节流 (Throttle)

原理: 限制高频操作的执行频率
应用场景: 滚动事件、鼠标移动
实现:

function throttle(func, limit) {
  let inThrottle;
  return function () {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}