For investors
股价:
5.36 美元 %
认识达内从这里开始
认真做教育 专心促就业
程序员在开发网页的时候，为了能够提高网页的性能，我们一般会采用懒加载或者是预加载等不同加载方式，今天我们就通过案例分析来简单了解一下，懒加载与预加载的区别和用法分享。
1.懒加载
图片进入可视区域之后再请求图片资源的方式称为图片懒加载。适用于图片很多，页面很长的业务场景，比如电商;
懒加载的作用：
减少无效资源的加载：
比如一个网站有十页图片，用户只查看了一页的图片，这就没必要将十页图片全都加载出来;
并发加载的资源过多会阻塞js的加载，影响网站正常的使用：
由于浏览器对某一个hostname是有并发度上限的，如果图片资源所在的CDN和静态资源所在的CDN是同一个的话，过多图片的并发加载就会阻塞后续js文件的并发加载。
懒加载实现的原理：
监听onscroll事件，判断可视区域位置：
图片的加载是依赖于src路径的，先可以为所有懒加载的静态资源添加自定义属性字段，用于存储真实的url。比如是图片的话，可以定义data-src属性存储真实的图片地址，src指向loading的图片或占位符。然后当资源进入视口的时候，才将src属性值替换成data-src中存放的真实url。
2.预加载
预加载与懒加载正好是相反的过程：懒加载实际上是延迟加载，将我们所需的静态资源加载时间延后;而预加载是将图片等静态资源在使用之前的提前请求，这样资源在使用到时能从缓存中直接加载，从而提升用户体验;
预加载的作用：
提前请求资源，提升加载速度：使用时只需要读取浏览器缓存中提前请求到的资源即可;
维护页面的依赖关系：比如WebGL页面，会依赖一些3D模型，这些都是页面渲染所必须的资源。如果资源都没有加载完毕就进行页面的渲染，就会造成非常不好的体验。
所以时常使用预加载的方式维护页面渲染的依赖关系，比如将WebGL页面依赖的3D模型加载完之后才进行页面渲染。这样渲染的过程就不会有任何阻碍，具有较好的用户体验;
预加载的实例
例如九宫格抽奖业务，每个奖品都有一个选中态和非选中态，实际上这是由两张图片组合而成的。由于每个奖品的选中过程都是一瞬间，这就对图片的选中态和非选中态切换效率要求很高，如果选中态的图片没有预加载的话显然是来不及的。
所以，实际上对于九宫格中所有图片选中态的样式和对应的图片都需要进行预加载，从而让我们在抽奖的过程中，能够瞬间从缓存中读取到选中态的图片，从而不影响抽奖效果的展示。
除此之外还有网站登录或活动时需要用到的动画，这是在动画需要的每帧图片都完全预加载完之后才会进行显示的。
【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。
< 上一篇：合肥达内计算机培训程序员管理岗都分为哪些阶段
下一篇：合肥达内计算机培训浏览器存储功能都有哪些类型 >
2024-11-01
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 11月27日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 11月27日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 11月27日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 11月27日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 11月27日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 11月27日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 11月27日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 11月27日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 11月27日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 11月27日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 11月27日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 11月27日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 11月27日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 11月27日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 11月27日
- 火热抢座中
- 立即咨询
预约申请试听课
开设课程
开课城市
友情链接
Copyright © 2024 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号达内时代科技集团有限公司 版权所有
注：学员信息+企业信息均来自达内教育内部CRM系统真实统计，非宣传使用。
课程适用人群：成人
400-996-5531
lihm@tedu.cn
