上线项目如何优化首屏加过慢问题

约定不等于承诺〃 2021-07-25 19:44 401阅读 0赞

相信很多朋友上线的项目都会遇到首次加载过慢的问题，废话不多说，直接上干货。

解决方案

*  图片懒加载  
    网页中少不了的就是图片，但是图片的大小，会严重影响我们网页加载的速度，尤其是首页有大量图片的网站，解决这一问题的方法就是图片懒加载。原理很简单，就是获取显示屏的大小，当页面初始化时或者页面滚动时，判断照片是否出现在我们视野当中，进行选择性的加载。上代码。  
    html代码

//在html中引入js代码
    <script src="js/lanjiazai.js"></script>
    //img引入地址 必须要用 data-src  才有效
    <img data-src="./img/01/gongzhong.jpg">

js代码

*  开启服务器GZIP  
    这个是重中之重！可以大幅度优化页面加载！我这边服务器用的是nginx反向代理。打开方式直接看代码！  
    **nginx**  
    复制时**只需要复制星号隔开的代码**，切记在nginx配置文件中 **\# 为注释符**！！！！！

//打开服务器nginx的安装位置，找到conf文件夹，用记事本打开nginx配置文件
     server { 
            listen       80;
            server_name  localhost;
    
    //重点是注释下面这段代码，其他代码是用来辅助大家代码粘贴位置
    //星号隔开的是有用代码，切记，在nginx配置文件中 # 为注释符！！！！！
    //***************************************************
      #开启gzip
    gzip on;
    #压缩阀值，小于1k不压缩
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    #压缩级别
    gzip_comp_level 2;
    #压缩的文件类型
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
    gzip_vary off;
    #IE6对Gzip不怎么友好，禁止IE6进行压缩
    gzip_disable "MSIE [1-6]\.";
    
    //*****************************************************
    
            #charset koi8-r;
    
            #access_log logs/host.access.log main;
    
            location / { 
                root   html/mianshi;
                index  jichu.html;
            }
    
            #error_page 404 /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html { 
                root   html;
            }
    
            # proxy the PHP scripts to Apache listening on 127.0.0.1:80
            #
            #location ~ \.php$ { 
            # proxy_pass http://127.0.0.1;
            #}
    
            # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
            #
            #location ~ \.php$ { 
            # root html;
            # fastcgi_pass 127.0.0.1:9000;
            # fastcgi_index index.php;
            # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
            # include fastcgi_params;
            #}
    
            # deny access to .htaccess files, if Apache's document root
            # concurs with nginx's one
            #
            #location ~ /\.ht { 
            # deny all;
            #}
        }

保存后重启nginx服务器即可以生效！

nginx启动 和 关闭指令

启动Nginx
    //在nginx根目录中执行cmd，输入以下代码，莫要直接复制，你们的根目录可能是
    //nginx的版本号，每个人的都不一样。
    c:/app/Nginx>     start nginx
    停止
    c:/app/Nginx>     nginx.exe -s stop

*  vue项目的话可以开启路由懒加载  
    找到项目中 src --> router --> index.js。后期会详细来说一下关于vue的知识点。

//重点在第8行代码
    //切记以此方式引入的路由，如果当前index.js上方中存在  
    // import Center from "@/views/Center/Center"  这种引入一定要注释掉！！
    const routes = [
      { 
          path: '/Center',
          name: 'Center',
          component:()=>import('@/views/Center/Center') //这里是路由懒加载关键
       }
     ]

*  尽量合并js代码，减少对服务器请求的次数。
 *  压缩 html 和 js 文件的代码。
    
    以上是我对服务器首屏加载过慢，的一些解决方案，有不足之处欢迎在评论区补充，也欢迎大家关注我的微信公众号！我会每天发布一些前端小知识！  
    ![20200812224536155.jpg_pic_center][]

[20200812224536155.jpg_pic_center]: /images/20210725/1e7a92cfc62b44549d728687d707ee90.png