通过 Nginx 访问静态资源，加载很慢，如何分析问题？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2080 天前的主题，其中的信息可能已经有所发展或是发生改变。

使用 vue 写了个项目练手，发现 js 加载很慢。

网站： http://www.hi-cat.cn

js : http://www.hi-cat.cn/static/js/vendor.9af8cbe972dffd99c357.js 大小 620 k。

服务器配置：2 核 8g 5M 带宽

nginx 版本：1.15.8

nginx 配置：

server {
    listen 80;
    listen [::]:80;

    root /var/www/hi-cat.cn;
    index index.html;
    server_name www.hi-cat.cn;
    access_log /var/log/nginx/hi-cat.access.log;
    error_log /var/log/nginx/hi-cat.error.log;

    location  / {
        try_files $uri /index.html ;
    }
    location  /api {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host        $host;
        proxy_redirect off;
    }

}

我发现页面再在加载 http://www.hi-cat.cn/static/js/vendor.9af8cbe972dffd99c357.js 的时候所使用的时间不固定 ,很多时候需要花费 3~4s 时间。

服务器上也没有跑其他程序，我 5M 的带宽，为什么加载时间会这么长？

如果我的 nginx 没有开启 gzip 压缩的话，文件大小在 1.7m ，加载时间会达到 8s。

不考虑使用 CDN，也不考虑优化 JS，如何分析加载很慢的原因？

第 1 条附言 · 2019-03-15 15:40:47 +08:00

排查了一下，发现我的 Chrome 开启了 Disable cache 功能。

关闭之后 , 加载速度稳定在 300ms ~ 2s

24 条回复 • 2019-03-16 09:19:27 +08:00

xiangyuecn

2019-03-15 15:04:56 +08:00

还要分析？你不说了原因吗。。。5M

shuax

2019-03-15 15:11:12 +08:00

你不会以为 5M 的意思是 5m/s 吧

HarryQu

2019-03-15 15:13:03 +08:00

@xiangyuecn
5M 带宽理论上来讲下载一个 620KB 的文件，需要 1s 多，可实际都已经达到了 4S。

aniua

2019-03-15 15:16:00 +08:00

5Mbps=640KBps，理想情况下单这个文件下载就需要 3s 左右，加载页面时浏览器是并发下载，你这么慢就不意外了啊。
下次就快了，浏览器会缓存 js。

Lax

2019-03-15 15:20:22 +08:00

都用了什么库？这么简单个页面不至于 620KB 啊

aniua

2019-03-15 15:20:28 +08:00

@HarryQu 我这边测试下载你这个文件，最快是 2.2s ，考虑到建立连接的开销，这个速度没什么问题。

结论是，无需优化 /提高 Gzip 等级 /加钱升级带宽。

MonoLogueChi

2019-03-15 15:21:56 +08:00 via Android

我看到的情况是，你已经开启了 gzip 压缩，资源全部请求完成时长 1.9s ，那个 js 总共用时 650ms，TTFB 30ms，速度中规中矩，可能是你测试环境的问题吧

Juszoe

2019-03-15 15:23:42 +08:00

既然你用的腾讯云，建议使用腾讯云对象存储服务，存放静态文件，减少服务器带宽压力

wunonglin

2019-03-15 15:24:02 +08:00

静态文件为什么不用 cdn ？

grewer

2019-03-15 15:31:38 +08:00

把 vendor 拆一下,并行加载可缩短 0.5s

HarryQu

2019-03-15 15:44:03 +08:00

@Lax
现在主要排查问题，我隐藏了很多页面的入门，如果 nginx 不开启 gzip 的，js 大小为 1.7M
依赖如下：

"axios": "^0.18.0",
"element-ui": "^2.5.4",
"highlight.js": "^9.14.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lodash": "^4.17.11",
"marked": "^0.6.0",
"moment": "^2.24.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"

HarryQu

2019-03-15 15:45:40 +08:00

@wunonglin 自己项目，页面正在开发中，主要奇怪我 5M 带宽加载这么小的文件，为什么需要那么久。

HarryQu

2019-03-15 15:49:09 +08:00

@grewer 是该研究一下拆分 vendor，没开 gizp 的话，1.7M 大小。
@MonoLogueChi 是我环境问题，我的 Chrome 开启了 Disable cache 之后。win 下强制刷新文件下载时间才那么长。

zhoulouzi

2019-03-15 15:49:24 +08:00

解析建连首包传输时间拿出来分析啊

234747005

2019-03-15 16:04:28 +08:00

首先，你的服务器在美国，这个的网络延迟就已经很严重了。
js 文件还是尽力减肥吧，不行的话就做资源分离。

HarryQu

2019-03-15 16:11:50 +08:00

@zhoulouzi Thanks，是用 curl 吗？
刚才才知道可以通过 curl 分析请求耗时情况

keepeye

2019-03-15 16:14:21 +08:00

国外服务器？延迟丢包啥的

HarryQu

2019-03-15 16:21:05 +08:00

@234747005 服务器是腾讯云的，在广州。
@keepeye 发现是 Chrome 打开了 Disable cache 之后，多次强制刷新，会导致每次请求加载很慢。

yc8332

2019-03-15 16:33:13 +08:00

就是你带宽小。。600k+的文件，你要小水管，那必须好几秒啊

wunonglin

2019-03-15 16:35:09 +08:00

@HarryQu 现在与其纠结加载太慢不如先开发上线后先用 cdn 撑着再去优化过大问题

zhoulouzi

2019-03-15 16:43:56 +08:00

@HarryQu curl 太原始了浏览器里 network timing

HarryQu

2019-03-15 16:54:50 +08:00

@zhoulouzi 嗯，找到了！
@wunonglin 因为是自己学习和练手的项目，所以不急着开发和上 CDN。

Light3

2019-03-15 17:18:44 +08:00

F12 看哪个加载的慢嘛..

Phuasheng

2019-03-16 09:19:27 +08:00

先不说优化速度，先减少包的大小

webpack bundle analyzer 看下哪些包比较大，不用的直接去掉，相信我，能减少很多很多

通过 Nginx 访问静态资源，加载很慢，如何分析问题 ？

通过 Nginx 访问静态资源，加载很慢，如何分析问题？