英语专八海外翻译成功转型前端讲解云时代的可观测性

本文涉及的产品
可观测监控 Prometheus 版,每月50GB免费额度
应用实时监控服务-应用监控,每月50GB免费额度
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
简介: 英语专八海外翻译成功转型前端讲解云时代的可观测性

b607bf503a2f474ba5e8276a18285100~tplv-k3u1fbpfcp-zoom-crop-mark_3024_3024_3024_1702.webp.jpg

自我介绍

   首先介绍一下自己:09年考了二本英语专业,10年全国翻译三级笔译证书,11年选修了网页制作,12年考了专业八级,13年毕业后出国,在海外做商务翻译一年,14年底回国,15年开始接触前端,开始了前端开发工作(感谢老东家给了平台和机会),6年来有幸接触了很多前后端的大牛,18年以来一直在架构部门、技术中台工作(感恩一个技术大牛给的机会),最多时带了20几名前端,19年裸考北京航空航天大学的数据信息与工程专业,21年硕士毕业,目前在一家公司担任高级技术专家。


写在前面的话

   如果你已经阅读过了以下书籍,请直接跳过开头:《高性能网站建设指南》、《高性能网站建设进阶指南》《高级javascript程序设计》、《大型网站技术架构 核心原理与案例分析》、《大型网站技术架构演进与性能优化》、《前端工程化》、《前端技术架构与工程》、《前端架构 从入门到微前端》、《前端架构与设计》、《前端工程化:体系设计与实践》、《交互思维》、《步步为赢 交互设计全流程解析》、《用户体验设计指南》、《幕后产品:打破突破式产品思维》、《破茧成蝶 用户体验设计师的成长之路》。


本文篇幅较短(不足两千字),但希望对你有所帮助,如果感觉文章有趣或者有帮助,请点赞支持一把,也是给予我写作的动力。


前端程序员内卷有多严重?


为什么要写一篇关于前端的劝退文章呢,是因为前端程序员很卷,大家看到的前端只是前端知识体系中的冰山一角。

f4b75503d90342899c7a362701a67023~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

为什么这样说呢?因为前端需要学习的知识太多了,就是戴上一顶博士帽也不为过。

e0c0bf84db7a40b39fbb41accc54ad7f~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

简单来说,现在的前端程序员,除了要懂计算机操作系统、网络、前后端开发、数据库、中间件、测试、产品、平面设计、用户体验、项目管理。


前端开始卷可观测性了,你准备好了吗


你没听错,前端还需要懂可观测性。更有人认为,可观测性是前端程序员必备技能,甚至有可能是最重要的技能,没有之一。 为什么这么说呢,主要从前端经常要面临的一个最常见的问题,那就是输入url发生了什么?

8815916d93af4dffa0723ea99786a77e~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

这个问题等同于页面是如何呈现给用户的吧,知乎、百度、csdn上有上万篇对这个问题的接的,这更彰显了这个问题对于前端的重要性。

181c6892d4324425a33d4c99af2ad394~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

一个页面是如何展示出来的


其实完全可以一言以蔽之,浏览器网络请求服务器后出来的。作为经典前端面试题,面试官真正想要考察你的并非深层次的网络请求和服务器知识。他想知道除了具备基本的网络知识外,面试者是否精通浏览器是如何将请求来的数据展示给用户的。


1258c58511404c6e82c14008267fd709~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

这个问题也很简单,浏览器构建节点树、样式树后结合布局渲染出来的。因为能说出节点树和样式树的构建知识,就说明前端基本入门了。更高级的前端可能还需要补充如何让页面最短时间,也就是如何让页面最快地呈现给用户。这就又回到了第一个问题。

c7a2b4e4dd4a490bbb8c1231f9d711ad~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

这道题一言以蔽之。降低浏览器侧的时间,降低网络传输时间,降低服务器处理的时间。 如何降低网络传输的时间和浏览器测的时间呢? 不负责任的说法是,网络传输时间可以看成是传输量和传输速度的比值,正常理解是减少传输量和加快传输速度。 浏览器测的时间可以看成是文件解析(节点树构建+样式树构建)的时间。



a46c3d99d2b249169e30e260d60f55eb~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

服务器响应慢一点,网络传输慢一点,浏览器渲染慢一点,这就导致了,为什么有的网页那么慢。

f525bc3faea646baab837a7c06354a91~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

这种用户感觉上的快慢,是用户体验度的重要组成部分,也是前端可观测性的重要指标。一般说来,产品的用户体验直接决定了企业的收入和声誉,其中产品的稳定性和速度是最基本的体验保障。

为了达到这最基本的保障,需要架构师的全局可用性设计,前端工程师优化代码,后端工程是优化逻辑,网络工程师优化延时,系统工程师优化内核,产品工程师优化体验,才有可能在1-2秒内让用户看到页面。说到这里,前端程序员为了提高产品的稳定性和性能,就需要从各个方向考虑,是不是体会到了前端程序员的不易?


