- 博客(298)
- 收藏
- 关注
RSS订阅原创 给大家普及一下，字节前端需要达到的强度！
空」包含了:空数组、空对象、空字符串、0、undefined、null、空 map、空 set,都属于为空的数据【热度:640】50.[React]如何避免使用 context 的时候，引起整个挂载节点树的重新渲染【热度: 420】28.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)【热度:100】29.富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作)?43.如何清理源码里面没有被应用的代码，主要是 JS、TS.CSS 代码【热度:329】
2025-12-24 16:54:30
606
原创 别只做工具人了！手把手带你写一个前端性能检测SDK
恭喜你！到这里，你已经亲手打造了一套麻雀虽小，五脏俱全的性能监控 SDK。Loading (加载)：FP/FCP/LCP 负责盯着**“快不快”**。白屏时间短，用户才愿意留下来。Interaction (交互)：FID/INP 负责盯着**“顺不顺”**。点击有反馈，用户才觉得好用。Visual Stability (稳定性)：CLS 负责盯着**“稳不稳”**。页面不乱跳，用户才不心烦。Network (网络)：Resource Timing 负责盯着**“通不通”**。
2025-12-24 16:27:08
997
原创 面试官问“按钮重复点击怎么防”然后我挂了
2.开发环境下的无构建:Vite 在开发环境下不会对代码进行打包构建，而是直接利用浏览器原生的模块导入功能，通过 HTTP 服务器提供模块的即时响应。3.构建环境下的优化:尽管 Vite 在开发环境下不进行打包构建，但在生产环境下，它会通过预构建的方式生成高性能的静态资源，以提高页面加载速度。1.模块级别的热更新:Vite 使用浏览器原生的 ES 模块系统，可以实现模块级别的热更新，即只更新修改的模块，而不需要刷新整个页面。使用合适的 HTML标签和语义化的内容结构，使搜索引擎能够更好地理解页面的内容。
2025-12-24 15:48:18
919
原创 React 的新时代已经到来：你需要知道的一切
构建异步 UI 向来都是一件非常困难的事情。导航操作将内容隐藏在加载指示器之后，搜索框在响应无序到达时会产生竞态条件，表单提交则需要手动管理每一个加载状态标志和错误信息。每个异步操作都迫使你手动进行协调。这不是一个性能问题，而是一个协调问题。现在，React 的原语声明式地解决了它。对于开发团队而言，这标志着我们构建方式的一次根本性转变。React 不再需要每位开发者在每个组件中重新发明异步处理逻辑，而是提供了标准化的原语来自动处理协调。
2025-12-24 15:16:21
539
原创 元旦假期前，写给Web前端人的话！
3) 复现与修复：结合用户端信息（设备、网络、操作路径）尝试复现。高分回答：“针对不同漏洞建立防御体系：1) 防XSS：对所有动态内容进行转义（如使用DOMPurify库），避免使用innerHTML，设置Content Security Policy。高分回答：“我会依据监控三板斧快速响应：1) 看大盘：通过Sentry/Fundebug查看错误上报趋势，定位报错文件和堆栈；高分回答：“根据复杂度分层管理：1) 组件层：使用React Hooks（useState/useReducer）或。
2025-12-22 12:19:10
949
原创 【拿来就用】Uniapp路由守卫终极方案：1个文件搞定全站权限控制，老板看了都点赞！
在 Vue 项目中，我们使用 Vue-Router 的beforeEachroutes: [})// Vue-Router 导航守卫if (!token) {next()})但 Uniapp 的情况不同：作为一个跨端框架，Uniapp 没有内置类似 Vue-Router 的路由守卫机制。不过别担心，我们可以通过Uniapp 的拦截器 API实现相同的功能！Uniapp 提供了API，允许我们拦截特定的 API 调用。
2025-12-22 11:52:02
276
原创 阿里P8架构师前端面试文档！确实牛！
这不是吹，而是一份被多位资深面试官认证过的前端硬核知识点体系。这份文档已在 GitHub 上获得 3.2k Stars，多位 BAT 资深面试官参与了内容校正。
2025-12-18 12:10:07
412
原创 踩过坑才懂：前端生成唯一 ID，别用 Date.now ()了！一行代码搞定
做过电商 PC 端开发的兄弟估计都懂：经常得弄个「绝不会跟别的重样的编号（ID）」—— 比如给弹窗、临时加的商品条目、页面里动态蹦出来的元素做标识，免得代码把东西搞混。这事看着好像随手就能写，但真要做到百分百不重复，可比想的要坑。今天就唠唠大伙常踩的俩坑，再给你说个浏览器自带的、一行代码搞定的靠谱法子。好多人（不管是刚入门的还是干了俩年的）第一反应都是：把当前时间加个随机数不就行了？比如会写这么一段代码：出来的结果大概是这种，看着好像既有时间的 “独一份”，又有随机数的变化，挺好用？但真放到正经的生产
2025-12-18 12:02:05
224
原创 WEB前端都是先混进去再说，过来人的经验
当面试官问“你还有什么问题吗？”，绝不能说“没有”。这是展示你主动性和思考深度的最后舞台。低级问法：“咱们用啥技术栈？”（招聘要求已写）。高级问法（三选一）聚焦成长：“如果我有幸加入，团队对我这个角色的初级/中级工程师，在业务贡献和技术成长上，有怎样具体的期待？展现深度：“我注意到贵部门的产品在【提及某个具体功能，如数据可视化/交互复杂度】方面做得很好，请问前端团队目前在这一块面临的最大技术挑战或正在进行的架构优化是什么？体现文化契合。
2025-12-18 11:38:23
889
原创 教你快速从Vue 开发者 → React开发者转变！
工作这么多年，一直用的都是vue，对vue框架也最熟悉，但最近想深入学习react，之前也学过，只懂一点皮毛，对很多写法还是不理解，我就在想既然我比较熟悉vue，那能不能设计一份react和vue的转化总结，这样用理解vue的方式来学习react那就事半功倍了。现在AI这么方便，我就把我的需求说给chatGPTchatGPTchatGPT了，他帮我设计了一份 VueVue开发者 →ReactReact转化总结与对照表和一份学习计划。
2025-12-18 10:53:44
926
原创 前端面试第一名，我的场景题答案就是天花板
当我以面试第一名的成绩脱颖而出时，我意识到真正的核心竞争力不在于掌握了多少框架API或算法题解，而在于面对开放性问题时展现的系统思维与架构视野。那些看似寻常的场景题——“如何设计一个前端监控系统”“如何优化首屏加载体验”——恰恰是区分优秀与平庸的关键战场。我的答案之所以被称为“天花板级”，不是因为它使用了最前沿的技术栈，而是因为它构建了一套完整的技术叙事逻辑，从问题定义到解决方案，从技术选型到业务价值，形成了闭环思考体系。真正的“天花板”答案始于对问题的精准拆解与重新定义。
2025-12-16 12:25:04
791
原创 别再让 JavaScript 抢 CSS 的活儿了，css原生虚拟化来了
最后给你一个简单的决策框架：先检查 CSS 能不能直接解决问题。如果能，就用 CSS。如果不能，看看能不能用渐进增强——现代 CSS 优先，JavaScript 作为降级方案。如果这能满足需求，就用这个方案。只有当 CSS 真的搞不定时，才考虑 JavaScript 优先的方案重点不是要避免 JavaScript，而是不要在 CSS 已经给出答案的时候，还习惯性地用 JavaScript。大多数列表没有一千个项目。大多数动画不需要精确的回调。大多数组件用容器查询就能完美工作。
2025-12-16 12:11:07
653
原创 前端开发面试撒谎了...但还是给通过了！
内心OS：照着简历念怕被说没新意，但真不知道咋吹啊...✅ 高分回答："面试官好，我是XX，XX大学计算机专业毕业，应聘前端开发岗。过去XX年我专注Web开发领域，主导过3个千万级PV的C端项目落地，擅长用React/Vue构建高可用SPA应用。最近半年为提升工程化能力，我自研了前端监控系统，将页面渲染耗时优化47%，异常捕获率提升至92%。贵司在XX技术栈（如微前端低代码）的实践让我非常向往，相信我的全链路开发经验能为团队带来价值。
2025-12-13 16:39:40
842
原创 90%前端都踩过的JS内存黑洞：从《你不知道的JavaScript》解锁底层逻辑与避坑指南
JS内存管理的核心，从来不是“记住栈堆区别”，而是理解《你不知道的JavaScript》反复强调的：“内存是有限资源，开发者的责任是让无用的内存‘可达性消失’”。全局变量“少而精”，使用后主动置空避免稀疏数组，警惕V8快慢数组切换闭包不背锅，控制引用周期是关键（弱引用兜底）Worker/定时器等“独立执行单元”，必须显式终止。
2025-12-13 15:54:48
962
原创 前端岗来了个男生，没两天就被劝退了
第三方库 CDN 引入 + `<link rel="preload">` 预加载关键资源，将首屏时间从 4.1s 降至 1.8s，跳出率下降 35%。先查是否违反响应式限制：Vue 2 中动态添加属性未用 `$set`，数组索引赋值无效，对象整体替换丢失监听。4. 使⽤同⼀个链接， 如何实现 PC 打开是 web 应⽤、⼿机打开是⼀个 H5 应⽤？查数据流，必要时 `watch` 深度监听或 `nextTick` 控制时机。43. 虚拟混动加载原理是什么， ⽤ JS 代码简单实现⼀个虚拟滚动加加载。
2025-12-11 12:29:32
1172
原创 让 AI 成为你的前端架构师 - UniApp + Vue3 项目初始化
在src/hooks/immediate?: boolean;onSuccess?onError?onError?execute();使用时无需导入// 直接使用，无需 import</script>通过 AI 辅助，我们在不到 1 小时任务完成情况✅ Monorepo 项目结构标准的 pnpm + Turborepo 架构✅ Vite 配置完整的插件链和优化配置✅ TypeScript 配置严格模式，完整类型支持。
2025-12-11 12:17:04
750
原创 建议大家有空就去刷前端场景题，现场答不上很尴尬！
3.构建环境下的优化:尽管 Vite 在开发环境下不进行打包构建，但在生产环境下，它会通过预构建的方式生成高性能的静态资源，以提高页面加载速度。1.模块级别的热更新:Vite 使用浏览器原生的 ES 模块系统，可以实现模块级别的热更新，即只更新修改的模块，而不需要刷新整个页面。这些占位符可以是简单的 div 或样式类，用于预留图片的空间，避免页面布局的混乱。适配层:由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。
2025-12-09 11:46:29
986
原创 【错误监控】别只做工具人了！手把手带你写一个前端错误监控 SDK
到这里，我们这个“麻雀虽小，五脏俱全”的错误监控 SDK 就算是跑起来了。啥都能抓：JS 报错、Promise 挂了、接口 500、图片 404，一个都跑不掉，统统收入囊中。死活都能报：用了，哪怕用户秒关页面，最后那条“遗言”也能顽强地发给服务器。拿来就能用：打包好了三种格式，还送了个“靶场”页面，点点按钮就能看效果，主打一个省心。不过说实话，这离真正的“企业级”监控还有点距离。别盲猜 Bug：线上代码都是压缩的，得搞定Sourcemap 还原，不然对着只有哭的份。页面白了没。
2025-12-09 11:32:01
663
原创 29岁做了5年Web前端，建议大家不要太天真
2.吃透框架：Vue / React 核心原理（响应式、虚拟 DOM、Diff 算法、Hooks），能说清技术选型理由。1.夯实基础：浏览器原理（渲染流程、缓存机制）、JavaScript 核心（闭包、异步、原型链），理解本质而非背诵。项目复盘：梳理 2-3 个复杂项目，讲清架构设计、性能优化、难点与解决方案（用 STAR 法则表达）4.刷题与模拟：每周 3 次手写题（Promise、响应式等），1 次模拟面试，练表达逻辑和临场反应。Vite构建流程、性能优化手段、CI/CD 实践，结合项目说落地经验。
2025-12-06 15:50:00
859
原创 封装通用可视化大屏布局组件：Vue3打造高复用性的 ChartFlex/ChartFlexItem
在 Vue3项目开发中，尤其是数据可视化场景下，我们经常需要频繁使用 Flex 布局来实现图表的灵活排版。每次重复写等样式不仅低效，还容易导致样式不统一。本文将分享如何封装一对高复用、强类型的 Flex 布局组件 ——ChartFlex（容器）和（子项），让图表布局开发更高效、更规范。通过上面两个组件结合使用，我们就能很快完成大屏的布局开发，且灵活性高。
2025-12-06 14:46:43
164
原创 一天面试了4个前端,发现都有相同的问题
只会用框架 会写 React/Vue，但不懂虚拟 DOM diff、响应式原理、状态管理设计。问题表现：会用 React/Vue 写业务组件，但说不清虚拟 DOM 的 diff 算法、组件生命周期/钩子函数的执行时机、状态管理（如 Redux/Zustand/Pinia）的设计思想。模板编译过程是怎样的？建议：突出优化成果（如加载从 3s → 800ms）或复杂问题排查（内存泄漏、错误监控）。SSR（服务端渲染） vs SSG（静态生成） vs CSR（客户端渲染）各自的适用场景？构建工具的差异点在哪里？
2025-12-04 12:04:15
946
原创 手把手实现一个“就地编辑”组件：深入理解 JavaScript 原型与 DOM 操作
默认状态：显示为普通文本（如<span>点击文本：切换为输入框 + 保存/取消按钮；点击保存：将新值提交（本文简化为本地更新），并切回文本状态；点击取消：放弃修改，恢复原始值，切回文本状态。整个过程不跳转页面、不弹窗，所有操作“就地”完成，体验流畅。通过实现构造函数与原型的协作；DOM 的动态创建与状态管理；状态驱动的 UI 切换逻辑；更重要的是，我们体会到了“用原生 JS 解决实际问题”的乐趣与成就感。📌记住：再复杂的 UI 组件，拆解后也不过是“数据 + 视图 + 交互”。
2025-12-04 11:54:35
381
原创 刚参加完特斯拉前端面试：技术面，我的复盘经验总结！
以上就是完整的技术面试、经验总结，希望对你有所帮助。为了准备这次面试刷了很多面试题，并且做了一个整理，分了HTML、CSS、JavaScript、React、Vue、浏览器、服务端与网络、算法等等.....可以说这次能拿下技术面全靠它。
2025-12-04 11:31:08
966
原创 Vue3 脚本革命：＜script setup＞ 让你的代码简洁到飞起！
你是不是还在为 Vue 组件的那些繁琐语法头疼？每次写个组件都要 export default、methods、data 来回折腾，感觉代码总是啰里啰嗦的？告诉你个好消息，Vue3的语法糖简直就是为我们这些追求效率的开发者量身定做的！它能让你用更少的代码做更多的事，而且写起来那叫一个爽快。今天我就带你彻底搞懂这个功能，从基本用法到高级技巧，保证让你看完就能用上，代码量直接减半！简单来说， 是 Vue3 引入的一种编译时语法糖，它能让单文件组件的脚本部分变得更加简洁明了。以前我们写个组件得这样：现在用
2025-12-04 11:22:14
401
原创 明显感觉前端面试牛的人，都有一些共性！
navigator.sendBeacon()方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中--比如记录用户在网页上的行为数据。
2025-11-27 11:48:27
978
原创 CSS 浮动布局与 BFC：一场网页布局的 “神仙打架” 与 “和平协议”
各位前端界的“布局大师”们，咱们今天来聊聊网页布局里的两个 “狠角色”——浮动和 BFC。这俩就跟食堂打饭时的 “插队小能手” 和 “秩序管理员” 似的，一个爱搞点 “脱离常规” 的操作，一个专管 “维护布局生态平衡”。咱们既得懂它们的“脾气”，又得会用它们的“技能”，不然你的网页布局分分钟给你玩出“抽象艺术”来。那么浮动布局的意义是什么呢？优缺点又是什么呢？BFC又怎么去用呢？别急，听我娓娓道来 ˶ᵒ ᵕ ˂˶浮动是那个 “灵活但爱闯祸” 的小胖墩，用就能轻松实现文字环绕、元素水平排列；
2025-11-27 11:42:49
363
原创 11月底 写给前端面试人
问题表现：只罗列“用了 Vue3 + Element-Plus”，但不说清楚技术选型原因（比如为什么用 Vite而不用Webpack。能说清楚 this 指向、call/apply/bind 的区别、箭头函数与普通函数的不同。-编码实战：手写 Promise、深拷贝、数组去重（考察代码鲁棒性和边界处理）。准备一个复杂问题的排查过程（比如如何解决内存泄漏、如何优化长列表渲染性能）。熟悉常用数据结构（如数组、对象、Map/Set 的使用场景和性能差异）。状态管理（如 Redux/Vuex）的设计思想。
2025-11-27 11:35:54
834
原创 20个CSS实用技巧，10分钟从小白变大神！
* Webkit浏览器滚动条样式 */width: 8px;/* 滚动条宽度 *//* 轨道背景 *//* 滑块颜色 *//* 悬停颜色 */适用场景：需要统一浏览器滚动条样式的项目/* 隐藏原生复选框 *//* 自定义复选框样式 *//* 选中状态 *//* 选中后的对勾 */left: 6px;top: 2px;width: 6px;适用场景：表单美化、统一设计语言/* 选中背景色 *//* 选中文字颜色 */
2025-11-27 11:26:56
232
原创 别再吹性能优化了：你的应用卡顿，纯粹是因为产品设计烂[特殊字符]♂️
产品经理说需求：这个表格要展示所有订单，大概有50列，每页要展示500条，而且要支持实时搜索，还要支持列拖拽，每个单元格里可能还有下拉菜单...我们为了这个需求，引入了复杂的 第三方库，写了晦涩难懂的优化代码，甚至为了解决虚拟滚动带来的样式问题（比如高度坍塌、定位异常），又打了一堆补丁。我们这群工程师，拿着最先进的前端技术（Vite, Rust, WASM），却在日复一日地给一坨屎💩（糟糕的产品设计）雕花。浏览器的渲染能力是有上限的，JS的主线程是单核的，移动端的电量是有限的。改成标准的分页，每页20条。
2025-11-27 11:11:29
731
原创 11月前端面试大环境不太好，不过与我无关了
navigator.sendBeacon()方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中--比如记录用户在网页上的行为数据。
2025-11-19 11:35:32
933
原创 面试官被我的Vue响应式原理回答震惊了
是一种用于构建用户界面的架构模式，用于现代的前端开发框架（Vue、Angular）。它通过数据绑定和视图模型提供了高效的 UI 更新和数据同步机制。MVVM 模式主要由Model（模型）、View（视图）、ViewModel（视图模型）三个部分组成。Model表示程序的核心数据和业务逻辑，它不关心用户界面，只负责数据的获取、存储和处理，并提供与外界交互的接口。View负责展示数据和用户交互，简单来说他就是我们看到的UI 组件或 HTML 页面。ViewModel是连接View和Model。
2025-11-19 11:21:09
644
原创 [特殊字符] React 高频 useEffect 导致页面崩溃的真实案例：从根因排查到彻底优化
如果你在 React 中遇到过“页面卡死 / 高频请求 / useEffect 很多同学遇到性能问题时，会立刻想到：👉 “加防抖呀？”👉 “加 useMemo/useCallback缓存呀？”但实际上，这些方式在某些场景下根本无效。特别是当问题来自 深层子组件 的 useEffect 重复触发时，你必须回到 React 的底层原则： 单向数据流+ 渲染链传播效应。下面用一个 真实可复现的代码示例，带你从问题现场走到完整解决方案。来看看最典型的错误写法。子组件中监听 props 变化，然后发起
2025-11-19 11:06:14
892
原创 建议大家有空就去刷一下Web前端面试场景题
不是制造焦虑，而是我最近面试了六 七个候选人后，一个最深的感触：能把 LeetCode算法题写得飞起、把 Vue/React源码背得滚瓜烂熟的人，却常常在一个简单的场景题面前“翻车”。面试官通过场景题，想看到的不是你记忆的深度，而是你在真实、复杂的业务环境中，如何思考、拆解、权衡和落地的能力。98.[Webpack]如何打包运行时 chunk，且在项目工程中，如何去加载这个运行时 chunk?99.为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的?
2025-11-17 14:20:46
1044
原创 面试官：JWT、Cookie、Session、Token有什么区别？
JWT是一种自包含的 Token不依赖服务器存储。Cookie是浏览器存储机制，可存 Session ID 或 JWT。Session是服务器存储的用户状态，依赖 Cookie 传递 ID。Token是身份凭证，JWT 是其中一种实现。
2025-11-17 12:26:34
635
原创 typescript 方法前面加* 是什么意思
方法前加可暂停执行：使用yield暂停函数执行并返回值保持状态：函数调用之间的状态会被保留惰性求值：值在需要时才生成迭代协议：遵循迭代器协议，可与for...of循环配合使用对于这样的方法，很可能是用于：逐步发送消息处理消息流实现某种状态机或序列生成分批次处理数据。
2025-11-17 12:09:30
137
原创 为什么你感觉前端啥都会了，却总是一面就挂？
上午面试了几个前端岗，本来简历适配度超高，我都做好发offer的准备了，结果面试现场“翻车”严重。基础问题回答得磕磕绊绊，逻辑混乱，甚至直接说不知道。问简历上的项目经历，也都吞吞吐吐讲不清楚，这面试态度嘛，还真得打个问号？？？在这儿给大家提个醒，想要拿到offer，这些坑可得避开。
2025-11-13 14:22:26
1219
原创 几种虚拟列表技术方案调研
虚拟列表（Virtual List）是一种优化长列表渲染性能的技术。其核心思想是只渲染可见区域的列表项，而不是渲染所有数据。当用户滚动时，动态地创建和销毁 DOM 元素，从而大幅减少 DOM 节点数量，提升渲染性能。本篇文章中，笔者从Vue3的技术框架来讲解虚拟列表不同场景中的用法，不涉及虚拟列表的原理。社区里有很多讲解虚拟列表的原理的文章，笔者不再赘述。笔者从虚拟列表的分类上统筹每一种虚拟列表技术方案，并给出参考示例。
2025-11-13 12:23:15
620
原创 [特殊字符] 从零实现 Vite 式脚手架：深入理解 npm create 的工作原理
swc也是动态插入的，但是并没有这种插件模块，我想了一下还是通过单独的模块来实现一个插件系统，因为后续会扩展更多的插件，这样可扩展性也更高点。因为平常主要用Vue和React比较多，我为 Vue 和 React 各准备了 JS 和 TS 两个版本，一共 4 个模板。因为 CSS 框架是互斥的，不能同时装 Tailwind 和 UnoCSS，会冲突。我这个更轻量、更灵活，适合学习和团队定制。插件系统是整个项目的核心，我花了不少时间来设计它的架构。这一步，它会根据用户选择的插件，动态修改项目配置。
2025-11-13 11:57:53
808
原创 普及一下3-5年前端，11月面试强度
你的梦想是进大厂吗？你明白的，这需要一点小小的代价。你是万中无一的奇才？如果不是，那么失败几次是正常的，大家都是普通人，也许只是不 match。
2025-11-11 12:20:54
1153
原创 [特殊字符] 手动改 500 个文件?不存在的!我用 AST 撸了个 Vue 国际化神器
这个项目虽然小,但让我对AST 和编译原理AST 不是玄学- 其实就是把代码变成树形结构,然后遍历修改,最后再变回代码工具链很重要- Babel 和 Vue Compiler 这些成熟的工具能省很多事边界情况很多- 看似简单的需求,实际实现起来要考虑各种边界情况完成比完美重要- 先做出能用的版本,再慢慢优化。
2025-11-11 12:11:07
701
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人