该面试题只是为了记录我自己的面试笔记，大多数摘自行内有关大佬总结，本人只是搬运工，有关链接已放置相关笔记的下面
前端性能检测
前端性能指标：
- 首屏绘制（First Paint，FP）
- 首屏内容绘制（First Contentful Paint，FCP）
- 可交互时间（Time to Interactive，TTI）
- 最大内容绘制（Largest Contentful Paint，LCP)
- 首次有效绘制（First Meaning Paint, FMP）
网页性能检测工具
- Lighthouse
- Performance api
重定向耗时 = redirectEnd - redirectStart;
DNS查询耗时 = domainLookupEnd - domainLookupStart;
TCP链接耗时 = connectEnd - connectStart;
HTTP请求耗时 = responseEnd - responseStart;
解析dom树耗时 = domComplete - domInteractive;
白屏时间 = responseStart - navigationStart;
DOMready时间 = domContentLoadedEventEnd - navigationStart;
onload时间 = loadEventEnd - navigationStart;
查看多组件 pv，uv，报错信息
前端监控
埋点上报
【前端监控系统】埋点数据上报的3种方式_埋点上报_前端阿彬的博客-CSDN博客
统计前端页面性能、页面 JS 报错、用户操作行为、PV/UV、用户设备等消息，并进行必要的监控报警。
sourceMap 监控日志
什么是Sourcemap
Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。
Sourcemap的作用
简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁，方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式，在上线前对 js 和 css 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试，肯定不切实际，sourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中，开发者可以在源码文件中 debug，这样就会让程序员调试轻松、简单很多。
Sourcemap的用法
Sourcemap 的种类有很多， 在生产环境下可以用process.env判断一下。 webpack中可以在devtool中设置, 在开发环境中可以配置devtool为cheap-module-source-map，方便调试。生产环境下建议采用none的方式，这样做不暴露源代码。或者是nosources-source-map 的方式，既可以定位源代码位置，又不暴露源代码。
SourceMap总结
SourceMap 的主要作用是为了方便调试
- 映射转换过后的代码和源代码之间的关系
- 源代码引入 //# sourceMappingURL=build.js.map
- source Map 解决了源代码和运行代码不一致所产生的问题
let path = require("path")
module.exports = {
mode:"none",
entry:"./src/main.js",
output:{
filename:"build.js",
path:path.join(__dirname,"dist")
},
devtool:"source-map"
}
