相信很多朋友上线的项目都会遇到首次加载过慢的问题,废话不多说,直接上干货。
解决方案
- 图片懒加载
网页中少不了的就是图片,但是图片的大小,会严重影响我们网页加载的速度,尤其是首页有大量图片的网站,解决这一问题的方法就是图片懒加载。原理很简单,就是获取显示屏的大小,当页面初始化时或者页面滚动时,判断照片是否出现在我们视野当中,进行选择性的加载。上代码。
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 文件的代码。
以上是我对服务器首屏加载过慢,的一些解决方案,有不足之处欢迎在评论区补充,也欢迎大家关注我的微信公众号!我会每天发布一些前端小知识!