掘金·金石计划

做前端的娜娜子

JavaScript 闭包摘要：闭包（Closure）是函数与其词法环境（Lexical Environment）的组合——一个函数可以"记住"并访问它被创建时所处的外部作用域中的变量，即使它在该作用域之外被执行。一句话记忆：函数打包了出生地的变量，走到哪都能用。核心要点：① 内部函数引用外部变量即形成闭包；② 闭包实现变量私有化/数据封装/柯里化；③ 潜在风险是内存泄漏和循环引用；④ 避免泄漏需手动解除引用和及时移除监听器。

做前端的娜娜子

移动端上拉加载与下拉刷新实现方案摘要：移动端长列表性能优化的两大核心交互——**上拉加载更多（Scroll to Load）**通过滚动触底检测 + 分页请求实现数据渐进式加载；**下拉刷新（Pull to Refresh）**通过触摸手势追踪 + 阈值判断 + 指示器动画实现数据重新获取。两者共同构成「无限滚动」体验的基础。必背要点：

做前端的娜娜子

同一链接实现 PC Web 与移动 H5 自适应摘要：通过「识别设备类型 → 按端渲染对应内容」的两步策略，用同一个 URL 让 PC 打开展示 Web 应用、手机打开展示 H5 应用。核心手段分三层：UA 字符串判断跳转（最简单）、框架 Context/Inject 传递设备信息（组件级条件渲染）、响应式 Hook/媒体查询（纯 CSS 驱动）。一句话概括——先问"你是谁"，再给"你该看的"。

做前端的娜娜子

如何实现网页加载进度条？前言：当用户打开你的页面，面对一片空白等待加载时，体验是焦虑的。一个流畅的进度条能告诉用户"正在加载，请稍候"，极大提升感知速度。本文从进度获取、渲染方式、页面加载、框架集成四个维度，给你一套完整的实现方案。

做前端的娜娜子

大文件上传摘要：大文件上传的核心思路是「切片 + 断点续传 + 秒传」。前端将大文件按固定大小（如 5MB）切分成多个 chunk，逐个上传；用文件的 hash 值作为唯一标识，后端据此判断哪些分片已存在（秒传）或需要续传；切片进度存入 IndexedDB，支持刷新页面后恢复。一句话概括——把大象装冰箱分三步：切、传、合，中间断了能接着来。

做前端的娜娜子

React 性能优化摘要：React 性能优化的核心目标是减少不必要的 re-render（重渲染）和降低首屏/交互耗时。优化手段分三层：组件层（memo/PureComponent/useMemo/useCallback 控制更新粒度）、加载层（lazy/Suspense 分 chunk + 虚拟列表 + Web Worker）和工程层（打包构建/资源压缩/缓存策略）。一句话概括——能不渲染就不渲染，能晚加载就晚加载，能放后台就放后台。

做前端的娜娜子

Vue的响应式原理摘要：Vue 3 的响应式系统用 ES6 Proxy + Reflect 替代了 Vue 2 的 Object.defineProperty，解决了无法检测属性增删、数组索引修改等痛点。核心由四个函数协作完成——reactive 创建响应式代理、effect 注册副作用函数、track 在读取时收集依赖、trigger 在修改时触发更新。这四者构成了一个"数据变化 → 自动更新视图"的完整闭环。

做前端的娜娜子

Web缓存策略有哪些？摘要：浏览器缓存是前端性能优化的核心手段之一。它通过 HTTP 响应头控制资源是否使用本地缓存，分为强缓存（直接用，不请求）、协商缓存（问一下再用）和策略缓存（按场景灵活选择）三大类。理解它们的优先级和触发条件，是掌握 HTTP 缓存的关键。

RN 原生动画 Animated 用法、动画性能优化React Native 原生 Animated 是 RN 官方提供的动画库，适合实现大部分基础动画（淡入淡出、缩放、位移、旋转等）。如果是面试，通常会问两个方面：

RN适配方案：屏幕适配、分辨率适配、刘海屏/全面屏适配React Native（RN）的适配主要可以分为屏幕尺寸适配、分辨率（DPI）适配、刘海屏/全面屏适配、横竖屏适配四大类。下面是一套比较完整的适配方案，也是目前企业项目最常采用的实践。

RN中的StyleSheet.create 好处、内联样式弊端在 React Native（RN）中，StyleSheet.create() 和内联样式（inline style）都可以定义样式，但官方更推荐使用 StyleSheet.create() 来管理大部分样式。

RN 样式特点：Flex 布局默认、没有像素单位、样式不能级联React Native（RN）的样式系统与 Web CSS 有不少区别，你提到的三点都是 RN 的核心特点：

react navite JSBridge 通信机制、异步通信特点React Native 的 JSBridge（桥接）通信机制是 React Native 能够实现跨平台的核心之一。理解 JSBridge 后，再学习新的 JSI、TurboModule、Fabric 就会容易很多。

react批量更新、同步/异步更新场景React 16 到 React 19 期间，批量更新（Batch Update）机制发生了很大变化，尤其是 React 18 引入了自动批量更新（Automatic Batching）。

React 合成事件机制、和原生事件区别、事件冒泡阻止这是 React 面试中的高频题，尤其是中高级前端岗位。可以从 React 合成事件机制 → 与原生事件区别 → 阻止冒泡和默认行为三部分回答。

react 原理与进阶如果你已经有 7 年前端经验，并且做过 React 项目，那么学习 React 不应该停留在：而是应该深入到 React 原理 + 源码 + 性能优化 + 架构设计。

避免不必要渲染：PureComponent、memo、useMemo、useCallback这是 React 面试中高频考点，很多人会背概念，但面试官更喜欢问：PureComponent、memo、useMemo、useCallback 有什么区别？什么时候用？为什么能减少渲染？