- 博客(159)
- 收藏
- 关注
RSS订阅原创 前端面试题（浏览器、计网）
CDN是一种分布式网络架构，由分布在不同地理位置的边缘节点服务器组成。当用户发起请求时，系统会根据用户的地理位置等因素，将请求引导到最近的缓存节点。如果缓存节点有需要的内容，就会直接返回，否则会从源服务器获取内容并缓存到节点，供后续用户访问。CDN通过全球边缘节点缓存静态资源，使得用户能够就近访问，大幅提高访问速度，同时保护了源服务器，提供高可用性和安全防护。
2025-07-16 12:24:41
569
原创 前端面试题（React 与 Vue）
React更愿意在函数上做文章，用函数作为组件的基础，用纯函数简单的重复执行来代替复杂的视图更新流程，Hooks也是函数，useState触发函数组件的执行，并作为纯函数执行的不同输入，useEffect将函数组件中的所有副作用从函数中隔离出去，自定义hooks也是函数。每次渲染时，react会严格记录hooks的调用顺序，组件重新渲染时react会按上一次渲染时hooks的执行顺序来匹配对应状态，如果使用if等语句，可能会导致hooks在链表中的顺序发生变化，使得react的无法关联正确的状态。
2025-07-16 12:24:33
725
原创 前端面试题（HTML、CSS、JavaScript）
盒模型分为标准盒模型和IE盒模型，他们的主要区别在于标准盒模型的width等于内容宽度，而IE盒模型的width等于内容加内边距加边框，box-sizing:content-box是标准盒模型，box-sizing:border-box是IE盒模型。当我们访问对象的属性或方法时，js会先查找对象自身的属性，如果没有就去查找其原型对象，如果还没有的话就一直递归向上查找，直到Object.prototype，其原型对象为null，查找结束。link是并行加载不会阻塞，而import会阻塞后续资源加载；
2025-07-16 12:24:19
762
原创 前端手写题（三）
数组扁平化是将多维数组转换为一维数组的过程，核心思路是通过遍历数组，递归处理嵌套数组元素。使用递归或迭代实现深度遍历：遇到非数组元素直接收集，遇到数组元素则进入下一层递归，不断展开直到所有元素位于同一层级，关键在于控制遍历深度和处理嵌套结构。（如数组已有序），空间复杂度 。（需临时数组），是。时间复杂度平均为 。时间复杂度稳定为 。
2025-06-28 18:42:10
929
原创 前端手写题（二）
本文系统讲解了JavaScript中new、call、apply、bind和create五大核心概念的技术实现。详细剖析了new运算符的四步创建流程及模拟实现方案，比较了构造函数返回值处理差异；深入解析了call/apply改变this指向的底层机制；演示了bind如何实现this绑定和参数预设，并处理new调用场景；最后通过polyfill展示了Object.create的原型继承原理。文中包含完整代码实现和测试用例，涵盖了构造函数返回值处理、内置类型特殊性、原型继承关系等关键细节
2025-06-23 17:15:42
417
原创 前端手写题（一）
本文介绍了几个JavaScript重要的概念和实现方法：1. 深拷贝：通过递归处理对象属性，支持循环引用检测和特殊对象类型处理；2. 防抖：采用延迟执行模式，确保连续触发时仅执行最后一次操作；3. 节流：提供时间戳和定时器两种实现方式，控制高频触发的事件执行频率；4. 函数柯里化：通过分步接收参数实现参数复用；5. instanceof：通过原型链检测实现对象类型判断；6. typeof：通过Object.prototype.toString实现更精确的类型判断。每个概念都配有具体实现代码和测试用例。
2025-06-22 23:53:51
1064
1
原创 React 核心原理与Fiber架构
React采用虚拟DOM与Fiber架构实现高效渲染。虚拟DOM作为轻量级JS对象，通过Diff算法（同层比较+Key优化）最小化DOM操作。Fiber架构将同步渲染拆分为异步可中断的Render阶段（构建Fiber树并标记变更）和同步Commit阶段（更新真实DOM），配合时间切片技术实现优先级调度。核心流程包含状态触发→异步Render→同步Commit→双缓存切换，通过调度系统四层架构确保主线程不阻塞。组件更新由状态/props/上下文等变化触发，Key值不当会导致性能问题。
2025-06-22 23:53:44
1148
原创 Vue3 响应式原理
Vue3响应式系统与组件生命周期解析Vue3采用Proxy代理实现响应式系统，通过拦截对象操作实现精准依赖收集和高效更新。响应式流程包括：创建代理对象→拦截读取操作收集依赖→拦截写入操作触发更新。组件触发渲染的时机包括首次挂载、响应式数据变更、Props更新和强制更新。组件生命周期分为创建阶段（实例初始化）、挂载阶段（DOM插入）、更新阶段（响应变化）和销毁阶段（移除组件）。相较于Vue2，Vue3的响应式系统具有全能力拦截、惰性响应和更好性能等优势。
2025-06-20 16:14:08
1350
1
原创 SVG 与 Canvas
SVG更适合创建可交互、可缩放的矢量图形，与DOM完美集成Canvas更适合高性能、动态的像素级操作，特别适合游戏和数据可视化。
2025-06-07 10:33:23
824
原创 虚拟 DOM 与 Diff 算法
虚拟DOM与Diff算法是现代前端框架如Vue和React的核心技术，用于优化DOM操作和提升应用性能。虚拟DOM是真实DOM的轻量级JavaScript对象表示，通过Diff算法比较新旧虚拟DOM树的差异，实现最小化更新真实DOM。Vue3采用双端比较和最长递增子序列（LIS）算法，优化列表处理；React19则依赖单向递归和Key机制，强调开发者控制。Vue适合动态列表和模板驱动开发，React则适用于需要高度定制化和跨平台渲染的大型应用。
2025-05-09 20:16:11
954
原创 React Router
何时选择？大型应用：需要集中管理路由和数据流。复杂数据依赖：多路由共享数据、预加载需求。优化需求：流式渲染、代码分割、滚动恢复。未来扩展：计划迁移到服务端渲染（SSR）。最佳实践路由分层管理：拆分为多个路由配置文件。严格类型定义：结合 TypeScript 提升安全性。合理拆分组件：保持路由配置简洁清晰。性能监控：结合Suspense和懒加载优化首屏速度。
2025-05-01 07:44:49
1534
原创 React Redux 与 Zustand
Redux 核心StoreActionReducerMiddleware。React-Redux 集成Provider。异步处理：通过或管理 API 调用。最佳实践：使用 Redux Toolkit 简化代码，合理设计状态结构。核心优势：简洁、高性能、脱离组件树、中间件支持。适用场景：中小型 React 应用、需快速开发、状态共享与优化。最佳实践按功能拆分 Store。使用 TypeScript 确保类型安全。合理使用选择器和中间件优化性能。
2025-05-01 07:44:41
1117
原创 React 事件、组件通信
React 封装了原生事件，提供跨浏览器一致的事件接口。：任意组件间通信（慎用，可能破坏 React 数据流）。委托，原生事件可能先于 React 事件触发。：兄弟组件共享同一状态，将状态提升到共同父组件。：跨多层组件传递数据，避免逐层传递 Props。：父组件直接调用子组件方法或操作 DOM。：优先使用 React 事件系统。：子组件通知父组件事件或传递数据。：复杂应用中多个组件共享全局状态。：触发事件的 DOM 元素。：绑定事件的 DOM 元素。：父组件向子组件传递数据。：React 事件通过。
2025-04-30 01:03:23
1092
原创 React JSX与函数组件Hooks
useEffect隔离副作用：保证渲染函数的纯粹性。生命周期管理：替代类组件的。依赖驱动执行：通过依赖项数组精确控制副作用触发时机。React 中的核心规则：渲染阶段必须保持纯净React 要求组件在渲染时：不直接修改 DOM（渲染函数应该是纯的）不执行网络请求不访问全局变量副作用必须隔离useEffect钩子中事件处理函数中（如onClick封装可复用逻辑规则：函数名以use开头，内部可调用其他 Hooks。将重复的组件逻辑（如表单处理、数据请求）封装成可复用的函数。
2025-04-30 01:03:18
1053
原创 Vue3 组件通信与插槽
- 父组件 Parent.vue --><template><Child/></script>-- 子组件 Child.vue --></script>// 组件A// 组件B。
2025-04-26 10:57:54
1195
原创 Vue3 Pinia
Pinia 适用场景需要 TypeScript 深度支持的项目希望简化状态管理流程的新项目需要模块化状态管理的复杂应用需要与服务端渲染（SSR）集成的项目。
2025-04-26 10:57:48
406
原创 Vue3 路由
路由是单页面应用（SPA）的核心机制，通过管理 URL 与组件的映射关系，实现不刷新页面切换视图的效果。Vue Router 是 Vue 官方路由解决方案，主要功能包括：嵌套路由映射动态路由匹配模块化的路由配置导航控制（编程式导航、导航守卫）自动的 CSS 类链接激活滚动行为控制。
2025-04-25 12:19:11
656
原创 Vue3 生命周期与Hooks
1. 鼠标位置跟踪 Hook})})// 组件中使用</script><template>鼠标位置：{{ x }}, {{ y }}2. 异步数据请求 Hooktry {})})return {data,error,loading,fetchData// 组件中使用})</script>
2025-04-25 12:18:54
1278
原创 Vue3 ref与props
对比维度ref(标签属性)props数据方向父 → 子（操作子组件/DOM）父 → 子（数据传递）可修改性可直接修改子组件暴露的内容只读（需通过事件通知父组件修改）响应式机制直接引用对象需要toRef保持响应性典型应用DOM操作/调用子组件方法组件参数配置组合式 API通过ref()创建引用通过声明ref属性：用于直接访问 DOM/子组件实例，需要配合使用props：用于父组件向子组件传递数据，需保持只读特性协作模式父组件通过props传递数据子组件通过事件通知父组件必要时通过ref。
2025-04-24 23:57:01
1160
原创 Vue3 setup、计算属性、侦听器、响应式API
通过合理组合使用这些 API，可以实现高效、可维护的响应式逻辑。：组合式 API 的入口，用于定义响应式数据、方法和生命周期钩子。计算属性需要保持响应性，通过函数形式确保正确访问最新值。需要保持引用的数据结构（如数组、Map、Set）需要重新赋值的对象（替换整个对象时保持响应性）独立的基本类型值（字符串、数字、布尔值）：创建依赖其他响应式数据的缓存计算结果。：立即执行函数，自动追踪依赖并响应变化。转换整个响应式对象的所有属性为 ref。逻辑相关的多个属性组合（如表单字段）：观察特定数据源变化，执行副作用。
2025-04-24 23:56:53
1142
原创 Vue3 模板语法
特性v-ifv-showv-for（需key渲染方式条件为假时销毁元素始终渲染，切换 CSS动态生成列表项性能初始渲染开销低切换开销低列表变化时依赖key优化适用场景不频繁切换的条件频繁显示/隐藏动态列表数据。
2025-04-23 23:38:38
1140
原创 Vue3速通笔记
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。<template><h2>姓名：{{name}}</h2>
2025-04-23 23:38:18
450
原创 Typescript速通教程笔记
TypeScript 由微软开发,是基于 JavaScript 的⼀个扩展语⾔。TypeScript 包含了 JavaScript 的所有内容,即: TypeScript 是 JavaScript 的超集。TypeScript 增加了:静态类型检查、接⼝、 泛型等很多现代开发特性,更适合⼤型项⽬的开发。TypeScript 需要编译为 JavaScript ,然后交给浏览器或其他 JavaScript 运⾏环境执⾏。装饰器本质是一种特殊的函数。
2025-04-21 23:36:00
311
原创 git详解
是 Git 的核心功能，允许开发者在不同的代码线上独立工作。暂存区覆盖工作区的命令：git restore 目标文件（注意：完全确认覆盖时使用）当两个分支修改了同一文件的同一部分时，Git 无法自动合并，需手动解决冲突。从暂存区移除文件的命令：git rm --cached 目标文件。注意：提交记录的顺序按照产生的先后顺序排列，而非合并的先后顺序。注意：如果文件已经被暂存区跟踪过，可以从暂存区移除即可。暂存区：暂时存储，可以临时恢复代码内容，与版本库解耦。：文件已被 Git 跟踪，但修改未添加到暂存区。
2025-04-21 23:35:36
2635
1
原创 Webpack基础
babel-loader：将ES6+代码转换为ES5语法，以便在旧版本的浏览器中运行。style-loader 和 css-loader：用于处理CSS文件。css-loader主要负责处理样式文件中的import和url语句，而style-loader将转换后的CSS模块直接注入到HTML页面中。file-loader 和 url-loader：用于处理图片和其他资源文件。
2025-04-18 11:37:51
1230
原创 Node.js模块化与npm
在 Node.js 中每个文件都被当做是一个独立的模块，模块内定义的变量和函数都是独立作用域的，因为 Node.js 在执行模块代码时，将使用如下所示的函数封装器对其进行封装：而且项目是由多个模块组成的，每个模块之间相互独立，按需加载，独立作用域。但是因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准叫 CommonJS 标准。CommonJS 标准语法（默认）ECMAScript 标准语法二、CommonJS 规范1. 基本语法。
2025-04-17 00:39:55
1675
原创 Node.js概念与模块
是一个基于的 JavaScript 运行时环境，专为服务器端和命令行工具设计。它采用和，能够高效处理高并发请求，尤其适合 I/O 密集型应用。：构建高性能的 HTTP 服务器（如 Express、Fastify）。：开发 RESTful API 或 GraphQL 服务。：聊天室、在线游戏（结合 WebSocket）。：构建 CLI 工具（如 Webpack、Babel）、自动化脚本。：轻量级服务间的通信（如消息队列、RPC）。：部署到 AWS Lambda、Vercel 等无服务器平台。
2025-04-17 00:39:42
1282
原创 JavaScript事件循环
执行顺序铁律同步代码 → 微任务 → 宏任务 → 渲染（浏览器）微任务优先每个宏任务执行完毕后，必须清空所有微任务队列任务嵌套规则微任务中产生的微任务会继续在当前批次执行宏任务中产生的任务会进入下一轮循环性能优化建议避免在微任务中进行耗时操作合理分配任务类型（密集计算使用宏任务分片）什么是事件循环？答案：执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制。为什么有事件循环？答案：JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型。
2025-04-16 21:19:38
1190
原创 Promise基础
是 JavaScript 中处理异步操作的标准化方案，用于替代传统的回调函数模式。它解决了“回调地狱”问题，使异步代码更易读、可维护。
2025-04-15 20:47:52
1115
原创 AJAX原理与XMLHttpRequest
AJAX（Asynchronous JavaScript and XML）核心原理：通过浏览器提供的 XMLHttpRequest（XHR）对象，实现异步通信，无需刷新页面即可与服务器交换数据。
2025-04-14 21:04:14
1401
原创 AJAX与Axios基础
Axios是一个基于 Promise 的现代化 HTTP 客户端库，用于浏览器和 Node.js 环境。它简化了 AJAX 请求的发送与响应处理，支持拦截器、取消请求、自动转换 JSON 数据等高级功能，是前端开发中最流行的 HTTP 请求工具之一。配置项适用方法数据位置常见数据格式paramsGET、DELETE 等URL 查询字符串键值对（对象或 URLSearchParams）dataPOST、PUT、PATCH 等请求体（Body）JSON、FormData、URL 编码字符串。
2025-04-14 21:04:08
1285
1
原创 URL结构、HTTP协议报文
请求报文：定义客户端的行为（获取或提交数据）。响应报文：反馈服务器处理结果及返回数据。理解报文结构是调试 API、优化性能（如缓存控制）和解决跨域问题的关键基础。
2025-04-13 13:07:05
788
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人