帶你走進醫療行業的體驗設計

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"衆所周知,國內最強的體驗是來自於阿里的體驗技術部。但是,深入研究之後,其實,體驗是針對行業的,體驗對跨行業是不同的理解。所以,照搬電商行業的體驗,除了讓你在技術上可以吹水之外,對行業內是沒有很大價值的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本期,我將帶領大家走進醫療行業的體驗與設計。本期有如下幾個階段:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"什麼是體驗"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"醫療行業的體驗的着重點"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"我們是如何做的體驗"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"我們未來的計劃與設想"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面,就正式開始吧。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/6f\/6f631ad406bfaa58ab2332982c431c52.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什麼是體驗"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個就比較仁者見仁了,對於電商行業來說,任何一個消費者,他們打開頁面所帶來的直觀感受,都是體驗,一個動畫良好的過度,一個高效的內容渲染,一個精準的匹配策略等等。這些都是體驗,舉個栗子的話,鬥魚的直播網站,打開某個主播的直播頁面,我們會看到直播的內容以最快的速度展示出來。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/78\/78af6a2c9188d4b888366730b2b20f98.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這就是良好的體驗,我在最短的時間內看到了我想看到的東西。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是這個體驗如果照搬到其他行業呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個電商行業,需要把什麼優先放出來?商品圖片?視頻?價格?把握不準了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"再深入一點,如此多的設計,帶來的價值是什麼呢?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果是醫療行業,這個體驗有絕對的價值嗎?可能有,但是絕對不是核心要素。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"什麼是醫療行業的體驗"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那我們來聊一聊,醫療行業的體驗是什麼。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"推廣層面"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"無論什麼行業,都避免不了推廣這個過程,推廣層面的體驗,我們可以理解爲:"}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"加載頁面的時間"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"核心內容的可交互時間"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這避免不了我們需要做體驗分析,微醫的全球抗疫系統,在對外提供醫療信息、義務諮詢等方面提供了巨大的幫助,在全球範圍內進行快速的支持,在這個過程中,我們經歷了初期打開頁面的耗時較長帶來的用戶流失率,到後面的性能優化後帶來用戶量的爆發。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/99\/9973060bd1efc3f2161b153a1e24c53a.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打開系統之後,如果是一個潛在的患者用戶,他們最希望得到的是什麼,很明顯,是中間的 “免費諮詢專家”,那麼我們得到了體驗環節的第一點:核心內容可交互的時間。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因此,對於醫療行業在推廣層面上的體驗,我們要抓住的點就是————可交互時間,當然這個時間也包含傳統意義上的白屏時間,這點後續再說。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"輔助層面"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在微醫,我們同樣還有一些服務,是爲了給醫生提供輔助的效果,例如 CDSS 慢病管理系統中,醫生在對患者的一些病狀進行判定的時候,我們會在乎,這個系統需要花了多久才能打開嗎?"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你以爲我會說不嗎?很抱歉,我們確實需要在乎這個系統需要花多久才能打開(驚不驚喜)。但是,這不是最關鍵的因素。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ae\/ae4d18c4156e45c362709467c1ac09f8.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在上圖中,如果用戶開始輸入,我們更在乎的是,在關聯數據和表單填寫時候的耗時,這些纔是我們所在意的最有價值的。我們需要用各種手段,來降低醫生在表單層面的填寫時間,同時保證準確率不會下降。這些都是我們所考慮的體驗。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"醫療行業的體驗的着重點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面我們講述了,關於醫療行業的一些體驗的介紹。接下來,我們要聊一聊,在醫療行業中,我們的着重點了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"逃不開的話題就是首屏時間話題,不同的系統有不同的設計。在醫療行業中,我們的秒開率計算方式是通過如下的方式進行計算的:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"DNS + TCP + TTFB + RESPONSE + DOMINTERACTIBE"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上述公式可以簡單理解爲,截止到 "},{"type":"codeinline","content":[{"type":"text","text":"DOMInteractive 可交互時間"}]},{"type":"text","text":" 位置,就是我們所計算的白屏時間。對應我們剛剛所講述的原因,對於醫療系統來說,沒有什麼所謂的圖片是否可見,所以我們不需要想市面上一些電商系統的白屏耗時是按照 "},{"type":"codeinline","content":[{"type":"text","text":"MutationObserver"}]},{"type":"text","text":" 的變化狀態來計算當前是否處於完整加載的狀態。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們進一步通過一個 "},{"type":"codeinline","content":[{"type":"text","text":"秒開率"}]},{"type":"text","text":" 來統計這個數字,通過對秒開率的統計,我們可以看到當前系統的真實、可靠的數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過接入體驗中心之後,AI 的聯盟前臺一開始秒開率僅在 10-15% 左右,對於一個展示型 + 管理型系統,這樣的秒開率確實對用戶的留存率以及使用體驗產生了重大的影響,通過我們的分析,發現在首屏渲染的時候,有大量 js 的資源在同步加載,後續我們分析出,實際的產生原因是沒有采取動態引入機制,並且 webpack 打包沒有良好的機制去處理打包之後的 chunk。之後,聯盟前臺進行了進一步的優化,到現在,系統的秒開率已經穩定在了 90% 左右。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/21\/21ca1133464bd18ad5e52f7629c5961b.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同樣,秒開率可以看出來的數據還有很多。比如,活體檢測系統,秒開率常年維持在 80% 左右,但是在某個時間段之間,我發現秒開率進行了持續性的下降,一度下降到了 60%,這是一個非常危險的警告,接下來我在排查過程中發現,通過對個別超標數據的分析,我發現在 DOM 請求完畢之後到可交互時間內,耗時異常,那麼說明在資源加載的過程中,產生了一些預料之外的情況。後續仔細分析之後,我發現以 3G 網絡進行模擬,秒開率確實無法提升,其中因爲用到了一些圖片,這些同步加載的圖片在 4G 或者 WiFi 情況下是無法發現,在弱網絡環境,建立 DNS 的耗時和一些其他網絡損耗導致極大的增加了這個時間,同時也降低了本系統的秒開率,於是我採取一些措施,通過併發請求等機制,把一些 base64 的後較小的圖片直接合併到 CSS 或者是 HTML 中,降低重複建立連接的耗時。其他的則利用其大小遠小於 JS,那麼合併到一個併發機制的體系。具體的一些就不在本期講了,後續的話,有機會再說了(嘿嘿嘿,就是懶得寫了)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"業務耗時"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於醫療行業來說,用戶進入這個頁面後,需要多久才能出去,這很大影響了我們在此處業務設計的是否合理,是否有很多冗餘、複雜、多變的選項干擾了用戶的使用,從而降低了我們的用戶數量。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/99\/9988c0bfe6f92c98ebc5881ec29a3ec6.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這裏,我們還在探索的階段,例如用戶長時間的掛機行爲、純粹是無用操作的點擊等等都會影響我們這裏數據的準確性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是無論怎麼樣,耗時數據,是一定會符合正態分佈,這樣我們可以通過正態分佈的峯值看出系統整體的耗時。進一步可以讓前端理解業務的情況,進而提出對業務系統的建議(這裏可能會有人認爲,這些應該是產品層需要去考慮的事情,但是實際上,這些是純技術上的內容,作爲技術側,我們應該通過技術獲取數據,從而反推產品在此處的設計的合理性。)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"我們是如何做的體驗"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上述我也講了很多,具體我們是如何做的體驗,接下來我們來好好絮叨絮叨。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"接入方式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"體驗中心 Baymax 提供了兩種接入方案:"}]},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"通過 "},{"type":"codeinline","content":[{"type":"text","text":"script"}]},{"type":"text","text":" 的方式,快速接入系統,不需要做任何處理"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"通過 "},{"type":"codeinline","content":[{"type":"text","text":"npm"}]},{"type":"text","text":" 接入,需要進行一些配置"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一種方案已經通過發佈平臺自動化接入,也就是你發佈系統的時候,會自動內置腳本進入你的系統,從而上報系統的性能數據。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當然第一種方案獲取的數據有限,而且沒有良好的關聯性,缺乏全鏈路的同步,進而會丟失一些數據,但是在性能分析的層面上是夠用的了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二種方案是通過 "},{"type":"codeinline","content":[{"type":"text","text":"npm"}]},{"type":"text","text":" 包的形式進行接入,此種方案接入的系統包含完整的性能數據,同時也解鎖了更多的數據,比如 "},{"type":"codeinline","content":[{"type":"text","text":"Gtrace"}]},{"type":"text","text":" 的全鏈路信息等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"性能分析模塊"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"總覽"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cc\/cc7787f1e943899c8bd0ea79914bc152.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總覽包括系統的一些綜合指數,這裏其實不用展示很多數據,性能指標沒有很多花裏胡哨的東西。對於一個系統來說,首要保證的就是系統的 ** 秒開率 **,秒開率指系統在 1s 內打開的數量佔總訪問數量的比例。當然也會有一些基本的數據,例如系統分佈、瀏覽器分佈之類的,這些就不展示出來了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"秒開率的高低其實不簡簡單單是一個單純的數字,他背後其實映射了很多關係:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打包策略是否良好"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"protocol"}]},{"type":"text","text":" 是否爲 "},{"type":"codeinline","content":[{"type":"text","text":"http2.0"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代碼邏輯是否良好"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"..."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想提升這個數字,單一方面不足以提升,只有整體的提升,才能達到比較好的效果。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"詳情分析"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a0\/a0ef769830e9f2c3c5d81414df7d5151.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"詳情分析主要是用來對收集的大數據進行分析,看系統的整體穩定性,例如白屏的耗時主要分佈的區間在哪個範圍。以及每個階段的 95 值是多少,進而可以看到系統的綜合指數。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多時候,我們做一個系統認爲,通過一些認證之後就覺得,系統很厲害了。比如,我的系統在 Google 的 lighthouse 上跑過,84 分,無敵!"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3c\/3c5e20057f7982219a0608bd5813bd4e.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"結果你自信滿滿的發到了線上,漫天遍野的運營找你:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“客戶說打開頁面太慢了”“客戶打不開頁面了”“怎麼要花 3s 才能打開,搞什麼呢?”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此刻的你,大概是如下的狀態:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/e8\/e80fec82056d664fee9376c185985d66.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這其實就是典型的倖存者偏差,也就是我們在開發中經常遇到的,我電腦上沒問題啊。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以,對於性能來說,我們需要用大數據去分析,系統的問題。每一次問題,我們都會有記錄,可以通過點擊柱狀圖查看這些數據的情況。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a6\/a67ca2fe0da3f7085b29e14e2b4a18fe.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以,你可以查看發生在用戶的系統上的事情是什麼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"流量分析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/95\/9562ae821560585f278a9400d80b3dfa.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"流量分析主要是爲了查看各地區的秒開率,這樣 CDN 配置策略的時候,或者當前的 CDN 廠商是否優質都可以看出來。如果局部地區很重要,但是 CDN 無法良好覆蓋,可以考慮進行本地化部署。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"請求分析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/58\/583512fb5b45ff6b16ab8fe992b96e38.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個就很老生常談了,收集時間段內所有的請求,然後通過大數據分析這段時間內的接口的狀態,是否良好,分佈情況。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"鏈路分析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於服務端的鏈路,大家應該都略有耳聞,後端微服務玩的興起,關於鏈路治理,各家也是有五花八門的技術,回到我們前端,我們就缺乏了前端層面的鏈路治理。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼有的人就要說了,“你這個前端有沒有相互調用,你們前端也有微服務嗎?” 哎,你別說,還真有。但是不在本次的討論範圍。OK,服務端的鏈路存在於服務與服務之間,而對於前端來說,每個客戶的每次訪問,就是一個服務,建立這條服務是在客戶本地,但是數據、內容都是由服務端下發,下發到本地之後"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"渲染是否正常"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"性能是否良好"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"功能是否完善"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"..."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些難道不需要進行良好的治理來提升體驗嗎?是的,拋開現在大熱的前端微服務 \/ Serverless 等技術,純粹的前端也是需要這些治理。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/80\/80b2ed76c3aa448315c9f6578ee58e7a.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我們給每一次頁面打開生成一個獨有的 "},{"type":"codeinline","content":[{"type":"text","text":"pageId"}]},{"type":"text","text":",然後把 "},{"type":"codeinline","content":[{"type":"text","text":"traceId"}]},{"type":"text","text":" 關聯到 "},{"type":"codeinline","content":[{"type":"text","text":"pageId"}]},{"type":"text","text":" 上,這樣,就可以實現從前端開啓的全鏈路打通了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這只是實現了鏈路級別的打通,但是前端有一些錯誤產生於邏輯之間,例如後端接口從 "},{"type":"codeinline","content":[{"type":"text","text":"{}"}]},{"type":"text","text":" 變更爲 "},{"type":"codeinline","content":[{"type":"text","text":"[]"}]},{"type":"text","text":",在前端一定產生錯誤,但是通過鏈路,我們很難發現這個問題。這就需要錯誤收集系統,例如 "},{"type":"codeinline","content":[{"type":"text","text":"sentry"}]},{"type":"text","text":" 之類的錯誤收集系統,通過收集錯誤之後生成一個獨有的 "},{"type":"codeinline","content":[{"type":"text","text":"sid"}]},{"type":"text","text":",然後把 "},{"type":"codeinline","content":[{"type":"text","text":"sid"}]},{"type":"text","text":" 綁定到 "},{"type":"codeinline","content":[{"type":"text","text":"pageId"}]},{"type":"text","text":" 上,這樣就可以通過頁面級別的訪問,查詢到具體的請求內容以及是否有錯誤了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/93\/9366a0a896aea068f4c45449a50a1a4b.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"值得一提的是,ssr 項目,其實有一個封閉的環節在於 "},{"type":"codeinline","content":[{"type":"text","text":"ttfb"}]},{"type":"text","text":" 階段,這個階段的耗時,不一定是純粹的網絡耗時,大概率是 "},{"type":"codeinline","content":[{"type":"text","text":"Node"}]},{"type":"text","text":" 服務在進行某些處理,或者調用其他服務造成的網絡請求緩慢。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/03\/03f726416350abb388f6245b306bfb14.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以這也是我們鏈路治理需要考慮的一個環節,我們需要針對 SSR 項目,額外有一個包去處理 "},{"type":"codeinline","content":[{"type":"text","text":"Node"}]},{"type":"text","text":" 層的事情。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"我們未來的計劃與設想"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"前端微服務"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在最火的話題就是前端微服務,我們在這裏不討論前端微服務的可能性,但是如果前端微服務出來之後,各個模塊之間的性能分析,各個模塊的數據傳遞、調用,都是後續體驗的重點考察部分。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"業務耗時"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"業務耗時需要前端配合執行,需求發起方是產品,所以這裏的推進稍微需要點時間,這裏的功能暫時還不完善到可以對外提供,所以這裏也是後續需要鞏固的地方。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頭圖:Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者:徐鴻飛"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文:https:\/\/mp.weixin.qq.com\/s\/CjZhF_v4Bg5T5ZZl5aUpcQ"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文:帶你走進醫療行業的體驗設計"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來源:微醫大前端技術 - 微信公衆號 [ID:wed_fed]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"轉載:著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。"}]}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章