前端面试题（五）

22. 浏览器存储机制

前端存储有哪些方式？
- 前端存储有多种方式，主要包括：
  1. localStorage：一种永久存储方式，数据会保存在浏览器中，除非手动删除。适用于存储不敏感的、需要长时间保留的数据。
  2. sessionStorage：存储数据仅在会话期间有效，浏览器关闭后数据被清除。适用于存储临时数据，如用户的会话信息。
  3. cookie ：一种存储在浏览器的小型文本数据，常用于存储用户身份信息（如登录状态）。cookie 可以设置过期时间，并通过 HTTP 请求自动发送到服务器。由于 cookie 会随请求发送，因此体积不宜过大（通常不超过 4KB）。
  4. IndexedDB：一个基于浏览器的 NoSQL 数据库，适合存储大量的结构化数据。支持事务、索引和大规模数据存储操作。
localStorage 和 sessionStorage 的区别？
- 生命周期 ：localStorage 中的数据永久存在，直到手动清除，而 sessionStorage 的数据只在当前会话（session）有效，关闭浏览器后即被清除。
- 作用范围 ：localStorage 和 sessionStorage 的作用范围都限于同源（同协议、同域名、同端口），但 sessionStorage 只能在同一个标签页中共享，跨标签页的数据不能访问。
如何在前端安全地使用 cookie？
- 通过设置 HttpOnly 属性，限制 JavaScript 对 cookie 的访问，防止 XSS 攻击：
  http 复制代码
```
Set-Cookie: sessionId=abc123; HttpOnly
```
- 通过设置 Secure 属性，确保 cookie 仅在 HTTPS 协议下传输：
  http 复制代码
```
Set-Cookie: sessionId=abc123; Secure
```

23. 前端路由

什么是前端路由？
- 前端路由 是指在单页应用程序（SPA）中，通过改变 URL 而不重新加载页面的方式来管理页面状态。前端路由通常用于实现单页面应用的导航逻辑，不会触发浏览器的完整刷新，而是动态地替换页面内容。
前端路由有几种实现方式？
- Hash 路由 ：通过监听 URL 中的 hash 部分（即 # 后面的内容）来实现路由跳转。例如：http://example.com/#/home。在改变 hash 时，不会发送请求到服务器，前端 JavaScript 可以捕获 hashchange 事件来加载相应的内容。
  javascript 复制代码
```
window.addEventListener('hashchange', function() {
  console.log(location.hash);
});
```
- History 路由 ：利用 HTML5 的 History API，包括 pushState 和 replaceState，实现 URL 的更新，而不会重新加载页面。例如：
  javascript 复制代码
```
history.pushState(null, null, '/home');
```
  通过 popstate 事件监听路由的变化：
  javascript 复制代码
```
window.addEventListener('popstate', function() {
  console.log('Location: ' + document.location);
});
```
Hash 路由和 History 路由的区别？
- Hash 路由：
  - 基于 URL 的 # 部分实现，不会发送 HTTP 请求。
  - 兼容性好，早期浏览器支持。
  - URL 中带有 #，不美观。
- History 路由：
  - 基于 HTML5 History API 实现，通过 pushState 改变路径。
  - URL 美观，没有 #。
  - 需要服务器端配置支持（例如 Nginx 或 Apache 的配置，确保每个路径都指向同一个入口文件）。

24. 虚拟 DOM

什么是虚拟 DOM？为什么需要虚拟 DOM？
- 虚拟 DOM 是 JavaScript 对象的抽象，表示页面的结构和状态。它与真实 DOM 的不同在于，它是存在于内存中的对象，更新时并不会直接操作真实 DOM。虚拟 DOM 提供了一种高效的更新策略，避免了频繁的 DOM 操作，从而提升了性能。
虚拟 DOM 的工作原理是什么？
1. 创建虚拟 DOM：将 JSX 或模板编译为虚拟 DOM 对象。
2. 比较（Diffing）：当状态改变时，新的虚拟 DOM 和旧的虚拟 DOM 进行比较，生成差异（diff）。
3. 更新真实 DOM：只更新与差异相关的部分，而不是重新渲染整个页面。
虚拟 DOM 的优势是什么？
- 性能优化：由于虚拟 DOM 的 diff 算法只对发生变化的部分进行更新，减少了直接操作 DOM 的开销，避免了性能瓶颈。
- 跨平台性：虚拟 DOM 是平台无关的概念，它可以被渲染到不同的目标（例如浏览器中的 DOM、原生应用中的视图组件等），这使得 React 等框架能够支持跨平台开发（如 React Native）。

25. 前端框架对比（Vue.js、React、Angular）

Vue.js 的特点是什么？
- 轻量级、易上手：Vue.js 非常适合小型项目，提供了清晰易懂的 API，学习成本低。
- 双向数据绑定：Vue 提供了简便的双向数据绑定机制，使得视图和模型能够同步更新。
- 渐进式框架：Vue 可以逐步集成到现有项目中，既可以用于构建简单的组件，也可以用于开发复杂的单页应用（SPA）。
React 的特点是什么？
- 虚拟 DOM：React 使用虚拟 DOM 来提高页面的渲染性能，通过高效的 diff 算法优化 DOM 操作。
- 组件化：React 基于组件构建应用程序，组件具有良好的可复用性和独立性。
- 单向数据流：React 采用单向数据流（Props 和 State），使得数据流动更加清晰，应用的状态管理更加可预测。
Angular 的特点是什么？
- 全功能框架：Angular 是一个完整的框架，包含了路由、依赖注入、表单处理、HTTP 请求等功能，非常适合大型复杂项目的开发。
- 双向数据绑定：类似于 Vue.js，Angular 也提供了双向数据绑定。
- TypeScript 支持：Angular 是使用 TypeScript 编写的，这使得代码更加严谨和可维护，提供了静态类型检查的优势。

26. 前端的性能监控与优化

如何进行前端性能监控？
- 可以使用浏览器的性能工具，如 Chrome DevTools 的 Performance 面板，来监测页面的加载时间、JavaScript 执行效率、渲染性能等。
- 性能监控库 ：使用诸如 Lighthouse 或 Web Vitals 这样的工具，能够分析页面的核心性能指标，如首屏渲染时间、交互延迟等。
如何优化前端性能？
1. 代码拆分与懒加载 ：使用 Webpack 的 code splitting 技术，将代码分块，并按需加载模块，减少首屏加载时间。
2. 图片优化 ：使用合适的图片格式（如 WebP），并通过 srcset 实现响应式图片加载，减少图片加载时间。
3. 资源压缩与缓存：通过压缩 JavaScript、CSS 文件，减少传输体积；使用浏览器缓存，减少不必要的网络请求。
4. 减少重排和重绘：避免频繁的 DOM 操作，使用 CSS 动画而不是 JavaScript 动画来减少页面重排（Reflow）和重绘（Repaint）。

27. 前端开发中的常见错误处理

如何处理 JavaScript 中的异步错误？
- 对于基于 Promise 的异步操作，应该使用 .catch() 方法捕获错误：
  javascript 复制代码
```
fetch('https://api.example.com/data')
  .then(response => response.json())
  .catch(error => console.error('Fetch error:', error));
```
- 对于 async/await，使用 `try-catch