懒加载
延迟加载非关键资源，减少初始负载
- 使用 Intersection Observer API：通过观察元素是否进入可视区域来触发加载事件。
- 手动绑定 scroll 事件：监听页面滚动事件，判断元素是否进入可视区域来触发加载事件。
- 使用第三方库：如 LazyLoad.js 等，可以更便捷地实现前端懒加载。
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 加载目标元素，比如图片
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
// 对目标元素进行观察
document.querySelectorAll('.lazy-load').forEach(img => {
observer.observe(img);
});
在这段代码中，.lazy-load 是需要进行懒加载的图片的类名。图片的实际 src 属性值被存储在 data-src 中，只有当图片进入视口时，我们才将 data-src 的值赋给 src 属性，从而触发图片的加载。
使用第三方库
对于不支持 IntersectionObserver 的浏览器或者希望减少手动编码的工作量，可以使用如 lozad.js、lazysizes 等 JavaScript 库来简化实现过程：
预加载
只预加载那些极有可能被使用且对用户体验有关键影响的资源
- 通过在 HTML 中使用 <link rel="preload"> 实现
<link rel="preload" href="important-script.js" as="script">
<link rel="preload" href="important-style.css" as="style">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
- 使用 Service Workers，形成一个独立的线程，可以控制资源的缓存和网络请求。
self.addEventListener('install', function(event) {
event.wAItUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll([
'/css/important-style.css',
'/js/important-script.js'
]);
})
);
});
在Service Worker的 install 事件中，我们打开了一个名字为'my-cache'的缓存，并且添加了两个重要资源。一旦缓存完成，这些资源就可以快速提供服务，而不必再通过网络加载。
前端预加载的作用是什么？
前端预加载能够提高网站的性能和用户体验。通过提前加载网页所需的资源（如图片、CSS、JS 等），可以减少页面加载时间，提高页面的渲染速度，让用户能够更快地看到页面内容，从而提升用户满意度和留存率。
评论区