前端面试题系列文章：
- 【1】备战前端实习面试之HTML篇
- 【2】备战前端实习面试之CSS篇
- 【3】备战前端实习面试之JavaScript篇
- 【4】备战前端实习面试之React篇
- 【5】备战前端实习面试之Vue篇
- 【6】备战前端实习面试之Node.js篇
- 【7】备战前端实习面试之浏览器篇
- 【8】备战前端实习面试之性能优化篇
- 【9】备战前端实习面试之计算机网络篇
- 【10】备战前端实习面试之手写代码篇
- 【11】备战前端实习面试之代码输出结果篇
项目
前端监控系统
说说对前端监控的理解
前端监控是指在前端应用程序中收集、监视和分析各种关键指标和数据，以了解应用程序的性能、稳定性和用户体验情况。通过前端监控，开发团队可以及时发现和解决问题，提高应用程序的质量，追求更好的性能和用户体验。
前端监控一般需要监控各种指标，包括页面加载时间、资源加载时间、错误信息、用户交互行为、页面性能指标（如FPS、CPU占用等）以及用户行为分析等。
- 错误监控：通过监控前端应用程序中的错误信息，可以快速发现并定位代码中的错误和异常。错误信息包括JavaScript运行时错误、网络请求错误、资源加载错误等。
- 性能监控：需要追踪页面加载时间、资源加载时间、渲染性能等关键性能指标。
- 用户体验监控：需要记录用户的交互行为、浏览行为和页面转化情况等。
- 监控工具和技术：前端监控可以使用各种监控工具和技术实现，例如使用JavaScript错误监控库（如Sentry、Bugsnag等）捕获JavaScript错误，使用性能监控工具（如Web Vitals、Lighthouse等）评估页面性能，使用用户行为分析工具（如Google Analytics、Hotjar等）了解用户行为等。
- 数据分析和报告：对收集的数据进行分析和报告，通过统计和可视化的方式呈现。
如何设计埋点 SDK
前端核心性能指标
- 页面加载时间（Page Load Time）：
- 概念：指从用户请求页面开始到页面完全加载完成所需的时间。
// 计算页面加载时间
const startTime = performance.timing.navigationStart; // 页面导航开始时间
const endTime = performance.timing.loadEventEnd; // 页面加载完成时间
const pageLoadTime = endTime - startTime;
console.log('Page Load Time:', pageLoadTime);- 首次内容渲染时间（First Contentful Paint，FCP）：
- 概念：指页面上第一次渲染任何文本、图像、非空白的canvas或SVG的时间点。
// 计算首次内容渲染时间
// 方法一：
const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0];
const fcpTime = fcpEntry.startTime;
console.log('First Contentful Paint:', fcpTime);
// 方法二：
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const fcpEntry = entries.find((entry) => entry.name === 'first-contentful-paint');
if (fcpEntry) {
console.log('首次内容渲染时间:', fcpEntry.startTime);
}
});
observer.observe({ entryTypes: ['paint'] });- 首次有效渲染时间（First Meaningful Paint，FMP）：
- 概念：指页面上有意义的内容首次出现并可视的时间点。
- 计算实现：需要根据具体的业务场景来定义什么是有意义的内容，并监测关键元素的渲染时间。
// 监测关键元素的渲染时间
// 方法一：
const keyElement = document.getElementById('content'); // 假设content为关键元素
const fmpTime = keyElement ? keyElement.renderTime : 0;
console.log('First Meaningful Paint:', fmpTime);
// 方法二：
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const fmpEntry = entries.find((entry) => entry.name === 'first-meaningful-paint');
if (fmpEntry) {
console.log('首次有效渲染时间:', fmpEntry.startTime);
}
});
observer.observe({ entryTypes: ['paint'] });- 用户交互响应时间（Time to Interactive，TTI）：
- 详解：TTI是指页面加载完成后，用户可以与页面进行交互的时间点。
- 计算实现：可以通过监测用户交互事件的响应时间来确定
TTI。
// 监测用户交互事件的响应时间
const button = document.getElementById('button'); // 假设button为用户交互元素
let ttiTime = 0;
button.addEventListener('click', () => {
ttiTime = performance.now(); // 用户点击按钮时的时间
console.log('Time to Interactive:', ttiTime);
});
