长期更新，建议关注收藏点赞。
目录
性能优化
本文仅是列出常见的前端性能指标和优秀数值范围，具体的指标和数值应根据项目需求、用户体验要求、业务规模等因素来确定。
前端性能优化也不是一次性的任务，需要持续关注和优化。
- 为什么性能优化
- 提高用户体验：提高网页的加载速度和响应速度，减少网页的加载时间，提高用户的满意度和体验。
- 增加页面的访问量：网站的性能越好，越增加页面的访问量，提高网站的流量。
- 提高搜索引擎排名：搜索引擎对网站的性能和速度有评价标准，页面加载速度越快，搜索引擎评价越高，网站排名越高。
- 减少服务器压力：减少网络传输量、请求次数等，提高整个应用程序的性能和稳定性。
- 节约成本：减少服务器的硬件配置和维护成本，提高经济效益。
- 提高用户留存率
- 前端性能好坏判断
- 性能优化2-5-8原则
2：页面的加载时间应该控制在2秒以内，这是用户能够接受的最短时间。
5：页面的加载时间在5秒以内，用户对页面加载速度的不满意度开始上升。
8：页面的加载时间超过8秒，用户的流失率急剧增加，很可能放弃访问。 - RAIL
RAIL是一个衡量前端性能的指标，由Google提出，包括以下四个方面：
响应(Response)：在100毫秒内完成用户操作的响应时间，以保证用户感觉流畅。
动画(Animation)：动画在每秒60帧以上时，才能保证流畅自然，最高可达每秒120帧。
空闲(Idle)：在空闲时间内处理非关键性任务，如预取资源、预渲染等，以加速后续操作。
负载(Load)：在5秒内加载并渲染主要内容，确保用户不会因等待时间而失去兴趣。
- 性能优化2-5-8原则
具体指标
- 页面加载时间（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 到页面
js
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状态 和 加载完成标识）
使用 缓存策略 保存滚动位置 / 数据
移动端适配：下拉刷新 + 上拉加载