聊一聊用户体验管理

周尛先森
1,246 阅读8分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

在前端，用户体验是非常重要的，而它又是很有广度的一个话题，会涉及到比较多的知识点，但是掌握之后，对自己会有不错的提升。

用户体验管理

本文将从一个页面展示的时间线作为索引，尽可能展开里面关于用户体验的知识点。主要有以下几点：

  • 常见网站性能指标 （最直接的用户体验）
  • 前端监控 （更好的用户动向与收集前端报错）
  • 前端缓存 （更快的展示页面）
  • 单点登录 （更少的登录操作）

常见网站性能指标

用户打开我们的页面，需要等待多长时间才有画面出来，什么时候才能和页面交互，这个时间越短，用户的体验越好，所以一般我们会用到一些性能指标。

下面是一些常见的性能指标

FP 白屏（First Paint Time ）
  从页面开始加载到浏览器中检测到渲染（任何渲染）时被触发（例如背景改变，样式应用等）

FCP 首屏（first contentful paint ）
  从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。
关注的焦点是内容，这个度量可以知道用户什么时候收到有用的信息（文本，图像等）

FMP 首次有效绘制（First Meaningful Paint ）
  表示页面的“主要内容”，开始出现在屏幕上的时间点，这项指标因页面逻辑而异，因此上不存在任何规范。 （只是记录了加载体验的最开始。如果页面显示的是启动图片或者 loading 动画，这个时刻对用用户而言没有意义）

LCP（Largest Contentful Paint ）
  LCP 指标代表的是视窗最大可见图片或者文本块的渲染时间。 （可以帮助我们捕获更多的首次渲染之后的加载性能，但这项指标过于复杂，而且很难解释，也经常出错，没办法确定主要内容什么时候加载完。）

长任务（Long Task）
  当一个任务执行时间超过 50ms 时消耗到的任务 （50ms 阈值是从 RAIL 模型总结出来的结论，这个是 google 研究用户感知得出的结论，类似用户的感知/耐心的阈值，超过这个阈值的任务，用户会感知到页面的卡顿）

TTI （Time To Internative）
  从页面开始到它的主要子资源加载到能够快速地响应用户输入的时间。（没有耗时长任务）

首次输入延时 FID （first Input Delay）
  从用户第一次与页面交互到浏览器实际能够开始处理事件的时间。（点击，输入，按键）

CLS(Cumulative Layout Shift)
  是所有布局偏移分数的汇总，凡是在页面完整生命周期内预料之外的布局偏移都包括。布局偏移发生在任意时间，当一个可见元素改变了它的位置，从一个渲染帧到下一个

使用Performance API获取上面的指标

Performance 是一个浏览器全局对象，提供了一组 API 用于编程式地获取程序在某些节点的性能数据。它包含一组高精度时间定义，以及配套的相关方法。下面是掘金写作页面的window.performance

image.png

其中memory代表内存，navigation代表来源，最重要的是timing，从timing可以得到的信息有很多，包括HTTPS 连接开始的时间、HTTP 响应全部接收完成的时间（获取到最后一个字节）、DNS 域名查询开始与结束的时间、开始解析渲染 DOM 树的时间与渲染结束的时间、网页内资源加载开始和结束的时间，得到这些关键的时间点后，通过一些简单的计算，就能得出前端性能指标了

  • FP：responseStart - navigationStart
  • 重定向耗时：redirectEnd - redirectStart
  • DNS 查询耗时：domainLookupEnd - domainLookupStart
  • TCP 链接耗时：connectEnd - connectStart
  • HTTP 请求耗时：responseEnd - responseStart
  • 解析 dom 树耗时：domComplete - domInteractive
  • DOM ready 时间：domContentLoadedEventEnd - navigationStart
  • onload：loadEventEnd - navigationStart

其中LCP（Largest Contentful Paint ）指标是比较难定义的，可能每个网站的界定都不太一样，因为每个网站的侧重点都不一样，就像淘宝和B站。

image.png


前端监控

前端监控在我看来，分为两点：前端埋点 与 前端错误收集。

前端埋点

前端埋点有什么作用，从单个页面的常规数据角度出发我们可以通过埋点获取：访问次数（UV/PV）、地域数据（IP）、在线时长、区域点击次数等数据。

当我们将这些单点数据按照特定的纬度进行数据聚合，就可以获得全流程视角下的数据如：用户留存率/流转率、用户转化率、用户访问深度等数据。

而在埋点数据进行上报的同时，我们也可以同步收集页面基础数据/接口相关数据如：页面加载/渲染时长、页面异常、请求接口等数据。

如何做前端埋点，常见的做法是在页面进入、事件触发与页面离开上报数据。

前端错误收集

前端错误收集包括但不限于：怎么捕获前端错误，发生错误的时候应该上报什么信息，还有展示端的设计。

下面是一些捕获错误的途经：

  • window.onerror
      window.onerror函数会在页面发生js错误时被调用

  • addEventListener('error', callback, true)
      在捕获阶段捕捉资源加载错误信息

  • addeventListener('unhandledrejection',callback)
      捕获 Promise 错误

  • vue3环境下app.config.errorHandler
      捕获vue环境下的错误


前端缓存

强缓存：Cache-Control、expires

强缓存是当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。

浏览器会根据response Header来判断是否对资源进行缓存，如果响应头中expires、pragma或者cache-control字段，代表这是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中。

第二次请求时，浏览器判断请求参数，如果符合强缓存条件就直接返回状态码200，从本地缓存中拿数据。否则把响应参数存在request header请求头中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器会返回全新资源。

image.png

Cache-Control是HTTP1.1中控制网页缓存的字段，当Cache-Control都存在时，优先级高于 Expires，主要取值为：

  • public : 资源客户端和服务器都可以缓存。
  • privite : 资源只有客户端可以缓存。
  • no-cache : 客户端缓存资源，但是是否缓存需要经过协商缓存来验证。
  • no-store : 不使用缓存。
  • max-age : 缓存保质期。

协商缓存：Etag / If-None-Match、Last-Modified / If-Modified-Since

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)。

If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。

服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200。


单点登录

单点登录可以用cookie和SSO来实现，如果是相同域名，或有相同的一级域名，cookie是可以共享的，就可以很容易实现同一级域名的单点登录。

但是遇到跨域的时候，cookie就不好办了，这时候用SSO实现单点登录会相对可靠很多。

下面是SSO登录流程 image.png

SSO需要一个独立的认证中心，只有认证中心能接受用户的用户名密码等安全信息，其他系统不提供登录入口，只接受认证中心的间接授权。

间接授权通过令牌实现，SSO认证中心验证用户的用户名密码没问题，创建授权令牌，在接下来的跳转过程中，授权令牌作为参数发送给各个子系统，子系统拿到令牌，即得到了授权，可以借此创建局部会话，局部会话登录方式与单系统的登录方式相同。

换句话说，只要认证中心有用户的token，用户访问到系统的任何一个项目，都会去认证中心验证。有了单点登录，用户只要在我们任何一个项目登录过，其他项目都会有登录状态，这样可以减少用户登录的这个操作，进而达到提升用户体验的目的。


最后，让我们一起加油吧！

gg.jpg

avatar
文章
阅读
粉丝