HiDocs
Search K

Appearance

一文搞懂前端页面性能优化方案 ​

1.前端性能优化的方案大全：共 12 种 ​

前端性能优化是提高网页加载速度和用户体验的关键。下面列出一些常见的前端性能优化方案：

  1. 压缩和合并静态资源：压缩 JavaScript、CSS 和 HTML 文件可以减小文件大小，提高加载速度。另外，合并多个文件为一个文件可以减少 HTTP 请求的数量，加快页面加载。——> 可以说配置 webpack 压缩

    webpack 压缩静态资源如何配置？

    引入一些特定的插件 plugins

  2. 图片格式和压缩优化：使用适当的图片格式（如 WebP、JPEG、PNG）和合适的压缩率来减小图片大小，同时考虑使用响应式图片。

  3. 延迟加载：

    • 图片懒加载：对于非必要的资源（如图片、广告等），可以使用延迟加载或懒加载的方式，当页面滚动到需要显示资源的位置时再加载它们。——> 重点
    • 触底加载、虚拟列表：对于过于大的列表可以参用触底加载、分页的优化，还可以使用虚拟列表优化页面渲染

  4. 使用 CDN：将静态资源（如 CSS、JavaScript、图片等）托管到 CDN（内容分发网络）上，使得用户能从离他们更近的服务器获取资源，加快加载速度。

  5. 缓存策略：合理设置缓存头（Cache-Control、Expires 等），让浏览器缓存静态资源，减少重复请求，提高页面访问速度。——> 重点

  6. 使用 font 字体图标、svg 图标替代图片图标：使用 font 字体图标或 SVG 图标替代图片图标，减少 HTTP 请求，提高页面渲染速度。——> 重点

  7. 减少重绘和回流：通过合理的 CSS 布局和样式优化，避免频繁的重绘和回流，提高页面渲染性能。——>重点

  8. 避免阻塞 script 脚本：将 JavaScript 脚本放在页面底部或使用async和defer属性，避免阻塞页面加载。——>重点

  9. 减少 ajax 请求的数量：多种数据可以放在一个请求里面

  10. 持久化存储常用数据：比如存储在 vuex 或者 loacalStorage 里面

  11. 前端框架优化：对于使用前端框架（如 React、Angular、Vue 等）的应用，优化组件的加载和渲染，减少不必要的重复渲染。（使用 keep-alive 标签缓存常用页面、使用异步导入来加载暂时不需要的组件等）

  12. 移动端优化：针对移动端设备，**使用响应式设计（这样就不用构建太多代码了）**和移动优先策略，减小资源大小，提高用户体验。

以上仅是一些常见的前端性能优化方案，实际优化应根据具体情况来选择和实施。同时，通过性能测试工具和浏览器开发者工具进行性能分析，可以帮助发现网页加载过程中的瓶颈和优化点。

自己总结的：

1.Web Workers：可以解决浏览器单线程逐帧渲染过程中，js 对于页面重绘重排的干绕，让浏览器实现多线程！

2.图片传输的优化方案 ​

图片传输优化是前端性能优化的一个重要方面，因为图片通常是网页中占用大量带宽和加载时间的资源。下面是一些图片传输优化的方案：

  1. 图片格式选择：选择合适的图片格式可以显著减小图片大小。常见的图片格式有 JPEG、PNG、GIF 和 WebP。一般而言，JPEG 适合保存照片和复杂图像，PNG 适合保存图标和透明图像，GIF 适合保存简单动画，而 WebP 是一种现代化的图片格式，具有更好的压缩率和质量，适用于大多数场景。
  2. 图片压缩：使用图片压缩工具对图片进行压缩，减小图片文件大小，而不影响图片质量。在线压缩工具和构建工具如 Gulp、Webpack 都可以帮助进行图片压缩（需要使用插件）。
  3. 响应式图片：对于移动设备和桌面设备，提供不同大小的图片版本。使用<picture>元素或 CSS 媒体查询配合不同尺寸的图片，让用户设备只加载适合其分辨率的图片。
  4. 图片懒加载：对于非立即可见的图片，采用图片懒加载技术。延迟加载图片直到用户滚动到它们的可见区域，避免一次性加载所有图片。
  5. 雪碧图（CSS Sprites）：将多个小图标或背景图合并成一个大图，通过 CSS 定位技术只显示需要的部分。这样可以减少 HTTP 请求，加快页面加载。
  6. 使用 SVG 图标：对于简单图标和矢量图像，考虑使用 SVG（Scalable Vector Graphics）格式。SVG 是矢量图形，可缩放且体积小，适合用于高分辨率和不同尺寸的设备。
  7. CDN 加速：将图片资源托管到 CDN（内容分发网络）上，使用户可以从离他们更近的服务器获取图片，减少加载时间。
  8. HTTP/2 支持：如果您的服务器支持 HTTP/2 协议，多个图片请求可以在一个连接上并行传输，提高加载效率。
  9. 缓存控制：配置适当的缓存头，让浏览器缓存图片资源，减少重复请求。

通过以上优化方案，可以显著提升网页加载速度，减少带宽消耗，提升用户体验。

注意：Vite 压缩图片

Vite 本身不会自动压缩图片（Webpack 在生产模式下会自动对代码进行压缩）。Vite 是一个现代化的前端构建工具，它专注于快速的开发和构建过程。Vite 使用了一种基于浏览器原生 ES 模块的开发服务器，使开发过程更加高效。它借助浏览器的原生 ES 模块支持来实现快速的冷启动和热模块替换。

图片压缩通常是构建工具的一部分，用于在构建过程中自动压缩图片。在使用 Vite 进行项目构建时，您可以选择添加其他工具或插件来实现图片压缩。

一种常用的做法是使用imagemin插件来压缩图片。imagemin是一个用于压缩图片的 Node.js 模块，可以在构建过程中对图片进行优化和压缩，以减小图片大小，从而提高网页加载速度。