alinode到ezm性能监控

为页面中拖慢 Largest Contentful Paint(LCP)的静态资源添加 fetchpriority="high"属性，可以提高加载速速。Esty使用Priority Hints 提升了 4%的LCP时间,另外一些站点在试验测试环境中甚至可以提升20% -30%。在大多数场景下，使用 fetchpriority 足以为LCP时间带来可观的提升。

代码片段

Priority Hints允许你有机会调整静态资源的加载优先级，包括：images,css,fonts,scripts以及iframes。因此Priority Hints并不局限于用来提升LCP表现：

原文

Google Tag Manager入门

前言

项目上线后，用户如果出现错误(代码报错、资源加载失败以及其他情况),基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司都是损失

由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择通过nodejs自己搭一个服务。

概述

我的项目是使用Vue2写的，所以本文主要是讲Vue相关的部署过程

1. 部署后台服务（使用express）

2. 收集前端错误（主要是Vue）

3. 提交信息到后台分析源码位置及记录日志

在当今数字时代，网站的性能对于吸引和保留用户至关重要。用户不愿意等地啊缓慢的加载时间，而快速响应的页面将帮助您留住访问者，提高转化率。前端性能优化是实现这一目标的关键因素之一。在本文中，我们将探讨一些重要的前端性能优化策略，以提高网站速度、交互性和用户满意度

衡量标准

测量工具

• Chrome developer tools: lighthouse,performance

• WevPageTest

• PerformanceObserver

P50,P90 P99(pct50, pct90, pct99)指什么？

P50,P90,P99(或写作pct50, pct90, pct99)都是数据聚合统计的一种方式，跟百分比相关(p的函数是 percentile)

• p50:数据集按升序排列，第50分位置大的数据(即升序排列后排在50%位置的数据)。
• p90:数据集按升序排列，第90分位置大的数据(即升序排列后排在90%位置的数据)。
• p99: 数据集按升序排列，第99分位置大的数据(即升序排列后排在99%位置的数据).

有什么实际意义和用处？

Lighthouse 使用

Lighthouse 是由Google开发病开源的web性能测试工具，通过监控和检测应用的各方面性能表现，为开发者提供优化用户体验和网站性能提供指导建议

下面介绍两种使用Lighthouse的方式:通过Chrome插件使用和通过Node CLI使用

1.1 通过charome插件使用

首先现在 Lighthouse 插件(Loghthouse谷歌浏览器插件下载地址：Lighthouse)

背景

我们经常使用Chrome Dev Tools 来开发调试，但是很少知道怎么利用他来分析页面性能，这篇文章，我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读

上图是Chrome Dev Tools 的一个截图，其中，我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能，这里简单介绍一下

• Network: 页面中各种资源请求的情况，这里能看到资源的名称、状态、使用的协议(http1/http2/quic...)、资源类型、资源大小、资源时间线等情况
• Performance: 页面各项性能指标的火焰图，这里能看到白屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息
• Memory：可以记录函数的耗时情况，方便找出耗时较多的函数
• Layers:展示页面中的分层情况

当Promise被reject且没有reject处理器的时候，会触发unhandledrejection事件；这可能发生在window下，但也可能发生在Workder中。这对于调试回退错误处理非常有用

源码仓库

为什么要做前端监控

• 更快的发现问题和解决问题
• 做产品的决策一句
• 为业务扩展提供了更多可能性
• 提升前端工程师的技术深度和广度，打造简历亮点

前端监控目标

• 稳定性 stability
  • js错误：js执行错误、promise异常
  • 资源错误：js、css资源加载异常
  • 接口错误：ajax、fetch请求异常
  • 白屏:页面空白
• 用户体验
• 业务business
  • pv: 页面浏览量和点击量
  • uv: 访问某个站点的不同ip的人数
  • 用户在每一个页面的停留时间