- 博客(403)
- 收藏
- 关注
RSS订阅原创 为什么Vite在开发环境不用打包，到了生产环境就需要打包了呢？
有些旧浏览器不支持 ESM（比如 IE11），需要将代码转成兼容格式（如 CommonJS / UMD / IIFE）。这是因为开发环境和生产环境的运行目标和性能要求完全不同，Vite 针对这两者采用了不同的技术策略。页面加载时，Vite 只在服务端用 esbuild 做一次预处理（如 TS 转 JS），不做打包。生产环境下不能让浏览器一个个去请求上百个模块（会造成大量网络请求，严重影响首屏性能）。生产环境追求性能和兼容性，所以必须打包。使用 模块级热更新（HMR），只更新变更模块，而不是整个页面。
2025-06-12 01:53:20
130
原创 网络资源缓存
前端性能优化是提升用户体验和页面响应速度的关键，可以从 网络优化、资源优化、缓存优化 三个方面系统地进行。缓存优化 重复访问加速 Cache-Control、ETag、Service Worker、文件 hash。资源优化 减小体积、延迟加载 图片压缩、JS/CSS 按需加载、Tree Shaking。stale-while-revalidate（旧资源立即返回，后台更新新资源）网络优化 降低加载延迟 CDN、Gzip、HTTP/2、预加载、请求合并。一、网络优化（减少请求数、降低延迟、提升加载速度）
2025-06-04 01:27:50
611
原创 npm、yarn幽灵依赖问题
你在代码中使用了某个依赖包，但它并没有在当前项目的 package.json 中声明，只是“间接依赖”被安装到了 node_modules 中，导致你能用，但其实不应该能用。你没有显式安装 lodash，但项目里却能跑成功，因为 webpack 的某个插件内部依赖了 lodash，所以它“顺便”被装进 node_modules。pnpm 的 node_modules 是使用 符号链接（symlink）+ 嵌套结构 搭出来的，你只能访问你自己声明的依赖。这就是幽灵依赖：你没声明，系统却能跑。
2025-05-31 01:20:31
650
原创 yarn、pnpm、npm
下面我按时间线和动机，把 npm → yarn → pnpm 的演变脉络讲清楚。如果你想继续，我可以带你写个从 yarn 或 npm 切换到 pnpm 的实战迁移指南，也可以讲讲它们在 Monorepo 里的表现。Facebook 的工程师维护着数千个 Node 项目，npm 的不稳定、速度慢，严重拖累开发效率，于是他们造了 Yarn。npm 安装依赖是不稳定的，即使锁版本，也有可能在不同机器上装出不同的 node_modules。pnpm：使用内容寻址 + 硬链接，依赖只下载一次，多个项目共享。
2025-05-31 01:02:25
573
原创 qiankun解决的问题
qiankun 通过 Proxy 等技术实现沙箱机制，有效隔离微应用之间的 JS 和 CSS 环境，解决全局变量冲突、样式污染、多实例运行等问题，是微前端稳定运行的核心保障。为每个微应用创建一个 Proxy(window) 的代理对象，拦截所有对 window 的修改，限制作用域。qiankun 的沙箱机制主要用于隔离微应用之间的运行环境，避免相互影响。每次微应用切换时，记录 window 的状态（如全局变量），卸载时恢复原状态。退出微应用时能恢复主应用或其它子应用原本的状态。样式隔离防止样式干扰。
2025-05-24 18:56:29
424
原创 2025.04.19react面试题
React.memo、useMemo 和 useCallback 的作用与区别？React 中 key 的作用是什么？React 中如何实现懒加载？如何在 React 中做错误边界处理？React 是如何实现虚拟 DOM 的？组件的生命周期函数有哪些？React 18 中的变化是？React 中如何避免不必要的重新渲染？React 中事件绑定有哪些方式？React 中如何避免 useEffect 死循环？受控组件和非受控组件的区别？React 中的组件有哪几种？它与 HTML 有什么不同？
2025-04-19 03:36:59
581
原创 css3.31面试题
不同浏览器的 CSS 兼容性问题如何解决？visibility: hidden、display: none 和 opacity: 0 的区别？伪类（:hover、:nth-child()）和伪元素（::before、::after）的区别？层叠上下文（Stacking Context）是如何形成的？哪些 CSS 属性会触发回流（Reflow）和重绘（Repaint）？如何使用 CSS 预处理器（SASS/LESS）提升开发效率？如何使用 CSS 变量（var()）提高样式的可维护性？如何实现垂直水平居中？
2025-04-04 15:37:15
645
原创 微前端知识内容
Shared State（全局状态管理）：使用 qiankun 提供的 initGlobalState，或者采用 Redux、Pinia 等库共享状态。registerMicroApps() 方法用于注册子应用，配置 name、entry、container、activeRule 等参数。如果你有特定项目上的挑战，也可以详细探讨。主要基于 single-spa，并进行二次封装，提供更好的 应用加载管理、沙箱隔离、应用通信 能力。通过劫持路由（Hash/History），监听路径变化，加载对应的子应用。
2025-04-01 22:41:42
183
原创 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
923
原创 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
504
原创 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
411
原创 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
518
原创 3.29前端模拟面试
好的，我会按照Vue 3 + TypeScript + 微前端（qiankun）的方向进行模拟面试，并结合你的项目经验和场景化手写代码题，确保问题具备一定的深度和挑战性。（例如子应用间通信、全局状态管理、样式隔离问题）你是如何解决的？多结合项目经验：回答问题时，结合你的实际项目经历，让面试官知道你不仅理解概念，还能在项目中落地。function throttle(fn, delay) { /* 实现 */ }function debounce(fn, delay) { /* 实现 */ }
2025-03-29 23:04:34
487
原创 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
127
原创 地图项目入手学习
• 如果有轨迹回放：是否有 setInterval 或 requestAnimationFrame 更新坐标点？• 如果有标记点：看 addMarker 是怎么实现的？• 如果有热力图：用的 HeatMapLayer 还是自己画的 Canvas？目标：用 Vue 3 + 你的地图库（如高德地图）实现基本功能。目标：先大致了解你的地图项目代码，找到核心实现逻辑。• 是否有 点标记、轨迹回放、热力图、区域覆盖物？目标：写一篇总结，整理你学到的内容，加深理解。• 是否有 地图组件（Map.vue）？
2025-03-28 16:23:19
298
原创 异步的场景
异步编程最常见的场景之一是发起 网络请求。在文件读取、写入操作时，尤其是涉及大量文件的操作，异步编程是非常重要的。例如，批量处理多个任务（如批量发送请求、同时执行多个计算）时，可以使用异步来避免阻塞主线程，从而提高程序的效率。对于一些需要长时间运行的任务（如复杂计算、大数据处理等），异步编程可以避免阻塞主线程或 UI 线程，提升应用响应性。通过异步编程，可以避免阻塞主线程，提高应用的响应速度和性能，尤其是在处理耗时操作时尤为重要。许多异步操作依赖于定时器的使用，例如：定时任务、轮询操作、动画的定时执行等。
2025-03-28 00:51:59
591
原创 TypeScript和JavaScript的区别
TypeScript（简称 TS）是 JavaScript（简称 JS）的超集，它对 JavaScript 进行了扩展，提供了更强的类型检查和其他功能。TypeScript 是 静态类型的语言，这意味着在编译阶段，开发者可以指定变量、函数参数和返回值的类型，编译器会在编译时进行类型检查。JavaScript 仅支持基本类型和对象，不支持 TypeScript 中的联合类型、交叉类型等高级类型。age = ‘30’;JavaScript 是 动态类型的语言，变量的类型可以在运行时变化，缺少编译时的类型检查。
2025-03-28 00:48:31
914
原创 cdn原理和作用
容灾与冗余：CDN 系统在多个节点缓存内容，即使某个节点或源站发生故障，CDN 也可以自动将请求路由到其他正常工作的节点，确保内容的高可用性。减少延迟：CDN 将内容分发到离用户最近的节点，缩短数据传输的物理距离，从而减少网络延迟，提高访问速度。适应不同网络条件：CDN 的边缘节点通过对本地网络的优化，能够在不同的网络环境下提供更稳定的内容传输。分布式缓存：通过将内容缓存到全球多个节点，即使在远离源站的地区，用户也能享受到快速的访问体验。CDN 通过将内容缓存到全球各地的多个边缘节点，提供高效的内容分发。
2025-03-28 00:41:50
409
原创 前端性能优化思路_场景题
在高并发场景下，最重要的是减少不必要的 DOM 更新，减少 WebSocket 消息量，并利用 CDN、虚拟列表、Canvas 渲染弹幕 提高性能。20 万人同时在直播间打赏，前端优化需要考虑高并发、性能优化、流畅体验等问题，涉及 WebSocket 处理、消息去抖、虚拟列表优化、动画优化、CDN 加速 等多个方面。WebSocket 可以实现实时通信，只在有数据更新时推送，提高效率。效果：每 300ms 更新一次 UI，减少渲染次数，提高性能。合并消息：同一秒内的多条打赏消息可以合并，减少通信压力。
2025-03-28 00:38:26
657
原创 优化webpack打包体积思路
你已经有 Webpack 迁移到 Rspack 的经验，可以考虑直接用 Rspack，它的构建速度更快，尤其适用于 Vue 3 项目。如果 Webpack 打包特别大，可以从以下几方面优化： ✅ 按需加载（路由懒加载、组件懒加载、动态 import()）这样 node_modules 里的库会被打包成一个独立的 vendors.js，浏览器可以缓存它，不用每次都下载。如果你的 Webpack 构建速度慢，考虑直接迁移到 Rspack，你之前已经做过类似的迁移，应该很容易上手！
2025-03-28 00:35:20
1051
原创 Axios核心原理
从外部使用上，Axios 提供了标准的 Promise 语法，可以使用 .then() 处理成功结果，使用 .catch() 处理错误，还可以使用 .finally() 进行清理工作。因此，Axios 是 基于 Promise 设计的 HTTP 客户端，它利用 Promise 提供的链式调用、错误处理、并发能力，让网络请求管理更加优雅。axios.all() 的本质是基于 Promise.all()，它会并行执行多个请求，并在所有请求完成后返回结果。
2025-03-28 00:26:38
680
原创 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
208
原创 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
683
原创 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
87
原创 sympol应用场景
Symbol 在 JavaScript 中的主要应用场景集中在解决命名冲突、实现元编程以及定义唯一标识等场景。Symbol 的不可变性和唯一性使其在复杂项目、库/框架开发中尤为重要，但需注意其并非完全私有，且过度使用可能增加代码理解难度。前缀的私有字段，但 Symbol 可以间接实现类似效果。每个 Symbol 值都是唯一的，即使描述相同，也不会覆盖其他属性。用 Symbol 代替代码中的字符串常量，提高可维护性。注册或获取全局 Symbol，适合跨模块或环境共享。：这不是真正的私有，通过。
2025-03-27 05:00:23
395
原创 for of迭代器协议
循环是 ES6 引入的一种遍历数据结构的统一方式，其核心基于。方法，该方法返回一个符合迭代器协议的对象。任何对象只要实现了迭代器协议，就可以被。协议要求对象必须实现一个。一个对象要成为可迭代对象，必须实现。ES6 中许多内置数据结构默认实现了。
2025-03-27 04:35:18
328
原创 es6的100个问题
以上题目覆盖了 ES6 的核心语法、特性、应用场景及底层原理，建议结合代码实践和官方文档深入学习。如果需要详细解答，可以针对具体题目进一步探讨！
2025-03-27 04:00:25
1016
原创 constructor用法
结合使用其他方法：为了更准确地判断对象类型，建议结合使用 constructor 和 Object.prototype.toString.call()，尤其是在处理数组、正则表达式等内建类型时。constructor 的局限性：虽然 constructor 可以帮助我们了解对象的创建者，但它有一些局限，尤其是在处理继承、手动修改构造函数或判断内建对象类型时。被重写的 constructor：当对象的 constructor 属性被手动重写时，它可能无法准确反映对象的构造函数。
2025-03-27 03:27:25
774
原创 内存泄漏排查方法
常见的内存泄漏来源包括：未销毁的定时器、未移除的事件监听、未清理的全局变量、组件未正确卸载等。解决方案： 如果组件需要彻底销毁，避免使用 keep-alive 或在 onDeactivated 里清理状态。✅ 2. 检查未清理的 setTimeout / setInterval，在 onUnmounted 里清除。✅ 5. Vuex / Pinia 在 onUnmounted 时重置数据，避免存储大对象。✅ 4. 如果使用 keep-alive，要在 onDeactivated 里释放资源。
2025-03-27 02:56:56
622
原创 3.27前端模拟面试
Vue 3 的 setup 语法和 composition API 如何使用？请介绍一个你主导的 Vue 3 项目，主要技术难点是什么？你是如何在团队中推动技术升级（比如 Vue 2 到 Vue 3）？你可以先自己尝试回答这些问题，如果有不清楚的地方，我可以帮你解析。你在过去的项目中遇到的最难的技术挑战是什么？如果让你设计一套 Vue 组件的权限控制方案，你会如何实现？如果让你优化一个 Vue 3 项目的构建速度，你会怎么做？如果你的 Vue 项目出现了内存泄漏，你会如何排查？
2025-03-27 02:45:21
287
原创 Node.js从0.5到1学习计划
通过这个强化训练计划，你不仅能掌握Node.js核心开发能力，还能积累真实的项目经验。（Tip：学习完成后可尝试为开源项目提交PR，快速提升实战能力）：配置Prometheus + Grafana仪表盘。：构建用户管理API（JWT认证+数据校验）：使用ApacheBench进行压力测试对比。：编写异步文件处理程序（读取→修改→保存）：开发图书管理系统（增删改查+分页查询）：使用OWASP ZAP进行安全扫描。：用Stream实现大文件压缩传输。：构建订单处理微服务集群。：开发电商系统核心模块。
2025-03-27 01:07:59
530
原创 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
429
原创 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
666
原创 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
314
原创 3.24前端模拟面试
介绍一下 position: sticky 的工作原理，以及它和 position: fixed 的区别？你在项目中是如何做 Tree Shaking 的？Vue 3 的响应式系统是如何工作的？Qiankun 的沙箱机制是如何实现的？介绍一下前端 CI/CD 的流程，在你的项目中是如何落地的？可以按你喜欢的方式作答，我们可以针对你的回答进行深入探讨！你如何优化一个包含大量 DOM 操作的页面性能？假如你的团队要引入 SSR，你会怎么调研和推进？你在微前端项目中如何管理多个子应用之间的通信？
2025-03-25 17:43:38
309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人