前端勸退篇之云時代的可觀測性？

時間：2023-06-14 16:54:01 | 來源：網站運營

時間：2023-06-14 16:54:01 來源：網站運營

前端勸退篇之云時代的可觀測性？：自我介紹

首先介紹一下自己：09年考了二本英語專業(yè)，10年全國翻譯三級筆譯證書，11年選修了網頁制作，12年考了專業(yè)八級，13年畢業(yè)后出國，在海外做商務翻譯一年，14年底回國，15年開始接觸前端，開始了前端開發(fā)工作(感謝老東家給了平臺和機會），6年來有幸接觸了很多前后端的大牛，18年以來一直在架構部門、技術中臺工作（感恩一個技術大牛給的機會），最多時帶了20幾名前端，19年裸考杭州航空航天大學的數據信息與工程專業(yè)，21年碩士畢業(yè)，目前在一家公司擔任高級技術專家。

寫在前面的話

如果你已經閱讀過了以下書籍，請直接跳過開頭：《高性能網站建設指南》、《高性能網站建設進階指南》《高級javascript程序設計》、《大型網站技術架構 核心原理與案例分析》、《大型網站技術架構演進與性能優(yōu)化》、《前端工程化》、《前端技術架構與工程》、《前端架構 從入門到微前端》、《前端架構與設計》、《前端工程化：體系設計與實踐》、《交互思維》、《步步為贏 交互設計全流程解析》、《用戶體驗設計指南》、《幕后產品：打破突破式產品思維》、《破繭成蝶 用戶體驗設計師的成長之路》。

本文篇幅較短（不足兩千字），但希望對你有所幫助，如果感覺文章有趣或者有幫助，請點贊支持一把，也是給予我寫作的動力。

前端程序員內卷有多嚴重？

為什么要寫一篇關于前端的勸退文章呢，是因為前端程序員很卷，大家看到的前端只是前端知識體系中的冰山一角。

?





為什么這樣說呢？因為前端需要學習的知識太多了，就是戴上一頂博士帽也不為過。

?

簡單來說，現在的前端程序員，除了要懂計算機操作系統(tǒng)、網絡、前后端開發(fā)、數據庫、中間件、測試、產品、平面設計、用戶體驗、項目管理。

前端開始卷可觀測性了，你準備好了嗎

你沒聽錯，前端還需要懂可觀測性。更有人認為，可觀測性是前端程序員必備技能，甚至有可能是最重要的技能，沒有之一。 為什么這么說呢，主要從前端經常要面臨的一個最常見的問題，那就是輸入url發(fā)生了什么？

?

這個問題等同于頁面是如何呈現給用戶的吧，本站、百度、csdn上有上萬篇對這個問題的接的，這更彰顯了這個問題對于前端的重要性。

?
一個頁面是如何展示出來的

其實完全可以一言以蔽之，瀏覽器網絡請求服務器后出來的。作為經典前端面試題，面試官真正想要考察你的并非深層次的網絡請求和服務器知識。他想知道除了具備基本的網絡知識外，面試者是否精通瀏覽器是如何將請求來的數據展示給用戶的。

?


這個問題也很簡單，瀏覽器構建節(jié)點樹、樣式樹后結合布局渲染出來的。因為能說出節(jié)點樹和樣式樹的構建知識，就說明前端基本入門了。更高級的前端可能還需要補充如何讓頁面最短時間，也就是如何讓頁面最快地呈現給用戶。這就又回到了第一個問題。

?


這道題一言以蔽之。降低瀏覽器側的時間，降低網絡傳輸時間，降低服務器處理的時間。 如何降低網絡傳輸的時間和瀏覽器測的時間呢？ 不負責任的說法是，網絡傳輸時間可以看成是傳輸量和傳輸速度的比值，正常理解是減少傳輸量和加快傳輸速度。 瀏覽器測的時間可以看成是文件解析（節(jié)點樹構建+樣式樹構建）的時間。

?


服務器響應慢一點，網絡傳輸慢一點，瀏覽器渲染慢一點，這就導致了，為什么有的網頁那么慢。

?

這種用戶感覺上的快慢，是用戶體驗度的重要組成部分，也是前端可觀測性的重要指標。一般說來，產品的用戶體驗直接決定了企業(yè)的收入和聲譽，其中產品的穩(wěn)定性和速度是最基本的體驗保障。

為了達到這最基本的保障，需要架構師的全局可用性設計，前端工程師優(yōu)化代碼,后端工程是優(yōu)化邏輯，網絡工程師優(yōu)化延時，系統(tǒng)工程師優(yōu)化內核，產品工程師優(yōu)化體驗，才有可能在1-2秒內讓用戶看到頁面。說到這里，前端程序員為了提高產品的穩(wěn)定性和性能，就需要從各個方向考慮，是不是體會到了前端程序員的不易？

用戶體驗提升之路漫漫其修遠兮，前端可觀測性之路是遠之又遠。

當下的前端可觀測性已經不是傳統(tǒng)的監(jiān)控系統(tǒng)，而是建立一套科學完整的性能監(jiān)測、分析、優(yōu)化體系。其中前端的可觀測性不僅包含頁面可觀測性+網絡的可觀測性+服務的可觀測性+用戶體驗的可觀測性。

?

頁面可觀測性常見的核心指標

其中頁面可觀測性常見的核心指標就包含了UV、PV 、FCP、CLS等；

?

看到這些名詞，我稍加解釋一下，不感興趣的同學可直接看下一部分

FCP:First Contentful Paint，中文指的是首次內容繪制，這里不是單純的值響應時間，而是以用戶感知為指標

LCP:Largest Contentful Paint,中文指的是最大可見元素出現在頁面上的時間點；

CLS:Cumulative Layout Shift,中文指的是布局變動的頻率；

錯誤數：一般包含js錯誤，網絡請求錯誤；

會話分布：指的是用戶在不同地理分布下的訪問和延遲情況

構建前端可觀測性體系有多難

如何獲取以上指標呢，單純從前端的FCP、LCP等指標來看，瀏覽器提供了一些查看的api。

然而事實確很殘酷

如何構建前端可觀測性

事實上大多數前端團隊、架構部門乃至中小企業(yè)要收集以上指標進行前端可觀測性是有門檻的。

構建前端可觀測性的基本條件

• 首先需要在瀏覽器有一套收集發(fā)送指標的邏輯；
• 其次需要有服務器對指標進行存儲和處理；
• 最后還需要有平臺對指標進行展示；

以上這些都不僅僅需要機器和人力投入，還需要時間積累過程及可持續(xù)的維護能力。所以即便很多二三線互聯網企業(yè)涉及了性能優(yōu)化，在絕大多數情況下也只是產品及和部門級。而且隨著產品版本迭代和人員流失，性能管理隨即出現退化和斷層。

成本這么高？還怎么卷，試試開源版本或者商業(yè)版？

APM的SAAS化，使每家企業(yè)，甚至每個開發(fā)者都能直接使用最優(yōu)秀的APM云服務幫助改善產品性能，而無需投入額外的人力和資源來搭建應用性能管理平臺。換句話說，第三方廠商的服務能力會從根本上幫助企業(yè)減少應用性能的學習成本。

優(yōu)秀成熟的團隊會分析。使用市場上提供的第三方產品就成了大多數前端同學的不二選擇。 當前的前端saas產品有哪些呢？

?

常見的SAAS產品

觀測云介紹

觀測云，是杭州駐云信息科技有限公司旗下一款具備可觀測性的統(tǒng)一實時監(jiān)測應用，可幫助客戶快速實現系統(tǒng)可觀測，統(tǒng)一滿足云、云原生、應用及業(yè)務上的監(jiān)測需求。
特點：有免費額度、功能最全、價格不貴
官網鏈接：https://www.guance.com/

聽云介紹

聽云是杭州基調網絡股份有限公司旗下APM品牌，聽云擁有聽云App、聽云Network、聽云Server、聽云Browser、聽云Sys等重要產品線。提供真實用戶體驗視角下移動客戶端、服務端與網絡的性能監(jiān)控與管理。
體驗鏈接：https://www.ucloud.cn/site/cases/489.html

友盟介紹

友盟+，國內第三方全域數據服務商。2010年4月友盟在杭州成立 ，是中國專業(yè)的移動開發(fā)者服務平臺 。2016年1月26日友盟、CNZZ及締元信三家公司正式合并，業(yè)務全面整合，升級為友盟+

寫在最后

前端可觀測性之路，也可以說成產品體驗可觀測性。當前大部分程序員追逐著后端性能，構建了各種性能監(jiān)控指標，確鮮有公司建立產品可觀測性指標體系或平臺。這帶給前端程序員既是機遇也是挑戰(zhàn)。機遇是可以從整個產品鏈的上下游去思考，如何提高產品性能和體驗，做一個好的產品，當然能力越大，收獲也不會少。挑戰(zhàn)是腦細胞、發(fā)量還有一箱又一箱的紅牛。

前端可觀測性帶來了機遇與挑戰(zhàn)，目前來看前端程序員這方面的路，整個開發(fā)界需要重新思考。

?

為了方便交流，也可以加我微信：768838557或者掃描以下二維碼??




?




?