博客 | LeylaTop

博客标签笔记工具关于

2026

前端重构，小步快跑

保留 action 和 state 契约，用兼容入口逐步迁移，避免同时重写全部状态逻辑。
preload 和 fetchpriority的区别

测量资源发现时间，区分提前请求和调整已发现资源的优先级。
React 页面卡顿：用 Performance 找到重复计算

用可导入 Performance 面板的 trace 观察一次人工构造的卡顿。
同一个查询任务，脚本、工作流和 Agent 的区别

比较固定步骤、预设分支和决策循环，用模拟动作检查执行过程。
用 Node.js 实现并调用一个只读 MCP 工具

通过 stdio 连接客户端和服务端，完成工具发现、调用与错误处理。
从文本到向量，用 Node.js 实现一个语义检索

生成文本向量、计算余弦相似度，再用三条文档观察检索结果。

2025

解决国内 google 账号没有办法使用 Antigravity 的方案

解决国内 google 账号没有办法使用 Antigravity 的方案
解决 iframe 动态更新时的闪烁问题：双缓冲技术实践

使用双缓冲技术实践，解决 iframe 动态更新时的闪烁问题
用 Babel 和 iframe 实现 React 单文件组件预览

完整实现 JSX 转换、组件渲染、执行状态与错误展示。
AI 生成代码的预览方案：HTML、React 组件和完整项目

从生成内容的格式出发，比较 iframe、浏览器编译和项目运行环境的用途。
流式输出经 Nginx 二次验证问题

配置本地 HTTPS 反向代理，区分代理缓冲、超时与应用输出。
Next.js 流式 SSR：页面内容如何分批返回

用 Suspense 和一个慢组件观察 HTML 输出顺序，以及页面显示和交互的区别。
使用 acme.sh 自动续签阿里云 SSL 证书

使用 acme.sh 自动续签阿里云 SSL 证书
用 Next.js 实现流式接口，React 中逐步显示返回内容

从聊天页面的逐步输出开始，实现流式响应、分块解析和请求取消。
从 0 开始配置 macbook

前端程序员从 0 开始配置 macbook 常用软件和系统配置
Docker Compose之启动与就绪

提供带数据库健康检查和数据卷的小实验，说明容器运行的验证范围。
大文件切割后，完整性传输确认

用 React 和 Node 做分片上传，检查乱序、重复请求、缺块和 SHA256。
Node.js 中的 Session 和 JWT：登录、过期与退出

比较服务端保存会话和客户端携带令牌的区别，观察过期、撤销与权限变化。
阿里云域名解析到服务器及SSL证书配置

阿里云域名解析到服务器及SSL证书配置
基于阿里云Centos配置nginx

基于阿里云Centos配置nginx
Node.js 登录接口中的 Cookie 和 Session 是怎么配合的

从登录响应到后续请求，观察 Set-Cookie、HttpOnly、过期和退出登录。

2024

CDN 脚本加载失败，换地址这件事也要有限度

做一个有限候选地址的脚本重试，区分资源错误与执行错误。
基于 rsbuild 快速集成 Sentry 流程

基于 rsbuild 快速集成 Sentry 流程
webpack 之 Loader 和 Plugin 职责区分

把文本变成模块，再在资源阶段生成清单，使用可执行的构建验收。
axios 适配器以及适配器选择逻辑

axios 是一个基于 promise 的 HTTP 库，可以用于浏览器和 node.js 中。关键词：跨端、基于 promise、HTTP 库
固定高度虚拟列表应用

从可见范围、占位高度和 overscan 开始，并验证顶部与最后一行。
接口返回旧数据，如何排查浏览器和代理缓存

从请求有没有到达服务端开始，通过 Cache-Control、ETag 和源站日志定位旧数据。
ESLint 配置流程

前端仓库配置 ESLint 流程
Context 里的颜色没变，为什么组件还是更新了

比较 Provider value 的引用稳定性，并把父组件更新这个变量隔开。
谨慎直接 require 没有写进 package.json 的包

用两份本地小包比较 npm 与 pnpm 的默认依赖布局。

2023

可视化之 DOM、SVG 和 Canvas 拖拽区别

共享一份坐标数据，对比绘制、命中检测、高清屏和键盘交互。
webpack之详解 module、chunk、bundle

对照源码、构建统计和输出文件，不把 chunk 简单等同于一个文件。
写了 export，为什么打包后有的代码还在

用最小生产构建检查未使用导出，区分分析、压缩和副作用。
使用脚本解决每次都需要手动推送新建 git 分支的问题

每次都需要手动推送新建 git 分支，非常麻烦。
ref 应用场景：读取异步回调的值

用聚焦和延迟回调比较渲染快照与最新值，说明 ref 不触发界面更新。
React Function组件 useEffect 多次执行原理

用定时器观察 StrictMode、依赖变化和卸载，不用 ref 隐藏重复执行。

2022

css 层叠上下文导致的 hover 抓不到子元素的 bug

css 层叠上下文导致的 hover 抓不到子元素的 bug
观察 Redux 中间件里的 dispatch 和 next

用 thunk 和 logger 观察普通 action、函数 action 和 Promise 返回值。
写一个数 Markdown 文件的 Node 命令行工具

从参数和退出码开始，再用 npm pack 检查真正安装出去的内容。
你不知道的 js 拆箱操作

拆箱操作的详细解释和使用示例

2021

锁文件提交了以后，构建为什么还是要用 npm ci

分清依赖范围和安装结果，用本地包观察锁文件与清单不一致时的行为。
你不知道的 parseInt 方法

parseInt 方法的详细解释和使用示例
path.resolve 和 require.resolve的区别

分清路径计算、模块查找、运行目录和平台分隔符。
理解css 1234值表示法

css 属性的四个值的属性从左上角开始，顺时针设置

豫ICP备2024078050号-1 |

豫公网安备41010502006082

Press Esc or click anywhere to close