- 博客(393)
- 收藏
- 关注
RSS订阅原创 微前端知识内容
Shared State（全局状态管理）：使用 qiankun 提供的 initGlobalState，或者采用 Redux、Pinia 等库共享状态。registerMicroApps() 方法用于注册子应用，配置 name、entry、container、activeRule 等参数。如果你有特定项目上的挑战，也可以详细探讨。主要基于 single-spa，并进行二次封装，提供更好的 应用加载管理、沙箱隔离、应用通信 能力。通过劫持路由（Hash/History），监听路径变化，加载对应的子应用。
2025-04-01 22:41:42
6
原创 vuex和pinia区别
Pinia 采用的是函数式 API，直接基于 defineStore 创建 store，类型可以被 TypeScript 自动推导，无需手动定义复杂的类型。doubleCount: (state) => state.count * 2, // ✅ 自动推导 doubleCount 为 number。Pinia 通过更好的类型推导、自动识别 state 和 getter，减少了对手动声明类型的依赖，使 TypeScript 支持更加友好。// ✅ this 直接访问 state。// ✅ 自动识别方法类型。
2025-04-01 21:29:22
475
原创 2025.3.30前端模拟面试
介绍一下 Composition API 和 Options API 的区别，为什么 Vue 3 推荐使用 Composition API？说说 Event Loop 机制，setTimeout 和 Promise 在事件循环中的执行顺序是什么？手写一个 LRU 缓存，要求支持 get 和 put 方法，put 需要保证超出容量时淘汰最久未使用的项。手写一个 Promise.all 实现，支持所有传入的 Promise 并行执行，返回一个数组结果。如果让你设计一个前端架构，你会做哪些决策？
2025-04-01 11:55:49
283
原创 css_z-index属性
z-index 只能作用于 position 为 relative、absolute、fixed 或 sticky 的元素，static（默认值）无效。.parent 的 z-index: 2 高于 .sibling 的 z-index: 1，所以 .parent 覆盖 .sibling。注意：层叠上下文内的元素只能相互比较 z-index，不会受外部 z-index 影响。层叠上下文会隔离 z-index，内部的 z-index 无法超出父级的层叠上下文。
2025-03-31 21:30:45
199
原创 Teleport场景及原理
在 Vue 3 的虚拟 DOM 渲染过程中，Teleport 组件会在 patch 阶段 处理 VNode，并将其内容渲染到 to 指定的 DOM 位置，而非原组件层级。// 解析目标 DOM。Vue 不会 直接更新 Teleport 本身，而是 更新目标 DOM 位置的内容，避免不必要的重新渲染。作用：Teleport 允许 Vue 组件的部分 DOM 结构被渲染到 Vue 组件树之外的指定位置。当 Teleport 组件卸载时，会清理其 children 并移除目标 DOM 位置的内容。
2025-03-30 16:55:33
442
原创 3.29前端模拟面试
好的，我会按照Vue 3 + TypeScript + 微前端（qiankun）的方向进行模拟面试，并结合你的项目经验和场景化手写代码题，确保问题具备一定的深度和挑战性。（例如子应用间通信、全局状态管理、样式隔离问题）你是如何解决的？多结合项目经验：回答问题时，结合你的实际项目经历，让面试官知道你不仅理解概念，还能在项目中落地。function throttle(fn, delay) { /* 实现 */ }function debounce(fn, delay) { /* 实现 */ }
2025-03-29 23:04:34
451
原创 2025.3.29-2025.8.29前端学习计划
目标：在 5 个月内掌握 Vue3 源码、TypeScript 高级用法、微前端（qiankun）、Node.js、前端性能优化、地图 & WebGL，为跳槽到顶级前端团队做好准备。Week 2（4.8 - 4.14）：Vue3 Virtual DOM & Diff 算法。Week 4（4.22 - 4.30）：Vue3 插件 & Vite 项目优化。Week 12（6.22 - 6.30）：Node.js 项目优化。Week 20（8.22 - 8.31）：最终总结 & 项目完善。
2025-03-29 04:06:06
54
原创 地图项目入手学习
• 如果有轨迹回放：是否有 setInterval 或 requestAnimationFrame 更新坐标点？• 如果有标记点：看 addMarker 是怎么实现的？• 如果有热力图：用的 HeatMapLayer 还是自己画的 Canvas？目标：用 Vue 3 + 你的地图库（如高德地图）实现基本功能。目标：先大致了解你的地图项目代码，找到核心实现逻辑。• 是否有 点标记、轨迹回放、热力图、区域覆盖物？目标：写一篇总结，整理你学到的内容，加深理解。• 是否有 地图组件（Map.vue）？
2025-03-28 16:23:19
264
原创 异步的场景
异步编程最常见的场景之一是发起 网络请求。在文件读取、写入操作时，尤其是涉及大量文件的操作，异步编程是非常重要的。例如，批量处理多个任务（如批量发送请求、同时执行多个计算）时，可以使用异步来避免阻塞主线程，从而提高程序的效率。对于一些需要长时间运行的任务（如复杂计算、大数据处理等），异步编程可以避免阻塞主线程或 UI 线程，提升应用响应性。通过异步编程，可以避免阻塞主线程，提高应用的响应速度和性能，尤其是在处理耗时操作时尤为重要。许多异步操作依赖于定时器的使用，例如：定时任务、轮询操作、动画的定时执行等。
2025-03-28 00:51:59
546
原创 TypeScript和JavaScript的区别
TypeScript（简称 TS）是 JavaScript（简称 JS）的超集，它对 JavaScript 进行了扩展，提供了更强的类型检查和其他功能。TypeScript 是 静态类型的语言，这意味着在编译阶段，开发者可以指定变量、函数参数和返回值的类型，编译器会在编译时进行类型检查。JavaScript 仅支持基本类型和对象，不支持 TypeScript 中的联合类型、交叉类型等高级类型。age = ‘30’;JavaScript 是 动态类型的语言，变量的类型可以在运行时变化，缺少编译时的类型检查。
2025-03-28 00:48:31
857
原创 cdn原理和作用
容灾与冗余：CDN 系统在多个节点缓存内容，即使某个节点或源站发生故障，CDN 也可以自动将请求路由到其他正常工作的节点，确保内容的高可用性。减少延迟：CDN 将内容分发到离用户最近的节点，缩短数据传输的物理距离，从而减少网络延迟，提高访问速度。适应不同网络条件：CDN 的边缘节点通过对本地网络的优化，能够在不同的网络环境下提供更稳定的内容传输。分布式缓存：通过将内容缓存到全球多个节点，即使在远离源站的地区，用户也能享受到快速的访问体验。CDN 通过将内容缓存到全球各地的多个边缘节点，提供高效的内容分发。
2025-03-28 00:41:50
282
原创 前端性能优化思路_场景题
在高并发场景下，最重要的是减少不必要的 DOM 更新，减少 WebSocket 消息量，并利用 CDN、虚拟列表、Canvas 渲染弹幕 提高性能。20 万人同时在直播间打赏，前端优化需要考虑高并发、性能优化、流畅体验等问题，涉及 WebSocket 处理、消息去抖、虚拟列表优化、动画优化、CDN 加速 等多个方面。WebSocket 可以实现实时通信，只在有数据更新时推送，提高效率。效果：每 300ms 更新一次 UI，减少渲染次数，提高性能。合并消息：同一秒内的多条打赏消息可以合并，减少通信压力。
2025-03-28 00:38:26
613
原创 优化webpack打包体积思路
你已经有 Webpack 迁移到 Rspack 的经验，可以考虑直接用 Rspack，它的构建速度更快，尤其适用于 Vue 3 项目。如果 Webpack 打包特别大，可以从以下几方面优化： ✅ 按需加载（路由懒加载、组件懒加载、动态 import()）这样 node_modules 里的库会被打包成一个独立的 vendors.js，浏览器可以缓存它，不用每次都下载。如果你的 Webpack 构建速度慢，考虑直接迁移到 Rspack，你之前已经做过类似的迁移，应该很容易上手！
2025-03-28 00:35:20
972
原创 Axios核心原理
从外部使用上，Axios 提供了标准的 Promise 语法，可以使用 .then() 处理成功结果，使用 .catch() 处理错误，还可以使用 .finally() 进行清理工作。因此，Axios 是 基于 Promise 设计的 HTTP 客户端，它利用 Promise 提供的链式调用、错误处理、并发能力，让网络请求管理更加优雅。axios.all() 的本质是基于 Promise.all()，它会并行执行多个请求，并在所有请求完成后返回结果。
2025-03-28 00:26:38
636
原创 node.js学习
由于你已有前端基础（Vue 3 + TypeScript），可以更快地上手 Node.js。文件读写（fs.readFile / fs.writeFile / fs.promises）Node.js 模块化（module.exports vs exports）3.1 数据库操作（MongoDB / MySQL）（第 15-16 天）事件循环（Event Loop）& 任务队列（微任务 vs 宏任务）Node.js 内置模块（fs、path、os、crypto）
2025-03-28 00:15:57
161
原创 3.28前端模拟面试
针对你 1.5 年的前端经验，结合 Vue 3、TypeScript、微前端（qiankun）等背景，我准备了一套模拟面试题，偏向场景化问题，考察你的实战经验和思维能力。考察点：防抖、节流、v-model.lazy、vueuse 的 useDebounceFn。考察点：defineModel、watch、provide/inject、事件总线。考察点：懒加载、骨架屏、路由异步组件、performance API 监控。考察点：onUnmounted、emit、expose、事件总线。
2025-03-28 00:08:00
646
原创 3.27-6.27学习计划
实践： 实现一个 Promise.all、Promise.race，用 TS 编写一个 deepClone 工具函数。第 2-3 个月：在 复杂应用开发、WebGPU/WebAssembly、前端架构 选 2~3 个方向深耕。根据你的 前端社招面试准备，每天刷 3~5 道手写代码题，巩固 Vue 3、TS、微前端相关知识。复习闭包、原型链、作用域链，熟悉 V8 引擎优化（垃圾回收、JIT 编译）。第 1 个月：巩固核心技能（JS/TS、后端、架构、性能优化、AI 工具）。
2025-03-27 13:47:57
54
原创 sympol应用场景
Symbol 在 JavaScript 中的主要应用场景集中在解决命名冲突、实现元编程以及定义唯一标识等场景。Symbol 的不可变性和唯一性使其在复杂项目、库/框架开发中尤为重要，但需注意其并非完全私有，且过度使用可能增加代码理解难度。前缀的私有字段，但 Symbol 可以间接实现类似效果。每个 Symbol 值都是唯一的，即使描述相同，也不会覆盖其他属性。用 Symbol 代替代码中的字符串常量，提高可维护性。注册或获取全局 Symbol，适合跨模块或环境共享。：这不是真正的私有，通过。
2025-03-27 05:00:23
371
原创 for of迭代器协议
循环是 ES6 引入的一种遍历数据结构的统一方式，其核心基于。方法，该方法返回一个符合迭代器协议的对象。任何对象只要实现了迭代器协议，就可以被。协议要求对象必须实现一个。一个对象要成为可迭代对象，必须实现。ES6 中许多内置数据结构默认实现了。
2025-03-27 04:35:18
297
原创 es6的100个问题
以上题目覆盖了 ES6 的核心语法、特性、应用场景及底层原理，建议结合代码实践和官方文档深入学习。如果需要详细解答，可以针对具体题目进一步探讨！
2025-03-27 04:00:25
994
原创 constructor用法
结合使用其他方法：为了更准确地判断对象类型，建议结合使用 constructor 和 Object.prototype.toString.call()，尤其是在处理数组、正则表达式等内建类型时。constructor 的局限性：虽然 constructor 可以帮助我们了解对象的创建者，但它有一些局限，尤其是在处理继承、手动修改构造函数或判断内建对象类型时。被重写的 constructor：当对象的 constructor 属性被手动重写时，它可能无法准确反映对象的构造函数。
2025-03-27 03:27:25
728
原创 内存泄漏排查方法
常见的内存泄漏来源包括：未销毁的定时器、未移除的事件监听、未清理的全局变量、组件未正确卸载等。解决方案： 如果组件需要彻底销毁，避免使用 keep-alive 或在 onDeactivated 里清理状态。✅ 2. 检查未清理的 setTimeout / setInterval，在 onUnmounted 里清除。✅ 5. Vuex / Pinia 在 onUnmounted 时重置数据，避免存储大对象。✅ 4. 如果使用 keep-alive，要在 onDeactivated 里释放资源。
2025-03-27 02:56:56
405
原创 3.27前端模拟面试
Vue 3 的 setup 语法和 composition API 如何使用？请介绍一个你主导的 Vue 3 项目，主要技术难点是什么？你是如何在团队中推动技术升级（比如 Vue 2 到 Vue 3）？你可以先自己尝试回答这些问题，如果有不清楚的地方，我可以帮你解析。你在过去的项目中遇到的最难的技术挑战是什么？如果让你设计一套 Vue 组件的权限控制方案，你会如何实现？如果让你优化一个 Vue 3 项目的构建速度，你会怎么做？如果你的 Vue 项目出现了内存泄漏，你会如何排查？
2025-03-27 02:45:21
272
原创 Node.js从0.5到1学习计划
通过这个强化训练计划，你不仅能掌握Node.js核心开发能力，还能积累真实的项目经验。（Tip：学习完成后可尝试为开源项目提交PR，快速提升实战能力）：配置Prometheus + Grafana仪表盘。：构建用户管理API（JWT认证+数据校验）：使用ApacheBench进行压力测试对比。：编写异步文件处理程序（读取→修改→保存）：开发图书管理系统（增删改查+分页查询）：使用OWASP ZAP进行安全扫描。：用Stream实现大文件压缩传输。：构建订单处理微服务集群。：开发电商系统核心模块。
2025-03-27 01:07:59
497
原创 3.26前端模拟面试
TypeScript 类型体操：实现一个 TypeScript 类型 DeepPartial，使其可以将所有属性递归地变为可选。Tree Shaking：在 Webpack 或 Vite 中，如何确保你的代码可以正确进行 Tree Shaking？实现一个简单的 Diff 算法，模拟 Vue 3 patch 的核心思想（仅对比 key 的变化）。性能优化：如果 Vue 组件的 computed 在高频率更新时性能较差，你会如何优化？包含 Vue 3、TypeScript、性能优化、工程化等方面，偏八股文。
2025-03-26 22:55:47
409
原创 webpackVSVite热更新本质区别
Vite 和 Webpack 都支持热更新（HMR），但两者的本质区别在于 Vite 依赖于原生 ES 模块（ESM），而 Webpack 依赖于模块打包后的更新机制。由于 Vite 直接使用 ESM，浏览器可以直接请求新的 JavaScript 模块，无需 Webpack 那样的 hot-update.json 机制。Vite 监听 .vue 文件变化时，会让浏览器重新请求新的 App.vue，完成 HMR，而无需重新打包。Vite 热更新几乎是即时的，Webpack 在大项目中 HMR 可能会变慢。
2025-03-26 09:17:43
542
原创 3.25模拟面试
面试时间约 60 分钟，涵盖基础知识（HTML、CSS、JavaScript）、Vue 3、工程化、项目经验等内容。Promise.all、Promise.race、Promise.allSettled 的区别？（props、emit、mitt、provide/inject）Vue 3 重点掌握（组合式 API、生命周期、watchEffect）（按需加载、懒加载、SSR）（项目经历、技术栈、擅长的方向）手写代码要熟练（防抖、节流、深拷贝、Promise）项目经验要能深入讲解（优化点、遇到的坑、解决方案）
2025-03-26 03:57:49
296
原创 3.24前端模拟面试
介绍一下 position: sticky 的工作原理，以及它和 position: fixed 的区别？你在项目中是如何做 Tree Shaking 的？Vue 3 的响应式系统是如何工作的？Qiankun 的沙箱机制是如何实现的？介绍一下前端 CI/CD 的流程，在你的项目中是如何落地的？可以按你喜欢的方式作答，我们可以针对你的回答进行深入探讨！你如何优化一个包含大量 DOM 操作的页面性能？假如你的团队要引入 SSR，你会怎么调研和推进？你在微前端项目中如何管理多个子应用之间的通信？
2025-03-25 17:43:38
300
原创 3.33前端模拟面试
如果你有更具体的需求，比如更偏向八股文，或者更注重 Vue 相关的问题，可以再调整面试内容！absolute 和 relative 的区别？介绍一下 JavaScript 的基本数据类型？介绍一下 Flex 和 Grid 布局的区别？HTTP 状态码 301 和 302 的区别？let、const 和 var 的区别？CSRF 和 XSS 的区别？webpack 和 vite 的区别？ref 和 reactive 的区别？介绍你在 Vue 项目中做的性能优化？defer 和 async 的区别？
2025-03-24 01:43:08
248
原创 type和interface的详细介绍
后来 TypeScript 逐步增强了类型系统，引入了 type，让类型定义更灵活，可以支持 联合类型、映射类型、元组、条件类型 等高级功能，这些 interface 无法做到。在早期的 TypeScript 版本（1.x），只有 interface，因为它更符合面向对象编程（OOP）的风格，并且可以进行声明合并，非常适合 面向接口编程。interface 更适合 OOP，适用于对象、类的 implements，支持扩展和声明合并。type 更灵活，适用于复杂类型，如联合类型、交叉类型、映射类型等。
2025-03-23 13:13:48
843
原创 nginx5天时间从0到熟练掌握学习计划
内熟练地在项目中使用 Nginx，需要制定一个高效的学习计划，重点学习 Nginx 的核心功能和实际应用。以下是一个详细的学习计划，帮助你从零开始掌握 Nginx。通过这 5 天的学习，你将掌握 Nginx 的核心功能，并能够在实际项目中熟练使用。坚持每天学习和实践，5 天后你将能够自信地在项目中使用 Nginx！：了解 Nginx 的基本概念，完成安装和简单配置。：在实际项目中应用 Nginx，并掌握调试技巧。：掌握负载均衡和缓存配置，提升项目性能。：掌握 HTTPS 配置和性能优化技巧。
2025-03-22 21:48:47
1084
原创 3.22模拟面试
这个面试涵盖了前端基础、Vue 3、工程化、微前端以及你的项目经验。技术栈：Vue 3、TypeScript、微前端（qiankun）、Webpack/Rspack、Ant Design、组件库迁移。你们是如何从旧组件库迁移到 Ant Design 的？Vue 3 组件生命周期中 onMounted 之后的生命周期有哪些？this 在 JavaScript 中是如何绑定的？typeof null 的结果是什么？ref 和 reactive 的区别是什么？你们是如何优化 Webpack 启动时间的？
2025-03-22 19:18:16
421
原创 手写发布订阅模式
/ 返回取消订阅的函数。// 将订阅者（回调函数）添加到事件的订阅者列表。如果需要支持一次性事件（例如订阅者只想接收一次事件），可以实现一个 once 方法，订阅后自动取消订阅。订阅（subscribe）：用户订阅特定的事件，当该事件触发时，执行与事件关联的回调函数。发布（publish）：当某个事件发生时，发布该事件，并通知所有订阅了该事件的回调函数。该实现提供了一个简单的发布订阅系统，支持事件的订阅、取消订阅和发布。// 取消登录事件的订阅。返回一个取消订阅的函数，方便用户手动移除某个事件的订阅。
2025-03-18 23:19:21
733
原创 前端性能优化回答思路
面试时，回答前端性能优化的问题时，可以从 资源优化、渲染优化、JavaScript 优化 和 网络优化 等多个维度进行阐述，展示你对前端性能优化的全面理解。对于长列表（如大量数据渲染），可以使用 虚拟化（如 react-window 或 vue-virtual-scroller）技术，只渲染可视区域的元素，减少 DOM 的复杂度。使用 代码分割 和 懒加载，只加载当前需要的代码，避免过多的 JavaScript 文件在初始加载时阻塞页面渲染。
2025-03-17 23:02:22
628
原创 vue-router实现
它基于浏览器的 history API，监听 URL 的变化，切换对应的视图，并且通过 push 来实现路由跳转。完整的 Vue Router 实现比这个示例更复杂，支持更多的功能和优化，比如异步路由、路由懒加载等，但这个简化版本已经能帮助我们理解基本的路由实现流程。Vue Router 主要的功能是基于浏览器的 URL 来管理组件的显示，能够根据 URL 变化切换不同的视图。组件渲染：VueRouter 根据当前的路径（currentPath）来查找匹配的路由，并将其组件渲染到 #app 元素中。
2025-03-17 22:33:34
920
原创 provide/inject源码实现
Vue 3 中的 provide 和 inject 实现是基于 Proxy 的响应式系统，组件的 provides 数据是响应式的，当数据变化时，依赖这些数据的组件会自动更新。在 Vue 3 中，provide 和 inject 是通过 Vue 的响应式系统和组件实例机制实现的，底层是依赖 Vue 3 中的 Proxy 和 Reactive 来实现跨层级的数据传递和响应式绑定。// 获取父组件提供的数据。父组件的 provides 会暴露给子组件，子组件可以从父组件的上下文中读取提供的数据。
2025-03-17 22:30:51
1022
原创 封装组件库
发布多种版本：对于支持多个框架的组件库，可以使用不同的构建工具（如 Rollup、Webpack）来打包并发布不同版本的组件库，确保兼容性。维护成本：随着组件库规模的扩大，管理和维护组件库的复杂度也会增加，如何保持代码的可读性和一致性，防止代码膨胀，是一个常见问题。适应不同的业务场景：组件库需要应对各种不同的需求，如何保证组件的通用性，同时又能满足特定场景下的定制化需求，是一大难点。灵活的配置选项：组件的属性和事件往往需要有足够的灵活性，以适应不同的需求，但又不能暴露过多的配置项，否则会让使用者迷失。
2025-03-16 18:50:58
292
原创 提升fcp
要提高 FCP，重点是减少阻塞渲染的资源、优化页面的初始加载过程，以及通过服务端渲染或预渲染等技术减少页面加载的等待时间。通过合理地利用现代浏览器提供的优化技术（如异步加载、字体优化、资源预加载、CDN 加速等），你可以有效提升 FCP，使得用户能够更快地看到页面的第一个有意义的内容。使用 Service Worker 技术可以缓存常见的静态资源（如 HTML、CSS、JS 和图片等），使得用户在第二次访问页面时，能够更快地加载资源，从而提升 FCP。只加载页面上实际使用的字符集，避免加载整个字体文件。
2025-03-16 18:44:05
435
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人