- 博客(75)
- 收藏
- 关注
RSS订阅
原创 2025Web前端八股面试题，精选题型，附带详细答案解析，堪称最强题库
2025面试前必看web前端八股文题库！25年准备换工作或者想要跳槽的小伙伴快来看啊！
2025-05-26 14:35:50
837
原创 2025最新高频有答案的前端面试题
弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中flex属性是flex-grow和flex-basis的简写。
2025-05-12 17:30:11
1684
原创 其实25年前端面试很水的，说一下现在面试强度...
十几场前端面试之旅，让我深刻认识到自身不足，也为未来的面试指明了方向，场景题可以说是必刷的，这不我把面试常问的场景题都整理出来了，快去背吧。不知道近期去面试Web前端的小伙伴有没有发现，面试官已经不问八股文了，基本都是问场景题，场景题没准备好的话，面试真的很难过。面试还是以考察场景题为主，其实问得题目都大差不差，只要针对一些常考题目，结合项目知识进行拆解背记，面试真的不算难！4.使用同一个链接，如何实现PC打开是web应用、手机打开是一个H5 应用？23.html中前缀为data-开头的元素属性是什么?
2025-04-28 11:05:46
954
原创 来自大厂 1000+ 道前端面试题大全附答案（整理版）~~全面详细
对于Web前端的朋友来说应该是最全面最完整的面试备战仓库，为了更好地整理每个模块，我也参考了很多网上的优质博文和项目，力求不漏掉每一个知识点，很多朋友靠着这些内容进行复习，拿到了BATJ等大厂的offer， 也已经帮助了很多的前端学习者，希望也能帮助到你【丸整看文末】以上的Web前端知识面试题（2025最新版）仅仅是起到一个抛转引玉的作用 前端各种面试题多种多样 如果大家对以上感兴趣的话欢迎找我领取资料呀！由于篇幅有限，先截图到这里，其余的答案小编整理成了完整的PDF。
2025-04-22 14:36:14
1310
原创 拿到大厂前端在职大佬整理的学习笔记，帮我搞定90%的前端面试！
激动的心颤抖的手，看着百度大佬整理的学习，嘴巴都要笑裂开了，别问哪来的，问就是我有个朋友哈哈哈哈哈。本着独乐乐不如众乐乐的心，小编把这份学习笔记分享出来，一起感受百度前端大佬的厉害！每个知识点都有左侧导航书签页，看的时候十分方便，由于内容较多，这里就截取一部分图吧有需要完整版的看文末获取。
2025-04-18 14:57:35
1003
原创 2025Web前端八股面试（含答案，万字总结，精心打磨，建议收藏）堪称2025最强
更好的性能：Vue.js 3的动画系统使用了更高效的动画引擎，提供了更好的性能。更简洁的语法：Vue.js 3的动画系统使用了更简洁的语法，使得动画的定义和使用更加直观和方便。支持更多的动画特性：Vue.js 3的动画系统支持更多的动画特性，如交互式动画和更复杂的动画效果。答案：静态提升是Vue.js 3中的一项优化技术，通过在编译阶段将静态节点提升为常量，从而减少了运行时的开销。相比之下，Options API是Vue.js 2中常用的组织组件逻辑的方式，通过选项对象中的属性来定义组件的数据、方法等。
2025-04-15 10:41:11
2168
原创 this的绑定规则
箭头函数没有自己的this，箭头函数的this是继承自外层作用域的this。情况一：我们传入一个null 或 undefined 那么这个显示绑定就会被忽略，使用默认规则。原文：https://juejin.cn/post/7507835962337853450。new 绑定 >bind > call/apply > 隐式绑定 > 默认绑定。带个疑问：我们采用三种方式对函数进行调用，为啥产生了三种不同的结果。不能作为构造函数来使用（不能和new一起来使用， 会抛出错误）；箭头函数是es6 新增的写法。
2025-05-26 14:38:01
213
原创 [特殊字符]我怎么让设计师不再嫌弃 Antd，后台系统也能高端大气上档次
如果一个团队计划开发一个面向 B 端的管理后台系统，既希望具备高效开发能力，又想要拥有好看的 UI，避免千篇一律的“土味”风格，而你作为前端主程参与开发，会怎么做？本文将分享我在这一方向上的思考与实践。虽然目前所在公司的 B 端系统已经迭代许多内容，短期内没有设计师人力支持我推行这套方法，但我依然希望能将这套思路分享给有类似困扰的朋友。如果未来我有机会从零带队启动新项目，我依旧会沿用这一套方案。
2025-05-26 14:37:31
295
原创 [特殊字符] 从“hello world”到“world hello”：JavaScript 字符串反转的奇妙之旅
今天我们从最基础的字符串反转出发，一路穿越了 JS 的包装类机制、语法风格、性能优化、面试技巧等多个维度。希望你在轻松幽默的氛围中学到了不少干货！方法特点适用场景简洁优雅快速实现手动循环拼接展示底层逻辑面试提问数组缓冲拼接性能更优大文本处理模板字符串书写方便动态拼接“字符串虽短，人生很长；代码虽小，梦想很大。下次你再遇到“反转字符串”的问题，别只想着一行代码搞定它，试着去理解背后的故事吧！😎。
2025-05-26 14:37:00
884
原创 2025 年前端开发趋势
这是我基于当前技术发展趋势下的看法，在技术进步、用户期望的改变以及对更加高效工作流程的需求的推动下，前端开发者正在采用新的工具、框架和范例来创造沉浸式、高性能和可访问的网络体验。
2025-05-26 14:36:25
662
原创 掌握 Flutter 中的 Scrollable
可以将通知向上发送到Widget树。Flutter会在滚动、大小变化和布局变化等事件上发送通知。换句话说，每当某个东西滚动或改变其大小时，祖先都会收到通知。让我们看看滚动时发送的通知里面有什么。dart体验AI代码助手代码解读复制代码首先，我们来关注一下。这是相对于之前状态，滚动位置增加的像素数。如果为正，则表示用户沿着主方向滚动；如果为负，则表示用户向后滚动。如果我们深入研究metrics的内容，会发现很多有用的数据。让我们将这些数据可视化。
2025-05-14 11:07:38
800
原创 解决开发uni-app小程序，组件使用小程序插件
在开发uni-app小程序时，会遇到在自定义组件使用小程序的插件，但是uni-app和原生的小程序不一样，没有usingComponents入口引入插件，有没有什么办法？1、在你自定义的组件中，去使用插件，并不能向上方那样去使用，你会发现，当你的组件引入到某个页面时，所使用的插件不生效，这时该怎么解决呢，很简单。2、在pages.json中，定义好你页面的路由时，直接使用usingComponents。1、如果你的插件实在某个页面去使用，那你可以现在manifest.json中定义好插件。
2025-05-14 11:07:04
468
原创 高效前端开发：使用 unplugin-auto-import 实现依赖自动导入
同理，我们也可以将自定义的枚举或函数注入到全局。typescript体验AI代码助手代码解读复制代码这是一个简单但功能强大的配置方案，可以极大地提升前端开发体验和效率。它适用于各种规模的 Vue、React 或其他前端项目，你可以根据项目需求灵活调整需要自动导入的内容。🚀 希望这个小技巧能帮助大家提高工作效率，早点下班，永不加班！链接：https://juejin.cn/post/7503769523947044904。
2025-05-14 11:06:28
715
原创 React Diff 算法：从“卡顿时代”到“丝滑未来”的逆袭之路 [特殊字符]
想象一下：你正在刷一个电商页面，疯狂点击“加载更多”按钮，但页面却像被冻住一样毫无反应——这就是 React 早期面临的“卡顿噩梦”！而这一切的破局者，正是Diff 算法。它从传统 O(n³) 的“龟速”进化到 O(n) 的“光速”，甚至让 React 18 的并发渲染成为可能。今天，我们从源码到实战，揭开这场“性能革命”的底层逻辑！
2025-05-14 11:05:48
722
原创 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
383
原创 从Vue源码看Transition组件优化导致leave不触发问题
首先，我考虑的是 缓存，是不是因为 component 重复，导致没有触发更改。这个事件，绑定到 transition 上，并且我把 transition 封装成了一个自定义组件。这个生命周期，导致后续的事件触发走了优化，不必再执行繁琐的动画。但是对于我来说，我需要这个动画。其实走到这里，解决方案就一目了然了。就是组件被销毁了，就不用再执行复杂的动画了。几经周折之下，我就去看了一下 vue transition 的代码。一个非常简单的自定义路由，我现在要给他加一个动画。我们可以发现，是因为触发了。
2025-05-13 10:48:03
242
原创 Flutter 前台服务：看似简单？小心这几个坑让你“翻车”！
好嘞，各位未来的 Flutter 大神们，今天咱们聊个接地气的话题。想象一下，你正在用 Flutter 开发一个贼牛的音乐播放器，或者一个能实时记录你跑步轨迹的 App。用户一切后台，或者锁屏了，你那引以为傲的功能可不能就这么歇菜了，对吧？这时候，"前台服务" (Foreground Service) 就像救世主一样出现了。它能让你的 App 在后台也能“光明正大”地干活，还能在通知栏给用户一个交代：“爷还在运行呢！听起来是不是挺美？嘿，我当初也是这么想的，以为分分钟搞定。结果呢？
2025-05-13 10:47:31
519
原创 Lodash源码阅读-size
size函数用于获取集合(collection)的大小，适用于多种数据类型，包括数组、字符串、对象、Map 和 Set。它通过不同的方法准确计算各种集合类型的元素数量，为开发者提供统一的 API 接口确定集合大小，而无需关心具体集合类型。使用宽松相等(==)检查 null/undefined，减少代码冗余采用类型检测分派策略，对不同集合类型使用最优的大小计算方法特殊处理字符串，确保 Unicode 字符计数准确性利用 ES6 集合类型的内置属性，避免不必要的转换操作结合和length。
2025-05-13 10:46:56
760
原创 CSS：让网页从裸奔到维密大秀的致命诱惑[特殊字符]
本次「盒子模型」的探索，我们揭开了元素尺寸计算的底层逻辑。通过，你已获得精确控制元素总宽高的能力实战价值: 从此告别布局撑爆的玄学问题开发效率: 少算10px=多摸1分钟鱼🐟（老板：？进阶预兆: 理解盒模型，才能征服flexgrid等现代布局链接：https://juejin.cn/post/7502618987068735515。
2025-05-12 17:28:18
827
原创 用一段20行代码，彻底搞懂节流：窗口resize时的背景变色实验
最近做前端页面时，遇到一个挺有意思的需求：用户调整窗口大小时，页面背景色随机变化。本以为是个简单功能，结果测试时发现：当用户拖动窗口边缘快速调整大小时，背景色疯狂闪烁——1秒内竟变了10几次！这不仅亮瞎了我的钛合金眼，更导致浏览器CPU占用飙升。之前写了一篇关于防抖的博客，今天就讲讲它的好哥们「节流（Throttle）」今天就用这个案例，带大家从问题出发，通过一段20行的代码，彻底搞懂节流的核心逻辑和实际应用。在高频事件中，控制目标函数的执行频率，既保证用户体验，又降低性能消耗。节流的本质。
2025-05-12 17:27:38
500
原创 i18n在NextJS中路径国际化跳转方案对比
场景如果没有有它之后用户访问/a/b❌ 报 404（因为没有✅ 自动 302 跳转到/zh/a/b或/en/a/b用户访问静态资源✅ 正常✅ 依然正常，不会被重定向用户访问/zh/a/b✅ 正常✅ 正常，不触发重定向判断语言方式只能靠客户端/中间件读取 cookie✅ 优先用接口、然后 cookie。
2025-05-12 17:27:04
530
原创 30 行代码带你实现 p-limit 并发控制
最近笔者在做大文件的分片上传，为了提高文件分片的传输效率，通常需要使用浏览器的请求并发能力。但是浏览器的请求并发量是有限制的，像 Chrome、Firefox的并发量是 6，为了解决分片上传的性能问题同时兼顾其他请求正常执行，需要对文件分片上传做并发控制。当前最受欢迎的并发控制器即p-limit，下面是笔者通过借鉴 p-limit 实现的并发控制器。
2025-05-12 17:26:22
546
原创 [ Javascript 面试题 ]：提取对应的信息，并给其赋予一个颜色，保持幂等性
一开始我想着用 Map 来存储运营商与颜色的映射，但这样只要重新传入不同数组，颜色的对应就会改变，无法保证幂等性。有一不定长的数组，里面存有的元素是字符串的形式，每个字符串包含运营商与 IP 地址的信息（用。我们希望每个运营商都有一个对应的颜色，即使每次重新运行，传入不同的数组，该颜色对应都不改变。链接：https://juejin.cn/post/7497821245611769906。先处理最简单的部分，将 ip 和 运营商 分割（使用。：相同的输入字符串总是产生相同的输出颜色。
2025-04-28 10:57:49
135
原创 Three.js-硬要自学系列17 (拉伸、扫描、多边形轮廓简介、轮廓圆弧、多边形内孔)
多边形轮廓」可以理解为通过一组二维顶点坐标生成平面或立体形状的边缘线条，类似用绳子绕着一圈钉子勾勒出形状。下面是一个简单的例子js代码解读复制代码。
2025-04-28 10:57:19
733
原创 mitt 事件发布-订阅库在 react 中的使用
mitt是一个轻量级的事件发布 - 订阅库，在 React 项目里，使用它能实现组件间的通信。
2025-04-28 10:56:48
329
原创 前端工程化&&Webpack 和 Vite 的区别
前端工程化是指通过工具、流程和规范，将前端开发从手工模式转向自动化、标准化和可维护的模式。链接：https://juejin.cn/post/7497875309002866698。：Vite 是未来趋势，但 Webpack 仍是老大哥！：对旧浏览器支持有限，生态不如 Webpack 成熟。目标是提升开发效率、代码质量和团队协作能力。：开发体验极佳，启动快，适合现代前端项目。：生态强大，适合大型复杂项目。：启动和热更新慢，配置复杂。Webpack 是一个。
2025-04-28 10:56:08
702
原创 DOM 移动大法！✨ moveBefore API 探秘 & 实战 (≧∇≦)/
moveBeforeAPI 提供了一种更直观的方式来在同一个父节点内移动子节点到指定位置之前。它的语法简洁，意图明确。然而，由于它并非广泛支持的标准 API，目前更像是一个有趣的提案或实验性功能。在实际开发中，小编仍然推荐使用稳定且兼容性良好的和或等的组合，就是麻烦一点。😑希望这次的探索之旅让你对 DOM 操作有了新的认识！如果你有任何想法或者发现了moveBefore的最新动态，欢迎在评论区分享！下次再见！👋👋👋至此，本篇文章就写完啦，撒花撒花。
2025-04-24 11:38:52
533
原创 Java 类和对象 - 使用对象
创建对象后，接下来的任务是如何使用它们。你可能会访问对象的字段、修改它们，或者调用对象的方法来执行某些操作。对象，然后直接获取它的高度。但因为没有保存这个对象的引用，执行完这句代码后，这个对象会成为。对象的字段可以通过字段名访问，但访问的方式取决于你是在对象的内部还是外部。这段代码先创建了一个宽100、高50的矩形对象，然后获取它的面积并保存到。，编译器会报错，因为这些字段属于具体的对象，而不是当前类。访问字段是一种静态的操作，而调用方法则是让对象“动”起来！即使是相同类型的对象，它们的字段也是独立的。
2025-04-24 11:37:40
238
原创 Vue 生态中 Vite 与 Webpack 插件编写对比：理念、机制与实践
随着前端构建工具的演进，Vite正在逐步取代Webpack成为Vue项目的主力构建器。但当我们在业务中需要扩展构建能力（如自动注入虚拟模块资源替换等），就离不开插件系统。那么，Vite和Webpack的插件机制到底有什么不同？我们如何编写一个适配Vue的插件？这篇文章我们来系统对比，并给出真实代码示例。
2025-04-24 11:37:09
666
原创 Next.js 全页面缓存实践：如何为 SSR 页面提速而不失新鲜度
毫秒级响应：CDN 边缘节点直出 HTML零感知刷新：后台静默再生内容全球化覆盖：自动就近分发48拉西，极致的加载速度~
2025-04-24 11:36:37
749
原创 Vue 虚拟 DOM 的本质与引入原因详解及示例代码
代码中使用的函数 h 用于快速构建虚拟DOM节点，通过 createElement 函数将虚拟DOM转换为真实DOM元素，diff 函数对比新旧虚拟DOM节点，并返回更新补丁对象，patch 函数根据补丁对真实DOM进行修改。这种抽象表示能够在内存中高效地进行更新与比较，从而在数据发生改变时，只对需要更新的部分进行真正的DOM操作。借助虚拟DOM的实现，前端开发能够实现更加流畅的用户体验，当数据频繁变化或用户交互强烈时，虚拟DOM能够避免过多的直接操作真实DOM，从而避免由大量重排重绘导致的卡顿问题。
2025-04-24 11:36:04
878
原创 Vue组件化开发三
通过组件化，我们可以将不同的功能模块封装成独立的组件，并在不同的地方复用。在大型应用中，一开始加载所有的组件可能会影响页面的加载性能。Vue支持异步组件的加载，可以在需要时才加载组件，避免一次性加载过多资源。扩展名，将模板、脚本和样式封装在一文件中，通过这种方式，可以让每一个组件在同一个文件里组织得更加清晰和易于维护。，你可以把按钮的模板、样式和事件逻辑封装在一个组件里，然后在其他页面中复用。属性必须是一个有效的组件名称，或者是一个指向组件的对象。动态绑定组件名，可以实现组件的动态切换。
2025-04-23 10:41:35
247
原创 高频面试算法题 | 轮转数组(JavaScript最优解)
再见!原文：https://juejin.cn/post/7496021617349918772。
2025-04-23 10:41:04
287
原创 使用 Driver.js 指引时遮挡 fixed 元素的问题与解决方案
Driver.js 在处理元素时可能出现层级遮挡的问题，主要由于遮罩层 z-index 较高导致目标元素被覆盖。通过使用透明背景和outline替代默认遮罩样式，可以在不干扰页面结构的前提下修复该问题，确保高亮内容可见。原文：https://juejin.cn/post/7495955310965833747。
2025-04-23 10:39:50
421
原创 WC！一键微信聊天记录MCP！老板监工神器！
ChatLog 是一款开源的聊天记录分析工具，能够帮助用户高效解析、可视化和挖掘聊天数据中的关键信息。它支持从本地数据库文件获取微信、QQ、Telegram 等主流聊天工具的聊天记录，并通过、等功能，帮助用户更好地管理和利用这些数据。无论是个人社交分析、团队协作优化，还是商业场景的客户对话洞察，ChatLog 都能提供强大的支持。ChatLog 提供了两种方式安装，一种是直接下载预编译版直接安装，另外一种就是下载源码方式安装bash代码解读复制代码对于大部分人来说，直接使用 预编译版 就能满足大部分
2025-04-23 10:39:15
334
原创 React Hooks 的优势和使用场景
React Hooks 通过提供更简单、更直观的方式来处理状态和副作用，极大地改善了React开发体验。新项目开发重构旧有类组件需要共享状态逻辑的场景需要精细控制副作用的场景掌握Hooks的关键在于理解其设计理念：将UI视为状态的函数，并通过声明式的方式描述状态变化如何影响UI。随着React生态的发展，Hooks已经成为现代React开发的标配。原文：https://juejin.cn/post/7495640498536235060。
2025-04-22 14:29:42
296
原创 JavaScript 混入模式详解：显式混入 vs 隐式混入
混入是一种通过组合而非继承来实现代码复用的技术。在 JavaScript 这种基于原型的语言中，混入提供了一种灵活的方式来共享行为。混入模式是 JavaScript 中强大的代码复用工具。显式混入简单直接，适合简单场景；隐式混入更加灵活高效，适合复杂系统。开发者应根据具体需求选择合适的混入策略，并注意避免常见的陷阱。混入模式（无论是显式还是隐式）可以用来模拟类的复制行为。
2025-04-22 14:29:04
618
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人