用户体验提升之路漫漫其修远兮,前端可观测性之路是远之又远。

当下的前端可观测性已经不是传统的监控系统,而是建立一套科学完整的性能监测、分析、优化体系。其中前端的可观测性不仅包含页面可观测性+网络的可观测性+服务的可观测性+用户体验的可观测性。

b6b343072eb346b0b86ec4d9ea76854f~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

页面可观测性常见的核心指标

其中页面可观测性常见的核心指标就包含了UV、PV 、FCP、CLS等;

6b3494de46c64d3894e0f408ec99048a~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

看到这些名词,我稍加解释一下,不感兴趣的同学可直接看下一部分


构建前端可观测性体系有多难

如何获取以上指标呢,单纯从前端的FCP、LCP等指标来看,浏览器提供了一些查看的api。

8d0ac75033a34b07b55dad66286ad722~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg


然而事实确很残酷

如何构建前端可观测性

事实上大多数前端团队、架构部门乃至中小企业要收集以上指标进行前端可观测性是有门槛的。


e674463552994e00b1e023f5ae6c9438~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

构建前端可观测性的基本条件

  • 首先需要在浏览器有一套收集发送指标的逻辑;
  • 其次需要有服务器对指标进行存储和处理;
  • 最后还需要有平台对指标进行展示;

以上这些都不仅仅需要机器和人力投入,还需要时间积累过程及可持续的维护能力。所以即便很多二三线互联网企业涉及了性能优化,在绝大多数情况下也只是产品及和部门级。而且随着产品版本迭代和人员流失,性能管理随即出现退化和断层。

成本这么高?还怎么卷,试试开源版本或者商业版?


APM的SAAS化,使每家企业,甚至每个开发者都能直接使用最优秀的APM云服务帮助改善产品性能,而无需投入额外的人力和资源来搭建应用性能管理平台。换句话说,第三方厂商的服务能力会从根本上帮助企业减少应用性能的学习成本。

优秀成熟的团队会分析。使用市场上提供的第三方产品就成了大多数前端同学的不二选择。 当前的前端saas产品有哪些呢?


0f2bf38698d14202a83c6e13b396a6d8~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

常见的SAAS产品

观测云介绍

观测云,是上海驻云信息科技有限公司旗下一款具备可观测性的统一实时监测应用,可帮助客户快速实现系统可观测,统一满足云、云原生、应用及业务上的监测需求。

特点:有免费额度、功能最全、价格不贵



image.jpeg


听云介绍

听云是北京基调网络股份有限公司旗下APM品牌,听云拥有听云App、听云Network、听云Server、听云Browser、听云Sys等重要产品线。提供真实用户体验视角下移动客户端、服务端与网络的性能监控与管理。

友盟介绍

友盟+,国内第三方全域数据服务商。2010年4月友盟在北京成立 ,是中国专业的移动开发者服务平台 。2016年1月26日友盟、CNZZ及缔元信三家公司正式合并,业务全面整合,升级为友盟+


写在最后

前端可观测性之路,也可以说成产品体验可观测性。当前大部分程序员追逐着后端性能,构建了各种性能监控指标,确鲜有公司建立产品可观测性指标体系或平台。这带给前端程序员既是机遇也是挑战。机遇是可以从整个产品链的上下游去思考,如何提高产品性能和体验,做一个好的产品,当然能力越大,收获也不会少。挑战是脑细胞、发量还有一箱又一箱的红牛。

前端可观测性带来了机遇与挑战,目前来看前端程序员这方面的路,整个开发界需要重新思考。



相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
目录
相关文章
|
7月前
|
前端开发 JavaScript 语音技术
|
前端开发 JavaScript 测试技术
前端国际化辅助工具——自动替换中文并翻译
前端国际化辅助工具——自动替换中文并翻译
669 0
|
Web App开发 域名解析 监控
前端可观测性的宣讲-1022
前端可观测性的宣讲-1022
250 0
前端可观测性的宣讲-1022
|
缓存 前端开发 数据可视化
前端同学在可观测性的启蒙与初试探--快速实现根因分析/业务大盘
前端同学在可观测性的启蒙与初试探--快速实现根因分析/业务大盘
292 0
前端同学在可观测性的启蒙与初试探--快速实现根因分析/业务大盘
|
人工智能 编解码 监控
核桃编程:前端可观测性建设之路
随着核桃编程业务的快速增长,核心应用的系统规模和系统复杂度也在经历翻天覆地的变化。核桃技术团队不断通过新兴的技术手段维护整套系统架构的技术先进性。在3 年时间里,技术团队至少对整体系统架构进行了 6 次以上的重大重构,涉及微服务化、容器化、分布式数据库等重要的技术,并尝试通过 Serverless 技术提升系统的弹性伸缩能力。在疫情期间,当系统负荷呈现数倍突增的情况下,核桃编程的系统架构依然经受住了考验。
16372 0
核桃编程:前端可观测性建设之路
|
前端开发 JavaScript 调度
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
178 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
48 0
下一篇
DataWorks