- 博客(125)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一道React缓存的题目
要求正确缓存表格的Header组件，当只修改bodyData，不触发TableHeader组件渲染。结合memo和useMemo缓存Header组件。以下HTML文件可直接在浏览器打开查看效果。
2026-05-30 17:56:41
311
原创 一道构造函数原型链相关的题目
Foo2.getValue (输出5) 是构造函数的静态方法，不影响实例。obj2 没有自己的 getValue，所以不会输出 2。obj2 继承自 Foo.prototype，因此调用的是原型上的方法，输出 3。
2026-05-29 19:21:52
227
原创 字符串相加
你不能使用任何內建的用于处理大整数的库（比如 BigInteger）， 也不能直接将输入的字符串转换为整数形式。给定两个字符串形式的非负整数 num1 和num2 ，计算它们的和并同样以字符串形式返回。输入：num1 = “11”, num2 = “123”输入：num1 = “456”, num2 = “77”输入：num1 = “0”, num2 = “0”
2026-05-28 18:08:22
22
原创 横向越权纵向越权
特性横向越权纵向越权核心定义相同权限等级的用户，越权访问其他同级别用户的资源低权限用户，越权访问高权限/管理员级别的资源和功能攻击方式修改请求中的用户ID、订单ID等标识符，越权访问他人数据绕过身份验证、篡改请求参数，将自身权限提升到更高等级攻击目标获取/操作其他普通用户的隐私数据获取管理员权限，执行系统级敏感操作。
2026-05-27 11:40:55
35
原创 最长回文子串
给你一个字符串 s，找到 s 中最长的 回文 子串。解释：“aba” 同样是符合题意的答案。输入：s = “babad”输入：s = “cbbd”
2026-05-26 11:47:48
18
原创 力扣-合并区间
以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] = [starti, endi]。请你合并所有重叠的区间，并返回 一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。输入：intervals = [[1,3],[2,6],[8,10],[15,18]]解释：区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].输出：[[1,6],[8,10],[15,18]]
2026-05-25 18:12:07
15
原创 手写Promise
还需要实现一个是否是Promise的判断，只要满足Promise A+规范就是Promise，Promise之间具有互操作性。第一个问题：then函数的两个参数onFulfilled和onRejected何时执行（then的回调执行时机）观察内部状态#state的变化触发then函数中的回调函数。最后需要注意的是要实现一个微队列（因为then的回调是放到微队列里的），需要区分node环境和浏览器环境。第二个问题：then中返回的Promise什么时候成功，什么时候失败（then的返回值）
2026-05-23 12:34:05
324
原创 React diff算法为什么是DFS，不是BFS
相比之下，层序遍历（BFS） 虽然能逐层比较，但在实际 UI 渲染中并无明显优势，反而会打乱组件的挂载顺序，导致生命周期混乱，也不利于错误边界（Error Boundary）等机制的实现。React 的 diff 算法采用深度优先遍历（DFS）而非层序遍历（BFS），主要是为了保证组件生命周期的执行顺序与渲染顺序一致，同时更高效地处理组件的挂载、更新和卸载过程。不管是React16之前的栈调和器，还是之后的链表调和器，diff的过程都是DFS（深度优先遍历）。
2026-05-21 17:55:21
72
原创 从前序与中序遍历序列构造二叉树
给定两个整数数组 preorder 和 inorder ，其中 preorder 是二叉树的先序遍历， inorder 是同一棵树的中序遍历，请构造二叉树并返回其根节点。
2026-05-18 08:21:16
20
原创 React搜索框组件
实现一个search input组件，用户输入任意内容后自动触发关键词api搜索需求：搜索不频繁触发，结果响应及时。下面仅给出React中防抖的实现，竞态请求的问题可以使用。
2026-05-15 14:37:03
95
原创 HTTP缓存
HTTP缓存是一种提升Web性能、减少服务器压力和带宽消耗的关键技术。它的核心思想是“就近存取”，将已请求过的资源副本保存在离用户更近的地方，当再次请求同一资源时，如果条件允许，就直接从本地或中间节点获取，而无需再次访问源服务器。
2026-05-14 15:30:35
337
原创 长度最小的子数组
给定一个含有 n 个正整数的数组和一个正整数 target。找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl+1, …, numsr-1, numsr] ，并返回其长度。如果不存在符合条件的子数组，返回 0。示例 1：输入：target = 7, nums = [2,3,1,2,4,3]输出：2解释：子数组 [4,3] 是该条件下的长度最小的子数组。示例 2：输入：target = 4, nums = [1,4,4]输出：1。
2026-05-13 12:48:54
41
原创 原生虚拟滚动条组件
必须使用 customElements 注册名为 v-scroll 的组件。组件需要代理页面上使用 内容段落 包裹的任意 DOM 内容。核心实现原理提示：请注意，这是基于原生滚动 + 自定义外观的方案。外层容器是一个真实的 overflow: auto 原生滚动容器，但是你需要通过 CSS 巧妙隐藏掉操作系统的默认滚动条，并另外用自定义 DOM去充当假滑块从而完全接管外观。
2026-05-10 17:39:01
206
原创 0.0.0.0是什么地址
比如我有一台服务器，一个外放地址A，一个内网地址B，如果我绑定的端口指定了0.0.0.0，那么通过内网地址或外网地址都可以访问我的应用。所以如果绑定0.0.0.0也有一定安全隐患，对于只需要内网访问的服务，可以只绑定内网地址。0.0.0.0是一个在IPv4中具有特殊含义的非真实网络地址，通常被称为“通配符地址”或“未指定地址”。在实际应用中，一般我们在服务端绑定端口的时候可以选择绑定到0.0.0.0，这样我的服务访问方就可以通过我的多个ip地址访问我的服务。0.0.0.0才是真正表示“本网络中的本机”。
2026-04-21 13:06:02
75
原创 localhost与127.0.0.1的区别
（Loopback Address）是IP协议中保留用于网络软件测试和本机进程间通信的特殊地址。当数据包发送到回环地址时，它不会离开本机进入外部网络，而是通过操作系统的内部机制直接“环回”到本机。这就像计算机给自己发送消息，主要用于检测本机的网络协议栈（如TCP/IP）是否正常工作。都指向本地计算机，但在本质和使用上存在关键区别。
2026-04-20 16:04:51
68
原创 HTTP1/2/3演变
以上管线化的示例图中，在http2.0中，http请求123不会阻塞了，但是单个请求内部的tcp序列还是存在队头阻塞的。即请求1内的1.1，1.2，1.3还是要按顺序接收的。从tcp下手了，tcp和操作系统绑定，不好优化，所以使用udp+quic完成，可以说是tcp2.0。（响应的时候必须按照发送的顺序接收，上图的1收不到会阻塞2和3）。有了长连接，很自然的，我可以一次连接同时发送多个http请求，即管线化技术。网络连接状态变化时，无需重连（不依赖ip地址，加了连接ID）。最大的问题，非长连接！
2026-04-18 16:18:19
282
原创 为什么客户端不存在跨域问题
如果App内部使用了WebView（嵌套浏览器内核）加载H5页面，且H5页面代码中发起了AJAX跨域请求，依然会遇到跨域问题。此时，需要开启WebView的跨域配置以允许请求。而原生应用直接运行在操作系统上，不受浏览器安全沙箱限制，拥有自由的网络访问权。安卓/IOS原生应用（App）不存在“前端跨域问题”，是因为。
2026-04-17 19:08:39
37
转载 U盾为何消失了
同步加强风险管控，老用户U盾额度大幅下调（单笔限额从50万降至1万，超额需双重认证）；银行为降低运维成本（单台U盾年维护费可支持200次云证书验证），2025年四大行全面停发新U盾，改用“云证书”（单笔百万额度）、“手机盾+人脸识别”等替代方案。传统U盾存在“人盾分离”风险（操作人非账户本人），旧款无指纹模块的安全性不足，2025年黑客30秒破解案例频发；传统U盾因缺乏生物特征验证（如指纹、人脸），法律效力被削弱。生物识别技术成为主流，手机盾+人脸识别组合验证精度更高，被称为“会认主人的隐形门”。
2026-04-16 20:19:22
55
原创 git技巧之时间穿梭
不小心执行了git reset --hard之后的代码如何找回？下面看一个场景：这是执行reset --hard之前的commit信息，共有4个提交在执行了git reset --hard到delete Todo之后，最新的lost commit丢失了。git log中也不存在相关信息。
2026-04-15 10:34:00
37
原创 微前端之模块联邦
两种角色：Host消费模块，Remote暴露模块核心配置动态加载：运行时按需加载远程模块透明集成：开发体验接近本地模块Module Federation将依赖管理从“构建时”推迟到“运行时”，为微前端架构和多应用场景提供了优雅的解决方案。
2026-04-13 19:31:11
249
原创 React性能优化
优化手段适用场景是否推荐React.memo子组件props稳定强烈推荐useMemo复杂计算、昂贵函数推荐回调传给memoized子组件推荐虚拟滚动长列表（>500项）必须使用非首屏组件推荐不要过早优化。先保证功能正确，再用工具定位瓶颈，针对性优化。
2026-04-12 11:04:52
687
原创 JS获取CSS动画的旋转角度
CSS 动画（如 @keyframes rotate）由浏览器渲染引擎执行，JavaScript 无法直接读取动画的“当前帧”状态，但可以通过 getComputedStyle() 获取元素应用后的最终 transform 样式。该样式返回的是一个 matrix() 或 matrix3d() 函数字符串，需解析其矩阵参数来计算角度。
2026-04-11 09:23:17
57
原创 Webpack5构建效率优化
Webpack构建效率的优化是前端工程化中的关键环节，尤其在大型项目中，构建时间从30秒缩短到5秒以内，能显著提升开发体验与团队协作效率。
2026-04-10 13:19:43
718
原创 React Fiber架构
一个宏大的、不可打断的渲染任务。一个可拆分、可暂停、可调度、可赋予优先级的协作式系统。Fiber解决的是关乎用户体验的根本问题：如何确保应用在持续进行复杂计算的同时，依然能保持用户交互的流畅性和视觉响应。React通过引入Fiber将计算Virtual DOM diff的过程拆分，避免长时间占用主线程。
2026-04-09 10:45:40
354
原创 比较版本号
给你两个 版本号字符串 version1 和 version2 ，请你比较它们。版本号由被点 ‘.’ 分开的修订号组成。比较版本号时，请按 从左到右的顺序 依次比较它们的修订号。如果其中一个版本字符串的修订号较少，则将缺失的修订号视为 0。由于分割后的字符串仅包含数字，这里前导0不需要特意去除，字符串转为数字后会自动去除前导0。version1 和 version2 的所有修订号都可以存储在 32 位整数 中。如果 version1 < version2 返回 -1，
2026-04-08 10:23:14
45
原创 git技巧之谁删了我的代码
某天，某个文件中的某行代码不翼而飞了。你想知道是谁删了你的代码，好当面跟他友好交流。你记得在leetcode.js文件中写过的一个Todo不见了，想知道是谁删了它。
2026-04-04 06:29:22
266
原创 将扁平化的数组转换为树形结构
通过 Map 或对象，以 id 为键存储每个节点的引用，并为每个节点添加 children 数组。：再次遍历数组，根据 pid 找到父节点，将当前节点添加到父节点的 children 中。：如果节点的 pid 等于指定的 rootPid，则将其作为树的根节点直接加入结果数组。这种方法的时间复杂度为 O(n)。
2026-04-02 15:58:34
25
原创 CSS动画倍速播放
综上，我们使用CSS圆锥渐变实现了一个简易大转盘，并使其按照2秒1圈的速度匀速转动。js中维护了animationSpeed状态代表倍速，初始值为1。通过将其设置为2实现2倍速播放。实战中，我们需要对希望支持倍速播放的动画的每一部分的动画持续时间都做CSS变量的插值，防止出现时间轴错乱的情况。完成一次动画的持续时间越短，动画越快。因此将初始动画持续时间除以倍速即可。要测试大转盘动画在不同转速下的效果。
2026-03-30 11:03:16
24
原创 CSS文字外描边
属性是中心描边，描边会同时向文字内外扩展，这会导致文字本身的视觉重量（字重）被侵蚀，同时描边比预期的细。通过伪元素绝对定位的方法，可以实现仅向外扩展的外描边效果，从而避免这个问题。核心原理是创建两层文字：底层用于描边，顶层用于显示原始文字颜色，并通过绝对定位将它们重叠。需要注意的是底层伪元素的描边宽度要设置为期望描边宽度的两倍。第一行文字是原生的中心描边效果，第二行文字是使用伪元素的外描边效果。实际项目开发中可以将fontStroke封装为mixin方便复用。
2026-03-29 09:53:00
147
原创 CSS飞行动画纠偏
日常开发中经常遇到CSS的飞行动画，要求精准飞到某个目标物体。由于飞行物体与目标物体的定位方式可能不同，比如飞行动画是相对屏幕居中定位，目标物体是相对屏幕底部定位。用户的手机屏幕高度又有区别，所以无法保证一开始的飞行动画一定精确，需要在其渲染到屏幕后进行动态纠偏。在飞行物体与目标物体渲染到屏幕之后，获取他们的中心位置。相减得到应该移动的距离，与动画中的移动距离相除得到缩放因子。将该缩放因子插值到动画的每一帧。
2026-03-28 10:37:21
228
原创 在React中实现CSS动画的回放
这种方式需要注意的是toggle类名的时候要在下一帧重新添加，否则会被React合并导致不生效。优点是简单直接，性能好。对于大多数简单场景，重置类名是性能和复杂度平衡的最佳选择。缺点是会导致组件完全重新挂载，可能影响性能。
2026-03-27 09:58:47
81
原创 控制CSS动画播放与暂停
在日常的动画开发过程中，经常遇到需要暂停/继续播放动画的场景。要控制CSS动画的播放与暂停，核心是使用 animation-play-state 属性，并通过JavaScript动态切换其值。
2026-03-26 11:27:39
36
原创 CSS动画时间监听组件
时间监听组件接收animationDuration和onAnimationEnd两个参数，组件内部有一个用于与外部动画同步的虚拟动画，动画时间通过css变量的形式设置到动画中，然后监听动画的animationend事件执行回调。这样能够保证与外部CSS动画时间线同步且易于调试。在实际的动画开发过程中，经常遇到需要在动画播放到某一时刻处理业务逻辑的场景。
2026-03-25 11:49:27
50
简易计算器.html
2020-03-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人