- 博客(77)
- 收藏
- 关注
RSS订阅
原创 2025最新高频有答案的前端面试题
弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中flex属性是flex-grow和flex-basis的简写。
2025-05-12 17:30:11
2475
原创 [特殊字符] React Router Dom：揭秘前端路由的艺术，告别页面跳转的“石器时代”！
前端路由不仅是技术的进化，更是开发思维的跃迁。当🛠 用获取动态参数⚡ 用实现无刷新跳转🧩 用嵌套路由搭建复杂页面架构记住：优秀的 URL 设计是用户体验的第一道门面！现在就升级你的 React 全家桶，用路由的力量构建更流畅的 Web 应用吧！掘金社区热议话题：你在项目中遇到过哪些奇葩的路由设计？欢迎评论区吐槽！👇原文：https://juejin.cn/post/7529705003797020687。
2025-07-22 18:40:23
383
原创 babel\corejs\postcss配置
在低版本浏览器中，会出现页面打不开或者样式不如意的情况，这种就是本文需要处理的兼容性问题，一般分为两类。原文：https://juejin.cn/post/7529713795280158739。（1）配置项目中支持的浏览器版本，后面的postcss也会默认按这个文件来兼容。有时候引入新的css方法，旧浏览器可能不支持，比如@layer css变量等。上面就是典型的使用了新的api在旧浏览器中不支持造成的；（3）单独引入corejs的polyfill。（2）配置babel。
2025-07-22 18:37:36
823
原创 如何在 Web Worker 中高效传输大批量数据（＞10MB）
某些对象（如）可以在时通过“转移”（transfer）而非复制来传输。这样可以零拷贝，避免 GC 和内存压力。场景推荐方式说明大批量二进制数据（如图像、点云、音频）高性能首选需要共享内存、多线程写入高并发处理，需手动同步数据结构复杂但较小默认结构化克隆无需转移复杂结构且体积大分片切割 + 结构化克隆兼容性强。
2025-07-22 18:37:05
1058
原创 arm版本的ubuntu安装git或者vim等方法
（首先一定要运行这个命令！然后，sudo apt-get install vim如果仍然失败，确保启用了 universe软件源（运行然后验证 /etc/apt/sources.list中的条目是否正确。按照上述步骤操作就可以了：原文：https://juejin.cn/post/7527204643325198363。
2025-07-16 16:13:57
946
原创 FlatBuffers 为什么比 Protobuf 快
操作Protobuf读字段按顺序解析所有前置字段直接查索引表定位地址数据复制需要复制到对象（有开销）直接操作原始数据（无复制）速度关键解析顺序依赖 + 复制开销随机访问 + 零复制通过这两个场景的对比，应该能更直观地理解：FlatBuffers 的 “随机访问” 和 “零复制” 特性，让它在读取效率上远超需要 “顺序解析” 和 “数据复制” 的 Protobuf～原文：https://juejin.cn/post/7527208802560688138。
2025-07-16 16:13:25
426
原创 Vue Vapor真的没有diff算法了吗？
更新场景Vue 3.5Vapor模式文本绑定虚拟DOM + diff直接DOM更新属性绑定虚拟DOM + diff直接DOM更新条件渲染虚拟DOM + diff简单替换列表渲染虚拟DOM + diff依然是diffVue Vapor真的没有diff算法了吗？大部分情况下没有，但在v-for中仍然保留了完整的diff算法。不要被营销号标题党迷惑- "彻底抛弃diff算法"这种说法是不准确的技术决策需要权衡- Vue团队的选择体现了工程思维，而不是为了技术而技术源码是最好的老师。
2025-07-16 16:12:37
966
原创 Vite 构建库与构建应用的差异与最佳实践
是一个基于原生 ES 模块和 Rollup 构建的现代前端构建工具，它在构建应用和构建库时都表现优秀，但两者在使用上的配置和原理存在一定差异。了解这些差异，有助于我们更合理地利用 Vite 来构建高效的应用和可复用的库。
2025-07-16 16:12:05
929
原创 this的绑定规则
箭头函数没有自己的this，箭头函数的this是继承自外层作用域的this。情况一：我们传入一个null 或 undefined 那么这个显示绑定就会被忽略，使用默认规则。原文：https://juejin.cn/post/7507835962337853450。new 绑定 >bind > call/apply > 隐式绑定 > 默认绑定。带个疑问：我们采用三种方式对函数进行调用，为啥产生了三种不同的结果。不能作为构造函数来使用（不能和new一起来使用， 会抛出错误）；箭头函数是es6 新增的写法。
2025-05-26 14:38:01
253
原创 [特殊字符]我怎么让设计师不再嫌弃 Antd，后台系统也能高端大气上档次
如果一个团队计划开发一个面向 B 端的管理后台系统，既希望具备高效开发能力，又想要拥有好看的 UI，避免千篇一律的“土味”风格，而你作为前端主程参与开发，会怎么做？本文将分享我在这一方向上的思考与实践。虽然目前所在公司的 B 端系统已经迭代许多内容，短期内没有设计师人力支持我推行这套方法，但我依然希望能将这套思路分享给有类似困扰的朋友。如果未来我有机会从零带队启动新项目，我依旧会沿用这一套方案。
2025-05-26 14:37:31
340
原创 [特殊字符] 从“hello world”到“world hello”：JavaScript 字符串反转的奇妙之旅
今天我们从最基础的字符串反转出发，一路穿越了 JS 的包装类机制、语法风格、性能优化、面试技巧等多个维度。希望你在轻松幽默的氛围中学到了不少干货！方法特点适用场景简洁优雅快速实现手动循环拼接展示底层逻辑面试提问数组缓冲拼接性能更优大文本处理模板字符串书写方便动态拼接“字符串虽短，人生很长；代码虽小，梦想很大。下次你再遇到“反转字符串”的问题，别只想着一行代码搞定它，试着去理解背后的故事吧！😎。
2025-05-26 14:37:00
931
原创 2025 年前端开发趋势
这是我基于当前技术发展趋势下的看法，在技术进步、用户期望的改变以及对更加高效工作流程的需求的推动下，前端开发者正在采用新的工具、框架和范例来创造沉浸式、高性能和可访问的网络体验。
2025-05-26 14:36:25
1094
原创 掌握 Flutter 中的 Scrollable
可以将通知向上发送到Widget树。Flutter会在滚动、大小变化和布局变化等事件上发送通知。换句话说，每当某个东西滚动或改变其大小时，祖先都会收到通知。让我们看看滚动时发送的通知里面有什么。dart体验AI代码助手代码解读复制代码首先，我们来关注一下。这是相对于之前状态，滚动位置增加的像素数。如果为正，则表示用户沿着主方向滚动；如果为负，则表示用户向后滚动。如果我们深入研究metrics的内容，会发现很多有用的数据。让我们将这些数据可视化。
2025-05-14 11:07:38
979
原创 解决开发uni-app小程序，组件使用小程序插件
在开发uni-app小程序时，会遇到在自定义组件使用小程序的插件，但是uni-app和原生的小程序不一样，没有usingComponents入口引入插件，有没有什么办法？1、在你自定义的组件中，去使用插件，并不能向上方那样去使用，你会发现，当你的组件引入到某个页面时，所使用的插件不生效，这时该怎么解决呢，很简单。2、在pages.json中，定义好你页面的路由时，直接使用usingComponents。1、如果你的插件实在某个页面去使用，那你可以现在manifest.json中定义好插件。
2025-05-14 11:07:04
986
原创 高效前端开发：使用 unplugin-auto-import 实现依赖自动导入
同理，我们也可以将自定义的枚举或函数注入到全局。typescript体验AI代码助手代码解读复制代码这是一个简单但功能强大的配置方案，可以极大地提升前端开发体验和效率。它适用于各种规模的 Vue、React 或其他前端项目，你可以根据项目需求灵活调整需要自动导入的内容。🚀 希望这个小技巧能帮助大家提高工作效率，早点下班，永不加班！链接：https://juejin.cn/post/7503769523947044904。
2025-05-14 11:06:28
1082
原创 React Diff 算法：从“卡顿时代”到“丝滑未来”的逆袭之路 [特殊字符]
想象一下：你正在刷一个电商页面，疯狂点击“加载更多”按钮，但页面却像被冻住一样毫无反应——这就是 React 早期面临的“卡顿噩梦”！而这一切的破局者，正是Diff 算法。它从传统 O(n³) 的“龟速”进化到 O(n) 的“光速”，甚至让 React 18 的并发渲染成为可能。今天，我们从源码到实战，揭开这场“性能革命”的底层逻辑！
2025-05-14 11:05:48
836
原创 React源码之diff算法 上篇 reconcileChildrenArray
本篇对照源码和jsx模版简单介绍React Fiber子节点的diff算法。源码中除了主要的三个for循环，placeChild是同样重要的细节，每一轮for都有一个placeChild，给每个Fiber打上插入（Placement）移动（Placement）删除（Deletion）标记。链接：https://juejin.cn/post/7503226971557806099。
2025-05-13 10:48:33
468
原创 从Vue源码看Transition组件优化导致leave不触发问题
首先，我考虑的是 缓存，是不是因为 component 重复，导致没有触发更改。这个事件，绑定到 transition 上，并且我把 transition 封装成了一个自定义组件。这个生命周期，导致后续的事件触发走了优化，不必再执行繁琐的动画。但是对于我来说，我需要这个动画。其实走到这里，解决方案就一目了然了。就是组件被销毁了，就不用再执行复杂的动画了。几经周折之下，我就去看了一下 vue transition 的代码。一个非常简单的自定义路由，我现在要给他加一个动画。我们可以发现，是因为触发了。
2025-05-13 10:48:03
294
原创 Flutter 前台服务：看似简单？小心这几个坑让你“翻车”！
好嘞，各位未来的 Flutter 大神们，今天咱们聊个接地气的话题。想象一下，你正在用 Flutter 开发一个贼牛的音乐播放器，或者一个能实时记录你跑步轨迹的 App。用户一切后台，或者锁屏了，你那引以为傲的功能可不能就这么歇菜了，对吧？这时候，"前台服务" (Foreground Service) 就像救世主一样出现了。它能让你的 App 在后台也能“光明正大”地干活，还能在通知栏给用户一个交代：“爷还在运行呢！听起来是不是挺美？嘿，我当初也是这么想的，以为分分钟搞定。结果呢？
2025-05-13 10:47:31
762
原创 Lodash源码阅读-size
size函数用于获取集合(collection)的大小，适用于多种数据类型，包括数组、字符串、对象、Map 和 Set。它通过不同的方法准确计算各种集合类型的元素数量，为开发者提供统一的 API 接口确定集合大小，而无需关心具体集合类型。使用宽松相等(==)检查 null/undefined，减少代码冗余采用类型检测分派策略，对不同集合类型使用最优的大小计算方法特殊处理字符串，确保 Unicode 字符计数准确性利用 ES6 集合类型的内置属性，避免不必要的转换操作结合和length。
2025-05-13 10:46:56
813
原创 CSS：让网页从裸奔到维密大秀的致命诱惑[特殊字符]
本次「盒子模型」的探索，我们揭开了元素尺寸计算的底层逻辑。通过，你已获得精确控制元素总宽高的能力实战价值: 从此告别布局撑爆的玄学问题开发效率: 少算10px=多摸1分钟鱼🐟（老板：？进阶预兆: 理解盒模型，才能征服flexgrid等现代布局链接：https://juejin.cn/post/7502618987068735515。
2025-05-12 17:28:18
947
原创 用一段20行代码，彻底搞懂节流：窗口resize时的背景变色实验
最近做前端页面时，遇到一个挺有意思的需求：用户调整窗口大小时，页面背景色随机变化。本以为是个简单功能，结果测试时发现：当用户拖动窗口边缘快速调整大小时，背景色疯狂闪烁——1秒内竟变了10几次！这不仅亮瞎了我的钛合金眼，更导致浏览器CPU占用飙升。之前写了一篇关于防抖的博客，今天就讲讲它的好哥们「节流（Throttle）」今天就用这个案例，带大家从问题出发，通过一段20行的代码，彻底搞懂节流的核心逻辑和实际应用。在高频事件中，控制目标函数的执行频率，既保证用户体验，又降低性能消耗。节流的本质。
2025-05-12 17:27:38
543
原创 i18n在NextJS中路径国际化跳转方案对比
场景如果没有有它之后用户访问/a/b❌ 报 404（因为没有✅ 自动 302 跳转到/zh/a/b或/en/a/b用户访问静态资源✅ 正常✅ 依然正常，不会被重定向用户访问/zh/a/b✅ 正常✅ 正常，不触发重定向判断语言方式只能靠客户端/中间件读取 cookie✅ 优先用接口、然后 cookie。
2025-05-12 17:27:04
730
原创 30 行代码带你实现 p-limit 并发控制
最近笔者在做大文件的分片上传，为了提高文件分片的传输效率，通常需要使用浏览器的请求并发能力。但是浏览器的请求并发量是有限制的，像 Chrome、Firefox的并发量是 6，为了解决分片上传的性能问题同时兼顾其他请求正常执行，需要对文件分片上传做并发控制。当前最受欢迎的并发控制器即p-limit，下面是笔者通过借鉴 p-limit 实现的并发控制器。
2025-05-12 17:26:22
629
原创 [ Javascript 面试题 ]：提取对应的信息，并给其赋予一个颜色，保持幂等性
一开始我想着用 Map 来存储运营商与颜色的映射，但这样只要重新传入不同数组，颜色的对应就会改变，无法保证幂等性。有一不定长的数组，里面存有的元素是字符串的形式，每个字符串包含运营商与 IP 地址的信息（用。我们希望每个运营商都有一个对应的颜色，即使每次重新运行，传入不同的数组，该颜色对应都不改变。链接：https://juejin.cn/post/7497821245611769906。先处理最简单的部分，将 ip 和 运营商 分割（使用。：相同的输入字符串总是产生相同的输出颜色。
2025-04-28 10:57:49
169
原创 Three.js-硬要自学系列17 (拉伸、扫描、多边形轮廓简介、轮廓圆弧、多边形内孔)
多边形轮廓」可以理解为通过一组二维顶点坐标生成平面或立体形状的边缘线条，类似用绳子绕着一圈钉子勾勒出形状。下面是一个简单的例子js代码解读复制代码。
2025-04-28 10:57:19
853
原创 mitt 事件发布-订阅库在 react 中的使用
mitt是一个轻量级的事件发布 - 订阅库，在 React 项目里，使用它能实现组件间的通信。
2025-04-28 10:56:48
433
原创 前端工程化&&Webpack 和 Vite 的区别
前端工程化是指通过工具、流程和规范，将前端开发从手工模式转向自动化、标准化和可维护的模式。链接：https://juejin.cn/post/7497875309002866698。：Vite 是未来趋势，但 Webpack 仍是老大哥！：对旧浏览器支持有限，生态不如 Webpack 成熟。目标是提升开发效率、代码质量和团队协作能力。：开发体验极佳，启动快，适合现代前端项目。：生态强大，适合大型复杂项目。：启动和热更新慢，配置复杂。Webpack 是一个。
2025-04-28 10:56:08
943
原创 DOM 移动大法！✨ moveBefore API 探秘 & 实战 (≧∇≦)/
moveBeforeAPI 提供了一种更直观的方式来在同一个父节点内移动子节点到指定位置之前。它的语法简洁，意图明确。然而，由于它并非广泛支持的标准 API，目前更像是一个有趣的提案或实验性功能。在实际开发中，小编仍然推荐使用稳定且兼容性良好的和或等的组合，就是麻烦一点。😑希望这次的探索之旅让你对 DOM 操作有了新的认识！如果你有任何想法或者发现了moveBefore的最新动态，欢迎在评论区分享！下次再见！👋👋👋至此，本篇文章就写完啦，撒花撒花。
2025-04-24 11:38:52
575
原创 Java 类和对象 - 使用对象
创建对象后，接下来的任务是如何使用它们。你可能会访问对象的字段、修改它们，或者调用对象的方法来执行某些操作。对象，然后直接获取它的高度。但因为没有保存这个对象的引用，执行完这句代码后，这个对象会成为。对象的字段可以通过字段名访问，但访问的方式取决于你是在对象的内部还是外部。这段代码先创建了一个宽100、高50的矩形对象，然后获取它的面积并保存到。，编译器会报错，因为这些字段属于具体的对象，而不是当前类。访问字段是一种静态的操作，而调用方法则是让对象“动”起来！即使是相同类型的对象，它们的字段也是独立的。
2025-04-24 11:37:40
282
原创 Vue 生态中 Vite 与 Webpack 插件编写对比：理念、机制与实践
随着前端构建工具的演进，Vite正在逐步取代Webpack成为Vue项目的主力构建器。但当我们在业务中需要扩展构建能力（如自动注入虚拟模块资源替换等），就离不开插件系统。那么，Vite和Webpack的插件机制到底有什么不同？我们如何编写一个适配Vue的插件？这篇文章我们来系统对比，并给出真实代码示例。
2025-04-24 11:37:09
816
原创 Next.js 全页面缓存实践：如何为 SSR 页面提速而不失新鲜度
毫秒级响应：CDN 边缘节点直出 HTML零感知刷新：后台静默再生内容全球化覆盖：自动就近分发48拉西，极致的加载速度~
2025-04-24 11:36:37
917
原创 Vue 虚拟 DOM 的本质与引入原因详解及示例代码
代码中使用的函数 h 用于快速构建虚拟DOM节点，通过 createElement 函数将虚拟DOM转换为真实DOM元素，diff 函数对比新旧虚拟DOM节点，并返回更新补丁对象，patch 函数根据补丁对真实DOM进行修改。这种抽象表示能够在内存中高效地进行更新与比较，从而在数据发生改变时，只对需要更新的部分进行真正的DOM操作。借助虚拟DOM的实现，前端开发能够实现更加流畅的用户体验，当数据频繁变化或用户交互强烈时，虚拟DOM能够避免过多的直接操作真实DOM，从而避免由大量重排重绘导致的卡顿问题。
2025-04-24 11:36:04
957
原创 Vue组件化开发三
通过组件化，我们可以将不同的功能模块封装成独立的组件，并在不同的地方复用。在大型应用中，一开始加载所有的组件可能会影响页面的加载性能。Vue支持异步组件的加载，可以在需要时才加载组件，避免一次性加载过多资源。扩展名，将模板、脚本和样式封装在一文件中，通过这种方式，可以让每一个组件在同一个文件里组织得更加清晰和易于维护。，你可以把按钮的模板、样式和事件逻辑封装在一个组件里，然后在其他页面中复用。属性必须是一个有效的组件名称，或者是一个指向组件的对象。动态绑定组件名，可以实现组件的动态切换。
2025-04-23 10:41:35
343
原创 高频面试算法题 | 轮转数组(JavaScript最优解)
再见!原文：https://juejin.cn/post/7496021617349918772。
2025-04-23 10:41:04
338
原创 使用 Driver.js 指引时遮挡 fixed 元素的问题与解决方案
Driver.js 在处理元素时可能出现层级遮挡的问题，主要由于遮罩层 z-index 较高导致目标元素被覆盖。通过使用透明背景和outline替代默认遮罩样式，可以在不干扰页面结构的前提下修复该问题，确保高亮内容可见。原文：https://juejin.cn/post/7495955310965833747。
2025-04-23 10:39:50
528
原创 WC！一键微信聊天记录MCP！老板监工神器！
ChatLog 是一款开源的聊天记录分析工具，能够帮助用户高效解析、可视化和挖掘聊天数据中的关键信息。它支持从本地数据库文件获取微信、QQ、Telegram 等主流聊天工具的聊天记录，并通过、等功能，帮助用户更好地管理和利用这些数据。无论是个人社交分析、团队协作优化，还是商业场景的客户对话洞察，ChatLog 都能提供强大的支持。ChatLog 提供了两种方式安装，一种是直接下载预编译版直接安装，另外一种就是下载源码方式安装bash代码解读复制代码对于大部分人来说，直接使用 预编译版 就能满足大部分
2025-04-23 10:39:15
678
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人