jQuery 性能优化手册推荐

前言

本手册汇总 jQuery 的性能优化技巧，旨在帮助开发者提高前端性能，减小页面对浏览器的负担，提高用户体验。本文将按照优化流程的时间顺序，从 HTML 结构优化、CSS 选择器优化、JavaScript 优化、Ajax 优化以及其他方面分别进行讲解。

一、HTML 结构优化

减少 DOM 操作

尽量减少对 DOM 的操作次数，因为这会涉及到渲染时间和重绘等时间，对性能会产生较大的影响。建议以下几点：

1.1 将 DOM 缓存起来，在必要时修改缓存的数据，然后再一次性的修改 DOM。例如，在表格中添加多行数据时，可以将这些数据拼接为一个字符串，最后一次性的添加到表格中。

代码示例1：添加多行数据的方法。

// 不推荐的写法：重复修改DOM结构
function addRows(data) {
  for (let i = 0; i < data.length; i++) {
    const tr = document.createElement('tr');
    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    td1.innerText = data[i].name;
    td2.innerText = data[i].age;
    tr.appendChild(td1);
    tr.appendChild(td2);
    document.getElementById('table').appendChild(tr);
  }
}

// 推荐的写法：先缓存DOM结构，再一次性添加到页面上
function addRows(data) {
  let rows = '';
  for (let i = 0; i < data.length; i++) {
    rows += '<tr><td>' + data[i].name + '</td><td>' + data[i].age + '</td></tr>';
  }
  $('#table').append(rows);
}

1.2 尽量使用 class 替代 ID，因为使用 ID 在页面中会导致大量的无用 CSS 计算。同时，请尽量避免在 class 中使用通配符和嵌套选择器，因为这会增加 CSS 解析器的负担。

避免使用 table 布局

table 布局和 div 布局相比，性能要低很多，尤其是在加载大量数据时。尽量使用 div 布局或 flex 布局。需要注意的是，div 布局可能会导致标签嵌套过度，因此请尽量避免这种情况的发生。

