极客时间——前端全链路

雅虎34条军规

最小化HTTP请求：减少页面上的元素数量以减少HTTP请求。
使用内容分发网络：利用CDN快速分发内容。
添加Expires或Cache-Control头：设置缓存头以减少HTTP请求。
使用Gzip压缩：使用Gzip压缩文件，减少响应大小。
将样式表放在顶部：将CSS放在页面顶部以加快渲染速度。
将脚本放在底部：将JavaScript放在底部以改善页面加载。
避免使用CSS表达式：CSS表达式效率低，应避免使用。
使JavaScript和CSS外部化：使用外部文件来启用缓存。
减少DNS查找：最小化DNS查找以加快页面加载。
压缩JavaScript和CSS：减少JS和CSS文件的大小。
避免重定向：最小化重定向以减少延迟。
删除重复的脚本：消除冗余脚本以节省带宽。
配置ETags：使用ETags进行有效的缓存。
使Ajax可缓存：缓存Ajax请求以提高性能。
尽早刷新缓冲区：逐步发送HTML以更快地显示内容。
使用GET进行AJAX请求：首选GET进行快速的AJAX请求。
后加载组件：先加载必要的组件，然后加载其他组件。
预加载组件：提前加载组件以加快后续请求。
减少DOM元素的数量：简化DOM以加快渲染。
跨域分离组件：使用多个域来并行化下载。
最小化iframe的数量：减少iframe的使用以改善加载时间。
避免404错误：避免404错误以节省资源。
减小Cookie大小：保持Cookie小以提高性能。
对组件使用无Cookie的域名：从无Cookie的域名提供静态内容。
最小化DOM访问：限制DOM访问以提高JavaScript性能。
开发智能事件处理程序：优化事件处理以提高性能。
使用而非@import：在CSS中使用而非@import。
避免使用过滤器：最小化CSS过滤器的使用以节省资源。
优化图像：压缩和优化图像。
优化CSS Sprites：使用高效的CSS Sprites。
不要在HTML中缩放图像：使用适当大小的图像。
使favicon.ico小且可缓存：优化favicon以提高性能。
将组件大小控制在25KB以下：将组件大小控制在一个TCP数据包内。
优化服务器性能：优化服务器设置以提高速度。

参考链接：

为什么要对前端服务做全链路的监控和优化？

面对这样一段真实用户的问题反馈，如果你是解决这个问题的前端技术工程师，你会怎么解决呢？通常有两种排查问题的方法。一是重现问题并尝试解决，二是通过用户提供的信息，查看全链路监控的上下游，找出问题出现在哪个环节，然后定位和修复问题。我相信大部分人都是第一种方法，我们定义为测试重现法。

日常WePlay开发的时候大多数采用的就是测试重现法

但是我们很多用户的 BUG 都是有特殊性的，极其“个例”。用测试重现法解决个例用户，不但耗时耗人力，还不一定能找到 BUG 的解决方案。一个在团队里工作的同学，不可能每天都盯着这些问题，投入自己的工作时间一个个地重现、定位、排查、修复。因为每一个问题都有时间成本、沟通成本，必定会影响团队工作计划的进度。这时候就可以用第二种方法，全链路日志定位法

首要工作是通过全链路监控查看有没有日志告警，链路日志中是否有异常日志，先判断是不是大范围的问题。如果不是通用问题，那就再通过用户提供的信息（如用户 ID、时间范围）查询该用户的全链路关联日志，比如前端脚本报错日志、前端请求接口日志、业务配置是否合理

如何设计全链路数据模型

基础属性字段分成 5 大类别，基本日志信息、浏览器信息、页面信息、用户信息、业务信息。

如何通过指纹ID关联全链路日志？

指纹 ID 我们每个人的指纹都是独一无二的，浏览器指纹也是同样道理。由于浏览器提供了很多有价值的特性给前端同学通过代码获取，例如 UserAgent、分辨率、色彩深度、系统平台、语言、触摸屏、地理位置、语言支持特性、图像特性等等。所以，我们只要收集这些具有较高辨析度的信息，并进行一定的计算处理，就能生成一个能唯一标识当前浏览器的值，也就是我们所说的指纹 ID。

帆布指纹识别技术

它是一种利用帆布纹理特征进行身份验证的方法。具体实现的思路，就是利用 HTML5 的画布的 Canvas 特性，通过 Canvas 生成的图片，然后转换成哈希码，从而形成用户指纹。

为何要用WebVitals分析Web应用的用户体验？

Performance 指标存在局限性，无法有效衡量 Web 应用的用户体验，因为它以网页加载生命周期为中心，而非用户体验。
以用户为中心的核心网页指标包括加载响应速度（LCP）、互动交互（FID）和视觉稳定性（CLS），这些指标能更准确地反映用户体验。
首次内容绘制（FCP）和总阻塞时间（TBT）也是重要的指标，它们分别衡量页面内容首次显示的时间和主线程阻塞的总时间。
真实的需求场景展示了 LCP 指标在实际项目中的应用，说明了在需求迭代过程中页面性能可能出现的退化。
通过第 75 百分位来衡量指标，可以更好地评估用户体验，但这个标准可能需要根据实际情况进行调整。
WebVitals 指标的重要性在于它们能够帮助开发者从用户的角度出发，更有效地分析和优化 Web 应用的性能问题。

如何快速把Web Vitals集成到实际项目？

参考链接

Web Vitals | Articles | web.dev

通常，想要前端项目中使用第三方库可以通过 NPM 安装依赖或者 script 链接引入的方式实现。而 Web Vitals 库正好可以支持这两种方式。