性能优化：加载优化——提升用户体验的关键

性能优化：加载优化------提升用户体验的关键

加载优化对于用户体验起着决定性作用。它能够极大幅度地缩短用户等待时间，让页面瞬间呈现，彻底告别长时间面对空白屏幕的焦虑。同时，为用户精心营造出流畅顺滑的浏览感受，不管是滚动页面、点击链接，还是进行其他交互操作，都如丝般流畅，毫无卡顿阻碍。而且，能确保交互响应近乎即时送达，用户操作指令迅速得到执行，真正实现随心操作。一个加载迅速的网站或应用，犹如夜空中最亮的星，在众多竞品中崭露头角，吸引并留住更多用户。

加载优化的方法有很多种，比如压缩与合并资源 ，优化代码 ，懒加载和预加载 ，优化缓存等等

接下来，我们来探究懒加载 ，预加载 和缓存优化这几项至关重要的加载优化技术。

一、懒加载

懒加载，又称延迟加载或按需加载。其核心要义在于延迟加载页面中的各类资源，特别是图片以及其他非关键资源，以此缓解初始加载压力，削减用户等待时长。例如在图片密集型页面，或是内容冗长需滚动浏览的页面中，懒加载的优势展露无遗。常见应用场景涵盖电商网站商品图片加载、社交媒体平台动态内容展示等。

实现懒加载的方式主要有以下两种：

1. 基于事件监听

通过严密监听页面滚动事件，当页面滚动时，精准抓取那些设置了特定属性（如 data-src ）的图片元素，仔细判断其位置与视口高度的关联。一旦图片进入可视区域 ，立即将其 data-src 属性中的图片路径赋予给 src 属性，完成图片加载，同时清除 data-src 属性，杜绝重复加载。示例代码如下：

js 复制代码

<body>
    <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>
</body>

2. 基于 IntersectionObserver API

利用这个强大的 API 来实时监测目标元素与视口的交叉状况，当目标元素进入视口时，迅速执行相应加载操作，诸如获取数据等。示例代码如下：

js 复制代码

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.使用 `<link rel="preload">` 标签

在 HTML 页面中，借助这个标签能够明确指定需要预加载的资源，像 CSS 文件、JavaScript 文件、图片等，并且可以按需设置资源的优先级 ，助力浏览器科学安排加载顺序。示例如下：

html 复制代码

<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>

在上述实例中，我们巧用 <link rel="preload"> 标签预加载 CSS 文件、JavaScript 文件和图片。浏览器解析 HTML 时，会依据这些标签提前获取相应资源，进而缩减后续加载时间。使用 <link> 标签预加载时，通过 importance 属性设定资源优先级，实现对资源加载顺序的精准掌控。

2.使用JavaScript

将需要预加载的图片资源的 URL 保存在数组里，循环遍历 URL 数组执行以下步骤，直到结束，创建一个 image 对象 new Image()，将 image 对象的 src 属性的值指定为预加载图片的 URL

js 复制代码

<script>
        const imgs = [
            "img",
            "img",
            "...",
        ]
        let i = 0
        const img = document.querySelector('#img')
        // 页面一开始加载图片数组的第一个元素
        preload(imgs[i]).then((data) => { })
        // 点击切换
        img.addEventListener("click", () => {
            if (i < imgs.length) {
                img.src = imgs[i]
                i++
                if (i < imgs.length) {
                    preload(imgs[i])
                }
            }
        })
        // 预加载
        function preload(src) {
            return new Promise((resolve, reject) => {
                const image = new Image();
                image.addEventListener("load", () => resolve(image))
                image.addEventListener("error", (error) => reject(error))
                image.src = src
            })
        }
    </script>

三、懒加载与预加载的区别

二者最为关键的区别体现在加载时机 上。懒加载属于延迟加载，依据用户的实际操作与浏览行为动态加载资源；而预加载则是提前布局，先行获取资源。懒加载旨在全力提升 页面初始加载速度，减轻服务器负担，优化用户初次访问体验；预加载则着眼于减少 用户后续操作时的等待时间，当用户需要调用某些资源时，可直接从缓存中调取，避开重新向服务器发起请求的繁琐流程。

四、缓存的助力

本地存储（Local Storage 和 Session Storage）在加载优化中扮演着举足轻重的角色。对于一些体量小巧且鲜少变动的数据，诸如用户的偏好设置、简易表单数据等，我们大可将其存储在本地。当用户再度访问页面时，直接从本地存储中读取数据，无需向服务器重新发出请求，如此便能显著加快页面加载与响应速度。封装了两个函数如下：

js 复制代码

// 存储数据到本地
function setSessionData(key, value) {
    sessionStorage.setItem(key, JSON.stringify(value))
}
// 从本地获取数据
function getSessionData(key) {
    const data = sessionStorage.getItem(key)
    return JSON.parse(data)
}

总而言之，加载优化是我们打磨产品性能、提升用户体验的核心利器。在当今快节奏的数字时代，用户对于网页和应用的响应速度要求愈发严苛，每一秒的延迟都可能导致用户的流失。通过巧妙运用懒加载、预加载以及缓存等技术，我们能够为用户打造一个极速流畅的交互环境，让网站和应用脱颖而出，在激烈的竞争中拔得头筹。这不仅是技术层面的精进，更是对用户需求的深度尊重与满足。持续深耕加载优化领域，紧跟技术发展潮流，不断探索创新方法，方能使产品在市场浪潮中始终站稳脚跟，赢得用户的长久青睐与信任。

性能优化：加载优化——提升用户体验的关键