代码示例2：使用 div 布局实现等高格子的方法。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>等高格子布局示例</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .item {
        width: 30%;
        margin-bottom: 20px;
        background-color: #ddd;
      }
      .item > div {
        padding: 10px;
        border: 1px solid #666;
      }

      /* 下面为兼容性写法 */
      .container::after {
        content: '';
        flex: auto;
      }
      .item::after {
        content: '';
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <div>这是一段文本</div>
        <div>这是一段文本</div>
      </div>
      <div class="item">
        <div>这是一段文本</div>
      </div>
      <div class="item">
        <div>这是一段文本</div>
        <div>这是一段文本</div>
        <div>这是一段文本</div>
        <div>这是一段文本</div>
      </div>
      <div class="item">
        <div>这是一段文本</div>
        <div>这是一段文本</div>
      </div>
      <div class="item">
        <div>这是一段文本</div>
      </div>
      <div class="item">
        <div>这是一段文本</div>
        <div>这是一段文本</div>
      </div>
    </div>
  </body>
</html>

二、CSS 选择器优化

尽量使用 class 选择器

使用 ID 选择器会导致 CSS 的查找效率降低，因此应尽量使用 class 选择器。同时，请尽量少用通配符和后代选择器，因为这会增加选择器的复杂度，降低查找效率。

代码示例3：使用类选择器配置菜单样式。

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.menu > div {
  margin-left: 20px;
  margin-right: 20px;
}

减少样式规则

尽量避免在 CSS 中使用不必要的样式规则，因为这会增加解析的时间。特别是在一个页面中包含着大量的元素时，这会对性能造成很大的影响。

代码示例4：避免不必要的样式规则。

/* 不推荐 */
div {
  color: #000;
}
/* 推荐 */
.message {
  color: #000;
}

三、JavaScript 优化

合理使用变量和缓存

在使用 JavaScript 时，应该避免频繁地执行重复代码。请尽量使用变量来保存数据，避免重复计算，同时也要注意 DOM 缓存的使用。

代码示例5：优化DOM操作。

// 不推荐
for (let i = 0; i < list.length; i++) {
  const el = document.createElement('div');
  el.innerText = list[i];
  document.body.appendChild(el);
}
// 推荐
let container = document.body;
let fragment = document.createDocumentFragment();
for (let i = 0; i < list.length; i++) {
  const el = document.createElement('div');
  el.innerText = list[i];
  fragment.appendChild(el);
}
container.appendChild(fragment);

setTimeout 和 setInterval

在 JavaScript 中，setTimeout 和 setInterval 可以帮助开发者编写延时执行的代码。但是，使用时需要注意以下几点：

setTimeout 和 setInterval 引用的函数将在全局作用域中执行，这意味着它们不能访问父函数的局部变量。
尽量避免使用 setInterval，因为这会导致代码陷入死循环，并且可能会使浏览器变得非常缓慢。
每次调用 setTimeout 和 setInterval 都会引入一定的“延迟”时间，因此应该尽量使用 requestAnimationFrame。

代码示例6：使用 requestAnimationFrame 代替 setTimeout。

function animate() {
  requestAnimationFrame(animate);
  // ...
}
animate();

四、Ajax 优化

减少 HTTP 请求

在大多数网站上，HTTP 请求是加载时间最长的步骤之一，因此需要尽量减少 HTTP 请求次数。

合理使用缓存

前端缓存可以避免重复的 HTTP 请求，提高加载速度，同时减轻服务端的压力。因此，应该尽量使用浏览器自带的缓存机制，同时也可以使用 localstorage 等手动缓存方案。

代码示例7：使用 localstorage 缓存表单数据。

function saveData() {
  const form = document.getElementById('form');
  const data = new FormData(form);
  localStorage.setItem('data', JSON.stringify(Object.fromEntries(data.entries())));
}
function loadData() {
  const data = localStorage.getItem('data');
  if (data) {
    const form = document.getElementById('form');
    const entries = Object.entries(JSON.parse(localStorage.getItem('data')));
    for (let i = 0; i < entries.length; i++) {
      const name = entries[i][0];
      const value = entries[i][1];
      const input = form.querySelector(`[name="${name}"]`);
      if (input) {
        input.value = value;
      }
    }
  }
}

五、其他优化

优化图片

在网页中，图片占据了很大的空间，因此图片优化可以极大地提高页面加载速度。以下是几个常见的图片优化技术：

图片压缩，使用尽量小的文件大小来展示图片。
懒加载，延迟图片的加载时间。
CSS 图片精灵，将多张图片合并成一张，减少 HTTP 请求。

代码示例8：使用懒加载优化图片。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图片懒加载示例</title>
    <style>
      .placeholder {
        width: 500px;
        height: 300px;
        background-color: #eee;
      }
      .image {
        display: none;
        width: 500px;
        height: 300px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <div class="placeholder"></div>
    <img class="image" data-src="/path/to/image.jpg">
    <div class="placeholder"></div>
    <img class="image" data-src="/path/to/image.jpg">
    <div class="placeholder"></div>

    <script>
      const images = document.querySelectorAll('.image');
      const len = images.length;
      let count = 0;

      function loadImage() {
        const image = images[count];
        const src = image.getAttribute('data-src');
        const img = new Image();
        img.onload = () => { image.style.backgroundImage = `url(${src})`; };
        img.src = src;
        count++;
        if (count < len) {
          setTimeout(loadImage, 1000);
        }
      }

      if (len > 0) {
        loadImage();
      }
    </script>
  </body>
</html>

代码压缩

在部署代码之前，请将 JavaScript 和 CSS 进行压缩，这可以极大地减小文件大小。

总结

本手册汇集了各种优化技巧，包括 HTML 结构优化、CSS 选择器优化、JavaScript 优化、Ajax 优化、图片优化等。在实际项目中，我们应该结合具体的情况进行优化，遵循“事件驱动、异步处理、最小化 HTTP 请求、避免重绘和回流”等原则，从而最大化地提高页面性能，提高用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 性能优化手册推荐 - Python技术站

jQuery 性能优化手册 推荐

相关文章

jQuery 性能优化手册推荐