【性能优化】懒加载和预加载

这两种都是提升网页性能的方式，主要区别是预加载为提前加载（增加服务器前端压力），懒加载是迟缓甚至不加载（缓解服务器前端压力）。

一、预加载

提前将所需资源都加载到本地，需要用的时候从缓存读取。

• 优点：可以减少用户的等待时间，提升用户体验。
• 适用于对画面交互要求很高，有页面依赖关系的场景。
• 举个例子：比如一个位置的同一个图片，需要快速切换状态（比如hover事件），那么如果没有同时对2个状态下的图片做预加载，等到用的时候再加载，很可能会出现交互上的不流畅，甚至误导用户。

二、懒加载

在用户需要访问的时候，再进行加载。

• 优点：可以提高网站的首屏加载速度，提升用户体验。
• 适用于图片很多、页面很长的场景。
• 实现原理：监听onscroll事件，判断可视区域位置，
• • 图片的加载是依赖于src路径的，先可以为所有懒加载的静态资源添加自定义属性字段，用于存储真实的url。比如是图片的话，可以定义data-src属性存储真实的图片地址，src指向loading的图片或占位符。然后当资源进入视口的时候，才将src属性值替换成data-src中存放的真实url。
• 举个例子：比如一共有100本小说推荐，一屏只推荐10本，那么我们没必要给用户先加载100本小说的封面资源，我们可以根据用户滚动请求到哪里，再进行加载。