V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
HarryQu
V2EX  ›  程序员

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

  •  
  •   HarryQu · 2019-03-15 14:52:20 +08:00 · 13561 次点击
    这是一个创建于 1840 天前的主题,其中的信息可能已经有所发展或是发生改变。

    使用 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
        1
    xiangyuecn  
       2019-03-15 15:04:56 +08:00
    还要分析?你不说了原因吗。。。5M
    shuax
        2
    shuax  
       2019-03-15 15:11:12 +08:00
    你不会以为 5M 的意思是 5m/s 吧
    HarryQu
        3
    HarryQu  
    OP
       2019-03-15 15:13:03 +08:00
    @xiangyuecn
    5M 带宽理论上来讲下载一个 620KB 的文件,需要 1s 多 , 可实际都已经达到了 4S。
    aniua
        4
    aniua  
       2019-03-15 15:16:00 +08:00
    5Mbps=640KBps,理想情况下单这个文件下载就需要 3s 左右,加载页面时浏览器是并发下载,你这么慢就不意外了啊。
    下次就快了,浏览器会缓存 js。
    Lax
        5
    Lax  
       2019-03-15 15:20:22 +08:00
    都用了什么库?这么简单个页面不至于 620KB 啊
    aniua
        6
    aniua  
       2019-03-15 15:20:28 +08:00   ❤️ 1
    @HarryQu 我这边测试下载你这个文件,最快是 2.2s ,考虑到建立连接的开销,这个速度没什么问题。

    结论是,无需优化 /提高 Gzip 等级 /加钱升级带宽。
    MonoLogueChi
        7
    MonoLogueChi  
       2019-03-15 15:21:56 +08:00 via Android   ❤️ 1
    我看到的情况是,你已经开启了 gzip 压缩,资源全部请求完成时长 1.9s ,那个 js 总共用时 650ms,TTFB 30ms,速度中规中矩,可能是你测试环境的问题吧
    Juszoe
        8
    Juszoe  
       2019-03-15 15:23:42 +08:00
    既然你用的腾讯云,建议使用腾讯云对象存储服务,存放静态文件,减少服务器带宽压力
    wunonglin
        9
    wunonglin  
       2019-03-15 15:24:02 +08:00
    静态文件为什么不用 cdn ?
    grewer
        10
    grewer  
       2019-03-15 15:31:38 +08:00   ❤️ 1
    把 vendor 拆一下,并行加载 可缩短 0.5s
    HarryQu
        11
    HarryQu  
    OP
       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
        12
    HarryQu  
    OP
       2019-03-15 15:45:40 +08:00
    @wunonglin 自己项目,页面正在开发中,主要奇怪我 5M 带宽加载这么小的文件,为什么需要那么久。
    HarryQu
        13
    HarryQu  
    OP
       2019-03-15 15:49:09 +08:00
    @grewer 是该研究一下拆分 vendor, 没开 gizp 的话 ,1.7M 大小。
    @MonoLogueChi 是我环境问题,我的 Chrome 开启了 Disable cache 之后。win 下强制刷新 文件下载时间才那么长。
    zhoulouzi
        14
    zhoulouzi  
       2019-03-15 15:49:24 +08:00   ❤️ 1
    解析 建连 首包 传输时间 拿出来分析啊
    234747005
        15
    234747005  
       2019-03-15 16:04:28 +08:00
    首先,你的服务器在美国,这个的网络延迟就已经很严重了。
    js 文件还是尽力减肥吧,不行的话就做资源分离。
    HarryQu
        16
    HarryQu  
    OP
       2019-03-15 16:11:50 +08:00
    @zhoulouzi Thanks,是用 curl 吗 ?
    刚才才知道可以通过 curl 分析请求耗时情况
    keepeye
        17
    keepeye  
       2019-03-15 16:14:21 +08:00
    国外服务器?延迟 丢包啥的
    HarryQu
        18
    HarryQu  
    OP
       2019-03-15 16:21:05 +08:00
    @234747005 服务器是腾讯云的,在广州 。
    @keepeye 发现是 Chrome 打开了 Disable cache 之后, 多次强制刷新,会导致每次请求加载很慢。
    yc8332
        19
    yc8332  
       2019-03-15 16:33:13 +08:00
    就是你带宽小。。600k+的文件,你要小水管,那必须好几秒啊
    wunonglin
        20
    wunonglin  
       2019-03-15 16:35:09 +08:00
    @HarryQu 现在与其纠结加载太慢不如先开发上线后先用 cdn 撑着再去优化过大问题
    zhoulouzi
        21
    zhoulouzi  
       2019-03-15 16:43:56 +08:00
    @HarryQu curl 太原始了 浏览器里 network timing
    HarryQu
        22
    HarryQu  
    OP
       2019-03-15 16:54:50 +08:00
    @zhoulouzi 嗯,找到了!
    @wunonglin 因为是自己学习和练手的项目,所以不急着开发和上 CDN。
    Light3
        23
    Light3  
       2019-03-15 17:18:44 +08:00
    F12 看哪个加载的慢嘛..
    Phuasheng
        24
    Phuasheng  
       2019-03-16 09:19:27 +08:00
    先不说优化速度,先减少包的大小

    webpack bundle analyzer 看下哪些包比较大,不用的直接去掉,相信我,能减少很多很多
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1001 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:48 · PVG 03:48 · LAX 12:48 · JFK 15:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.