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

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

解决方案

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值