关于汉墨关于汉墨
网站用懒加载可以提高访问速度吗?
时间:2024-03-29 来源:本站 浏览:4114次

最近我司因业务需求,需要在一个内部数据分析平台集成在线 Excel 功能,既然我们自己就是做开发工具的,所以目光自然就落在了我司自研的前端表格产品上。


项目的目的是要通过数据透视表和 Excel 公式来分析公司的各项运营数据。不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快。但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发布包的vendor.js 变大所导致的,这个文件加载每次都需 300 毫秒左右,由于小的 Vue 项目并没有做模块划分,所以所有的代码都直接打包到了 vendor 中,在集成了新功能后,发布包也随之变大了。

既然找到了原因,我们就开始着手优化,在前端对于需加载较大资源时,我们一般都采用懒加载的方式来优化效率。


什么是懒加载?

懒加载也叫做延时加载,在网页响应时不立刻请求资源,待页面加载完毕或者按需响应时再加载资源,以达到提高页面响应速度以及节省服务器资源的谜底。网页中常用的懒加载是图片的懒加载,对于类似淘宝一样的多图页面,如果等待所有图片都下载完成再响应用不必然造成页面加载的卡顿。对于 JS 资源的加载也是同样的道理,大 JS 的加载会造成 JS 阻塞,页面出现停止响应的假死状态。因此可以通过按需加载的方式,提高页面首屏的加载速度。


一、懒加载技术的一些优势和弊端 


优势 

一、改进加载性能:图片懒加载可以减少首次加载网页时需要加载的资源量,从而提高加载速度和用户体验。 

二、节省带宽:只有当图片进入视口(viewport)时,才会加载图片。这可以节省未浏览的部分的带宽。 

三、优化用户体验:通过快速加载网页和内容,用户体验可以得到显著改善。 

四、优化服务器负载:延迟加载图片可以减少服务器在短时间内的负载。 


弊端 

一、不适用于所有浏览器:并非所有的浏览器都支持懒加载,这可能会导致某些用户无法查看图片。 

二、SEO问题:一些搜索引擎可能无法正确索引懒加载的图片,从而影响SEO效果。 

三、JavaScript依赖:大部分的图片懒加载实现都依赖于JavaScript。如果用户禁用了JavaScript,那么懒加载就无法正常工作。 

四、用户体验问题:如果网络连接慢或者处理图片慢,用户可能会看到图片逐渐加载的过程,这可能会降低用户体验。 

五、首屏图片加载延迟:如果懒加载的实现没有正确处理,可能会导致首屏的图片加载延迟,影响用户体验。 


二、OSS对象存储 与 CDN缓存技术 

1、借助于第三方分流运维方案,相当于部署负载均衡,让你的网站服务器减轻压力,分流出去到一些其它地方。 

2、一些优势和弊端


优势 

一、独立部署,打开视频或者大图片速度快,不影响网站; 

二、适应所有浏览器,不局限于浏览器,或者java脚本限制; 

三、不影响任何SEO优化; 

四、一些大的图片都会这样去部署,因为懒加载最终还是要当前服务器来运行的。 


弊端

一、会产生一些流量费用,但是也是非常小的,一年可能几百块钱足够,但是可以让你的网站运行流畅很我,感觉是非常值得 


三、综合说明 

1、懒加载适合图片较多网站,页面比较长的,通过加载视图来显示可见内容,如果这个加载视图是一个视频,那起不到太大的重要,还是要去加载出来的 

2、一般小企业站或者大图视频有几个不多的情况下,建议是可以适合oss+cdn 技术的

微信客服二维码
微信客服
QQ客服
返回顶部

获取报价

获取验证码
提交
留下您的联系方式,不久后会收到来电!

信息提交成功,请留意客服来电,谢谢~