大家好，我是前端西瓜哥。本文讲解如何使用浏览器提供的工具进行 JS 代码的断点调试。 debugger 在代码中需要打断点的地方，加上 debugger，表示一个断点。浏览器代码执行到该位置时，会停下

Sources Panel 记录当前页面所有引用关联的文件资源，通过面板可以查看文件内容、修改文件内容、js调试等。开发过程中最常用来打断点查看任务执行顺序进行调试。

性能优化是所有前端人的追求，在这条路上，方法多种多样。这篇文章，说一下可以怎样定义性能指标及上报。 FP，全称 First Paint，翻译为首次绘制,是时间线上的第一个时间点，它代表网页的第一个像素渲染到屏幕上所用时间，也就是页面在屏幕上首次发生视觉变化的时间。 通过perf…

我们想要让网站的性能提升，具体指的是什么，如何去量化我们的优化。而且性能体验这种东西往往是相对的。所以在讨论性能时，我们需要有精确的数据，需要有可以测量的客观的标准来定义，这些标准就是指标。

Lighthouse是Google开发的一款开源工具，提供一套全面的测试来评估网页质量，包括加载性能、可访问性、最佳实践和PWA。

随着时代的发展，业内曾经提出过很多标准和规范，从最初2007年雅虎提出34条军规，到2020年google开始推广Web Vitals，优化技术有将近20多年的发展历史。

性能指标是理解和提升网页用户体验的关键。 主要的性能指标包括: First Contentful Paint (FCP) Largest Contentful Paint (LCP) First In

面试中经常问到前端性能监控相关指标，你知道FP、FCP、FMP、LCP代表什么事件吗？它们的先后顺序如何呢？如何计算？前端性能监控中常用哪些指标？ 本文将介绍前端项目中常用到的性能指标