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

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

  •  
  •   HarryQu · 10 天前 · 1291 次点击

    使用 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 条附言  ·  10 天前

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

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

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

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

    webpack bundle analyzer 看下哪些包比较大,不用的直接去掉,相信我,能减少很多很多
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2664 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 13:46 · PVG 21:46 · LAX 06:46 · JFK 09:46
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1