每周一文 | Fanghongliang's blog

前言

总结开发中遇到的思路，方法-dev

SWR优化网页体验

SWR 是用于数据请求的 React Hooks 库；

“SWR” 这个名字来自于 stale-while-revalidate：一种由 HTTP RFC 5861(opens in a new tab) 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据（过期的），同时发送 fetch 请求（重新验证），最后得到最新数据。

使用 SWR，组件将会不断地、自动获得最新数据流。
UI 也会一直保持快速响应。


import { SWRConfig } from "swr";

function App() {
  return (
    // 全局禁用焦点重新验证 + 禁用错误自动重试
    <SWRConfig value={{ revalidateOnFocus: false, errorRetryCount: 0 }}>
      <YourComponent />
    </SWRConfig>
  );
}

revalidateOnFocus: false
默认行为：当浏览器窗口重新获得焦点（如用户切换回标签页）时，SWR 会自动触发数据的重新验证（重新请求数据）。

设置作用：禁用焦点触发重新验证，避免不必要的网络请求。适用于：

数据更新频率要求不高的场景（如静态数据）

减少对后端的压力

防止页面闪烁（频繁数据刷新）

errorRetryCount: 0
默认行为：SWR 在请求失败时会自动重试（默认重试 3 次），每次重试间隔按指数退避算法递增。

设置作用：禁用错误自动重试机制，使请求失败后立即停止重试。适用于：

需要快速反馈错误（如显示错误提示）

避免因服务不可用导致的无限重试（如 404 错误）

手动控制重试逻辑（如用户点击“重试”按钮）

通过合理配置，可以显著优化应用的网络请求行为和用户体验。

优化体验

配置，如上文
React.Suspense

npm包开发-软链

背景

最近在打通全链路监控，前端方面依赖腾讯云自研的sdk实现前端监控，有部分需求要和apm合作，进行sdk的修改，sdk的修改不同于一般项目，它是一个npm包，在本地开发测试npm包，需要用到软链

什么是软链

简单说就是为开发的模块(待发布的npm包)创造一个全局链接，在主项目里链接这个依赖的模块，进行测试。

如何创建、使用软链

SDK 开发需要将本地代码代理到用户项目或者页面中，这里有两种方式

如果用户页面使用 cdn 模式

SDK项目启动后，可以使用 whistle 把 cdn 地址代理到本地，代理地址

1	tam.cdn-go.cn/aegis-sdk/latest/aegis.min.js [project_path]/aegis-sdk/packages/web-sdk/lib/aegis.js

如果用户项目使用 npm 包

项目启动后，cd 到 packages/web-sdk，在控制台执行

npm link

创建一个全局的链接，npm link作用在本地目录中创建一个符号链接，将一个包与依赖该包的项目之间建立关联。这样可以在本地工作在一个包上，而无需将其发布到注册表中。

在需要调试的项目中执行

1 2	npm link packageName npm link @tencent/aegis-web-sdk // 例如腾讯云监控包

注意：这里的packageName一定要对应你的npm包package.json里的name字段值。

通过上边两步，我们已经可以在主项目里使用位于本地的npm包开发测试了

去除软链

1 2	npm unlink npm link packageName

查看所有创建的全局链接名称

1	npm ls --global --depth 0

事件循环以及微宏任务

一文彻底厘清js事件循环和微任务、宏任务

浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于事件循环的。

理解事件循环的工作方式对于代码优化很重要，有时对于正确的架构也很重要。

事件循环
事件循环的概念非常简单。它是一个在 JavaScript 引擎等待任务，执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。

引擎的一般算法：

当有任务时：
从最先进入的任务开始执行。
休眠直到出现任务，然后转到第 1 步。
当我们浏览一个网页时就是上述这种形式。JavaScript 引擎大多数时候不执行任何操作，它仅在脚本/处理程序/事件激活时执行。

任务示例：

当外部脚本