前端面试每日三题 - Day 23
今天，我们将深入探讨 WeakSet 与 WeakMap 在 JavaScript 中的应用与底层机制，分析它们如何有效管理内存。接下来，我们会探索 React 18 中的 Server-Side Rendering (SSR) 和 Static Site Generation (SSG)，了解它们如何提升网站性能和 SEO。最后，我们将学习如何设计一个高效的分布式日志收集系统，解决大规模应用中的日志数据处理问题。
通过今天的学习，你将提升对高级 JavaScript 和 React 技术的理解，同时掌握构建高效系统的能力，助力你的面试准备和职业发展。
✅ 题目1：JavaScript - 深入理解 WeakSet 与 WeakMap 的底层机制和实际应用
📘 解析说明
WeakSet 和 WeakMap 是 JavaScript 中相对较少使用但非常强大的数据结构，它们主要用来解决内存管理的问题。
- WeakSet：与 Set 类似，但它只允许对象作为元素，并且这些元素是“弱引用”的。换句话说，当某个对象没有其他引用时，WeakSet 会自动将其垃圾回收，从而避免内存泄漏。
- WeakMap：与 Map 类似，但它的键必须是对象，并且这些键是“弱引用”的。WeakMap 允许你存储任意对象作为键，而这些键在没有其他引用时，会被自动垃圾回收。
📎 示例代码
// WeakSet 示例
let obj1 = {};
let obj2 = {};
const weakSet = new WeakSet([obj1, obj2]);console.log(weakSet.has(obj1)); // true
obj1 = null; // obj1 被垃圾回收
console.log(weakSet.has(obj1)); // false// WeakMap 示例
let obj3 = {};
const weakMap = new WeakMap();
weakMap.set(obj3, 'value');
console.log(weakMap.get(obj3)); // 'value'
obj3 = null; // obj3 被垃圾回收
console.log(weakMap.has(obj3)); // false
⚠️ 常见用法与适用场景
- WeakSet: 用于跟踪对象的状态（如事件监听器）并防止内存泄漏。例如，监听 DOM 事件时，使用 WeakSet 来存储监听器对象。
- WeakMap: 用于缓存某些对象的数据，避免缓存数据导致对象无法被垃圾回收。适用于存储 DOM 元素与其附加数据的场景。
🧠 脑图建议
✅ 题目2：React - 探索 React 18 中的 Server-Side Rendering (SSR) 与 Static Site Generation (SSG)
📘 解析说明
React 18 引入了许多新特性，其中包括 Server-Side Rendering (SSR) 和 Static Site Generation (SSG)，这两者在提升性能和 SEO 上起到了至关重要的作用。
- SSR (Server-Side Rendering)：在服务器端生成 HTML 内容，并将其发送到浏览器。这使得页面在加载时就能显示内容，从而提高 SEO 和用户体验。
- SSG (Static Site Generation)：在构建时预渲染 HTML 内容，生成静态文件。这些文件可以被快速加载，并且适合于内容不频繁更新的页面。
📎 典型示例
// React 18 SSR 示例
import React from 'react';
import ReactDOMServer from 'react-dom/server';const App = () => <div>Hello, React SSR!</div>;const html = ReactDOMServer.renderToString(<App />);
console.log(html); // 输出渲染后的 HTML// React 18 SSG 示例 (使用 Next.js)
import { useEffect, useState } from 'react';export async function getStaticProps() {// 预渲染数据const data = await fetch('https://api.example.com/data').then(res => res.json());return { props: { data } };
}function Page({ data }) {return <div>{data.title}</div>;
}export default Page;
💼 工作原理
- SSR: 服务器在接收到请求时会运行 React 组件，生成 HTML 页面并返回给客户端。这对 SEO 非常重要，因为搜索引擎可以直接爬取页面内容。
- SSG: 在构建时，React 会预渲染所有页面，生成静态 HTML 文件。每次用户访问时，直接加载这些静态文件，速度非常快。
🧠 脑图建议
✅ 题目3：系统设计 - 设计一个高效的分布式日志收集系统
📘 解析说明
分布式日志收集系统是现代应用中不可或缺的一部分，尤其是对于大规模分布式系统而言，日志管理至关重要。设计一个高效的日志收集系统时需要考虑以下几个方面：
- 日志采集：通过日志代理（如 fluentd 或 logstash）收集各个服务的日志。
- 日志存储：使用分布式数据库（如 Elasticsearch）存储日志，支持快速检索和分析。
- 日志处理：支持实时数据流处理（如使用 Apache Kafka）来传输和处理日志数据。
- 查询与分析：通过 Kibana 等工具提供可视化的日志分析界面，帮助开发人员快速定位问题。
✨ 关键组件
- 日志代理：负责从应用和服务器中采集日志数据。常见的工具包括 fluentd、logstash 等。
- Kafka：作为日志的消息中间件，提供高效的日志流传输，支持高并发。
- Elasticsearch：存储日志数据，并提供强大的搜索功能，支持高效的日志查询。
- Kibana：提供日志数据的可视化界面，帮助开发人员分析和调试。
🏠架构图示
+------------+ +------------+ +----------------+ +-------------+
| Log Agent | --> | Kafka | --> | Elasticsearch | --> | Kibana |
| (fluentd) | | (Broker) | | (Storage) | | (Dashboard) |
+------------+ +------------+ +----------------+ +-------------+
🧠 脑图建议
📅 明日预告：
- JavaScript - 深入理解 Promise.all()、Promise.race() 和 Promise.allSettled() 的实际应用和性能差异
- React - 解析Concurrent Rendering 和 useTransition API。
- 系统设计 - 设计一个高并发的在线支付系统架构