前端性能优化--懒加载和预加载篇

最新推荐文章于 2024-05-15 10:19:01 发布

悲伤日记

最新推荐文章于 2024-05-15 10:19:01 发布

阅读量991

点赞数

本文链接：https://blog.csdn.net/Crazymryan/article/details/107037037

版权

本文探讨了前端性能优化的两种技术——懒加载和预加载。懒加载通过只在浏览器视窗内加载图片来减少首屏加载时间，而预加载则预先请求可能需要的资源以加快后续使用速度。文章详细介绍了懒加载的实现方式，包括html、css、js的应用，并展示了不同滚动状态的效果。同时，提到了一些冷门属性，如事件监听、dataset、img.onload和getBoundingClientRect。对于预加载，文章讨论了利用HTML标签、new Image()对象以及XML进行资源预加载的方法。

摘要由CSDN通过智能技术生成

点击上方蓝字关注「悲伤日记」

愿我如星君如月夜夜流光相皎洁

1.什么是懒加载？

图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为“图片懒加载”。

2.什么是预加载？

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

懒加载

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lazyload.css">
</head>

<body>
    <div class="image-list">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn