- 博客(110)
- 收藏
- 关注
RSS订阅原创 React 腾讯面试手写题
题目如下：用 React 和 JS 实现一个组件，组件分为左右两块左侧模块：展示可选列表，如 [1,2,3,4,5]，每一项是一个 checkbox，可以勾选和取消勾选时，右侧模块会展示已选项的列表，并且每项旁边有个删除按钮，点击删除后，左侧对应项也会取消勾选。
2025-08-12 17:20:52
105
原创 打包工具：WebPack 和 Vite 对比
摘要： Vite与WebPack的核心差异主要体现在开发模式、构建工具、启动速度和热更新等方面。Vite基于ES Modules实现按需编译，开发启动快，适合现代浏览器项目；而WebPack需完整打包，配置复杂但生态成熟，兼容性更强。Vite适用于大型项目、快速原型开发及现代浏览器场景；WebPack则更适合需要支持旧浏览器或高度定制化的项目。生产环境下，Vite基于Rollup优化，WebPack则通过代码拆分等处理复杂场景。开发者需根据项目需求选择工具。
2025-08-12 06:44:23
740
原创 React：useEffect 与副作用
React 中的 useEffect 钩子若依赖数组配置不当，可能导致副作用重复执行、状态更新不及时或性能问题。未优化代码中，遗漏依赖数组会使副作用在每次渲染时都执行，而依赖项遗漏则会导致闭包问题。优化方案包括：1）正确声明依赖项；2）空数组用于仅需挂载/卸载的场景；3）使用 useCallback/useMemo 减少依赖。合理配置依赖数组可提升性能，避免无效渲染，关键在于精确声明依赖关系，平衡执行频率与状态同步需求。（150字）
2025-08-10 10:51:07
300
原创 浏览器：缓存机制
浏览器缓存机制通过存储位置和缓存类型两个维度进行管理。缓存位置分为Service Worker、Memory Cache、Disk Cache和Push Cache四级，优先级依次降低。Service Worker可精细控制缓存，但需HTTPS协议；Memory Cache读取快但生命周期短；Disk Cache容量大且遵循HTTP头部控制；Push Cache是HTTP/2新增的会话级短暂缓存。缓存类型分为强制缓存和协商缓存：强制缓存通过Cache-control（相对时间）和Expires（绝对时间）字
2025-08-09 19:58:12
1125
原创 CSS：BFC
摘要： BFC（块级格式化上下文）是CSS中独立的布局环境，内部元素不受外部影响。触发方式包括根元素、浮动/定位元素、overflow非visible及特定display值。特性：垂直排列、边距不合并、包含浮动、隔离外部浮动。应用场景：解决浮动塌陷（父元素触发BFC）、避免边距合并（包裹BFC容器）、自适应两栏布局（BFC不与浮动重叠）。注意：过度使用可能增加复杂度，Flexbox/Grid可部分替代。BFC是CSS布局的重要机制，合理使用可高效解决布局问题。
2025-08-08 20:10:03
345
原创 React：受控组件和非受控组件
受控组件的数据流是双向的。缺点是代码量较多，尤其是表单复杂时，需要为每个输入字段编写事件处理逻辑。受控组件是指表单元素的值由 React 组件的状态（state）控制。与受控组件相反，非受控组件可以直接编辑组件的值。非受控组件的值由 DOM 自身管理，而不是通过 React 状态控制。直接访问 DOM 元素的值，适用于简单表单或需要集成第三方库的场景。需要实时验证或动态控制表单行为时，优先使用受控组件。事件，那它就是受控组件，也就是受。要获取非受控组件的值，需要通过。要获取组件的值，直接使用。
2025-08-06 20:50:28
489
原创 React：生命周期
React 生命周期分为挂载、更新和卸载三个阶段。挂载阶段包括constructor初始化、getDerivedStateFromProps处理props、render渲染和componentDidMount执行副作用操作。更新阶段通过shouldComponentUpdate优化渲染，使用getSnapshotBeforeUpdate捕获DOM信息，componentDidUpdate执行更新后操作。卸载阶段通过componentWillUnmount进行清理。废弃的生命周期方法已被标记，函数组件可使用u
2025-08-06 17:38:20
336
原创 JavaScript：链式调用
链式调用（Method Chaining）是 JavaScript 中一种常见的编程模式，允许通过连续调用对象的方法来简化代码。这种模式的核心在于每个方法返回调用对象本身（通常是 ），从而可以继续调用其他方法。链式调用的关键在于每个方法返回当前对象（）。这样，每次方法调用后，可以立即调用下一个方法。例如：优点代码简洁：减少重复代码，避免多次引用同一对象。可读性高：链式调用的代码通常更接近自然语言，易于理解。流畅接口：适合构建流畅的 API 或 DSL（领域特定语言）。常见应用场景jQue
2025-08-05 17:37:22
618
原创 JavaScript：Proxy 代理
ES6 Proxy 简介 ES6 Proxy 允许创建对象的代理，拦截并自定义底层操作。通过 new Proxy(target, handler) 语法创建代理对象，其中 handler 包含拦截方法（如 get 和 set）。主要用途包括数据验证、日志记录和性能优化。相比 Vue2 的 Object.defineProperty（需要深度遍历属性），Proxy 直接监听整个对象，无需遍历且能检测属性增删，性能更优。Vue3 采用 Proxy 实现响应式，通过操作代理对象间接修改原对象。
2025-08-05 17:04:02
393
原创 WebSocket
WebSocket协议是HTML5新增的通信协议，它通过HTTP完成握手后建立持久连接，实现服务器主动推送消息。相比传统HTTP，WebSocket具有实时性高、资源占用少的优势，但存在兼容性和连接维护成本问题。握手过程包含特殊HTTP请求头，协商成功后转为全双工通信。前端可通过原生WebSocket API或封装库Socket.io实现即时通讯，后者提供事件管理和兼容处理。常见即时通讯方案还包括短轮询和长轮询，但WebSocket在性能和实时性上更优。
2025-08-03 13:00:50
664
原创 JavaScript：闭包及内存泄漏
本文介绍了JavaScript中的词法环境和闭包概念。词法环境指函数所在作用域中的变量，如内部函数可以访问外部函数的变量。闭包由函数及其词法环境组成，当函数未被销毁时，其词法环境也会保留。闭包可能导致内存泄漏：1）持有不需要的函数引用会阻止词法环境销毁；2）多个函数共享词法环境时，可能导致内存空间无法回收。合理使用闭包可以避免不必要的内存占用。
2025-08-03 10:45:00
185
原创 JavaScript：计时器不精确的原因及如何实现准确的 setInterval
比如延后了，那么下次就提前执行，但是打算提前执行的这一次，它在真正执行的时候，这一帧也有可能被推迟，那么我们就在计时器到达之后继续提前。渲染帧不会受失活页面的影响，哪怕页面失活，也会依次进行，但是渲染帧会受很多其他因素的影响。比如你在打游戏或者看剧，这时候电脑卡了（比如操作系统卡了、浏览器卡了、某些页面卡了等等），是会影响到渲染帧的。web 标准对嵌套计时器设置了最小延迟限制，即使计时器设置的延迟时间为 0，当嵌套层次 >= 5 时，会有一个 4ms 的最小延迟时间。（通常精确到微秒），适合测量时间间隔。
2025-08-03 08:00:00
249
原创 大文件上传：自定义协议
本文介绍了文件上传所需的核心交互协议。首先通过创建文件协议获取唯一标识uploadToken和分片大小chunkSize；其次通过hash校验协议验证分片或文件的完整性，包含hash类型、值、是否已存储等信息；然后通过分片数据上传协议传输具体分片内容；最后通过分片合并协议完成文件合并。这些协议共同构成了一个完整的文件上传流程，确保前后端能高效、可靠地完成大文件分片上传任务。
2025-08-02 15:08:54
274
原创 大文件上传：基本流程
摘要 大文件上传的前端处理方案主要包含三个关键技术点：1) 使用Web Worker多线程分片计算文件哈希值，避免主线程阻塞；2) 采用并发控制策略上传分片（通常限制6个并行请求），通过FormData携带分片元数据；3) 实现动态分片调整，利用EMA算法平滑网络速度波动，根据实时网速自动优化分片大小（高速网络增大分片，弱网减小分片）。整个方案结合IndexedDB存储、断点续传和进度监控，有效提升大文件上传的可靠性和用户体验。（149字）
2025-08-02 13:49:48
999
原创 「Vue」虚拟 DOM
本文介绍了虚拟DOM的概念及其在Vue中的应用。虚拟DOM是一个JS对象，用于描述视图结构。每个Vue组件通过render函数生成虚拟DOM树，避免直接操作真实DOM带来的性能损耗。当数据变化时，Vue会对比新旧虚拟DOM树，只更新必要的节点。文章还解释了模板与虚拟DOM的关系：模板通过编译转换为render函数，最终生成虚拟DOM。Vue提供了运行时编译和打包时预编译两种方式，预编译能提升性能并减小包体积。模板的存在是为了方便开发，最终Vue运行需要的是render函数而非模板。
2025-08-02 08:00:00
418
原创 事件循环原理
浏览器采用多进程多线程架构，渲染主线程通过事件循环机制处理各种任务，包括解析HTML、执行JS等。为避免阻塞，浏览器采用异步方式处理耗时任务，将任务交给其他线程处理后再通过消息队列调度执行。任务队列分为不同优先级，其中微队列任务优先执行。这种异步模式保证了单线程浏览器的流畅运行。
2025-08-01 17:15:51
662
原创 浏览器渲染过程
这篇文章详细介绍了浏览器渲染页面的完整流程，主要包括6个关键步骤：HTML解析构建DOM树、CSS解析构建CSSOM树、样式计算、布局计算、分层和绘制。其中重点分析了CSS和JS对解析过程的影响差异：CSS不会阻塞HTML解析，而JS会阻塞。此外，文章还解释了transform性能优异的原因（仅影响合成线程的绘制阶段），以及分层机制如何提高渲染效率。整个过程涉及主线程、合成线程和GPU进程的协同工作，最终将页面内容呈现到屏幕上。
2025-08-01 16:59:28
1584
原创 「Spring MVC」Session、Cookie
1. 介绍 Session 和 Cookie，以及如何获取它们。2. 如何获取 Header
2024-08-14 08:22:33
1899
10
原创 「JavaEE」Spring IoC：依赖注入
依赖注入描述的是一个过程，指的是 IoC 容器在创建 Bean 时, 提供运行时所依赖的对象通俗来讲就是把对象取出来放到某个类的属性中Spring 提供了三种依赖注入的方式：属性注入(Field Injection)构造方法注入(Constructor Injection)Setter 注入(Setter Injection)
2024-07-31 16:00:00
1599
6
原创 「JavaEE」Spring IoC：Bean 的存储
IoC 全称 Inversion of Control，即控制反转控制反转是指控制权反转：获得依赖对象的过程被反转了传统开发模式中，需要某个对象时，我们要自己通过 new 来创建对象, 现在无需自行创建, 而是把创建对象的任务交给容器, 程序中只需依赖注入 (Dependency Injection, 简称 DI) 就可以了。这个容器称为 IoC 容器Spring 是一个 IoC 容器, 所以 Spring 有时也被称为 Spring 容器。作为容器, 它具备两个最基础的功能：存和取。
2024-07-30 20:19:47
1453
2
原创 「网络通信」HTTP 协议
HTTP 协议全称为超文本传输协议，超文本比文本更加强大，它不仅包含字符串，还可以携带一些图片、特殊格式等HTTP 最主要的应用场景就是网站。浏览器和服务器、客户端和服务器之间传输数据的协议，很可能就是 HTTP。
2024-07-14 08:20:05
1543
1
原创 「网络编程」基于 UDP 协议实现回显服务器
操作系统给我们提供的进行网络编程的 api 称为socket api（网络编程套接字），具体到传输层，有两个重要的协议的 api ——UDP api和TCP api，本文我们介绍的是 UDP apiUDP 有四个特点：无连接、不可靠传输、面向数据报、全双工。这在后文中会解释Java 对系统原生的 api 进行了封装，UDP socket 有两个核心的类操作系统中有一类文件，叫作socket 文件，它和我们之前所说的“文件”不太一样，我们平时所说的普通文件、目录文件位于硬盘。
2024-05-29 10:58:22
2639
4
原创 「JavaEE」多线程案例分析2：实现定时器
定时器类似一个闹钟，时间到了之后就会执行相应的任务Java 标准库中已经实现了一个定时器的类 Timer在定义好 timer 之后可以调用schedule把一个或多个任务（TimerTask）添加到定时器中@Override},2000);第一个参数就是任务内容，每个任务后面都会带有一个时间（第二个参数），这个时间是“相对时间”，是以 schedule 时的时间为基准，过了相对时间后才执行比如 2000ms，它表示调用 schedule 后再过 2000ms 就会执行这个任务。
2024-05-14 09:07:32
952
1
原创 「JavaEE」多线程案例分析3：线程池
池”是一个非常重要的概念，我们之前学的字符串常量池就是一种常量池除了常量池，还有数据库连接池、线程池、进程池、内存池……提前把要用的对象准备好对象用完后也不要立即释放，而是先留着，以备下次使用我们主要来分析线程池它是存放线程的池，会把要使用的线程提前创建好，用完之后也不会立即释放，而是放回线程池里。这样就可以节省创建及销毁线程的开销那为什么从线程池里取线程就比向系统申请更高效呢？因为从池里取，这部分是通过代码实现的，代码是我们自己写的，是纯用户态的（可控的）；
2024-05-14 09:00:00
1220
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人