【前端】性能优化篇

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

性能优化

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

• 为什么性能优化

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

• 前端性能好坏判断
  • 性能优化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） 指的是：用户滚动到底部时，自动加载下一批数据，而不是一次性加载所有内容。

1. 监听滚动事件（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(); // 拉取下一页}
});

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

• 分页加载（后端配合）
  前端每次请求一页（如每页 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
  优点：高性能、不重复、不漏数据，适合大数据量场景

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