- 作者：老汪软件技巧
- 发表时间：2024-12-30 04:03
- 浏览量：
性能优化：加载优化——提升用户体验的关键
加载优化对于用户体验起着决定性作用。它能够极大幅度地缩短用户等待时间，让页面瞬间呈现，彻底告别长时间面对空白屏幕的焦虑。同时，为用户精心营造出流畅顺滑的浏览感受，不管是滚动页面、点击链接，还是进行其他交互操作，都如丝般流畅，毫无卡顿阻碍。而且，能确保交互响应近乎即时送达，用户操作指令迅速得到执行，真正实现随心操作。一个加载迅速的网站或应用，犹如夜空中最亮的星，在众多竞品中崭露头角，吸引并留住更多用户。
加载优化的方法有很多种，比如压缩与合并资源，优化代码，懒加载和预加载，优化缓存等等
接下来，我们来探究懒加载，预加载和缓存优化这几项至关重要的加载优化技术。
一、懒加载
懒加载，又称延迟加载或按需加载。其核心要义在于延迟加载页面中的各类资源，特别是图片以及其他非关键资源，以此缓解初始加载压力，削减用户等待时长。例如在图片密集型页面，或是内容冗长需滚动浏览的页面中，懒加载的优势展露无遗。常见应用场景涵盖电商网站商品图片加载、社交媒体平台动态内容展示等。
实现懒加载的方式主要有以下两种：1. 基于事件监听
通过严密监听页面滚动事件，当页面滚动时，精准抓取那些设置了特定属性（如 data-src）的图片元素，仔细判断其位置与视口高度的关联。一旦图片进入可视区域，立即将其 data-src 属性中的图片路径赋予给 src 属性，完成图片加载，同时清除 data-src 属性，杜绝重复加载。示例代码如下：
<div>
<img src='./imgs/01.jpg' alt="">img>
<img data-src='./imgs/02.jpg' alt="">img>
<img data-src='./imgs/03.jpg' alt="">img>
div>
<script>
// 监听滚动事件
window.addEventListener('scroll', () => {
const images = document.querySelectorAll('img[data-src]')
images.forEach(image => {
// 获取图片的位置和视口的高度
const rect = image.getBoundingClientRect()
if (rect.top < window.innerHeight + document.body.scrollTop) {
// 如果图片的顶部已经进入视口，则加载图片
image.src = image.getAttribute('data-src')
// 移除data-src属性，避免重复加载
image.removeAttribute('data-src')
}
})
})
script>
2. 基于 IntersectionObserver API
利用这个强大的 API 来实时监测目标元素与视口的交叉状况，当目标元素进入视口时，迅速执行相应加载操作，诸如获取数据等。示例代码如下：
const intersectionObserver = new IntersectionObserver((entries) => {
// 如果 intersectionRatio 为 0，则目标在视野外，
// 我们不需要做任何事情。
if (entries[0].intersectionRatio <= 0) {
return console.log('当前视图不可见')
}
console.log('当前视图可见')
// 获取数据
// 这里调用axios请求获取数据
// 让后端给我的接口分段
stop() // 停止监听防止重复请求
})
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"))
二、预加载
预加载，实则是一种提前规划资源加载的精妙策略。在实际启用某些资源之前，就抢先将它们加载到内存或缓存中。比如在网页里提前加载后续页面可能用到的图片、视频、脚本，亦或是在软件、游戏中提前储备即将用到的各类素材等。
预加载的实现方式：1.使用 标签
在 HTML 页面中，借助这个标签能够明确指定需要预加载的资源，像 CSS 文件、JavaScript 文件、图片等，并且可以按需设置资源的优先级，助力浏览器科学安排加载顺序。示例如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优化后的页面示例title>
<link rel="stylesheet" href="main-layout.css" as="style" importance="high">
<link rel="preload" href="img" as="image">
<link rel="preload" href="script.js" as="script" importance="low">
<link rel="stylesheet" href="secondary-styles.css" as="style" importance="medium">
head>
<body>
<img src="img" alt="示例图片">
<script src="script.js">script>
body>
在上述实例中，我们巧用 标签预加载 CSS 文件、JavaScript 文件和图片。浏览器解析 HTML 时，会依据这些标签提前获取相应资源，进而缩减后续加载时间。使用 标签预加载时，通过 importance 属性设定资源优先级，实现对资源加载顺序的精准掌控。
2.使用JavaScript
将需要预加载的图片资源的 URL 保存在数组里，循环遍历 URL 数组执行以下步骤，直到结束，创建一个 image 对象 new Image()，将 image 对象的 src 属性的值指定为预加载图片的 URL
三、懒加载与预加载的区别
二者最为关键的区别体现在加载时机上。懒加载属于延迟加载，依据用户的实际操作与浏览行为动态加载资源；而预加载则是提前布局，先行获取资源。懒加载旨在全力提升页面初始加载速度，减轻服务器负担，优化用户初次访问体验；预加载则着眼于减少用户后续操作时的等待时间，当用户需要调用某些资源时，可直接从缓存中调取，避开重新向服务器发起请求的繁琐流程。
四、缓存的助力
本地存储（Local Storage 和 Session Storage）在加载优化中扮演着举足轻重的角色。对于一些体量小巧且鲜少变动的数据，诸如用户的偏好设置、简易表单数据等，我们大可将其存储在本地。当用户再度访问页面时，直接从本地存储中读取数据，无需向服务器重新发出请求，如此便能显著加快页面加载与响应速度。封装了两个函数如下：
// 存储数据到本地
function setSessionData(key, value) {
sessionStorage.setItem(key, JSON.stringify(value))
}
// 从本地获取数据
function getSessionData(key) {
const data = sessionStorage.getItem(key)
return JSON.parse(data)
}
总而言之，加载优化是我们打磨产品性能、提升用户体验的核心利器。在当今快节奏的数字时代，用户对于网页和应用的响应速度要求愈发严苛，每一秒的延迟都可能导致用户的流失。通过巧妙运用懒加载、预加载以及缓存等技术，我们能够为用户打造一个极速流畅的交互环境，让网站和应用脱颖而出，在激烈的竞争中拔得头筹。这不仅是技术层面的精进，更是对用户需求的深度尊重与满足。持续深耕加载优化领域，紧跟技术发展潮流，不断探索创新方法，方能使产品在市场浪潮中始终站稳脚跟，赢得用户的长久青睐与信任。
