我做过的几个前端性能优化————vue

最新推荐文章于 2025-03-18 15:36:34 发布

原创最新推荐文章于 2025-03-18 15:36:34 发布

· 474 阅读

6 ·

版权

文章标签：

#前端性能优化

前端同时被 2 个专栏收录

53 篇文章

订阅专栏

12 篇文章

订阅专栏

本文探讨了前端性能优化的几种关键技术，包括图片懒加载、防抖与节流、下拉数据分页加载，以及组件懒加载。通过实例展示了如何实现图片的延迟加载，以减少初次加载时的压力。同时，防抖和节流技术用于限制用户频繁操作对界面的影响。对于大量数据的展示，采用250条一组的分页加载，并结合防抖避免数据重复加载。此外，提到了使用SVG和字体图标以提升加载速度，以及启用GZIP压缩来显著提高整体加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图片懒加载（用于图片过大，过多情况）

原理：先给loading图，再页面加载好后再把之前的图片赋值过去！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <script>
    let num = document.getElementsByTagName('img').length;
    let img = document.getElementsByTagName("img");
    let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件
      let seeHeight = document.documentElement.clientHeight; //可见区域高度
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
      for (let i = n; i < num; i++) {
        if (img[i].offsetTop < seeHeight + scrollTop) {
          if (img[i].getAttribute("src") == "Go.png") {
            img[i].src = img[i].getAttribute("data-src");
          }
          n = i + 1;
        }
      }
    }
  </script>

</body>

</html>

2.防抖（debounce）/节流（throttle）

减少用户对界面重复操作
之前文章有写，不细说

3.下拉数据懒加载，结合防抖

数据量大，而且都要渲染的情况下。
需求：展示2000条数据，做成列表。
解决方式：250为一组，下拉倒底，触发数据拼接(再加250条)，结合防抖，防止数据重复拼接。
结果：引导用户下拉加载更多，已达到一页2000条数据！

4.组件懒加载（必须写的）

const NormalEditor = () => import("./components/pages/NormalEditor");

5.图片编码优化，尽量使用svg和字体图标

减少使用图片类型图标！
多使用svg和字体图标，这些不需要加载很久！！！
甚至使用base64也还可以。可以写js上，方便函数调用！！

6.使用gzip （真的好用）

打包使用gzip。同时服务器予许读取 .gzip文件。并且js分包！
在这里插入图片描述
加载速度提高200%！！！！真滴好用！！！