账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用nginx加载静态文件,TTFB为何需要6s?
    38
    0
    前端使用Vue cli,通过webpack打包,使用nginx后发现manifest.js的TTFB需要6s,首次加载速度过慢

    nginx配置如下

    server {
        listen       80;
        server_name  127.0.0.1;
    
    
        location / {
            root   /var/www/project/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location ^~/api/ { proxy_pass http://127.0.0.1:5438/api/; }
    
     }
    

    dist目录如下:

    dist/
    ├── [1.1K]  favicon.ico
    ├── [ 901]  index.html
    └── [441K]  static
       ├── [229K]  css
       │   ├── [189K]  app.0134d2dda560ad06a1485c5f69858798.css
       │   └── [ 36K]  app.0134d2dda560ad06a1485c5f69858798.css.gz
       ├── [ 15K]  fonts
       │   └── [ 11K]  element-icons.6f0a763.ttf
       └── [193K]  js
           ├── [ 53K]  app.ce2c95e6433bd8164fc4.js
           ├── [ 18K]  app.ce2c95e6433bd8164fc4.js.gz
           ├── [ 799]  manifest.2ae2e69a05c33dfc65f8.js
           ├── [ 88K]  vendor.78ce98b3a34633bdf003.js
           └── [ 29K]  vendor.78ce98b3a34633bdf003.js.gz
    
    

    然而使用chrome查看,仅仅加载静态文件,请求manifest.js时TTFB一直为6s,导致vendor.js和app.js也下载时间也到达6s,从而首屏加载非常之慢,请问是什么问题导致的?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 就是要包包。ヘ 普通会员 1楼

      Nginx静态文件请求的TTFB(Time To First Byte)是指从文件加载到页面响应的第一字节。TTFB的高可能与Nginx服务器配置、网络状况、磁盘I/O等多方面因素有关。

      以下是一些可能影响Nginx TTFB的原因:

      1. Nginx服务器配置:如果Nginx服务器配置不合理,例如设置静态文件缓存过久,或者配置错误导致服务器响应时间过长,都可能导致TTFB过高。可以尝试调整Nginx的配置以提高响应速度。

      2. 网络状况:网络状况不佳,如网络拥塞、服务器负载过高等,都可能导致Nginx响应时间过长。可以尝试优化网络配置,如增加带宽、使用CDN等。

      3. 磁盘I/O:如果磁盘I/O过高,也会导致Nginx响应时间过长。可以尝试优化磁盘I/O,如增加硬盘I/O带宽、使用SSD硬盘等。

      4. 文件过大:如果静态文件过大,Nginx需要花费更多的时间来加载文件,从而导致TTFB升高。

      5. 服务器负载过高:如果服务器负载过高,Nginx需要花费更多的时间来处理请求,从而导致TTFB升高。

      以上是一些可能影响Nginx TTFB的因素,如果TTFB过高,可以尝试调整Nginx的配置,优化网络和磁盘I/O,以及优化服务器负载等。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部