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

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

解决方案

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

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

js代码

var imgs = document.querySelectorAll('img');
​
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
    var T = e.offsetTop;
    while(e = e.offsetParent) {
        T += e.offsetTop;
    }
    return T;
}
​
function lazyLoad(imgs) {
    var H = document.documentElement.clientHeight;//获取可视区域高度
    var S = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) {
        if (H + S > getTop(imgs[i])) {
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}
​
window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
    lazyLoad(imgs);
}

• 开启服务器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 文件的代码。

  以上是我对服务器首屏加载过慢，的一些解决方案，有不足之处欢迎在评论区补充，也欢迎大家关注我的微信公众号！我会每天发布一些前端小知识！