前端性能优化

叶落风尘
185 阅读4分钟

打包优化

使用 webpack 等打包工具实现对代码的压缩和按需加载 1、代码压缩：通过去除代码中的空格、注释、无效代码等方式来减小代码的体积，从而加快代码的加载速度。

2、按需加载：将网页应用程序拆分成多个模块，只在需要时才加载对应的模块，避免一次性加载全部代码导致的网络请求过多和加载时间过长。

3、代码分割：将网页应用程序按功能拆分成多个代码块，每个代码块独立打包，尽可能复用已有的模块，以减小代码的重复加载和冗余。

4、Tree-shaking：通过静态分析代码，删除未被使用的代码，以减小代码的体积和提高执行效率。

网络优化

网络优化是前端性能优化的一个重要方面，包括以下几个方面：

  1. 减少 HTTP 请求：合并 CSS、JS 文件，使用 CSS Sprites 技术减少图片请求，使用 Base64 编码将小图标等资源内联到 CSS 文件中。

  2. 压缩文件大小：使用 gzip 压缩 CSS、JS 等静态资源，可以减少文件传输的时间和流量消耗。

  3. 缓存策略：设置合理的缓存策略可以有效减少请求次数，常用的缓存策略有强制缓存和协商缓存。强制缓存利用 Expires 或 Cache-Control 响应头来指定资源过期时间，从而在一段时间内不再向服务器发起请求；协商缓存利用 Last-Modified/If-Modified-Since 和 ETag/If-None-Match 等响应头来判断资源是否被修改过，如果没有修改则返回 304 Not Modified 状态码，浏览器从本地缓存中获取资源。

  4. 使用 CDN：利用 CDN 分布式网络加速文件传输，将静态资源放到 CDN 上，可以让用户从距离较近的节点获取资源，提高访问速度。

  5. 延迟加载：延迟加载是指在页面加载完毕后再加载部分资源，例如图片懒加载、按需加载等技术。这可以减少首屏渲染时间，提高用户体验。

  6. DNS 预解析：利用 DNS Prefetch 技术可以在页面加载时预先解析出需要访问的资源的 IP 地址，减少 DNS 查询的时间。

通过合理使用缓存策略、CDN、延迟加载等技术，可以有效地提高网站的访问速度和用户体验。

代码优化

1、通过 loading/骨架图能够提高用户体验减少白屏时间 2、使用 web work，Web worker 是一种在 Web 应用程序中运行后台任务的机制，它可以让 JavaScript 代码在单独的线程中运行。 3、使用虚拟列表。

虚拟列表

虚拟列表是一种动态加载数据的技术。与传统的列表不同，在虚拟列表中，只有当前可见区域内的数据被加载和渲染到屏幕上，而滚动后不再可见的数据则会被移除。当用户继续向下滚动时，新的数据会被异步加载并插入到列表底部，以实现无限滚动的效果。虚拟列表适用于需要展示大量数据的场景，并且可以提高页面性能和用户体验。相比于一次性加载所有数据再进行展示，虚拟列表可以在保证数据实时可用的前提下，减少了页面的初始加载时间及内存占用，加快了页面响应速度。 一个虚拟列表通常由以下几个部分组成：

  1. 数据源：包含要展示的所有数据。
  2. 渲染窗口：表示当前可视区域的范围，在这个范围内的数据将被渲染到页面上。
  3. 缓存池：保存已经渲染过的 DOM 元素，避免频繁创建和销毁 DOM 元素。

下面是一个简单的虚拟列表使用 demo：

<div id="container" style="height: 400px; overflow: auto;">
  <ul id="list"></ul>
</div>

const container = document.getElementById('container');
const list = document.getElementById('list');

const itemCount = 10000; // 总共要渲染的数据数量
const itemHeight = 50; // 每个数据项的高度
const visibleCount = Math.ceil(container.clientHeight / itemHeight); // 可见区域内最多能显示的数据项数量

// 计算容器的总高度
const totalHeight = itemCount * itemHeight;
container.style.height = `${visibleCount * itemHeight}px`;

// 渲染函数，用于将指定范围内的数据渲染到页面上
function render(start, end) {
  for (let i = start; i < end; i++) {
    const li = document.createElement('li');
    li.innerText = `Item ${i}`;
    li.style.height = `${itemHeight}px`;
    list.appendChild(li);
  }
}

// 初始化渲染第一批数据
render(0, visibleCount);

// 监听容器的滚动事件，动态更新渲染窗口中的数据
container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const start = Math.floor(scrollTop / itemHeight);
  const end = Math.min(start + visibleCount, itemCount);
  list.innerHTML = '';
  render(start, end);
});

在这个 demo 中，我们首先计算总共要渲染的数据数量和每个数据项的高度，并通过计算可见区域内最多能显示的数据项数量来确定容器的总高度。然后，我们定义了一个渲染函数，用于将指定范围内的数据渲染到页面上。在初始化时，我们调用了渲染函数来渲染第一批数据。最后，我们监听容器的滚动事件，根据滚动位置动态更新渲染窗口中的数据。

avatar
文章
阅读
粉丝