前端性能优化面试题-30题
输入“/”快速插入内容
前端性能优化面试题-30题
前端性能优化面试题-30题
用户8691用户86912025年9月18日修改
1. 什么是前端性能优化？为什么重要？
参考答案：
前端性能优化是指通过各种技术手段和策略，提升网页加载速度、渲染效率和用户交互体验的过程。
重要性：
•
用户体验：页面加载速度直接影响用户满意度和留存率
•
业务价值：研究表明页面加载时间每增加1秒，转化率下降7%
•
SEO影响：搜索引擎将页面速度作为排名因素之一
•
资源成本：减少带宽消耗和服务器压力
2. 前端性能优化的核心指标有哪些？
参考答案：
Core Web Vitals（核心网页指标）：
•
LCP（Largest Contentful Paint）：最大内容绘制时间，理想值<2.5s
•
FID（First Input Delay）：首次输入延迟，理想值<100ms
•
CLS（Cumulative Layout Shift）：累积布局偏移，理想值<0.1
其他重要指标：
•
FCP（First Contentful Paint）：首次内容绘制
•
TTI（Time to Interactive）：可交互时间
•
FMP（First Meaningful Paint）：首次有意义绘制
3. 如何减少HTTP请求数量？
参考答案：
•
资源合并：CSS/JS文件合并，雪碧图（CSS Sprites）
•
内联资源：小图片转base64，关键CSS内联
•
懒加载：图片、组件按需加载
•
缓存策略：利用浏览器缓存减少重复请求
•
CDN加速：静态资源使用CDN分发
•
HTTP/2：利用多路复用特性
代码块
// 图片懒加载示例
const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
4. 什么是关键渲染路径？如何优化？
参考答案：