首页教程软件教程正文

前端性能优化有哪些方法？

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 837 浏览 3590 个字

摘要 :

文章目录 1. 骨架屏： 2. 懒加载： 3. 性能监控 4.性能工具 5. 图片优化 6. 节流防抖 7.回流重绘 8.虚拟列表： 9.本地缓存 10.CDN缓存 11. DOM优化 12.浏览器缓存 13.服……

文
章
目
录

1. 骨架屏：
2. 懒加载：
3. 性能监控
4.性能工具
5. 图片优化
6. 节流防抖
7.回流重绘
8.虚拟列表：
9.本地缓存
10.CDN缓存
11. DOM优化
12.浏览器缓存
13.服务端渲染

本文主要讲解关于前端性能优化有哪些方法相关内容，让我们来一起学习下吧！

前端性能优化是提升网站或应用程序的性能和用户体验的关键步骤。以下是一些常用的前端性能优化技术：

1. 骨架屏：

在页面加载过程中，使用占位图或预先设计好的组件来展示页面的基本结构，让用户感知到页面正在加载，提高用户体验。

2. 懒加载：

将页面上的图片、视频或其他资源延迟加载，只有当用户滚动到它们的可见区域时才加载，减少初始加载时间。

3. 性能监控

使用性能监控工具来跟踪页面加载时间、资源加载时间、用户交互时间等，以便了解页面性能指标并进行相应的优化。

4.性能工具

使用像Google PageSpeed Insights、Lighthouse、WebPageTest等工具来评估和优化网页性能，并提供相应的建议。

5. 图片优化

使用适当的图片格式、压缩和调整图片尺寸，以减少图片大小和加载时间。

使用适当的图片格式：选择合适的图片格式可以大幅减小文件大小。对于图标和简单的图形，使用矢量图形（如SVG）会更优。对于照片和复杂的图像，使用压缩的光栅图像（如JPEG）或带有透明度的图像（如PNG）。
压缩图片：使用图片压缩工具（如TinyPNG、ImageOptim等）压缩图片文件大小，同时保持图片质量。压缩可以通过减小图像的颜色深度、去除元数据信息、应用有损压缩等方式实现。
调整图片尺寸：将图片调整为适合其显示尺寸的大小，避免加载更大的图片并进行缩放。通过缩小图像的宽度和高度，可以减少文件大小和加载时间。
使用响应式图片：根据设备的屏幕大小和分辨率，提供不同版本的图片。使用srcset和sizes属性来指定不同设备下使用不同分辨率的图片，以确保在不同设备上显示合适大小的图像。
图片懒加载：将页面上的图片延迟加载，只有当用户滚动到它们的可见区域时才加载。这样可以减少初始加载时间，并且只加载页面上用户实际看到的图片，提高性能。
使用CSS Sprites：将多个小图标或图片合并成一个大的图像，通过CSS的background-position属性来显示所需的部分。这样可以减少HTTP请求次数，提升加载速度。
使用字体图标：使用字体图标库（如Font Awesome）来代替图片图标。字体图标是一种使用字体文件来显示图标的技术，可以减少图像的使用量和页面加载时间

6. 节流防抖

使用节流和防抖技术来限制频繁的函数调用，例如在滚动事件或窗口调整事件中。

function debounce(func, delay) {
  var timeoutId;
  
  return function() {
    var context = this;
    var args = arguments;
    
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

window.addEventListener(\'scroll\', debounce(function() {
  // 在此处放置需要节流的函数
}, 200));

以上代码演示了一个简单的防抖函数的实现。debounce 函数接受一个函数和延迟时间作为参数，并返回一个新的函数。新的函数在延迟时间内保持静默，只有当没有新的调用发生后才会执行原始的函数。通过将防抖函数应用于 scroll 事件监听器，可以控制在滚动期间触发该事件的频率

7.回流重绘

避免触发过多的回流（重新计算元素的布局）和重绘（重新绘制元素的样式），可以通过优化CSS样式、合并多次DOM操作等方式来减少不必要的重排和重绘。

8.虚拟列表：

对于需要渲染大量数据的列表，使用虚拟列表技术只渲染当前可见区域的部分数据，通过滚动时动态加载和卸载列表项来提高性能。

9.本地缓存

使用浏览器提供的本地存储机制（如localStorage或IndexedDB）来存储和缓存数据，减少对服务器的频繁请求和数据传输。

本地缓存是一种可以显著提升性能的技术，它通过将数据存储在客户端的本地存储中，从而减少对服务器的频繁请求。下面是一些常见的本地缓存技术和它们的代码示例：

使用浏览器缓存：浏览器缓存是指浏览器在用户访问网页时将资源（如图片、CSS、JavaScript文件等）保存在本地，以便下次访问同一页面时可以从缓存中加载，而不需要重新下载。可以通过设置HTTP响应头来控制浏览器缓存的行为。

例如，在服务器响应头中设置以下缓存控制头：

<?php
  header(\'Expires: Thu, 31 Dec 2099 23:59:59 GMT\');
  header(\'Cache-Control: public, max-age=31536000\');
?>

以上代码示例中，设置了Expires头来指定缓存的过期时间，Cache-Control头用于指定响应可以被缓存的最大时间。通过设置正确的缓存头，可以有效利用浏览器缓存提升性能。

使用Web存储API： Web存储API允许在用户的浏览器中存储数据，包括localStorage和sessionStorage。localStorage用于长期存储数据，而sessionStorage仅在会话期间有效。

例如，使用localStorage存储数据：

// 存储数据
localStorage.setItem(\'username\', \'JohnDoe\');

// 获取数据
var username = localStorage.getItem(\'username\');

// 移除数据
localStorage.removeItem(\'username\');

以上代码示例展示了如何使用localStorage来存储、获取和移除数据。通过将数据存储在本地，可以避免重复的网络请求，从而提升性能。

使用Service Worker缓存： Service Worker是在浏览器背后运行的脚本，它可以拦截并处理网络请求。通过Service Worker，我们可以缓存静态资源，使得当用户离线时仍然可以访问应用程序。

例如，在Service Worker脚本中使用Cache API缓存资源：

// 注册Service Worker
if (\'serviceWorker\' in navigator) {
  navigator.serviceWorker.register(\'/sw.js\')
    .then(function(registration) {
      console.log(\'Service Worker 注册成功\');
    })
    .catch(function(error) {
      console.log(\'Service Worker 注册失败：\', error);
    });
}

// 在Service Worker脚本中缓存资源
self.addEventListener(\'install\', function(event) {
  event.waitUntil(
    caches.open(\'my-cache\')
      .then(function(cache) {
        return cache.addAll([
          \'/\',
          \'/index.html\',
          \'/styles.css\',
          \'/script.js\',
          \'/image.jpg\'
        ]);
      })
  );
});

// 在Service Worker脚本中使用缓存响应
self.addEventListener(\'fetch\', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
      })
  );
});