【前端】性能优化篇

news2025/6/5 3:33:19

长期更新，建议关注收藏点赞。

性能优化

本文仅是列出常见的前端性能指标和优秀数值范围，具体的指标和数值应根据项目需求、用户体验要求、业务规模等因素来确定。
前端性能优化也不是一次性的任务，需要持续关注和优化。

为什么性能优化

提高用户体验：提高网页的加载速度和响应速度，减少网页的加载时间，提高用户的满意度和体验。
增加页面的访问量：网站的性能越好，越增加页面的访问量，提高网站的流量。
提高搜索引擎排名：搜索引擎对网站的性能和速度有评价标准，页面加载速度越快，搜索引擎评价越高，网站排名越高。
减少服务器压力：减少网络传输量、请求次数等，提高整个应用程序的性能和稳定性。
节约成本：减少服务器的硬件配置和维护成本，提高经济效益。
提高用户留存率

前端性能好坏判断
- 性能优化2-5-8原则
  2：页面的加载时间应该控制在2秒以内，这是用户能够接受的最短时间。
  5：页面的加载时间在5秒以内，用户对页面加载速度的不满意度开始上升。
  8：页面的加载时间超过8秒，用户的流失率急剧增加，很可能放弃访问。
- RAIL
  RAIL是一个衡量前端性能的指标，由Google提出，包括以下四个方面：
  响应(Response)：在100毫秒内完成用户操作的响应时间，以保证用户感觉流畅。
  动画(Animation)：动画在每秒60帧以上时，才能保证流畅自然，最高可达每秒120帧。
  空闲(Idle)：在空闲时间内处理非关键性任务，如预取资源、预渲染等，以加速后续操作。
  负载(Load)：在5秒内加载并渲染主要内容，确保用户不会因等待时间而失去兴趣。

具体指标

页面加载时间（Page Load Time）：页面从开始加载到加载完毕所需的时间，包括页面资源加载时间和页面渲染时间。越短越好，应控制在 2-3 秒内。
首屏加载时间（First Contentful Paint）：页面第一次渲染任何可见内容所需时间。是用户感知页面加载速度的第一时间节点，应控制在 2 秒内。
用户可交互时间（Time to Interactive）：页面从开始加载到可以响应用户交互的时间。在该指标达到之前，用户不能进行任何操作。用户可交互时间应控制在 5 秒内。
白屏时间（White Screen Time）：用户打开网页到页面开始渲染第一像素的时间。越短越好，控制在 1 秒内。
资源文件大小（Resource Size）：页面所需的所有资源文件（HTML、CSS、JS、图片等）总大小。资源文件大小应控制在 500KB 内，过大的资源文件会影响页面加载速度和用户体验。

监控工具/系统

如何通过指标定位问题

解决方案

html

css

js

vue

react

包体积

静态资源

图片优化

白屏

首屏加载速度

缓存优化

网络优化

web worker

动画

面试题汇总

怎么实现无限加载，如果有一亿条数据怎么优化

考察的点有：
监听滚动事件
虚拟滚动（Virtual Scroll / Windowing）
懒加载
分页加载（Lazy loading），后端配合，（升级版游标分页）
前端性能优化意识

无限加载（Infinite Scroll）指的是：用户滚动到底部时，自动加载下一批数据，而不是一次性加载所有内容。

监听滚动事件（scroll）：判断是否接近底部（如：滚动距离 + 视口高度 >= 滚动总高度 - 阈值）；触发数据请求（AJAX / fetch），将新数据 append 到页面

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const clientHeight = document.documentElement.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight;

  if (scrollTop + clientHeight >= scrollHeight - 100) {
    loadMoreData(); // 拉取下一页
  }
});

数据量有一亿条的优化
核心优化策略：分页 + 虚拟滚动

分页加载（后端配合）
前端每次请求一页（如每页 50 条）
URL 示例：/api/list?page=2&limit=50
后端返回：分页数据 + 是否还有下一页
优点：减少网络传输、避免一次加载太多
虚拟滚动 / 虚拟列表（Virtual Scrolling）
虚拟滚动是只渲染可视区域内的 DOM 元素，其它的只占位不渲染，极大提高性能。滚动时按需更新渲染区域
实现方式：
自己实现 scroll 监听 + DOM 占位
使用现成组件库

框架	虚拟列表库
React	`react-window`, `react-virtual`
Vue	`vue-virtual-scroller`

后端支持游标分页（cursor pagination）
传统分页（page=1,2,3）到后期效率低。改为：每次记录当前返回列表的最后一个 ID 或时间戳（cursor）下次请求：/api/list?after=last_id
优点：高性能、不重复、不漏数据，适合大数据量场景

懒加载图片、懒渲染组件
图片、复杂组件使用懒加载（<img loading="lazy"> 或 IntersectionObserver）
避免首次加载压力
避免全量存入内存
只缓存部分数据（如当前页、前后页），其余可丢弃节省内存。
补充
使用节流 / 防抖避免频繁触发加载（配合显示Loading状态和加载完成标识）
使用缓存策略保存滚动位置 / 数据
移动端适配：下拉刷新 + 上拉加载