如何排查网站资源加载“慢”？

如何排查网站资源加载“慢”？

xinyu_he

2025 年 04 月 25 日

80 次浏览

暂无评论

1180字数

线上故障记录

## 背景

> 背景：个人博客文章加载不出来
>
> - [个人博客](http://www.hxy.bj.cn)
> - 所有文章显示“loading..”，加载不出来，必须强刷新重新请求有可能才可以。

如图所示：

![image.png](http://www.hxy.bj.cn/usr/uploads/2025/04/3280169690.png)

### 排查介入

#### 第一时间怀疑是服务器资源问题，因网站资源都是本地存储，怀疑是`大图片`导致网站加载慢。

- 监控服务器cpu，mem，磁盘io，网络带宽都正常

#### 随后又进行nginx配置优化，并无效果。

#### F12查看接口url加载情况

- 发现有一个js文件，网络连接超时。

异常截图：

![image.png](http://www.hxy.bj.cn/usr/uploads/2025/04/3249853727.png)

正常截图：

![image.png](http://www.hxy.bj.cn/usr/uploads/2025/04/284855738.png)

### 结论

> 通过控制台观察正常/异常请求，卡在一个js文件，是vditor资源（markdown）文件。
>
> 由于vditor 本身的库比较大（大部分资源都是按需加载，不是每次打开都一起加载），所以handsome主题默认不对vditor进行本地化（即使公共CDN库选择本地），可以通过以下操作来本地化这部分资源：
>
> 原因：vditor库是通过国外cdn连接的，偶尔可能出现网络超时的情况。

### 解决方法

可以通过以下操作来本地化这部分资源：

* 你可以点击[https://www.jsdelivr.com/package/npm/vditor](https://www.jsdelivr.com/package/npm/vditor) 该链接，下载解压压缩包（这个链接如果打不开，可以通过该地址下载，下载传输链接：[https://cowtransfer.com/s/e521c1e60a2045](https://cowtransfer.com/s/e521c1e60a2045) ）。
* 将压缩包中的`dist`** 文件夹移动到主题目录下面的assets/libs/vditor目录下**（如果没有vditor文件夹就手动创建一个！）

#### 验证

> 由国外cdn转为本地资源加载

![image.png](http://www.hxy.bj.cn/usr/uploads/2025/04/396540548.png)

最后修改：2025 年 04 月 25 日