- 博客(269)
- 收藏
- 关注
RSS订阅原创 11月前端面试大环境不太好，不过与我无关了
navigator.sendBeacon()方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中--比如记录用户在网页上的行为数据。
2025-11-19 11:35:32
923
原创 面试官被我的Vue响应式原理回答震惊了
是一种用于构建用户界面的架构模式，用于现代的前端开发框架（Vue、Angular）。它通过数据绑定和视图模型提供了高效的 UI 更新和数据同步机制。MVVM 模式主要由Model（模型）、View（视图）、ViewModel（视图模型）三个部分组成。Model表示程序的核心数据和业务逻辑，它不关心用户界面，只负责数据的获取、存储和处理，并提供与外界交互的接口。View负责展示数据和用户交互，简单来说他就是我们看到的UI 组件或 HTML 页面。ViewModel是连接View和Model。
2025-11-19 11:21:09
638
原创 [特殊字符] React 高频 useEffect 导致页面崩溃的真实案例：从根因排查到彻底优化
如果你在 React 中遇到过“页面卡死 / 高频请求 / useEffect 很多同学遇到性能问题时，会立刻想到：👉 “加防抖呀？”👉 “加 useMemo/useCallback缓存呀？”但实际上，这些方式在某些场景下根本无效。特别是当问题来自 深层子组件 的 useEffect 重复触发时，你必须回到 React 的底层原则： 单向数据流+ 渲染链传播效应。下面用一个 真实可复现的代码示例，带你从问题现场走到完整解决方案。来看看最典型的错误写法。子组件中监听 props 变化，然后发起
2025-11-19 11:06:14
882
原创 建议大家有空就去刷一下Web前端面试场景题
不是制造焦虑，而是我最近面试了六 七个候选人后，一个最深的感触：能把 LeetCode算法题写得飞起、把 Vue/React源码背得滚瓜烂熟的人，却常常在一个简单的场景题面前“翻车”。面试官通过场景题，想看到的不是你记忆的深度，而是你在真实、复杂的业务环境中，如何思考、拆解、权衡和落地的能力。98.[Webpack]如何打包运行时 chunk，且在项目工程中，如何去加载这个运行时 chunk?99.为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的?
2025-11-17 14:20:46
1018
原创 面试官：JWT、Cookie、Session、Token有什么区别？
JWT是一种自包含的 Token不依赖服务器存储。Cookie是浏览器存储机制，可存 Session ID 或 JWT。Session是服务器存储的用户状态，依赖 Cookie 传递 ID。Token是身份凭证，JWT 是其中一种实现。
2025-11-17 12:26:34
629
原创 typescript 方法前面加* 是什么意思
方法前加可暂停执行：使用yield暂停函数执行并返回值保持状态：函数调用之间的状态会被保留惰性求值：值在需要时才生成迭代协议：遵循迭代器协议，可与for...of循环配合使用对于这样的方法，很可能是用于：逐步发送消息处理消息流实现某种状态机或序列生成分批次处理数据。
2025-11-17 12:09:30
127
原创 为什么你感觉前端啥都会了，却总是一面就挂？
上午面试了几个前端岗，本来简历适配度超高，我都做好发offer的准备了，结果面试现场“翻车”严重。基础问题回答得磕磕绊绊，逻辑混乱，甚至直接说不知道。问简历上的项目经历，也都吞吞吐吐讲不清楚，这面试态度嘛，还真得打个问号？？？在这儿给大家提个醒，想要拿到offer，这些坑可得避开。
2025-11-13 14:22:26
1130
原创 几种虚拟列表技术方案调研
虚拟列表（Virtual List）是一种优化长列表渲染性能的技术。其核心思想是只渲染可见区域的列表项，而不是渲染所有数据。当用户滚动时，动态地创建和销毁 DOM 元素，从而大幅减少 DOM 节点数量，提升渲染性能。本篇文章中，笔者从Vue3的技术框架来讲解虚拟列表不同场景中的用法，不涉及虚拟列表的原理。社区里有很多讲解虚拟列表的原理的文章，笔者不再赘述。笔者从虚拟列表的分类上统筹每一种虚拟列表技术方案，并给出参考示例。
2025-11-13 12:23:15
597
原创 [特殊字符] 从零实现 Vite 式脚手架：深入理解 npm create 的工作原理
swc也是动态插入的，但是并没有这种插件模块，我想了一下还是通过单独的模块来实现一个插件系统，因为后续会扩展更多的插件，这样可扩展性也更高点。因为平常主要用Vue和React比较多，我为 Vue 和 React 各准备了 JS 和 TS 两个版本，一共 4 个模板。因为 CSS 框架是互斥的，不能同时装 Tailwind 和 UnoCSS，会冲突。我这个更轻量、更灵活，适合学习和团队定制。插件系统是整个项目的核心，我花了不少时间来设计它的架构。这一步，它会根据用户选择的插件，动态修改项目配置。
2025-11-13 11:57:53
797
原创 普及一下3-5年前端，11月面试强度
你的梦想是进大厂吗？你明白的，这需要一点小小的代价。你是万中无一的奇才？如果不是，那么失败几次是正常的，大家都是普通人，也许只是不 match。
2025-11-11 12:20:54
1095
原创 [特殊字符] 手动改 500 个文件?不存在的!我用 AST 撸了个 Vue 国际化神器
这个项目虽然小,但让我对AST 和编译原理AST 不是玄学- 其实就是把代码变成树形结构,然后遍历修改,最后再变回代码工具链很重要- Babel 和 Vue Compiler 这些成熟的工具能省很多事边界情况很多- 看似简单的需求,实际实现起来要考虑各种边界情况完成比完美重要- 先做出能用的版本,再慢慢优化。
2025-11-11 12:11:07
686
原创 CSS实现高级流光按钮动画，这几行代码堪称神来之笔
1. 伪元素的使用::before和::after伪元素让我们可以在不添加额外HTML元素的情况下创建复杂的视觉效果。2. CSS渐变：线性渐变()是创建流光效果的核心，通过设置多个颜色停止点创造出丰富的色彩过渡。3.CSS动画：通过@keyframes和animation属性，我们可以创建平滑的动画效果，而不需要JavaScript。4.是一个很有用的属性，可以让背景只显示在文字区域。5. Z-index层级管理：正确设置z-index确保各个元素按正确的顺序堆叠。
2025-11-11 11:51:54
315
原创 你还在 for 循环里使用 await？异步循环得这样写
在循环中使用 await，代码看似直观，但运行时要么悄无声息地停止，要么运行速度缓慢，这是为什么呢？本篇聊聊 JavaScript 中的异步循环问题。需求场景推荐方案需保证顺序、逐个执行追求速度、独立请求需保留所有结果（含失败）需控制并发数、遵守限流p-limit 等工具。
2025-11-07 19:56:47
515
原创 11月初面了七八个Web前端，都有个通病……
navigator.sendBeacon()方法使得网页可以异步地将数据发送到服务器，与页面的卸载过程同时进行，这一点非常重要，因为它允许在不影响用户体验的情况下，安全地结束会话或者发送统计数据。这方法主要用于追踪和诊断信息，特别是在需要确保数据被成功发送到服务器的场景中--比如记录用户在网页上的行为数据。
2025-11-07 19:50:19
1418
原创 从 WebSocket 到 SSE：实时通信的轻量化演进
在实时 Web 应用开发领域，WebSocket 长期占据主导地位。但当应用场景只需要单向数据推送时，Server-Sent Events (SSE) 提供了更轻量、更优雅的解决方案。
2025-11-05 19:24:39
254
原创 前端面试肚子里没墨的人，刷这套前端八股
当“面经”、“速成”、“高频考点”这些词在眼前晃动时，我们心里都清楚，这多少带点应试的无奈。你需要的可能不是又一份“必过宝典”，而是一套能帮你把零散知识串联起来，真正填补认知空白的地图。。
2025-11-05 19:10:21
1262
原创 Vue做SEO太难？6年老司机带你轻松搞定！
确实，Vue这类SPA（单页应用）对SEO不太友好，因为内容大多是JS动态渲染的，搜索引擎爬虫可能看不懂。我之前优化过一个企业官网，从纯Vue迁移到Nuxt.js后，：所有Vue项目（即使不做SSR/Prerender）：对SEO要求极高的项目（如官网、博客、电商）：在服务器端提前渲染好HTML，直接返回给爬虫。✅ 首屏加载更快（用户直接看到完整页面），让你的Vue项目也能被搜索引擎青睐！：让爬虫能直接看到完整的HTML内容！最近我接手的一个Vue电商项目，结合。：静态页面（如博客、产品展示页）
2025-11-05 18:54:08
265
原创 10 个被严重低估的 JS 特性，直接少写 500 行代码
最近逛 Reddit 的时候，看到一个关于最被低估的 JavaScript 特性的讨论，我对此进行了总结，和大家分享一下。可以看到，以前我们依赖的第三方库，其实原生 API 早就能解决，比如用 Intl 替代 moment.js，用 Set 替代 lodash 的 uniq，用 Intersection Observer 替代懒加载，随着老旧的浏览器被讨论，兼容性越来越好，这些 API 以后会成为基操。
2025-11-04 16:48:25
874
原创 当不停参加Web前端面试，就会发现一个定律..
2.开发环境下的无构建:Vite 在开发环境下不会对代码进行打包构建，而是直接利用浏览器原生的模块导入功能，通过 HTTP 服务器提供模块的即时响应。3.构建环境下的优化:尽管 Vite 在开发环境下不进行打包构建，但在生产环境下，它会通过预构建的方式生成高性能的静态资源，以提高页面加载速度。1.模块级别的热更新:Vite 使用浏览器原生的 ES 模块系统，可以实现模块级别的热更新，即只更新修改的模块，而不需要刷新整个页面。使用合适的 HTML标签和语义化的内容结构，使搜索引擎能够更好地理解页面的内容。
2025-11-04 15:18:41
1117
原创 深入浅出的学习Vue 3.6 新特性：Vapor Mode 渲染模式
Vapor Mode 是 Vue 3.6 为 “极致性能” 设计的新渲染模式，核心是跳过虚拟 DOM，通过编译时生成精准的 DOM 操作代码，结合线性数据结构和精准依赖追踪，实现接近原生的更新效率。它不是要替代现有模式，而是给开发者提供了一个 “性能旋钮”—— 简单场景用传统模式保开发效率，复杂场景用 Vapor Mode 提运行性能，两者相辅相成。
2025-10-30 18:17:43
899
1
原创 一天面了10个Web前端，水平真的令人堪忧啊
针对首屏优化、长列表渲染、前端监控等 TOP 10 场景进行系统性设计与表达训练这几类基础问题不解决，在当前的竞争环境下真的很难发offer。• 停留在 Vue/ReactAPI 用法，对 Vue 的响应式依赖收集与触发、React Hooks 底层链表结构无代码级理解。• 缺乏架构思维：当被问「设计一个前端微前端方案」时，无法有效拆分应用隔离、状态共享和路由分发策略。Q57、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理。Q29、说说你对 typescript 的理解?
2025-10-30 18:10:36
1168
原创 没开玩笑，全框架支持的 dialog 组件，支持响应式
dialog 的场景往往出现在表单收集、确认问询的场景，在 JQ 时代，我们可能很常用浏览器自带的 alert，但是这东西会阻塞主进程，且样式也不太好控制，或者用 bootstrap 的组件。到了框架时代，出现了各种组件库，但是它们都存在几个问题要用必须全量安装（虽然现在大家都支持树摇）修改样式比较麻烦不支持跨框架，感知不统一他们跟自身生态、框架生态深度绑定，虽然大多数时候我们用起来很方便，心智负担也很低。但是他们不可避免地出现了上述三个问题。
2025-10-28 18:42:41
633
原创 Vue 3.5 + WangEditor 打造智能笔记编辑器：语音识别功能深度实现
这篇文章基于 Vue 3.5 和 WangEditor 实现了一套完整的笔记编辑器语音识别功能，通过分层设计实现了模块解耦，兼顾了实时性、兼容性和稳定性。高效的音频格式转换方案，确保识别服务兼容性完善的状态管理与错误处理，提升用户体验自动化配置诊断工具，降低问题排查成本可扩展的架构设计，便于后续功能迭代该方案不仅适用于笔记编辑器，也可迁移到聊天、文档协作等其他需要语音输入的场景。通过合理的技术选型和架构设计，能够有效降低语音识别功能的集成难度，为用户提供便捷、高效的输入体验。
2025-10-28 11:58:01
827
原创 前端们，11月开始面试Web前端开发要懂得“包装”
如何把真实经历和技能更有效地呈现出来？很多前端开发者技术扎实，却在面试中吃亏，就是因为不懂得如何“说话”。面试本质上是一场开卷考试，面试官反复考察的框架原理、性能优化、工程化能力，其实都有标准答法。比如被问到“项目难点”，不需要你真的解决过世界级难题，而是要能把一次普通的组件优化或打包配置调整，用“发现问题-分析根因-方案对比-落地结果”的结构表达出来。所谓的“撒谎”，其实是避免陷入过于实诚的误区。
2025-10-28 11:09:12
1120
原创 牛！用vue3实现的多维表格编辑器，小白也能轻松构建复杂数据报表！
今天继续聊聊多维表格编辑器。很多朋友想让我实现一版Vue的多维表格，于是我花了一周时间， 基于我之前设计多维表格的经验，终于写了一版，上图的演示动画就是Vue版本的多维表格。说实话，用Vue写真的很痛苦，当然并不是因为框架本身不好用， 而是为了保证代码的架构优雅，以及Vue实现的渲染性能问题，其实需要考虑很多细节上的设计。当然还有很多业务上可扩展的需求，也需要在设计多维表格的整个架构上做思考。所以我花了大概3天时间考虑上面的问题，并熟悉Vue高级API，力求让代码足够优雅和具有先进性。
2025-10-23 18:24:45
422
原创 了解微前端：为何 Web Component 是绕不开的关键技术？
简单来说，微前端是一种架构风格，其核心理念是“将一个大型前端应用拆分为多个独立自治的子应用想象一下一个复杂的电商网站，它可能包含“商品搜索”、“购物车”、“用户中心”和“推荐系统”等多个模块。在微前端架构下，这每一个模块都可以是一个独立的“微应用”，由不同的团队负责。独立开发与部署：团队可以自主选择技术栈（如 React、Vue、Angular），并独立更新和部署自己的模块，而无需协调整个“巨石应用”的发布周期。代码库更小：每个微应用只关注自己的业务领域，代码库更小，更易于理解和维护。
2025-10-23 18:17:11
245
原创 封装 classNames：让 Tailwindcss 类名处理更优雅
classNames工具函数看似简单，却巧妙结合了classnames和条件拼接繁琐和Tailwind 类名冲突。无论是小型项目还是大型应用，引入这个工具都能让类名管理更优雅、更可靠。它的价值不仅在于减少代码量，更在于规范开发流程，让开发者能专注于业务逻辑，而非类名拼接的细节。如果你正在使用 Tailwind CSS，不妨试试这个封装方案，相信它会成为你开发中的得力助手。
2025-10-22 18:29:00
852
原创 写个vite插件自动处理系统权限，降低99%重复工作
最近做一个中台系统的权限控制功能，由于路由权限和角色权限都简单，但是要做按钮权限有点麻烦，因为太多按钮了。其实我以前也做过这个功能，简单暴力做法就是每个按钮用自定义指令去判断是否有权限显示。但是重复代码也太多太多，并且维护性极差，代码固定难以调整。所以这次终于忍不住了，决定抽时间做一个vite插件去自动生成对比按钮权限的代码，下面细说实现过程。
2025-10-22 18:25:09
909
原创 前端面试，其实就是在筛选胆小的人！
这里所说的“胆小”，并非指性格上的怯懦，而是指在面对技术不确定性时，那种固步自封、不敢暴露自身认知边界的思维状态。前端领域技术迭代迅速，框架、工具和最佳实践层出不穷。面试官真正警惕的，是那些面对未知问题时，选择沉默、回避或生硬背诵标准答案的候选人。其核心筛选逻辑在于，前端开发工作本质上是一个持续应对未知和模糊需求的过程。真实的项目场景里，没有完美的技术方案，只有基于上下文权衡利弊后的选择。
2025-10-21 19:06:31
1575
原创 使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
在 Web 开发中，表单输入格式化是提升用户体验的关键环节。无论是电话号码、信用卡号还是日期，合适的格式不仅能减少用户输入错误，还能让界面更专业。本文将全面介绍 IMask.js 的使用方法，帮助你掌握表单输入格式化的精髓。IMask.js 是一个轻量级的 JavaScript 库，用于对输入框内容进行实时格式化和验证。支持多种掩码类型：数字、日期、正则表达式、函数等实时格式化，边输入边处理支持自定义验证规则无依赖，可独立使用体积小巧，压缩后仅约 15KB。
2025-10-21 19:00:44
904
原创 【八股汇总，背就完事】这一次再也不怕webpack面试了
它可以根据配置规则，自动将公共模块（如 node_modules 中的库）或多个入口共享的代码提取到单独的 chunk 文件中。这可以防止代码重复，并优化浏览器的缓存策略。它能够监听 Webpack 构建生命周期中的各种事件（hooks），在合适的时机执行广泛的任务。是一个用于开发的、轻量的、基于 Express 的 Node.js 服务器。是一个信息文件，它映射了转换后代码的每一个位置到原始源代码中相应的位置。这使得在浏览器中调试时，看到和调试的是原始代码，而不是被 Webpack 打包和转换后的代码。
2025-10-21 18:56:03
823
原创 一上午面了6个Web前端岗，全是菜鸟啊！
上午面试了几个前端岗，本来简历适配度超高，我都做好发offer的准备了，😂结果面试现场“翻车”严重。基础问题回答得磕磕绊绊，逻辑混乱，甚至直接说不知道。问简历上的项目经历，也都吞吞吐吐讲不清楚，这面试态度嘛，还真得打个问号？？？在这儿给大家提个醒，想要拿到offer，这些坑可得避开1️⃣ 聊聊前端开发的主要工作流程？* ❌ 她说：“写页面，做交互。
2025-10-16 19:18:04
768
原创 为什么现代 JavaScript 代码规范开始建议禁止使用 else ？
减少 else 使用” 的规范，本质是引导我们从 “能用” 的代码，走向 “好用、好读、好维护” 的代码。它挑战了传统编码习惯，迫使我们采用更线性、更扁平化的思维方式 —— 最终写出逻辑更清晰、可维护性更强的 JavaScript 代码。
2025-10-16 19:09:13
473
原创 Vue 3 组合式函数（Composables）全面解析：从原理到实战
我们不再需要依赖 data、methods、computed 这些分散的选项，而是能用函数的方式，灵活组织逻辑。假如我们还想监听滚动、键盘等事件，可以进一步抽象出一个事件监听函数 👇。💡 这样我们不仅复用了逻辑，还建立了逻辑的“组合关系” ——也就是说，它不仅可以处理计算逻辑、请求接口、事件监听，还能。你可以自由拼接、拆解、组合它们，构建出任何复杂的交互逻辑。假设我们要做一个“鼠标追踪器”，实时显示鼠标位置。很好，但如果我们多个页面都要复用这个逻辑呢？，就是在这个新体系下，用于。
2025-10-15 17:39:28
477
原创 前端开发找工作，死磕这套题就够了！
4. 使用同⼀个链接， 如何实现 PC 打开是 web 应用、手机打开是⼀个 H5 应用？29. [重要]用 nodejs 实现⼀个命令行工具， 统计输入目录下面指定代码的行数。28. [重要]如果不使用脚手架， 如果用webpack构建一个自己的react应用。22. [重要]web 应用中如何对静态资源加载失败的场景做降级处理。20. [重要]深度 SEO 优化的方式有哪些， 从技术层面来说。24. [美团]移动端如何实现上拉加载，下拉刷新？2. [重要]当QPS达到峰值时, 该如何处理？
2025-10-15 17:29:52
965
原创 写这么多年CSS，都不知道什么是容器查询？
容器查询（Container Queries）是 CSS 的一个革命性功能，它允许元素根据其父容器的尺寸来应用不同的样式，而不是根据视口（viewport）的尺寸。这为响应式设计带来了全新的可能性。/* 定义容器类型 *//* 查询容器的宽度和高度 *//* 只查询容器的内联尺寸（宽度） *//* 不建立查询容器 */
2025-10-15 17:06:49
469
原创 【图形编辑器架构】：编辑器的 Canvas 分层事件系统
/ 基础事件// 鼠标事件// 键盘事件// 🎯 比选择工具优先级高，确保平移优先处理// 空格键临时模式// 🎯 只有手动工具激活时才处理平移事件。
2025-10-11 17:21:39
905
原创 25年我跑了几十场前端面试，发现很少问传统八股了
这些问题没有标准答案，更注重考察候选人的技术深度、解决问题的思路以及对业务的理解。我深刻感受到，前端行业已经进入了一个新的阶段，企业对前端工程师的要求不再局限于技术本身，而是更加注重综合能力和实战经验。本以为会遭遇各种“闭包”、“原型链”、“CSS盒模型”的轮番轰炸，没想到却迎来了面试风向的180度大转弯。传统的“八股文”问题几乎销声匿迹，取而代之的是一个个贴近实际业务场景的开放性问题：“如何设计一个支持无障碍访问。这不我把面试常问的场景题都整理出来了，快去背吧。”、“如何保证前端代码的质量和可维护性？
2025-10-11 17:18:18
791
原创 前端必看！12个JS神级简写技巧，代码效率直接飙升80%，告别加班！
哈喽大家好，在日常开发中，我们经常会遇到一些重复、冗长的代码。写起来费劲，读起来费神，维护起来更是头疼。而且代码越复杂，性能可能越受影响。那有没有办法让代码更简洁、清晰又高效呢？JavaScript提供了许多现代语法特性，合理使用这些简写技巧，不仅能大幅减少代码量，还能提升可读性和执行效率。很多资深前端都在用，这篇文章整理了12 个最实用的 JS 简写技巧，并结合实际场景进行优化和补充，帮助你写出更优雅的代码。语法简洁不绑定自己的this，适合事件回调、.map()等场景。
2025-10-11 17:08:49
601
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人