- 博客(159)
- 收藏
- 关注
RSS订阅原创 面了一个前端开发男生连Flex布局都说不清..
昨天面试了个前端开发，简历上写着“精通CSS布局”。结果我问了句：“flex: 1具体代表哪三个属性的缩写？”他支吾了半天没说全。我又追问：“和在垂直方向怎么对齐？align-self和order哪个优先级更高？”他彻底卡住了，最后憋出来一句：“布局不都靠调试器拖吗？说实话，这挺典型的。很多前端天天用Flex，但真到细节上，就暴露了对原理的模糊。flex-grow在容器有剩余空间时？在空间不足时？项目min-width设置后，？这些细节直接关系到实际布局的精准控制。
2026-01-30 15:31:58
655
原创 Vite打包速度提升300%的秘密：5个让你告别Webpack的理由
新项目首选：React/Vue/Svelte等框架的官方模板均已支持Vite。渐进式迁移策略先用Vite处理新功能模块。通过兼容旧版浏览器。随着ECMAScript模块成为浏览器标准、WASM等技术的普及，Vite这种基于原生能力的工具链将成为前端工程化的未来趋势。“快300%”不仅是数字游戏——它意味着开发者每天可以节省数小时的等待时间，将精力真正投入到创造价值的工作中。
2026-01-30 15:11:54
538
原创 微信小程序开发中碰到在组件中监听app.globalData 中值得变化 处理相对应的数据
JavaScript的Proxy是一种对象代理机制，它可以在对象和函数之间添加一个中间层，从而实现对对象和函数的拦截和控制。Proxy可以用于拦截对象的读写、函数的调用、属性的枚举等操作，并在拦截时执行自定义的操作。使用Proxy可以实现各种高级功能，例如数据绑定、事件监听、缓存等。是 JavaScript 中的一个方法，用于直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。其中，target是要被代理的目标对象，handler是一个对象，用于定义拦截目标对象的各种操作的行为。
2026-01-30 15:10:07
464
原创 突然发现前端面试滞后性真的好强啊
这是区分“代码实现者”与“问题解决者”的关键。关注的不再是过时的API，而是Hooks/Composition API带来的心智模型变化、服务端组件(RSV)等前沿方向。：面向未来，涵盖Node.js、服务端渲染(SSR/SSG)、低代码、可视化等拓宽边界的领域，为你的技术视野提供增量。4.使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?5.为什么 react 需要 fiber 架构，而 Vue 却不需要?5.如果让你来设计一个分页功能,你会怎么设计?
2026-01-29 17:21:48
659
原创 [特殊字符]别再用递归了！WeakMap 的影子索引“让树不再是树！”
今天来分享一个基于 WeakMap实现的快速对树形结构数据进行增删改查操作的useTreehook函数，它是基于JavaScript的WeakMap特性，在不改动原始数据的前提下，实现了一套O(1)查找的影子索引结构，这个影子其实就是对象的引用地址，让树形数据操作像操作数组一样简单！通过WeakMap实现的useTree，核心优势在于解耦。它将“业务数据”与“层级关系”分离开来，既保证了数据的纯净，又获得了极高的查找性能。WeakMap作为一个容易被忽视的原生特性，在处理这类关联关系映射。
2026-01-29 15:40:14
763
原创 救命！我那加载慢到离谱的图片，终于被懒加载 “救活” 了
你一定有这样的经历：打开一个图片超多的页面，进度条像蜗牛一样爬，屏幕上全是空白的占位框，你甚至怀疑自己的网是不是欠费了。其实这不是你的网络问题，而是页面在一股脑加载所有图片，哪怕它们还在屏幕外面躺着。这就好比疯狂星期四你点了一份全家桶，结果服务员把一年的量都端了上来，你吃不完，还得花大力气搬回家。好了，那么遇到问题就要解决问题。懒加载就是来解决这个问题的“聪明服务员”—— 它只在你需要的时候，才把图片端到你面前。
2026-01-29 15:33:11
649
原创 公司新来的前端虽然水，但比很多人明智
部门新招了个前端，简历上三年经验，实际一上手就露怯。Vue只会用this.调API，CSS布局全靠flex硬撑，遇到稍微复杂点的状态流转就想着绕路走。但奇怪的是，没人在背后说他“水”——因为他太清楚自己哪里不会了。这种“自知之明”，反而比那些硬撑“熟练使用全家桶”、实际连依赖都理不清的“三年经验”强得多。尤其是年前这段时间，很多面试官其实更看重基础扎实、学习路径清晰的人，而不是背了一堆八股文却解决不了实际问题的“面霸”。
2026-01-28 14:28:11
981
原创 [特殊字符]JS 为什么能跑这么快？一文把 V8 “翻译官 + 加速器” 机制讲透（AST / 字节码 / JIT / 去优化）
WebCore 会暂停工作，把控制权交给 JS 引擎。因为工程里真正的目标不是“某一步最快”，而是“整体更快、更稳、更可控”。再看一张更直观的图：代码最终一定要落到 CPU 可执行的机器码上。拿到 Tokens 后，V8 会依据语法规则，将其组装成一棵树——因此，“函数没执行会不会生成 AST？看到这里，你是否对那个黑盒子一样的浏览器有了新的认识？同时，AST 长什么样？，然后交给 TurboFan 编译为更快的机器码。在生成树之前，代码首先要被“打碎”。V8 会将代码拆解成一个个最小单元，称为。
2026-01-28 12:31:49
878
原创 一上午就面了4个前端岗，基本都给了二次机会
现在的前端面试，我主要看几个实际的东西：你做的项目到底解决了什么问题，遇到难点怎么处理的，代码基本功到底扎不扎实。但很多人准备的方向完全错了，背了一堆八股文，实际解决问题的能力一点没体现出来。我基本上都给安排了二面，不是因为特别出色，而是觉得一次面试确实容易紧张，可能没发挥好。只知道用了某个框架，但为什么用，有没有考虑过其他方案，都讲不明白。说实话，给二面机会是因为我觉得有些人底子还行，只是不会表达，或者准备偏了。但二面如果还是这样，那真的没办法了。今天上午连续面了四个候选人，说实话，都挺典型的。
2026-01-28 12:29:08
874
原创 React 那么多状态管理库，到底选哪个？如果非要焊死一个呢？这篇文章解决你的选择困难症
到这里，相信大家已经对 Zustand + TanStack Query 这套王炸组合有了全面的了解。简洁、高效、各司其职。Zustand 搞定客户端本地状态，让你告别繁琐的 Provider 和模板代码；TanStack Query 搞定服务端异步数据，让你告别手动处理 loading/error/ 缓存的烦恼。祝大家编码愉快，少写 bug，多摸鱼～ 🚀。
2026-01-28 11:59:33
745
原创 一周背完前端八股文，面试直接封神！
这样既可以保持脚本全局可⽤，⼜不会阻塞⻚⾯渲染。Diff 算法是⼀种⾼效更新 DOM 的策略，它通过⽐较新旧虚拟 DOM 树的差异，最⼩化了更新操作，提⾼了⻚⾯的渲染效率。前端项⽬的 package.json ⽂件中， dependencies 和 devDependencies 对象都⽤于指定项⽬所依赖的软件包，但它们在项⽬的开发和⽣产环境中的使⽤有所不同。Vue 中的数据响应式和虚拟 DOM 的 diff 算法是两个不同的概念，它们分别解决了不同的问题，相互协作以提⾼⻚⾯渲染的效率和性能。
2026-01-26 18:01:23
1090
原创 flex 布局凭什么成为前端排版的天花板？它让我告别了 float 的所有噩梦
还在为调个页面布局熬大夜？用float排个版，元素到处乱跑；用position定个位，稍微改点东西就全乱套。不想熬夜了😭！别慌，今天咱们就来聊聊前端界的“救星”Flex 弹性布局。它就像一个贴心的收纳师，不用绕弯子，不用死抠像素，几行代码就能把元素摆得整整齐齐，从此告别“叠罗汉”式的布局噩梦。Flex 布局就像一把万能钥匙，从简单的居中对齐到复杂的响应式布局，它都能轻松搞定。只要掌握了这些核心属性，再加上flex-groworder这些“调味剂”，你就能从布局 “小白” 秒变 “大神”。
2026-01-26 17:50:14
500
原创 第一次被一个空窗期半年的前端女生惊艳到了
💡答：核心围绕加载与运行时。1）加载优化：使用Vue3异步组件与路由懒加载，配合Vite精细化分包（拆分node_modules、大库独立），对稳定库采用CDN外链并启用SRI校验。2）运行时优化：实现图片与组件懒加载（Intersection Observer）、长列表虚拟滚动、高频组件KeepAlive缓存。成果：首屏加载从3.5s降至1.1s，LCP提升65%，并建立性能监控进行持续追踪。
2026-01-26 17:26:19
1108
原创 性能暴涨 1200 倍！我用 TypeScript 重构了这个经典项目
'm,f': ['姥爷'],'m,m': ['姥姥'],'m,xb,s&o': ['表哥'],'m,xb,s&l': ['表弟'],});relationship({ text: '妈妈的妈妈', mode: 'northern' });// => ['姥姥']性能提升- LRU 缓存让重复查询性能提升 1200 倍兼容性解决- 使用 Map 彻底解决 React Native 属性溢出问题类型安全- 完整的 TypeScript 类型定义代码质量- 模块化架构，更易维护和扩展。
2026-01-26 17:01:05
896
原创 面试了十几家前端开发公司，问的都是这些
真的，跑完这轮面试我算是彻底明白了，不管公司大小，面试官抛出来的问题，核心就是围着那几个地方打转。你准备的时候把这几块啃透了，心里就能有七成底。第一块铁定是，特别是异步和闭包。几乎每个面试官都会变着法子问：Promise 手写、Event Loop 出个题让你说输出顺序、闭包结合着作用域链让你分析。这块要是答得磕巴，印象分直接就掉一半。然后是，Vue 或 React 必考。Vue 就问响应式怎么实现的、Diff 算法大致逻辑；
2026-01-23 19:14:02
684
原创 如何优化批量图片上传？队列机制+分片处理+断点续传三连击！(附源码)
前端初始化结构完成后，继续再编写两个辅助函数1️⃣: 去重判断，生成唯一的文件标识符，用于断点续传和分块管理。/*** 生成文件的唯一标识（基于原始文件信息）* 规则：文件名_文件大小_最后修改时间* 即使压缩后，也使用原始文件信息生成ID，确保不同文件ID不同*/// 如果文件有原始信息（压缩后的文件），使用原始信息2️⃣: 更新文件的上传进度和状态，用于显示进度条。
2026-01-23 18:56:34
632
原创 多标签页强提醒不重复打扰：从“弹框轰炸”到“共享待处理队列”的实战
这次问题本质上是“同一份紧急消息，在多标签页环境下如何做到不重复打扰又不遗漏问题 1（重复弹框）：用localStorage 全局锁保证同一时刻只允许一个标签页弹框；锁归属用Pinia记录，避免误判问题 2（接力丢历史）：把“待处理紧急消息”从弹框组件里抽出来，改为Pinia 队列；并通过先轮询后 WS的时序，确保“历史未处理”一定先入队，再叠加 WS 的实时增量最终效果是：紧急消息仍然强制弹框、不可手动关闭、刷新后仍可通过轮询重建继续弹，同时多标签页不会被同一批消息反复轰炸。
2026-01-23 18:35:30
634
原创 半吊子Web前端程序员，一定要学会自救！
针对 Vue 响应式原理、React Fiber 与 Diff 算法、前端路由、Webpack 打包机制、HTTP/HTTPS、浏览器缓存、跨域方案 等高频考点，构建“问题背景-核心原理-应用实践”的叙述逻辑。不止于复现，应主动集成 前端监控、性能优化、SSR、PWA、状态管理复杂场景、Webpack/Vite 深度配置 等进阶能力。算法专题突破，聚焦 数组、字符串、链表、二叉树、DFS/BFS 等高频题型。Q21、谈谈 Vue 事件机制，并手写$on、$off、$emit、$once。
2026-01-21 18:31:06
792
原创 拒绝等待！如何让 AI 一边修 Bug，一边重构代码，一边帮你review？
目录），里面有很多小隔间（worktree），每个隔间都在干不同的活，但共享同一套基础设施（Git 历史、配置等）。你可以在主工作区继续做自己的事，偶尔切过去看看进度，或者用 Plan Mode 让 Claude 先说清楚打算怎么做。你可以开多个终端，每个终端进入不同的 worktree，启动不同的 Claude Code 实例。整个过程就是这样，每个 worktree 都是独立的工作空间，可以同时在不同分支上工作。每个目录都是完整的工作区，可以独立运行、独立提交、独立启动 Claude Code。
2026-01-21 18:23:01
864
原创 Polyfill方式解决前端兼容性问题：core-js包结构与各种配置策略
core-js是一个知名的前端工具库，里面包含了ECMAScript标准中提供的新对象/新方法等，而且是使用旧版本支持的语法来实现这些新的API。这样即使浏览器没有实现标准中的新API，也能通过注入core-js代码来提供对应的功能。像这种通过注入代码实现浏览器没有提供的API特性，叫做Polyfill。这个单词的本意是填充材料，在JavaScript领域中，这些注入的代码就类似“填充材料”一样，帮助我们提高代码的兼容性。另外core-js还提供了一些还在提议中的API的实现。
2026-01-21 18:11:29
801
原创 大家有空就去看这份前端宝典，真的能提高level
如果你感觉刷了无数八股文、背了各种框架API，面试时依然被问到哑口无言——问题可能不在于你不够努力，而在于你努力的方向，恰好错过了当前面试真正的筛选逻辑。你需要一份结构化、有深度的知识体系。八股文涵盖：JavaScript、CSS、HTML、React、Vue、算法、计算机网络、Node.js、TypeScript、性能优化、前端安全、小程序、ES6、编程题、设计模式、工程化。
2026-01-20 19:11:59
1038
原创 React 官方纪录片观后：核心原理解析与来龙去脉
React 的成功绝非偶然。它是一系列深刻洞察、大胆创新、社区共建以及关键时刻（如 Netflix 的选择）共同作用的结果。它从一个解决 Facebook 内部复杂 UI 问题的“疯狂想法”，演变成了一个庞大而繁荣的生态系统。理解 React 演进背后的“为什么”，不仅仅是了解一段技术历史。它能帮助我们建立起对前端架构的宏观认知，让我们在面对未来层出不穷的新技术时，能够拨开表象，抓住本质，从而做出更明智、更长远的技术选型和架构设计。
2026-01-20 19:08:17
817
原创 前端指纹技术是如何实现的？（Canvas、Audio、硬件API 核心原理解密）
在讲实现之前，先纠正一个误区：设备指纹（Device Fingerprint）不是为了知道你是张三，而是为了知道这台设备是编号 9527。利用浏览器暴露的硬件底层差异（显卡、声卡、电池、屏幕），组合出极高熵值的唯一 ID。就算你清空了 Cookie，换了 IP，只要你的硬件没变，这套代码算出来的 Hash 值就永远不变。下面我们直接上代码，拆解最核心的三种实现方式。
2026-01-20 18:55:32
701
原创 5天面试了8个前端，发现都有相同的问题
39.is如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空 map、空 set,都属于为空的数据【热度:640】问题表现：对事件循环、闭包、原型链、内存管理等理解不够，手写代码时容易暴露问题（比如实现 Promise、深拷贝、防抖/节流）。28.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)【热度:100】43.如何清理源码里面没有被应用的代码，主要是 JS、TS.CSS 代码【热度:329】
2026-01-19 18:52:28
1230
原创 断网、弱网、关页都不怕：前端日志上报怎么做到不丢包
监控上报这事儿看着不难，其实门道不少。要在数据不丢和不打扰用户上报方式sendBeacon 为主，Image 为辅，XHR/Fetch 兜底。利用sendBeacon的特性解决页面卸载时的丢包问题，利用Image解决跨域预检的成本问题。上报时机闲时上报 + 批量打包。利用不占用主线程，通过队列机制减少 HTTP 请求频次。断网处理本地缓存 + 网络侦测。断网时将数据持久化到 LocalStorage，待网络恢复后分批补传，确保“一条都不丢”。最后，给开发者的 3 个避坑小贴士：不要迷信。
2026-01-19 18:43:25
621
原创 UniApp 的 rpx是什么，跟rem比呢？
rpx 是 UniApp 多端适配的核心单位：基于 750px 屏幕宽度等分，无需手动换算，直接复用设计稿数值。：rpx 适配效率最高（自动），px 适配性最差（固定），rem 需手动配置（适合 H5）。使用原则：UniApp 开发优先用 rpx，仅在 1px 边框、H5 兼容等特殊场景换用 px/rem。掌握 rpx 的核心逻辑，你就能摆脱 “适配焦虑”，真正实现 UniApp“一套代码，多端运行” 的核心优势。与其在不同设备的适配中反复调试，不如从一开始就选对单位，让开发效率翻倍。
2026-01-19 18:38:49
775
原创 让 Vant 弹出层适配 Uniapp Webview 返回键
提供了基于栈的返回键处理机制，可以与 Vant 组件无缝集成，让弹出层正确响应 UniApp 的返回键事件。核心思路：将每个需要响应返回键的弹出层注册到全局栈中，按后进先出的顺序处理返回事件。UniApp Webview 中使用。这导致用户体验与原生应用存在明显差距。
2026-01-16 18:14:30
302
原创 前端，让我感受到信息闭塞的恐怖……
从“知道是什么”到“知道怎么用”，再到“知道为什么这么用”——每一个层次的跨越，都筛掉一大批人。真正的壁垒，不是框架的API，而是解决未知问题的思考框架。当面试官不再问“Vue响应式原理是什么”或者“React生命周期有哪些”，而是抛出一个个真实的业务场景时，你会发现——那些靠背诵维生的知识点，在真正的工程难题面前，显得如此苍白无力。没有明确的错误信息，只有零星用户的报障。你需要的不仅是技术，还有策略。99.为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的?
2026-01-15 17:07:01
906
原创 ECharts 水球图不够炫？试试 RayChart 的创意可视化玩法
如果你需要一个快速加载、兼容性强的进度展示，ECharts依然是首选。如果你在做酷炫的数据大屏，想要那种“看起来很贵”的效果，RayChart的 3D 水球绝对值得一试。RayChart项目正在探索更多这样的 3D 图表组件，希望能把 WebGL 的门槛降下来，让大家都能轻松用上“电影级”的图表。
2026-01-15 16:37:55
728
原创 26年前端面试，发现一个很明显的通病...
介绍项目的时候，只说“我用了Vue3+TypeScript”可不行，面试官想听的是你为什么选这些技术？很多人对前端CI/CD流程、Jest自动化测试、怎么提升测试覆盖率，还有Webpack的Loader和插件开发，都没什么经验。不少人用React、Vue写组件溜得很，但要问虚拟DOM的diff算法咋回事、Hooks是怎么收集依赖的、最好还能准备一个复杂问题的完整解决过程，比如无侵入埋点的前端监控系统是怎么实现的。原型链这些核心知识点，理解得模模糊糊的。准备项目介绍的时候，多突出性能优化的成果，比如。
2026-01-15 16:08:40
1243
原创 qiankun两种加载模式registerMicroApps和loadMicroApp对比分析
egisterMicroApps + start 模式：声明式，由 qiankun 自动管理子应用生命周期loadMicroApp 模式：命令式，由开发者手动控制子应用加载/卸载本文将深入分析两种模式的技术区别、适用场景、可能遇到的问题及解决方案。维度复杂度低中灵活性低高容器要求必须始终存在可动态创建多实例❌ 默认路由互斥✅ 天然支持仪表盘场景❌ 不适合✅ 最佳选择适合场景简单路由切换复杂动态加载简单场景用复杂场景用需要多子应用并行加载时，必须使用。
2026-01-15 15:42:27
896
原创 第一次见人把前端简历表达的如此高级！
今天挖到一个宝藏前端开发者，第一次看到有人能把技术简历写得这么高级又有质感✨。”，而是把前端技能像艺术品一样呈现出来。把庞杂的前端知识体系梳理得井井有条。不仅会写代码，更懂得如何组织和表达。绝对能让HR和面试官眼前一亮🌟。完全就是一个前端成长路线图！这才是高级工程师的思维体现啊。📌 不是那种干巴巴的“熟悉。每个技术板块都精心分类整理。学习资料和项目经验层次分明。视觉效果和内容深度完美平衡。从基础到进阶，从理论到实战。下次跳槽就按这个思路改简历。用清晰的导航引领阅读路径。
2026-01-14 11:51:46
306
原创 前端面试了10来个人，聊聊他们被挂的原因..
现在大厂不考死记硬背，全是场景题（设计灰度发布系统）、手写题（带缓存的HOC组件）、架构题（SSR和CSR怎么选）。React/Vue写组件还行，虚拟DOM diff、Hooks依赖收集这些原理一问三不知，Vue3的Proxy比defineProperty好在哪也说不清楚。闭包、事件循环这些核心概念说不明白，手写Promise.all、深拷贝还卡壳。只说用了Vue3+TS，不说TS咋减少线上bug，首屏加载从4s优化到1s的具体操作也讲不明白。这周面了9个人全挂，不是没经验，是细节准备太拉胯了！
2026-01-13 10:46:10
711
原创 JavaScript Date 语法要过时了！以后用这个替代！
作为一名前端开发工程师，你一定被 JavaScript 的日期处理折磨过。这不是你的问题，是 JavaScript 自己的问题——它的 Date 功能真的很糟糕。
2026-01-13 10:26:56
357
原创 真话难听，但这就是前端开发的真实现状！
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
1127
原创 从硬编码到 Schema 推断：前端表单开发的工程化转型
数据不再是冷冰冰的键值对，而是变成了一个包含“元数据”的对象。我应该用什么组件渲染（我是否应该被显示（visible我依赖哪些字段（我的下拉选项去哪里拉取（request很多时候，我们觉得 Vue 或 React 难维护，是因为我们将过重的业务决策交给了视图层。通过引入中间件和 Schema 推断，我们实际上在 UI 框架之上建立了一个“业务逻辑防火墙”。Vue 只负责监听交互和渲染结果，而变幻莫测的业务规则被关在了纯 TypeScript 编写的沙盒里。
2025-12-24 16:28:33
502
原创 20万字 前端互联网大厂面试题，新鲜出炉！
大家好，我已经累计发布了 100+ 多篇涵盖腾讯、字节、阿里、 美团、京东、快手、百度、滴滴、米哈游等互联网公司，也涵盖部分中小厂、银行、国企的面经。所有的面经都来自于同学们真实面试题库，并且我针对每一篇面经都做了解析。我想着，既然已经输出这么多面试题了，那么干脆就整理一个面试题集合了。说干就干，当时晚上临时有了这个想法，花了 5 个小时翻阅了以前自己发布过的 100 多篇面经，然后针对每一篇的问题进行分类收集。不整理还不知道，一整理直接下一跳了，竟然。
2025-12-24 15:52:36
534
原创 [特殊字符]别再迷茫！一份让你彻底掌控 TypeScript 类型系统的终极指南
TypeScript现在的普及度已经很高了，虽然它是一种静态类型定义，但它的庞大已足够我们要向对待一门语言一样对待它了，去深入学习，以便更好的利用它的能力。
2025-12-24 15:24:07
662
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人