前端Vue常用的性能优化

方法

  1. 尽量减少http请求，减少页面的重排重绘
  2. 开启gzip压缩，压缩css和js文件
  3. 加入CDN静态资源加速
  4. 加入节流防抖
  5. 加入图片、路由懒加载，预加载
  6. 灵活使用缓存，减少请求负担
  7. 减少页面的dom操作，尽量用v-show代替v-if
  8. 组件拆分

首屏加载速度

  1. 压缩和优化页面资源：对于HTML、CSS、JavaScript以及图片等文件进行压缩和优化，减小文件大小，加快下载速度。
  2. 使用CDN（内容分发网络）：通过将静态资源缓存在全球各地的服务器上，可以提高资源加载速度，特别是在不同地区用户访问时。
  3. 减少HTTP请求次数：合并多个CSS或JavaScript文件、使用CSS Sprites技术、避免过多的HTTP请求，从而加快网页加载速度。
  4. 延迟加载（Lazy Loading）：推迟某些资源（如图片和视频）的加载时间，以便更快地加载首屏。也可以使用按需加载（On-demand Loading）等技术，只在需要时才加载数据。
  5. 使用WebP格式：使用Google开发的WebP图像格式代替JPEG或PNG格式，可以减少图像文件大小，提高网页载入速度。
  6. 优化代码：合理优化代码，如删除冗余代码、减少DOM操作、避免重排和重绘等方式，可以提高网页性能。
  7. 使用浏览器缓存：设置响应头中的Cache-Control和Expires等参数，让浏览器缓存和重复利用资源，提高网页访问速度。
  8. 采用HTTP/2协议：HTTP/2协议支持多路复用、二进制传输、服务器推送等新特性，能够有效提高页面加载速度。
  9. 优化服务器配置：对服务器进行适当的调整和配置，如启用Gzip压缩、使用合适的Web服务器等，可以提升网站性能。
  10. 使用预渲染技术：在用户访问前提前生成首屏内容，以提高网页加载速度。
  11. 避免使用大量JavaScript框架或库：过多的框架或库会增加页面加载时间和资源开销。

优化长列表技术

  1. 虚拟滚动（Virtual Scrolling）：将大数据集分成小块，每次只显示可见区域内的部分数据，随着滚动操作更新可视内容。
  2. 懒加载（Lazy Loading）：将图片或其他资源延迟加载，只在用户需要时才加载，减少初始加载时间和带宽开销。
  3. 分页加载（Pagination）：将大数据集分页加载，一次只加载一页数据，避免一次性加载过多数据造成页面卡顿。
  4. 双向绑定（Two-way Data Binding）：通过双向数据绑定，实现数据与 UI 的自动同步，减少手动操作和提高界面响应速度。
  5. 缓存数据（Caching）：对于频繁访问的数据进行缓存，减少服务器端的压力和网络传输开销，改善网页性能。