- 博客(261)
- 收藏
- 关注
RSS订阅原创 前端面试题17
React中的useMemo是一个性能优化Hook，用于缓存计算结果，仅在依赖项变化时重新计算。它适用于避免昂贵的重复计算（如大数据过滤）和优化子组件渲染（配合React.memo）。基本语法为const memoizedValue = useMemo(() => computeValue(), [deps])。与useCallback不同，useMemo缓存计算结果而非函数本身。使用时应注意：仅在必要时使用（如复杂计算或传递给优化组件），正确设置依赖项，避免滥用以免增加内存消耗。最佳实践包括与Rea
2025-08-04 10:50:08
825
原创 v-memo
v-memo是Vue 3.2+的优化指令，用于缓存模板渲染结果。它通过比较依赖数组决定是否复用缓存，适合处理昂贵渲染的子组件、大型列表或复杂计算场景。使用时需正确设置依赖数组，避免动态内容，权衡性能开销。与v-for不可同用，v-if优先级更高。合理使用可显著提升性能，但需注意依赖准确性以防缓存失效。
2025-07-31 17:40:29
403
原创 requestAnimationFrame
requestAnimationFrame是浏览器提供的动画API，能高效执行与屏幕刷新率同步的动画。相比setTimeout/setInterval，它自动匹配显示器刷新率（如60Hz下16.7ms/帧），后台自动暂停节省资源，并提供高精度时间戳。通过递归调用可实现连续动画，使用cancelAnimationFrame可取消未执行的动画。最佳实践包括：用于视觉动画、确保回调执行时间短于16ms、利用时间戳计算进度。它是实现流畅动画的首选方案，能显著提升性能和用户体验。
2025-07-31 17:21:52
310
原创 will-change属性
will-change是CSS优化属性，可提前告知浏览器元素属性即将变化（如transform、opacity），让浏览器预先优化（如创建独立图层、启用GPU加速），避免动画启动时的卡顿。关键用法：动态通过JS在交互前添加（如mouseenter时设置will-change:transform），结束后移除；优先优化transform/opacity而非布局属性；避免滥用（静态元素或全局设置会浪费资源）。正确使用可提升动画流畅度，但需配合性能测试确保实际效果。
2025-07-31 17:07:02
870
原创 scheduler
现代浏览器的scheduler API提供了更精细的任务调度能力，取代了过时的requestIdleCallback。它通过postTask()方法支持三种优先级：user-blocking（最高）、user-visible（中）和background（最低），让开发者能优化Web应用的响应速度。该API基于Promise，支持任务取消，相比旧方案具有更细粒度的控制。虽然浏览器支持仍需检查，但它已成为现代框架（如React）实现高性能渲染的基础。合理使用优先级可显著提升用户体验。
2025-07-31 16:36:55
575
原创 requestIdleCallback
requestIdleCallback是浏览器提供的API，用于在空闲时段执行非关键任务，优化性能。它通过回调函数在浏览器空闲时运行低优先级任务（如日志、预加载等），避免阻塞主线程影响用户体验。使用时需配合IdleDeadline对象判断剩余时间，并可设置超时时间确保任务执行。相比setTimeout，它更智能地利用空闲资源，但需注意浏览器兼容性和任务拆分。该API正逐渐被更强大的Scheduler API取代。
2025-07-31 16:24:20
692
原创 Service Workers
摘要：Service Worker是浏览器后台运行的独立线程脚本，支持离线缓存、消息推送和后台同步等功能，是PWA核心。其生命周期包括注册、安装、激活和拦截请求等阶段，通过缓存策略（如Cache First/Network First）优化性能。开发时需注意HTTPS、缓存管理和版本更新，推荐使用Workbox简化开发。UniApp中H5支持Service Worker，但App/小程序不支持。合理使用可显著提升Web应用体验。
2025-07-31 15:52:43
806
原创 空值合并操作符 ??
空值合并操作符 ?? 是 JavaScript 中用于处理 null 或 undefined 的安全操作符，仅在左操作数为空值时返回右操作数作为默认值。与逻辑或 || 不同，?? 会保留 0、空字符串 "" 和 false 等有效值，避免意外覆盖。它支持短路求值，且不能直接与 && 或 || 混用。在 TypeScript 中，?? 可安全处理可选属性。当需要精确区分空值与有效假值时，?? 是比 || 更优的选择。
2025-07-31 15:09:55
285
原创 前端面试题16
文章摘要： 重绘与回流：回流（Reflow）涉及元素几何属性的重新计算，而重绘（Repaint）仅影响外观变化。回流通常会导致重绘，但重绘不一定引发回流。优化建议包括批量DOM操作、CSS优化和减少强制同步布局。 减少回流：关键策略包括使用DocumentFragment批量修改DOM、避免强制同步布局、优先使用transform和opacity进行动画、利用requestAnimationFrame以及采用虚拟滚动技术。 HTTP缓存：分为强缓存（直接使用本地副本）和协商缓存（向服务器验证）。通过Cach
2025-07-24 17:08:29
785
原创 如何用qiankun实现微前端
本文介绍了使用 qiankun 构建微前端应用的基本步骤。主要包括：1）创建主应用并配置 qiankun 注册子应用；2）创建子应用并适配微前端框架；3）运行测试确保应用正常加载。文中提供了具体代码示例，并提醒注意样式隔离、状态管理和性能优化等关键问题。通过简单配置即可实现主应用加载子应用的微前端架构。
2025-07-24 09:45:37
299
原创 常见微前端的实现方案
本文对比了六种微前端解决方案：qiankun基于single-spa提供开箱即用的功能，适合企业级项目；single-spa灵活性高但需手动配置；Web Components基于浏览器原生技术；Module Federation适合Webpack 5用户；无界和micro-app是国内轻量级方案。选择取决于项目需求、技术栈和团队偏好，如qiankun适合多框架集成，Module Federation适合Webpack用户，Web Components适合追求性能的团队。
2025-07-24 09:39:12
289
原创 微 前 端
微前端是一种将大型前端应用拆分为独立模块的架构思想，借鉴微服务理念。其特点包括技术栈独立、独立部署、团队自治、可扩展性和隔离性。实现方式有IFrame、Single-SPA、Web Components等，但面临复杂度增加、性能优化等挑战。该架构适合需要解耦大型前端应用、提升开发效率的场景，但需权衡适用性。
2025-07-24 09:36:55
335
原创 WebSocket协议
摘要：WebSocket协议是一种基于TCP的全双工通信协议，支持服务器主动推送数据，相比HTTP具有更低延迟和更高效率。其核心特点包括：持久连接、双向通信、低开销和跨域支持。工作流程分为握手和数据传输两阶段，安全版本WSS通过SSL/TLS加密。常见应用场景包括实时游戏、即时通讯等。前端可通过JavaScript的WebSocket API实现，后端如Node.js可使用ws库构建WebSocket服务器。该协议显著提升了实时应用的通信效率。
2025-07-22 16:49:31
642
原创 HTTP协议基本原理
HTTP（超文本传输协议）是Web通信的基础协议，采用客户端请求-服务器响应的无状态模式。它定义了GET、POST等请求方法，通过状态码反馈结果，并支持持久连接。HTTP/2和HTTP/3进一步优化了性能。HTTPS通过SSL/TLS加密保障数据传输安全。理解HTTP原理对开发网络应用至关重要。
2025-07-22 16:43:53
331
原创 useEffect依赖项可以包含哪些数据
摘要： React的useEffect依赖项可以是状态变量（useState）、属性（props）、其他Hooks返回值或函数（需配合useCallback）。空数组[]表示仅挂载/卸载时执行。合理设置依赖项能优化组件性能，避免不必要的副作用执行。例如，监听count变化时，需将其加入依赖数组；函数依赖应记忆化处理，防止因引用变化触发重复渲染。正确配置依赖项是保证组件高效运行的关键。
2025-07-22 16:31:05
230
原创 使用 Webpack Dev Server 解决跨域问题
摘要：本文介绍了如何使用Webpack的devServer.proxy配置解决开发环境跨域问题。步骤包括安装必要依赖、配置webpack.config.js中的代理规则、调整前端请求路径以及启动开发服务器。该方法通过将特定路径请求转发到目标服务器来避免跨域限制，同时强调这仅适用于开发环境，生产环境应使用更安全的CORS方案。文中提供了完整的代码示例和配置说明，并提醒注意代理可能带来的性能影响和路径重写等高级配置选项。
2025-07-22 15:59:26
291
原创 前端面试题15
Vue2 与 Vue3 数据绑定机制对比 Vue2 使用 Object.defineProperty 实现数据绑定，存在以下局限性： 无法检测新增属性 数组变更检测不全面 性能开销较大 开发体验欠佳 TypeScript 支持较弱 在 Vue2 中解决数组响应式问题的方法： 使用变异方法（push/pop/splice等） 通过 $set 方法显式更新 替换整个数组/对象 Vue2 生命周期钩子包括： 创建阶段：beforeCreate/created 挂载阶段：beforeMount/mounted 更新
2025-07-22 11:52:28
972
原创 在使用 Webpack 进行开发时，怎么针对不同的环境配置不同的设置
本文介绍了三种Webpack多环境配置方法：1) 使用--env命令行参数动态调整配置；2) 为各环境创建独立配置文件；3) 借助dotenv管理环境变量。这些方法可根据项目规模灵活选择，小型项目适合简单环境变量处理，大型项目可采用独立配置文件方案。文中详细说明了每种方法的实现步骤，帮助开发者优化不同环境下的构建配置。
2025-07-22 11:19:18
345
原创 前端面试题14
JavaScript关键概念摘要 闭包应用场景 闭包允许函数访问外部作用域的变量，常用于数据封装、函数工厂、事件处理、定时器、柯里化和模块模式。例如： function createCounter() { let count = 0; return { increment: () => ++count, decrement: () => --count }; } JS预解析（提升） JavaScript会提升变量和函数声明到作用域顶部。var变量提升返回undefined，函数声明整体提升，而let/con
2025-07-21 15:07:31
902
原创 前端面试题13
摘要 本文探讨了多个前端开发相关的核心概念和技术： React动态路由加载：介绍了如何通过React.lazy和Suspense实现路由组件的按需加载，提升应用性能。 Map与Object区别：对比了两种数据结构的键类型、顺序保证、性能差异和迭代方式，指导开发者根据场景选择合适的数据结构。 Set特性与应用：阐述了Set的唯一性特点和常见使用场景，如数据去重、高效查找和集合运算。 循环语句差异：比较了for...in和for...of在遍历对象和可迭代对象时的不同行为与适用场景。 内存泄漏防范：分析了全局变
2025-07-21 09:56:29
753
原创 for...of 可以直接遍历普通对象嘛
摘要： JavaScript 的 for...of 不能直接遍历普通对象（Object），因为对象默认不可迭代（无 [Symbol.iterator] 方法）。可迭代对象包括数组、字符串、Map/Set 等。若需遍历对象，可通过 Object.keys()/values()/entries() 转换后循环，或手动实现 [Symbol.iterator]。相比 for...in（遍历键），for...of 更适合处理可迭代结构的元素值。 关键点： 1️⃣ for...of 需可迭代对象，普通对象不适用 2️⃣
2025-07-17 16:00:19
201
原创 React如何动态添加路由
React应用中动态添加路由的方法主要有两种：一是通过状态管理动态渲染路由，使用useState存储路由配置并动态生成Route组件；二是结合后端API获取路由配置，通过useEffect异步加载路由数据并更新状态。两种方法都需要确保组件正确导入并考虑错误处理。第一种适合静态条件变化的路由，第二种适用于需要从服务器获取动态路由配置的场景。
2025-07-17 10:51:30
242
原创 前端面试题12
Redux 提供了一个强大的架构模式来管理应用的状态，虽然对于小型项目来说可能显得过于复杂，但对于中大型项目而言，它能极大地提升状态管理的可维护性和可预测性。随着 React Hooks 的普及，现在结合使用 Hooks API () 来访问 Redux store 已成为主流做法，这使得 Redux 更加易用且功能强大。
2025-07-16 17:08:13
1193
原创 Redux 的 createStore 和 applyMiddleware
本文介绍了Redux中createStore和applyMiddleware两个核心函数的使用方法。createStore用于创建Redux store，接收reducer、初始状态和enhancer三个参数，其中enhancer可通过applyMiddleware添加中间件功能。applyMiddleware允许扩展store功能，常用于处理异步操作，如配合redux-thunk中间件实现异步action。两者结合使用可构建功能强大的Redux应用，支持复杂的异步数据流管理和状态维护。
2025-07-16 16:40:44
477
原创 Redux 中处理异步操作的方法
本文介绍了Redux中处理异步操作的三种主要方法：使用redux-thunk、redux-saga和redux-observable。redux-thunk适合简单场景，允许action creator返回函数；redux-saga基于Generator函数，适合复杂控制流；redux-observable基于RxJS，提供最灵活的异步流控制。文章详细说明了每种方法的安装配置和示例代码，并分析了各自的适用场景，建议根据项目复杂度和团队熟悉度选择合适方案，简单应用推荐redux-thunk，复杂场景可考虑re
2025-07-16 16:21:40
358
原创 前端面试题11
Vue路由使用：通过安装Vue Router、配置路由规则、创建路由实例并挂载到Vue应用，实现SPA页面导航和组件渲染。 微信扫码登录流程：前端展示二维码→用户扫码确认→微信服务器回调→服务端换取Token→前端完成登录，需配合后端处理安全验证。 缓存机制优化：包括HTTP缓存(强缓存/协商缓存)、浏览器缓存(Disk/Memory)、Service Workers等，通过减少请求、本地读取资源提升性能。 URL重定向技术：通过服务器重定向(301/302)、前端路由、代理转发或CDN等方式，实现访问UR
2025-07-16 15:58:51
1267
原创 客户端水合（hydrate）是什么
React 的水合（Hydration）是 SSR 的关键环节，指客户端将服务端渲染的静态 HTML 转换为可交互的动态内容的过程。服务端生成初始 HTML 提升首屏速度和 SEO，客户端则通过 JavaScript 添加事件监听等交互逻辑。水合要求服务端与客户端渲染结果完全一致，否则易引发错误。开发中需注意避免在 SSR 环境下使用 useLayoutEffect，建议改用 useEffect 或判断 DOM 环境。合理优化水合过程对提升 SSR 应用性能至关重要。
2025-07-16 14:55:13
285
原创 useLayoutEffect
useLayoutEffect是React提供的Hook，与useEffect类似但执行时机不同。它在DOM更新后同步执行（浏览器绘制前），适合需要测量DOM或同步更新布局的场景，可避免视觉闪烁。与useEffect相比，useLayoutEffect会阻塞绘制但能确保DOM操作同步完成。典型应用包括获取元素尺寸、动态调整布局等。使用时需注意性能影响，SSR环境下需特别处理。优先使用useEffect，仅在需要精确DOM控制时才选用useLayoutEffect。
2025-07-16 14:52:22
313
原创 useImperativeHandle
useImperativeHandle 是 React Hook，用于自定义子组件通过 ref 暴露给父组件的实例值。通常与 forwardRef 配合使用，让父组件能直接调用子组件的方法或操作其 DOM。示例演示了如何让父组件通过 ref 调用子组件的 focus 方法，并支持扩展更多交互功能。该 Hook 适用于需要精确控制子组件行为的场景，但需注意仅暴露必要方法以保持良好封装。
2025-07-16 14:38:11
396
原创 在 React Router v6 中定义子路由（嵌套路由）的方式
React Router v6 简化了嵌套路由的实现方式。通过在父级<Route>组件内部直接定义子<Route>，配合/*通配符和index属性，可以清晰构建路由层级。示例展示了如何在/dashboard路径下嵌套/users和/settings子路由，包含默认路由的处理。新方法使代码更直观、易于维护，支持多级嵌套，是组织复杂应用路由结构的推荐方式。
2025-07-16 11:20:06
129
原创 React Router 的 ＜Route＞ 组件的 exact 属性
React Router 中的 exact 属性用于控制路由匹配方式。不带 exact 时，路由采用部分匹配（如 /about 会匹配 /about/team）；添加 exact 后则要求完全匹配（如 exact path="/" 仅匹配根路径）。在 React Router v6 中，exact 属性被移除，默认采用精确匹配，并通过嵌套路由处理子路径匹配。v5 需要显式声明 exact，而 v6 简化了这一机制，使路由配置更直观。
2025-07-16 11:14:57
202
原创 vite 集成的编译器
Vite 通过集成这些编译器和工具，提供了从开发到生产的完整构建流程。在开发模式下，Vite 主要依赖 esbuild 提供快速的模块热更新；而在生产构建时，Vite 则使用 Rollup 进行模块打包，并结合 Babel 或 SWC 进行代码转译，PostCSS 进行 CSS 处理，Terser 进行代码压缩，以及其他工具进行进一步的优化。这种组合使得 Vite 能够在保持高速开发体验的同时，提供高质量的生产构建结果。
2024-10-30 11:56:25
814
原创 esbuild 和 rollup 的区别
速度：esbuild 极速，适合快速开发；Rollup 也很快，但略逊于 esbuild。功能：esbuild 功能较基础，适合简单的构建任务；Rollup 功能强大，适合复杂的构建需求。配置：esbuild 配置简单；Rollup 配置灵活，可通过插件扩展。生态系统：Rollup 生态系统更成熟，插件丰富；esbuild 生态系统正在发展中。使用场景：esbuild 适合快速开发和小型项目；Rollup 适合库和框架构建及大型应用的生产构建。
2024-10-30 11:49:46
598
原创 vite 和 webpack 热更新的区别
启动速度：Vite 的启动速度更快，因为它利用了浏览器的原生 ES 模块支持，而 Webpack 需要先进行打包。更新速度：Vite 的 HMR 更新速度也更快，因为它只需要更新单个模块，而 Webpack 可能需要重新计算依赖关系。配置复杂度：Vite 的 HMR 配置相对简单，通常是开箱即用的；而 Webpack 的 HMR 配置可能需要更多的手动设置。生态支持：Webpack 有着更成熟的生态系统和更多的插件支持，适合处理复杂的项目需求。
2024-10-30 11:42:28
592
原创 在跨域请求中携带目标域名的 Cookie
确保目标服务器配置了正确的 CORS 头，允许来自特定源的请求并允许发送凭证。在客户端请求中设置 credentials: ‘include’ 或 withCredentials: true。检查 Cookie 的 SameSite 属性，确保其设置为 None 并且有 Secure 标志，以支持跨域请求中的 Cookie 传输。
2024-10-30 11:33:03
710
原创 webpack 中 webpack-dev-server 的作用
你可以通过 webpack.config.js 或命令行参数来定制 webpack-dev-server 的行为，例如设置监听端口、启用 HTTPS、调整日志级别等。
2024-10-30 11:24:56
435
原创 webpack 中的 webpack-dev-server 为什么不适用于线上环境
webpack-dev-server 是一个用于开发环境的工具，它提供了一个简单的 web 服务器，并能够实时重新加载页面。
2024-10-30 11:17:30
454
原创 常见的登录鉴权方式
描述：除了用户名和密码外，还需要第二种形式的身份验证，例如短信验证码、手机应用生成的一次性密码（如Google Authenticator）、硬件令牌等。描述：类似于2FA，但可能涉及两个以上的验证因素，包括知识因素（你知道什么，如密码）、拥有因素（你有什么，如手机）和生物特征因素（你是谁，如指纹）。但需要注意的是，这些数据一旦泄露，可能会导致永久性的安全问题。安全性：依赖于社交媒体平台的安全性，以及用户是否妥善保护自己的社交媒体账号。安全性：取决于底层技术的安全性和配置，可以提供方便且安全的用户体验。
2024-10-30 11:11:00
606
原创 OAuth2.0
OAuth 2.0 是一种开放标准，用于访问授权，它允许第三方应用以安全的方式访问 HTTP 服务中的资源，而无需将用户名和密码提供给第三方。OAuth 2.0 主要关注客户端开发者的简易性，同时为 Web 应用、桌面应用、移动设备以及物联网设备提供特定的认证流程。
2024-10-30 11:01:29
384
原创 请求 Header 中 Content-Type 的常见值
在HTTP请求中，Content-Type头部字段用于指示资源的MIME类型。它告诉服务器或客户端实际数据的格式。
2024-10-30 10:33:24
318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人