DOM--预加载和懒加载
文章目录
- 9、预加载和懒加载
- 10、缓动动画
9、预加载和懒加载
1、懒加载： 又叫做延迟加载，通过加载网络资源或符合某些条件时才加载资源。常见的就是图片延迟加载。
懒加载的意义：懒加载的目的主要是作为服务器前端的优化，减少请求数或延迟请求数。
懒加载的实现方式：
1、纯粹的延迟加载:使用setTimeOut或者setInterval进行加载延迟。
2、条件加载:符合某些条件，或者触发某些事件才开始异步加载。
3、可视化区域加载：即只加载用户看得到的区域通过监控滚动来实现，一般会在距离用户看到图片前一定距离才开始加载，这样可以保证用户下拉时正好看到图片。
懒加载的优点：
- 提升用户体验，加快首屏渲染速度；
- 减少无效资源的加载；
- 防止并发加载的资源过多会阻塞 js 的加载；
**2、预加载：**提前加载图片，当用户需要查看时可以直接从本地缓存中渲染。
**区别：**一个是提前加载，一个是延迟甚至不加载，懒加载可以缓解服务器对的压力。预加载会增大服务器的压力，比如广告弹窗等。
10、缓动动画
匀速改变元素的样式是匀速动画，非匀速改变元素的样式就是缓动动画
公式：
*设定值=（目标值-当前值）百分比+当前值。