- 博客(123)
- 收藏
- 关注
RSS订阅原创 真话难听，但这就是前端开发的真实现状！
3.JavaScript：熟练掌握变量、数据类型、函数、作用域、闭包、原型与原型链、异步编程（Promise、async/await）、ES6+ 常用语法。2.CSS：掌握盒模型、定位、浮动、Flexbox、Grid 布局，熟悉响应式设计与常见适配方案。2.熟悉代码规范工具（ESLint、Prettier）、单元测试框架（Jest、Vitest）。React），理解其核心思想（数据驱动、组件化、虚拟 DOM 等）。2.掌握资源加载优化、代码分割、懒加载、图片优化等手段。Vite，了解基本配置与优化手段。
2025-12-24 16:56:34
1114
原创 从硬编码到 Schema 推断：前端表单开发的工程化转型
数据不再是冷冰冰的键值对，而是变成了一个包含“元数据”的对象。我应该用什么组件渲染（我是否应该被显示（visible我依赖哪些字段（我的下拉选项去哪里拉取（request很多时候，我们觉得 Vue 或 React 难维护，是因为我们将过重的业务决策交给了视图层。通过引入中间件和 Schema 推断，我们实际上在 UI 框架之上建立了一个“业务逻辑防火墙”。Vue 只负责监听交互和渲染结果，而变幻莫测的业务规则被关在了纯 TypeScript 编写的沙盒里。
2025-12-24 16:28:33
490
原创 20万字 前端互联网大厂面试题，新鲜出炉！
大家好，我已经累计发布了 100+ 多篇涵盖腾讯、字节、阿里、 美团、京东、快手、百度、滴滴、米哈游等互联网公司，也涵盖部分中小厂、银行、国企的面经。所有的面经都来自于同学们真实面试题库，并且我针对每一篇面经都做了解析。我想着，既然已经输出这么多面试题了，那么干脆就整理一个面试题集合了。说干就干，当时晚上临时有了这个想法，花了 5 个小时翻阅了以前自己发布过的 100 多篇面经，然后针对每一篇的问题进行分类收集。不整理还不知道，一整理直接下一跳了，竟然。
2025-12-24 15:52:36
523
原创 [特殊字符]别再迷茫！一份让你彻底掌控 TypeScript 类型系统的终极指南
TypeScript现在的普及度已经很高了，虽然它是一种静态类型定义，但它的庞大已足够我们要向对待一门语言一样对待它了，去深入学习，以便更好的利用它的能力。
2025-12-24 15:24:07
650
原创 Web前端面试瞬间不急了，元旦假期放心玩！
1. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别?1. css 中的 animation、transition、 transform 有什么区别?9.讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理。9.说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?10.React.memo()和 useMemo()的用法是什么，有哪些区别?10.bind、call、apply 有什么区别?
2025-12-22 14:18:35
979
原创 0.1加0.2为什么不等于0.3-答不上来的都挂了
很多人第一反应是“浮点数精度问题0.10.2这篇文章按“现象 → 原因 → 解决 → 面试回答”的顺序，把它讲透。
2025-12-22 14:10:09
339
原创 下周五前端面试一周足矣（极简背诵版）稳了
7. 说说你对 TypeScript 中函数的理解？6.说说Node中的EventEmitter?7.说说 Node 文件查找的优先级以及 Require 方法的文 件查找策略?1. 说说你对 TypeScript 的理解？5.说说对 Node 中的 process 的理解?6. 说说你对 TypeScript 中枚举类型的理解？3. 说说你对 TypeScript 中⾼级类型的理解？3. 说说对 Node 中的 Buffer 的理解?4. 说说对 Node 中的 Stream 的理解?
2025-12-22 12:21:53
831
原创 面试官问“try-catch影响性能吗“，我用数据打脸
放心用 try-catch- 现代引擎下，性能影响可以忽略异常是异常- 用于处理真正的错误情况，不是控制流程先检查，再操作- 能用 if 判断的，别用异常处理catch 里要做事- 空的 catch 块是代码坏味道错误要有上下文- catch 里记录足够的信息方便排查// 最佳实践示例if (!userId) {// 先检查，不用异常try {if (!// HTTP 错误，但不一定是异常console.warn(`获取用户失败: ${response.status}`);
2025-12-22 11:54:07
799
原创 今天面试了个211前端男生，直接淘汰了
其实，前端面试最先淘汰的就是说这几句话的1. 具体化：不说“优化性能”，说“LCP 从 3.2s 降到 1.4s”2. 讲权衡：说明为什么选 A 不选 B（如选 Vue 因团队熟悉）3. 带结果：用数据证明效果（PV↑、Bug↓、加载快）
2025-12-18 11:44:48
2419
1
原创 隐式类型转换：哈基米 == 猫 ？ true ：false
如果我们以往只接触过一门强类型的编程语言，估计早已经皱起眉头，大呼一声“何意味？但是在js的世界中，一切是自由的。你甚至可以直接写一份 数字+引用数据类型 的代码而不报错。使得上段代码不报错的原因，其实是js在执行过程中发生了。当运算符两端数据类型不同时就会发生。
2025-12-18 10:55:47
914
原创 当你面试了很多家前端公司，你就会发现～
前端找工作没什么巧，先把自己的简历打磨后，吹吹牛，背一下面试题与常用话术，整理一下回答思路，轻松就能过关，机会重来都是留给有准备的人！这里给大家整理了1000道前端面试经典问题与解析，前端人就业的实用干货。当你面试过很多家前端公司你就会发现，他们面试都是差不多的。希望能够对大家有所帮助！
2025-12-16 12:27:52
605
原创 【用户行为监控】别只做工具人了！手把手带你写一个前端埋点统计 SDK
至此，我们已经亲手打造了一个麻雀虽小、五脏俱全的前端行为监控 SDK。知其然：学会了如何监听 PV、UV、点击和停留时长。知其所以然：理解了historyAPI 的劫持原理、sendBeacon的可靠性优势以及事件委托的性能价值。当然，这只是一个起点。数据可视化：搭建一个后端服务和看板，将上报的数据绘制成精美的图表。性能监控：结合，监控首屏加载时间 (FCP)、最大内容绘制 (LCP) 等性能指标。错误监控：监听error和事件，捕获 JS 报错和接口异常。
2025-12-16 12:13:26
922
原创 6年老前端看了也迷糊
近些年的情况，大厂HC收缩，中小厂更注重“即战力”，从“框架熟练度”转向“底层原理与工程化思维”，对项目场景的处理经验和工程能力要求更高。Q80、使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?Q73、面试官:说说Loader和Plugin的区别?Q57、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理。Q21、谈谈 Vue 事件机制，并手写$on、$off、$emit、$once。Q10、bind、call、apply 有什么区别?
2025-12-13 16:42:04
1176
原创 从 nvm 到 fnm：一个前端老兵的版本管理工具迁移实录
默认安装在绝对值得。时间：约 15-30 分钟学习曲线：几乎为零（命令高度相似）风险：极低（可随时回退）终端启动快 5-10 倍版本切换快 20-30 倍自动切换版本，告别手动nvm use跨平台一致性，团队协作更顺畅更少的 Bug 和怪异行为如果你每天要打开几十次终端、在多个项目间切换，fnm 节省的时间累积起来是非常可观的。更重要的是，那种丝滑无感的体验，会让你的开发心情都变好。
2025-12-13 15:57:07
691
原创 至今，我发现前端效率低的人都有一个通病！
我发现很多人把“面试挂”甩锅给“刷题不够”“没遇到原题”。但真正拖垮面试的，从来不是算法不行，而是用盲目的无效刷题，代替了前期的精准准备。看似刷了几百道题，80%精力都在死记解法、背八股文、焦虑无关细节，这才是失败的核心！
2025-12-11 14:17:42
840
原创 JavaScript 中基于原型和原型链的继承方式详解
继承方式是否共享引用属性能否传参能否继承原型方法父构造函数调用次数是否推荐原型链继承是否是1（设置原型时）❌构造函数继承否是否1（子构造中）⚠️ 局限组合继承否是是2⚠️ 可用但非最优寄生组合式继承（空对象中介）否是是1✅ 强烈推荐（ES5）原型式继承（Object.create）是否是（来自源对象）0✅ 特定场景适用。
2025-12-11 14:09:22
837
原创 由于我不停面试Web前端，然后猛地发现...
面了大半年web前端，愈发意识到：25年想面试出彩，死记硬背早不管用了。能拿offer的人，回答都有条理，有细节，自带解决问题的底气。而多数人栽跟头，全绕不开这4个短板↓1. JS基础不扎实：吃透闭包、事件循环等核心概念，懂V8机制与async/await底层；2. 框架停留在API层：深究虚拟DOM、Hooks依赖收集等源码逻辑，结合业务谈优化；3. 项目缺技术深度：突出性能优化手段、复杂问题解决方案，不说单纯罗列技术栈；4. 工程化能力薄弱：掌握Webpack。
2025-12-11 12:34:03
1146
原创 深入理解 JavaScript 中的 `new` 运算符与类数组 `arguments`
通过手写new对象创建、this绑定、原型链继承。这不仅是面试中的高频考点，更是掌握 JS 底层逻辑的关键。而对arguments的探讨则揭示了 JavaScript 动态参数处理的灵活性与局限性。虽然 ES6 引入了剩余参数（rest parameters）（如），使得arguments的使用逐渐减少，但在阅读旧代码或处理特殊场景时，理解arguments依然不可或缺。最佳实践建议在新项目中优先使用...args替代arguments；避免直接操作__proto__，改用；理解原型链和this。
2025-12-11 12:18:34
643
原创 12月初面了几家前端岗，根本没人问八股了
另一家更直接：“假设你是我们电商前端负责人，接下来要同时开发APP、H5和小程序，你怎么设计这套系统？”问题落地到具体业务场景，逼你跳出“单页面应用。以前准备面试，防抖节流、原型链、Vue响应式原理倒背如流。八股文不是不重要了，而是成了默认值。：“这个列表性能有问题，给你20分钟，能优化多少？12月初面了五家互联网公司，从C轮到一线大厂都有。比如某家大厂二面，面试官直接共享屏幕，扔来一个未完成的React组件。虚拟DOM的key有什么用”，你要直接在代码里证明你知道。Diff算法细节毫无兴趣！
2025-12-09 11:48:31
843
原创 递归 VS 动态规划：从 “无限套娃计算器” 到 “积木式解题神器”
你有没有试过：对着计算器按 “× 上一个数”，按到手指酸？或者自己照镜子，镜子里面有个自己，镜子的镜子里面还有个自己？这就是递归 —— 像台 “无限套娃计算器”，算大数能把自己 “算死机”；而动态规划是 “积木式解题神器”，从最小块开始拼，再复杂的题都能稳准狠搞定。递归（套娃计算器）：上手快，但算大数容易 “死机”；动态规划（积木神器）：从基础块开拼，稳、准、快，复杂题克星。维度递归（Recursion）动态规划（Dynamic Programming, DP）核心思想。
2025-12-09 11:33:53
615
原创 给大家普及下进入腾讯前端需达到的学习强度
①JavaScript语言基础：深入掌握原型与闭包、异步编程、ES6+新特性及模块化开发。④数据结构与算法：掌握常见数据结构（树、链表）及算法（排序、动态规划）③前端网络知识：熟练HTTP协议、缓存策略、网络安全及跨域解决方案。④项目经验：拥有复杂前端项目架构经验，能独立主导模块重构与技术演进。小编已经把题目答案都整理好了。③工程协作：熟练使用Git协作流程、代码审查与团队规范制定。②浏览器原理：理解渲染机制、事件循环、内存管理与性能优化。②性能优化：掌握渲染优化、打包体积控制及首屏加载提速策略。
2025-12-06 15:53:46
1165
原创 深入探究 React 史上最大安全漏洞
本文档深入分析了 React Flight 协议（React Server Actions 的底层协议）中的一个远程代码执行 (RCE) 漏洞。该利用链串联了三个关键漏洞引用解析中的未过滤路径遍历（可访问__proto__和伪造Chunk 注入 —— 将精心构造的对象伪装成内部 Chunk 对象处理。Function 构造函数注入—— 将方法替换为Function构造函数。
2025-12-06 15:38:50
914
原创 且看且珍惜！前端共16页，很难找全的！
2、浏览器端本地存储（LocalStorage/SessionStorage）的实现原理？IndexedDB 的事务机制？3、TypeScript 类型守卫与 TS 4.9 satisfies 关键字的对比？1、ES6 Symbol 与普通字符串键的区别？工程实现中的常见优化（如 Monorepo 管理）？3、发布订阅模式与观察者模式的区别？2、微前端中 qiankun 的沙箱模式通信原理？3、前端埋点系统（如百度统计）的埋点设计与上下文传播机制？4、前端乐观锁的 ABA 问题解决方案（如版本号机制）？
2025-12-04 12:15:51
762
原创 从零实现一个「就地编辑」组件：深入理解 OOP 封装与复用的艺术
组件化：独立功能单元封装性：隐藏实现，暴露接口可复用：一处编写，多处使用可维护：逻辑清晰，易于扩展好的代码不是写出来的，而是设计出来的。
2025-12-04 11:55:58
507
原创 大家普及一下WEB前端面试需要达到的强度
前端项⽬的 package.json ⽂件中， dependencies 和 devDependencies 对象都⽤于指定项⽬所依赖的软件包，但它们在项⽬的开发和⽣产环境中的使⽤有所不同。将 <script> 标签放在 <head> 和 <body> 底部，会对⻚⾯的加载和性能产⽣不同的影响：<script> 标签放在 <head> 部分。总的来说， dependencies 中的依赖项是项⽬运⾏所必需的，⽽ devDependencies 中的依赖项则是在开发过程中需要的辅助⼯具和库。
2025-12-04 11:34:02
1109
原创 告别服务器！小程序纯前端“图片转 PDF”工具，隐私安全又高效
文件体积与性能pdf-lib库本身有一定体积（通常在几百 KB），会增加小程序包体大小，我们是使用分包，所以不影响主包。图片数量越多、分辨率越高，转换耗时越长，内存占用越大。建议在选择图片时提示用户合理数量或适当压缩。pdf横向图片旋转需要额外计算和处理，可能会略微增加复杂性，如果觉得复杂，也可以直接判断图片是否是纵向，如果是横向使用canvas旋转图片，逻辑上就毕竟简单了。兼容性代码使用了，目前大多数小程序环境和浏览器中兼容性可能不好，我自己做了兼容本地文件系统限制。
2025-12-04 11:23:57
595
原创 2025最新前端八股文，7天背完通过率+90%—超全前端常见面试题（附答案）
Diff 算法是⼀种⾼效更新 DOM 的策略，它通过⽐较新旧虚拟 DOM 树的差异，最⼩化了更新操作，提⾼了⻚⾯的渲染效率。前端项⽬的 package.json ⽂件中， dependencies 和 devDependencies 对象都⽤于指定项⽬所依赖的软件包，但它们在项⽬的开发和⽣产环境中的使⽤有所不同。然⽽，也有⼀些事件是不会冒泡的。将 <script> 标签放在 <head> 和 <body> 底部，会对⻚⾯的加载和性能产⽣不同的影响：<script> 标签放在 <head> 部分。
2025-11-27 11:50:15
1082
原创 Vue 3样式深度选择器：为什么我们需要:deep()？
deep()选择器是Vue 3样式系统中一个非常重要的特性，它为我们提供了一种标准化的方式来处理组件样式穿透的需求。从Vue 2的各种混乱语法到Vue 3的统一:deep()，这反映了Vue团队在改善开发者体验方面的持续努力。:deep()解决了组件样式作用域带来的限制，让我们能够在父组件中修改子组件的样式。它的语法简洁明了，与现代CSS标准保持一致，而且与各种预处理器良好兼容。但是，能力越大责任越大。我们应该谨慎使用:deep()
2025-11-27 11:43:53
557
原创 一天面了6个前端开发，水平真的令人堪忧啊
多数候选人能说出HTML、CSS、JavaScript等基本概念，但缺乏深度理解。例如：知道响应式布局这个词，却说不清在实际项目中如何通过 媒体查询 或Flexbox/Grid来实现了解ES6语法特性，但不会在具体业务场景中选择合适的语法特性对前端框架的应用场景认知模糊，难以解释为何在特定场景下选择React而非Vue。
2025-11-27 11:38:24
942
原创 从“版本号打架”到 30 秒内提醒用户刷新：一个微前端团队的实践
微前端子应用集群，每个子应用都需要同时服务 dev / test / release / online 多套环境。当我们把问题和思考写成文档、沉淀成模板，团队就能以更小的代价获得更稳定的交付。这样即使构建过程持续 5～10 分钟，注入的版本号和静态文件里的版本仍保持一致。这其实是把“构建产物视为不可变工件”的原则落地——保证任何使用该工件的入口看到的元数据都是同一个快照。更重要的是，这套方案没有“要求运维多做一步”——构建产物天然携带 version.json，任何环境拿到包即可上线。
2025-11-27 11:30:13
665
原创 JS 对象：从 “散装” 到 “精装” 的晋级之路
在阅读前先解决一个问题，那就是啥是对象？说白了，JS 里的 “对象” 就是个 “万能收纳箱”—— 不管是数字、字符串这些零散数据，还是能干活的方法，都能往里面塞，把杂乱的信息规整得明明白白。而支撑这个 “收纳箱体系” 的，一边是像 “孤家寡人” 似的原始类型（string、number、boolean、undefined、null、Symbol、bigInt），它们单打独斗，不能挂额外属性；另一边是热热闹闹的引用类型（也就是对象家族），它们是 “群居选手”，能装能存还能扩展。
2025-11-27 11:18:24
663
原创 建议11月准备面试前端，还没计划的抄我的
算法刷题： 每天3-5道 高频Easy/Medium (数组、字符串、链表、二叉树、动态规划基础)。Q80、使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?Q57、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理。Q47、说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?Q21、谈谈 Vue 事件机制，并手写$on、$off、$emit、$once。Q10、bind、call、apply 有什么区别?
2025-11-19 11:37:42
924
原创 如何将 MP4 文件转换为 M3U8 格式并实现流媒体播放
通过将 MP4 文件转换为 M3U8 格式，视频可以被切割成多个小片段，按需加载并顺序播放。使用 FFmpeg 工具进行转换，不仅操作简单，还能在 HLS 协议下提高流媒体播放的效率和容错能力。HLS 使得视频能够根据网络带宽自适应调整质量，同时提供更好的用户体验，尤其在实时直播和点播场景中表现尤为突出。
2025-11-19 11:21:52
2493
原创 CSS 像素≠物理像素：0.5px 效果的核心密码是什么？
所有 “真实 0.5px 效果”（1 物理像素）都依赖 DPR≥2 的高清屏（利用 CSS 像素与物理像素的映射关系）；核心逻辑：不依赖像素映射的精准计算，而是通过视觉欺骗或矢量渲染，让线条看起来比 1px 细（DPR=1 时无法实现 1 物理像素，只能模拟）。核心逻辑：利用 DPR≥2 的像素映射关系，让 CSS 像素经过计算后，刚好对应 1 个物理像素。（二）DPR≥2 最优，DPR=1 可模拟：视觉层面实现 “细于 1px”（一）仅 DPR≥2 生效：直接让 CSS 像素对应 1 个物理像素。
2025-11-19 11:08:00
970
原创 11月3—5年Web前端开发面试你这么去准备…
将 <script> 标签放在 <head> 和 <body> 底部，会对⻚⾯的加载和性能产⽣不同的影响：<script> 标签放在 <head> 部分优点：1. 预加载： 浏览器在渲染⻚⾯之前，会先下载和解析所有在 <head> 部分的脚本⽂件。这样可以确保脚本在⻚⾯加载过程中随时可以被调⽤。2. 全局可⽤性： ⼀些脚本，特别是需要在⻚⾯⼀加载就运⾏的脚本，适合放在 <head> 中。缺点：
2025-11-17 14:23:10
1018
原创 React组件命名为什么用小写开头会无法运行？
在React项目实际开发中，我们经常用到一些约定俗成的语法，今天我们来聊一聊为什么组件命名时以小写字母开头的组件无法运行的这个现象，这个现象是由什么原因导致的。这个背后有重要的设计原理。这就不得不谈 JSX，JSX是一种语法扩展，它允许我们在JavaScript中编写类似HTML的代码。React项目中遇到JSX中的元素时，函数组件首字母大小写决定了React编译这个元素 是原生DOM元素还是自定义组件。 具体来说：那么，这个问题产生的根本原因：JSX 的编译机制React.createElement(M
2025-11-17 12:27:49
498
原创 CSS 也要支持 if 了 ！！！CSS if() 函数来了！
CSSif()函数允许在纯 CSS 中基于条件为属性赋值，无需 JavaScript 或预处理器。该函数已在 Chrome 137 发布。过去常用的做法包括通过 JavaScript 切换类名、使用预处理器 mixin 或编写大量媒体查询。if()将条件逻辑引入 CSS，使写法更直接、性能稳定。
2025-11-17 12:10:27
401
原创 11月3-5年Web前端开发面试需要达到的强度
别堆砌技术名词，要能说清在项目中如何用这些技术解决体验优化、渲染性能等实际需求，并讲透技术选型背后的权衡逻辑。Q80、使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?Q57、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理。Q47、说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?Q21、谈谈 Vue 事件机制，并手写$on、$off、$emit、$once。Q10、bind、call、apply 有什么区别?
2025-11-13 14:29:03
851
原创 从零到一：这篇JavaScript指南让你成为独立开发者
你是不是曾经看着满屏的代码感到无从下手？或者跟着教程做项目时总是一头雾水？别担心，今天这篇文章就是为你准备的。学完这篇内容，你就能真正理解JavaScript的精髓，独立开发出属于自己的应用。我会带你从最基础的概念开始，一步步构建完整的应用思维。不用担心自己是新手，我会用最通俗易懂的方式讲解每个关键点。读完这篇文章，你将获得完整的JavaScript开发能力，能够独立设计和实现前端应用。
2025-11-13 12:24:29
427
原创 当你的Ant-Design成了你最大的技术债
当产品经理提出一个我希望查询表单，在页面滚动时，吸附在顶部的需求时... 我们发现，我们改不动。每一次升级，都是一次大型重构，因为我们那些写法一样被CSS覆盖，在新版里，全失效了🤷♂️。它专业、开箱即用、文档齐全，拥有一切你想要的组件, 帮我们这些小团队，一夜之间就拥有了大厂的专业门面。但是，从去年开始，我发现，这个曾经的经典，正在变成我们团队脖子上最重的枷锁。你不再需要自己造轮子。因为，当你的组件库开始控制你的设计和性能时，它就不是你的资产了。老板也说：我们要做自己的品牌，现在的系统，太千篇一律了!
2025-11-13 11:59:20
818
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人