懒加载与预加载的总结

懒加载与预加载的总结

懒加载

• 懒加载也就是延迟加载。
• 延迟加载图片或符合某些条件时才加载某些图片

优点

• 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数
• 页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

原理

在页面载入时将img标签內的src指向一个小图片，即占位图或loading图，将真实地址存放于一个自定义属性data-src中。当页面滚动时，遍历有data-src的img标签，判断每个img是否进入可视区，当某个img进入了可视区域，就将真实地址赋值给该img的src并将该img的data-src删除以避免重复判断

预加载

• 提前加载图片，当用户需要查看时可直接从本地缓存中渲染

核心

• 图片等静态资源在使用之前的提前请求
• 资源后续使用时可以从缓存中加载，提升用户体验
• 页面展示的依赖关系维护（必需的资源加载完才可以展示页面，防止白屏等

特点

• 牺牲服务器前端性能，换取更好的用户体验，用户的操作可以 得到最快的反映

总结

• 两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载
• 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力