Nash

前端高级性能优化技术学习文档

Nash -

一、前端性能优化概述

前端性能优化是提升 Web 应用加载速度和响应速度的关键过程。随着 Web 应用功能和复杂度的提升，性能变得尤为重要。前端优化不仅仅涉及页面的加载速度，还包括用户的交互体验、资源加载的效率以及页面渲染的性能。常见的优化技术包括代码分割、缓存策略、懒加载、图片和资源优化以及减少重绘和重排。

本文将深入探讨这些优化技巧，并列出常见的面试题。

二、代码分割

1. 什么是代码分割？

代码分割（Code Splitting）是一种将应用程序的代码分割成多个小块，并按需加载的技术。通过代码分割，可以实现按需加载，减少首次加载的资源体积，提高页面的加载速度。

2. 如何实现代码分割？

在现代前端构建工具（如 Webpack）中，可以使用 动态导入 或 React.lazy 等技术实现代码分割。

动态导入

import(/* webpackChunkName: "chunk-name" */ './someModule') .then(module => { // 使用模块  }) .catch(err => { console.error("模块加载失败:", err); });

React.lazy (针对 React 项目)

import React, { Suspense } from 'react'; const SomeComponent = React.lazy(() => import('./SomeComponent')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <SomeComponent />    </Suspense>  ); }

通过这种方式，只有在用户访问特定的路由或组件时，才会加载相关的 JavaScript 文件，从而减少初始页面加载时间。

3. 面试题

  • 什么是代码分割？它的优点是什么？
    代码分割将大型的应用程序拆分成多个小块，按需加载，减少初始加载时间，提高用户体验。
  • 如何在 React 中实现懒加载？
    在 React 中，可以使用 React.lazy 和 Suspense 组件来实现懒加载。

三、缓存策略

1. 什么是缓存？

缓存是将数据存储在一个快速的存储介质（如内存、硬盘或浏览器存储）中，以便后续请求时可以直接读取，而不需要重新计算或重新请求资源。有效的缓存策略可以大大提高页面加载速度，减少服务器压力。

2. 浏览器缓存

浏览器缓存分为 强缓存 和 协商缓存。

强缓存

浏览器直接使用缓存中的资源，不会向服务器发起请求，常用的缓存控制头有：

  • Cache-Control：定义缓存策略，如 Cache-Control: max-age=3600 表示缓存一个小时。
  • Expires：定义缓存过期时间（过时的方案，Cache-Control 优于它）。

Cache-Control: max-age=3600 Expires: Tue, 15 Nov 2024 12:00:00 GMT

协商缓存

当缓存过期或没有强缓存时，浏览器会发起请求，并通过服务器的响应判断资源是否更新，常用的头部有：

  • ETag：资源的唯一标识，服务器返回 ETag，浏览器将其存储，下一次请求时带上 If-None-Match 头部。
  • Last-Modified：资源最后修改时间，浏览器发送 If-Modified-Since 请求头，服务器根据资源修改时间判断是否需要重新加载。

ETag: "abc123" If-None-Match: "abc123"

3. localStorage 和 sessionStorage

  • localStorage：用于存储持久化数据，数据在浏览器会话间保存。
  • sessionStorage：用于存储会话期间的数据，数据在浏览器窗口关闭时消失。

// 设置缓存localStorage.setItem('key', 'value'); // 获取缓存const value = localStorage.getItem('key');

4. 面试题

  • 什么是浏览器缓存？如何利用缓存提高性能？
    浏览器缓存可以将文件存储在本地，避免每次请求都从服务器获取，从而提高页面加载速度。
  • 什么是强缓存和协商缓存？它们的区别是什么？
    强缓存：通过设置 Cache-Control 或 Expires 来控制资源的缓存时间；协商缓存：通过 ETag 或 Last-Modified 来判断资源是否更新。

四、懒加载

1. 什么是懒加载？

懒加载是一种延迟加载技术，只有当资源（如图片、视频等）出现在视口中时，才会加载这些资源，避免在页面加载时就加载所有资源，从而提高初始加载速度。

2. 如何实现懒加载？

懒加载通常通过监听浏览器滚动事件，检查资源是否进入视口，若进入则加载资源。

图片懒加载示例：

<img data-src="image.jpg" class="lazyload" alt="Lazy loaded image" />

// 图片懒加载实现const images = document.querySelectorAll('img.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); } }); }); images.forEach(image => observer.observe(image));

3. 面试题

  • 懒加载的优点是什么？
    懒加载可以延迟加载非关键资源，减少初始页面加载时间，提高性能。
  • 如何判断元素是否进入视口？
    可以使用 IntersectionObserver API 来监听元素是否进入视口。

五、优化图片和资源

1. 图片优化

优化图片可以显著减少页面加载时间。常见的图片优化方式包括：

  • 压缩图片：使用工具（如 ImageOptim、TinyPNG）压缩图片，减少文件大小。
  • 选择合适的格式：使用 WebP、JPEG 2000 等现代图片格式，它们提供更好的压缩效果。
  • 图片尺寸调整：根据显示区域的大小选择合适尺寸的图片，避免加载过大的图片。

2. 资源压缩与合并

压缩 CSS、JavaScript 和图片文件，合并多个小文件成一个大文件，减少 HTTP 请求次数。

  • JavaScript 和 CSS 压缩：可以使用工具如 UglifyJS、Terser、CSSNano 来压缩代码，去除多余的空格和注释。
  • 图片格式转换：将图片转换为 WebP 格式，WebP 在压缩效果上优于 PNG 和 JPEG 格式。

3. 面试题

  • 如何优化图片以提高页面加载速度？
    可以通过压缩图片、使用合适的图片格式、调整图片尺寸等方式来优化图片。
  • WebP 格式有哪些优势？
    WebP 是 Google 推出的现代图片格式，具有更高的压缩比和更小的文件体积。

六、减少重绘和重排

1. 什么是重绘和重排？

  • 重绘：当元素的外观发生变化，但不影响布局时（如改变颜色），浏览器会进行重绘。
  • 重排：当元素的尺寸、位置、可见性等发生变化时，浏览器会重新计算布局，导致重排。

2. 如何减少重绘和重排？

  • 避免频繁的 DOM 操作：尽量减少对 DOM 的直接操作，使用批量操作或 requestAnimationFrame() 来优化动画。
  • 使用 CSS3 动画和过渡：使用 CSS 动画而非 JavaScript 来处理元素的变化，CSS 动画通常比 JavaScript 更高效。
  • 使用虚拟 DOM：框架如 React 和 Vue 使用虚拟 DOM 来减少不必要的重排和重绘操作。

3. 面试题

  • 什么是重绘和重排，它们对性能的影响是什么？
    重绘和重排都会消耗浏览器的渲染时间，重排比重绘更昂贵，因为需要重新计算布局。
  • 如何避免重排？
    尽量避免频繁修改元素的尺寸、位置或其他影响布局的属性，合并多个 DOM 操作。