前端性能优化

最新推荐文章于 2025-05-22 16:27:31 发布

前端_学习之路

最新推荐文章于 2025-05-22 16:27:31 发布

阅读量1.1k

点赞数 17

CC 4.0 BY-SA版权

文章标签：前端性能优化

本文链接：https://blog.youkuaiyun.com/wl_qianduan/article/details/145509361

前端性能优化是提升网站或应用程序用户体验的关键，以下是一些常见的优化方法：

1. 资源加载优化

压缩和合并文件：对 HTML、CSS 和 JavaScript 文件进行压缩，去除不必要的空格、注释等。同时，将多个 CSS 或 JavaScript 文件合并为一个或者通过雪碧图（CSS Sprites）合并小图标，减少 HTTP 请求次数。比如使用工具 gulp 或 webpack 的相关插件来实现。
图片优化：根据图片用途选择合适的格式，如 JPEG 适合照片，PNG 适合图标和透明元素，SVG 适合矢量图形。对图片进行压缩，可使用 TinyPNG 等在线工具或 image-webpack-loader 等构建工具插件。采用图片懒加载，当图片进入浏览器可视区域时再加载，可使用 LazyLoad 等库。
使用 CDN：将静态资源如图片、脚本、样式表等存储在 CDN（内容分发网络）上。CDN 会根据用户的地理位置，从距离用户最近的服务器节点分发资源，加快资源加载速度。
使用懒加载：对于非首屏或用户滚动后才能看到的图片，采用懒加载技术，只在需要时加载，以减少初始加载时间。

2. 代码优化

HTML 优化：合理使用 HTML 标签，遵循语义化原则，便于搜索引擎理解和提高代码可读性。避免使用内联框架 < iframe >，因为它会阻塞页面的加载和渲染，若必须使用，可设置async或defer属性。
CSS 优化：避免使用通配符选择器 *，因为它会匹配页面上的所有元素，影响渲染性能。将 CSS 样式放在标签内，确保页面在加载时能尽快获取样式并进行渲染，避免出现无样式内容闪烁（FOUC）的问题。
JavaScript 优化：减少全局变量的使用，防止变量命名冲突和污染全局命名空间。对频繁执行的 DOM 操作进行缓存，避免多次查询 DOM。例如，使用querySelectorAll获取一组元素后，将其缓存起来，而不是每次都重新查询。

3. 渲染优化

减少重排和重绘：重排和重绘操作会消耗性能，应尽量减少。例如，避免频繁地修改元素的样式，可一次性修改元素的class名来应用多个样式。使用requestAnimationFrame来处理动画和页面更新，它能让浏览器在重绘之前调用回调函数，使动画更流畅，性能更好。
优化 CSS 动画：使用 CSS3 动画代替 JavaScript 动画，因为 CSS3 动画可以利用硬件加速。例如，使用transform和opacity属性来实现动画效果，避免使用left、top等会触发重排的属性。
使用虚拟滚动：对于大量数据的列表或表格，使用虚拟滚动技术，只渲染视口内的数据，提高渲染性能。

4. 使用异步和延迟加载：

异步加载：对于非关键资源，如广告、统计脚本等，可以使用异步加载方式，避免阻塞主线程。
延迟加载：对于非首屏内容或用户交互后才需要的资源，可以延迟加载，提高首屏加载速度。

5. 代码拆分和按需加载：

代码拆分：将大型代码库拆分成较小的块或模块，根据需要加载，避免不必要的资源浪费。
按需加载：根据用户的交互或路由变化，动态加载所需的代码和资源。

6. 其他优化

缓存策略：合理设置浏览器缓存，通过在服务器端设置Cache-Control和Expires等响应头，告诉浏览器哪些资源可以缓存以及缓存的时长。使用localStorage、sessionStorage或IndexedDB来缓存一些不经常变化的数据，减少服务器请求。
优化字体加载：尽量使用系统自带的字体，减少自定义字体的使用。如果需要使用自定义字体，选择合适的字体格式（如 WOFF2），并进行字体子集化，只包含页面中使用到的字符，减小字体文件大小。

性能优化相关示例

图片懒加载
图片懒加载可以避免页面一次性加载大量图片，提高首屏加载速度。这里以IntersectionObserver API 实现图片懒加载为例。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载</title>
</head>
<body>
  <!-- data-src 存储真实图片地址，src 为占位图地址 -->
  <img class="lazyload" data-src="https://via.placeholder.com/300" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="示例图片">
  <img class="lazyload" data-src="https://via.placeholder.com/300" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="示例图片">
  <script>
    const lazyImages = document.querySelectorAll('.lazyload');
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazyload');
          observer.unobserve(img);
        }
      });
    });

    lazyImages.forEach(image => {
      observer.observe(image);
    });
  </script>
</body>
</html>

减少 DOM 操作次数
在操作 DOM 时，频繁的查询和修改会影响性能。可以先将操作集中在文档片段（DocumentFragment）中，最后一次性插入到 DOM 中。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>减少 DOM 操作次数</title>
</head>
<body>
  <ul id="list"></ul>
  <script>
    const list = document.getElementById('list');
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 100; i++) {
      const li = document.createElement('li');
      li.textContent = `Item ${i}`;
      fragment.appendChild(li);
    }
    list.appendChild(fragment);
  </script>
</body>
</html>

CSS 动画优化
使用 CSS3 的transform和opacity属性实现动画，利用硬件加速提升性能。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 动画优化</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: transform 1s, opacity 1s;
    }

    .box:hover {
      transform: translateX(100px);
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

利用 localStorage 缓存数据
使用localStorage缓存一些不经常变化的数据，减少服务器请求。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>localStorage 缓存数据</title>
</head>
<body>
  <button id="fetchData">获取数据</button>
  <div id="result"></div>
  <script>
    const fetchDataButton = document.getElementById('fetchData');
    const resultDiv = document.getElementById('result');
    fetchDataButton.addEventListener('click', () => {
      const cachedData = localStorage.getItem('myData');
      if (cachedData) {
        resultDiv.textContent = `从缓存获取的数据: ${cachedData}`;
      } else {
        // 模拟从服务器获取数据
        const data = '这是从服务器获取的数据';
        localStorage.setItem('myData', data);
        resultDiv.textContent = `从服务器获取的数据: ${data}`;
      }
    });
  </script>
</body>
</html>