挑战月薪30K | 前端性能优化的12 条建议（干货收藏）

首先我们要知道，页面打开快不快，不是在电脑或手机上的打开速度说了算，也不是测试同学测试的结果说了算，而是真实用户使用的时候说了算。

那么如何去监控用户真实使用时的页面性能呢？本文将做细致介绍（建议收藏）

前端监控需要注意什么？

---

首屏

页面上线后，我们最关心用户打开页面的速度，通常就是首屏。

静态资源

页面加载离不开静态资源的加载，包括 js、css、img、video、font 等，在如今盛行 SPA 的场景尤为重要，比如活动页面会有很多图片，我们通常会开发一些模板，由产品/运营同学来配置，而图片多大合适是比较难确定的，网速越来越快，大家对清晰度要求也越来越高，此时就可以通过监测这些图片的加载速度来酌情优化。

API 请求

数据是页面中相当重要的元素，可以说没有数据，你的页面几乎没有使用价值（纯静态除外）。当然这里我们只能粗暴的监控整个请求的总时间，纯前端无法监控各个阶段时间，但这对于线上应用也很重要。

其他测速

实际上线后，不同的应用可能会有不同的测速诉求，比如：视频从加载到播放的时间，此时可以自定义一些测速点，利用之前讲述的打点方式来上报。

如何监控静态资源？

---

这块其实还是比较简单的，只需要利用 PerformanceResourceTiming 即可，并且它的兼容性极高