- 博客(343)
- 收藏
- 关注
RSS订阅原创 字节前端二面，给我心脏面停了[特殊字符]
二面大概1h20min，全程节奏极快，问题围绕前端性能、复杂交互、工程化与跨端架构等深挖，需要同时懂底层原理、体验优化和团队协作，强度极大。幸好提前做过场景模拟，不然绝对卡壳。
2025-12-24 16:51:54
897
原创 从 v5 到 v6：这次 Ant Design 升级真的香
Ant Design v6 是一次**“返璞归真”**的升级。它把控制权还给开发者（语义化 API），用现代浏览器特性解决性能问题（零运行时 CSS 变量），并补齐了业务高频组件。升级核心收益更少的 hack 代码，更健壮的样式显著的性能提升（主题切换、渲染速度）官方接管高频业务组件，减少第三方依赖平滑迁移路径，真正降低了“升级火葬场”的风险更少的加班、更快的页面、更早下班。
2025-12-24 16:25:10
487
原创 我发现前端面试总卡在一面的人都有一个通病
很多人把一面失利归因为“基础弱”“项目浅”，但真相是，多数人不是“不会”，而是“不会说”——肚子里有货，却没法清晰有条理地传递给面试官，最终错失机会。
2025-12-24 15:46:14
852
原创 [特殊字符] 手写 Vue 自定义指令：实现内容区拖拽调整大小（超实用）
这个自定义指令核心是「创建拖拽手柄 + 监听鼠标事件 + 计算尺寸变化」，逻辑不复杂，可以根据自己的业务场景定制。亲测报表和弹窗都很适用～
2025-12-24 15:13:05
207
原创 第一次被一个空窗期前端女生惊艳到了
我问：项目中做过哪些性能优化？效果如何？我问：怎么理解Vue3的响应式原理？和Vue2有什么区别？我问：跨域问题怎么解决？实际项目中你用的哪种？我问：你觉得前端开发中最重要的能力是什么？我问：如果和后端同事对接口产生分歧，你会怎么处理？
2025-12-22 12:16:07
781
原创 从原理到落地：大屏适配适配 + 高并发弹幕的企业级技术手册
大屏开发与弹幕系统的技术实践，本质是对场景需求的深度拆解与原生技术的极致运用。没有放之四海而皆准的 "银弹"，只有贴合场景的最优解。未来技术趋势将朝着"原生 CSS 能力强化 + JS 轻量化"方向发展。随着 CSS 新特性的普及，更多适配需求可通过原生 CSS 实现；JS 将聚焦于逻辑控制和动态交互，减少不必要的计算消耗。对开发者而言，这场技术攻坚的核心启示是：从"工具依赖"转向"原理掌握"。
2025-12-22 11:50:07
843
原创 Vue 3 动态菜单渲染优化实战：从白屏到“零延迟”体验
对于读多写少（Read-heavy, Write-rarely）的数据，如菜单、字典、配置项，“缓存优先 + 增量更新”是提升用户体验的黄金法则。它将网络延迟从用户感知的关键路径（Critical Path）中移除，让 Web 应用拥有了原生应用般的流畅度。
2025-12-18 11:59:47
849
原创 前端开发面试，就是撑死胆大的饿死胆小的
• 吃透核心语法原理：拆解async/await的底层实现（Generator + Promise自动执行器），梳理this的5种绑定规则（默认/隐式/显式/new/箭头函数）。/Vitest）、webpack/vite的高级配置一知半解，没接触过微前端、模块联邦等工程化方案。React Fiber的时间切片机制、Vue3的编译优化（PatchFlags）和组件渲染流程。/微任务的执行优先级、内存回收的标记清除/整理机制，以及新生代/老生代的内存划分。（分片上传+断点续传）。
2025-12-18 11:34:30
1036
原创 Vite：现代前端构建工具的革命与实战指南
极速启动：冷启动时间比 Webpack 快 10-100 倍即时更新：HMR 更新几乎无感知延迟开发友好：错误提示清晰，配置简单现代化：原生支持 ES 模块、TypeScript 等生态完善：与 Vue、React、Svelte等框架深度集成插件丰富：活跃的插件生态系统浏览器兼容性开发依赖现代浏览器（支持原生 ES 模块）生产构建会自动转换为兼容格式生态成熟度相比 Webpack，部分插件和工具链仍在完善中大型企业级应用迁移需要考虑现有工具链兼容性构建优化。
2025-12-18 10:51:06
956
原创 入职宇树Web前端开发，30K双休有点爽
1.JavaScript 闭包的形成原理、应用场景与内存泄漏防范2.Event Loop 机制（宏任务/微任务）与 async/await 的底层实现3.ES6+常用特性（、Proxy 等）的实现原理与应用场景4.JavaScript 内存管理机制（标记清除、引用计数）与垃圾回收策略5.this 指向的四种绑定规则及手写 call/apply/bind 实现6.原型与原型链的本质，Class 语法糖的底层原理7.跨域问题的多种解决方案（CORS、
2025-12-16 12:22:52
1142
原创 拿捏 React 组件通讯：从父子到跨组件的「传功秘籍」
你有没有过这种崩溃时刻？写React 组件时，想让父子组件互通数据，结果代码越写越乱；兄弟组件想传个值，绕了八层父组件还没搞定…… 为啥别人的 React 组件传值丝滑？别慌！秘密都在这！今天咱们用「武侠传功」的思路，React 组件通讯的坑，一篇帮你填平！通讯场景方法核心思路父子组件props 传值父传子，子只读子父组件props 传函数父给函数，子调用传数据兄弟组件父组件中转子→父→另一个子跨组件Context（上下文）父广播，后代直接收其实。
2025-12-16 12:06:55
998
原创 月初面了十多个前端开发，感觉天都塌了...
Webpack配置项都能对答如流。真正让我感到“天塌了”的瞬间，是在连续几个候选人面对同一个看似简单的场景题时，表现出的集体性失语。98.[Webpack]如何打包运行时 chunk，且在项目工程中，如何去加载这个运行时 chunk?99.为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的?100.在你的项目中，使用过哪些 webpack plugin,说一下他 们的作用。101.在你的项目中，使用过哪些webpack loader, 说一下他 们的作用。
2025-12-13 17:34:40
886
原创 Vue3项目集成monaco-editor实现浏览器IDE代码编辑功能
相信大家在做一些低代码平台的项目时，都会涉及到一些在线IDE代码编辑的功能吧，比如通过在线代码编辑后实现在线运行代码效果.本篇给大家分享一下作者个人在开发低代码平台时如何实现如下图所示的vscode在线代码IDE编辑功能的吧如果你觉得编辑器默认的主题样式不太好看也可以自定义主题样式，这里简单的配置一下依旧在monaco.ts中添加代码// 定义符合项目系统的自定义主题base: 'vs-dark', // 基于官方暗色主题inherit: true, // 继承默认语法高亮规则。
2025-12-13 17:18:38
387
原创 2026年速通前端面试题1000道，适用于99%的中大厂。少走弯路
整理了2025年最全的Web前端高频面试题，JavaScript、CSS、ES6、vue2、Vue3、React、Node.JS、小程序、HTTP、TypeScript、Webpack、Git、Linux、算法与数据结构、设计模式等等。因为文件太多，全部展示会影响篇幅，暂时就展示部分截图。
2025-12-13 16:37:18
1467
原创 一次 React 项目 lock 文件冲突修复：从 Hook 报错到 Vite 配置优化
这次问题的核心是“lock 文件冲突处理不当”，但背后暴露了对依赖管理和构建工具配置的认知缺口。lock 文件冲突切勿手动修改：遇到 lock 文件冲突时，优先执行回滚，再通过重新安装，避免依赖树混乱；依赖声明需规范：第三方库应将 React 等核心依赖设为 peerDependency，而非直接依赖，避免嵌套安装；Vite 配置的“防护作用”：对于 React、Vue 等核心依赖，建议在 Vite 配置中提前设置dedupe和，从构建层面规避多实例和预构建问题；报错排查要结合官方文档。
2025-12-13 15:51:04
1001
原创 建议12月准备面试前端，还没计划的…
建议跳槽的小伙伴都可以去记背理解一下场景题，现在公司都在问这些问题，趁着现在还有时间可以准备，抓紧时间，所有场景题目都有对应答案！
2025-12-11 12:25:13
771
原创 React 19 vs Vue 3：深度对比与选型指南
React 19 和 Vue 3 都是现代前端开发的顶级框架，它们代表了不同的设计哲学但又殊途同归。React 强调灵活性和生态系统，Vue 则注重开发体验和渐进式设计。哲学: "学习一次，到处编写"特点: 灵活、强大、生态丰富适合: 大型项目、跨平台、高度定制关键词: JavaScript、灵活性、生态哲学: "渐进式框架"特点: 易学、高效、开发体验好适合: 快速开发、中小项目、渐进式集成关键词: 模板、优雅、开箱即用没有绝对的"更好"，只有"更适合"
2025-12-11 12:13:34
811
原创 前端进度为0的人，3天背完 offer稳了！
以上：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material1
2025-12-09 11:42:20
640
原创 Event Loop 教你高效 “划水”：JS 单线程的“摸鱼”指南
前言各位前端打工人，有没有过这种经历：明明写了，结果同步代码还没跑完，摸鱼计划就被打断？其实JS 单线程就像一个只能专注干一件事的打工人，而 Event Loop就是它的 “高效摸鱼手册”—— 既能按时完成核心工作，又能把耗时任务 “挂起摸鱼”，今天咱们就一起好好聊聊这份手册！一、先搞懂：JS 打工人为啥不能 “硬卷”？（进程线程的底层逻辑）要想，得先知道——JS 能修改 DOM（比如把按钮改成红色），要是它俩同时干活，页面就会出现（比如按钮画到一半被改成红色），所以必须 “你歇我干”。
2025-12-09 11:29:32
824
原创 当我不停的参加Web前端面试，就会发现一个规律！
✅ 破解：深度复盘项目，比如用Performance分析运行时性能，通过Webpack Bundle Analyzer优化产物；设计跨框架组件库，用 IndexedDB提升离线体验。越学前端越发现，前端开发的核心差距从不是会多少框架API，而是浏览器底层原理、性能优化和工程化架构思维！❌ 问题：简历写“性能优化”“组件库搭建”，但被问首屏秒开方案、WebWorker 实战、低代码渲染引擎时，给不出可落地的技术方案。、渲染流程、内存泄漏时逻辑混乱，页面常出卡顿或白屏问题。
2025-12-06 15:48:11
1088
原创 别被 JS 骗了！终极指南：JS 类型转换真相大揭秘
在 JavaScript 的世界里，类型转换就像个“隐形工匠”，时而帮我们简化代码，时而悄悄挖下陷阱。[] ==![];如果你回答false,那么可以下一个问题了，因为答案是true。不是这玩意会是true？你别说还真是。这背后，就是 JS 里让人又爱又恨的隐式类型转换—— 它像个魔术师，悄咪咪把变量 “变” 成另一种类型，稍不注意就会 “翻车”~ 带着这个问题，我们开始今天的学习。JS 里变量分两大阵营原始值。
2025-12-06 14:39:16
792
原创 今天面试一个半吊子Web前端，真无语[特殊字符]
写“精通Vue3”却说不清Composition API设计理念项目里写“性能提升300%”但说不出监控指标我赶紧整理出面试常问的场景题，快背！再不开始就没有优势了！因为篇幅原因，下面就只能截图部分内容展示了，有想要的：当QPS达到峰值时,该如何处理?当QPS达到峰值时，可以从以下几个方面来进行优化:1.数据库优化：数据库的优化包括优化SQL语句、使用索引、避免全表扫描、分表分库等措施，以提高数据库的读写性能。2.缓存优化：缓存可以降低对数据库的访问频率，提高响应速度。
2025-12-04 12:21:32
1056
原创 这 5 个冷门的 HTML 标签，能让你少写 100 行 JS
大家好!😁。Code Review的时候，我最怕看到什么？不是复杂的算法，也不是什么正则。而是。前几天，我看到一个新同学为了写一个折叠面板（Accordion），引入了一个重型的第三方库，还写了一堆useState、onClick和动画逻辑我默默地把他的代码全删了，换成了 3 行<details>。他看我的眼神，仿佛在看一个外星人🤣。在 2025 年的今天，浏览器原生 HTML 的能力早已今非昔比。很多我们习惯用 JS 去模拟的交互，现在不仅有原生支持，而且。
2025-12-04 12:02:03
701
原创 Vue 组件设计纠结症？一招教你告别“数据到底放哪”的烦恼
咱们先说说单向下行数据流，这是 Vue 官方非常推荐的一种数据传递方式，你可以把它理解成 Vue 组件间的“家规”。这条“家规”很简单：数据从上往下流，像瀑布一样，不能逆流。数据拥有者（通常是父组件）负责管理和维护状态。数据使用者（子组件）通过props接收来自上面的数据。子组件不能直接修改传下来的props。如果子组件想改变数据，必须通过“事件”（$emit）向上汇报，请求父组件这个“家长”来修改。为什么要立这么个规矩呢？就是为了让数据流向变得清晰、可预测。
2025-12-04 11:49:26
501
原创 招了一个前端岗男生才三天就被劝退了
CDN 引入 + `<link rel="preload">` 预加载关键资源，将首屏时间从 4.1s 降至 1.8s，跳出率下降 35%。先查是否违反响应式限制：Vue 2 中动态添加属性未用 `$set`，数组索引赋值无效，对象整体替换丢失监听。Vue DevTools 查数据流，必要时 `watch` 深度监听或 `nextTick` 控制时机。10.React.memo()和 useMemo()的用法是什么，有哪些区别?4.谈谈 Vue 事件机制，并手写$on、$off、$emit、$once。
2025-12-04 11:27:58
937
原创 一种新HTML页面转换成 PDF 技术方案
核心要点回顾SnapDOM提供高保真的 DOM 截图能力，通过scale: 2实现 2 倍清晰度jsPDF是强大的 PDF 生成库，支持 A4 纸张、压缩等特性分页算法是整个方案的核心难点，需要精确计算像素与毫米的转换SnapDOM相比 html2canvas 在样式还原度上有明显优势进一步优化方向优化点说明Web Worker将分页计算放到 Worker 中，避免阻塞主线程分段截图超长内容分段截图，避免内存溢出加载提示添加进度条，提升用户体验PDF 压缩。
2025-12-04 11:20:14
790
原创 不就是前端面试！终于只剩几十页没背了！
①JavaScript语言基础：深入掌握原型与闭包、异步编程、ES6+新特性及模块化开发。④跨端技术：掌握React Native/Flutter/小程序等跨端开发与调优原理。④数据结构与算法：掌握常见数据结构（树、链表）及算法（排序、动态规划）②状态管理：深入理解Redux/MobX/Vuex设计思想与性能优化。②浏览器原理：理解渲染机制、事件循环、内存管理与性能优化。②性能优化：掌握渲染优化、打包体积控制及首屏加载提速策略。/Vite构建工具、代码规范与CI/CD流程。③前端网络知识：熟练。
2025-11-27 11:41:33
563
原创 告别 Vue 多分辨率适配烦恼：vfit 让元素定位 “丝滑” 跨设备
在前端开发中，“多分辨率适配”一直是个绕不开的坎。尤其是Vue项目，面对从手机到大屏的各种设备，既要保证元素比例不变，又要让位置精准，往往需要手写大量缩放计算或媒体查询，代码冗余且难维护。今天推荐一个专为Vue 3设计的轻量方案——，通过“全局缩放管理+组件化定位”的思路，让适配工作变得简单可控。
2025-11-27 11:33:16
369
原创 5天秒挂8个，Web前端现在面试都不准备的吗
你的梦想是进大厂吗？你明白的，这需要一点小小的代价。你是万中无一的奇才？如果不是，那么失败几次是正常的，大家都是普通人，也许只是不 match。注：文中的前端面试题汇总PDF已经打包完毕，希望对大家有帮助！】附PDF！
2025-11-27 11:23:06
753
原创 CSS 相对颜色：告别 180 个颜色变量的设计系统噩梦
root {/* 只用定义 4 个基础品牌色 */主题切换不再是灾难：改一个变量，全站自洽颜色 Token 真正集中管理：从分散定义到统一源头设计规则化：深浅、状态、透明度都成为可复用的公式开发体验提升：从机械调色到智能推导下一次重构配色系统时，不妨尝试将基准色、状态色、暗色模式、半透明层全部交给相对颜色计算。那种"改一处，全局联动"的流畅体验，确实让人上头从 180 个颜色变量到 4 个基色变量，这不只是数量的减少，更是设计系统维护理念的质的飞跃。
2025-11-27 11:09:02
329
原创 vue3.x 使用vue3-tree-org实现组织架构图 + 自定义模版内容 - 附完整示例
3. plugins文件下的treeOrg.ts。
2025-11-19 11:32:36
300
1
原创 这份前端面试八股文让319人成功进入大厂，堪称2025最强！
很多同学会问前端面试八股文有必要背吗？你可以讨厌这种模式，但你一定要去背，因为不背你就进不了大厂。国内的互联网面试，恐怕是现存的、最接近科举考试的制度。而且，我国的八股文确实是独树一帜。以美国为例，北美工程师面试比较重视（Coding），近几年也会加入Design轮（系统设计和面向对象设计OOD）和BQ轮（Behavioral question，行为面试问题）。那么为什么国内面试不采取这样的考察方式呢？
2025-11-19 11:19:50
905
原创 React 如何处理高频的实时数据？
最近，我遇到了一个很有意思的 React 问题。我需要开发一个实时的日志查看器，功能上需要实时展示服务运行的日志。因为这个项目是内部的，我这里大概抽象一下：后端使用 SSE（Server-Sent Events） 技术，源源不断地把日志推送给前端。当日志一条一条、不紧不慢地过来时，一切正常。但是，当服务器在短时间内（比如 1 秒内）推送上百条日志时（比如查看历史日志的场景），网页卡顿了一下。浏览器控制台显示了一个 React 开发者很熟悉的错误：比如这样：但我的代码并没有这样的逻辑，该使用 use
2025-11-19 11:02:46
532
原创 还在手动加载全部组件？这招让Vue应用性能飙升200%！
Vue的动态组件和异步组件不是什么新功能，但很多开发者并没有充分挖掘它们的潜力。合理使用这些特性，能让你的应用性能获得质的飞跃！= 高性能动态组件系统。
2025-11-17 12:06:54
435
原创 11月致前端工程师，面了10家，都通过了
以前可能更看重你的项目是否足够炫酷，现在，面试官几乎都在围绕几个核心维度进行压力测试。我通过的这10家公司，从B轮到D轮的独角兽到一线大厂，考察重点高度几乎一致。
2025-11-13 14:15:07
1343
原创 Vue组件通信不再难！这8种方式让你彻底搞懂父子兄弟传值
组件通信是Vue开发中的核心技能，掌握这些通信方式就像掌握了组件间的"对话语言"。从简单的props/$emit到复杂的Pinia状态管理，每种方式都有其独特的价值和适用场景。关键是要理解每种方式的原理和优缺点，在实际开发中根据组件关系、数据流复杂度、项目规模等因素做出合适的选择。你现在对Vue组件通信是不是有了更清晰的认识？在实际项目中，你最喜欢用哪种通信方式？有没有遇到过特别的通信难题？欢迎在评论区分享你的经验和心得！
2025-11-13 12:19:08
818
原创 [特殊字符]前端开发 2025 生存指南：调试不靠 console.log 靠什么？
把和加入代码片段，设置VS Code 快捷键，调试效率立刻 +400%。DevTools 还有一个隐藏指令：在 Console 输入可直接查看 DOM 节点绑定的事件。下次调试别再写。
2025-11-13 11:53:32
367
原创 浅入理解跨端渲染：从零实现 React DSL 跨端渲染机制
虚拟 DOM提供了统一的 UI 描述方式Bridge实现了 JS 与 Native 的通信桥梁Diff 算法最小化了实际的渲染操作渲染指令将 UI 变更转换为平台操作当然，用于生产环境的跨端框架在实现上会有更多细节和优化，使用的具体技术也可能不同，但核心原理是一致的。跨端技术的本质是在性能和开发效率之间找到平衡。写出更高性能的跨端应用更好地调试和优化问题为技术选型提供依据。
2025-11-11 11:49:36
971
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人