雙11的極限挑戰——5個極致目標教你玩轉前端棧

雙11中的前端領域(棧)

圖片描述

上方是生產體系,從左到右是研發鏈。在開發者這一層,工程師主要在Weex、前端安全、性能、框架等領域做基礎的準備工作,在實際開發階段,會把工程提交到GitLab上。構建系統拿到提交上來的代碼再索引到頁面系統中。數據系統和頁面系統產生頁面的模板部分、數據部分分別存儲到OSS的Page和Data中。下方是用戶請求的鏈路,當請求發起時會直接抵達CDN,CDN判斷如果頁面存在就直接返回給終端,如果不存在則向渲染集群發送回源請求, 向OSS拉資源并將其渲染出來,再通過Page CDN返回。最下方是異步的接口,會有異步服務的接口向終端返回個性化數據。

5個極致目標

圖片描述

這五個目標是按照邏輯往右追溯。首先必須確??捎?,然后確保秒級體驗,在這個基礎上增加互動的玩法,這些都是開發者層??⒄吖ぷ鶻崾?,更多的工作是在數據可視化上來驗證開發的確定性。在此基礎上,更多涉及人文關懷方面的無障礙端體驗。

從后到前的100%可用

標準:怎么來驗證100%可用?服務端的異常均有災備和預案,終端沒有業務展示異常。切入點是整個系統/服務中的關鍵節點,以及節點之間的鏈路。

圖片描述

終端可能存在的異常和風險更多來自服務端API的壓力。當扛不住蜂擁而來的流量時,服務會出現延遲甚至crash導致終端異常展示 。服務端主要是CDN - 源站 - 存儲層的三層架構。

圖片描述

不支持HTTPS, 就會出現上圖右側的不和諧內容。要做到這一點不僅必須保證終端CDN的請求加密,還需要CDN到源站的請求同樣實現加密態,全鏈路流量啟用HTTPS。

圖片描述

ETag是HTTPS的一個標準支持。當請求到達服務端,服務器判斷該請求是否被更新,如果已經被更新就直接返回一個304的頭,不再把內容傳輸過去。從圖中可看出,優化完后,建鏈的時間大概在60-100ms之間,大大節省了請求時間。

圖片描述

本地磁盤容災預案是所有預案中優先級別最高的。

圖片描述

由于有些預案是不開啟的,所以需要用監控支撐決策。因此,需要更細化的監控指標,通過關鍵數據大盤指導預案判斷。

圖片描述

客戶端最大的風險在于,當服務端的接口無法支撐數以十億計的流量時,它會返回異常,前端的展示就會出現問題。解決策略是,把服務端的每一個請求存儲在一個OSS源里,當異步的接口掛掉時,我們會從OSS獲取存成靜態的緩存的數據接口。

秒開體驗

圖片描述

針對15年出現的白屏狀態,做了兩個分解和思考。把整個時間分為兩部分,加載時間(DNS查詢、建鏈、資源下載)和渲染時間(VDOM的創建和渲染),整體配備了全鏈路的性能監控。

圖片描述

在方案之初引入了Weex,能夠在底層級來優化渲染。

圖片描述

優化前,通過收集性能數據保證工作的可靠有用。在客戶端啟用數據上報的能力推送到后端的系統,通過在線系統分析把它呈現在數據大屏上。當一個優化完成之后,理論上應該在線上看到結果,如果沒有看到,說明這個優化是無效的。

圖片描述

在所有的資源下載里面,圖片Size是最大的。在前端設計了一個校驗方式來管控無效的、超大的圖片。在運營提交好正確的圖片之后,讓用戶信息在合適的環境下來加載當前環境最合適的圖片。

AR和3D體驗

圖片描述

3D狂歡城其實是在原來2D的基礎上做的3D效果的互動場景。滾筒模式最大的壞處在于這些場景下面某一個品牌露出的區域和空間比較小,最后,結合滾筒和廣告牌使得品牌有更大的曝光時間和面積。

其實,CSS 3D也可以實現這樣的效果,不僅僅是WebGL/OpenGL。但是CSS 3D在實際的開發過程中,會出現以下問題:地皮帶來的Dom數量增加;地皮和Dom一一對應面對需求迭代成本不可控;環狀的Transform效果引發黑屏、閃爍等問題。

圖片描述

跨屏搶星衣的活動:當用戶看直播時,明星在電視端丟出衣服,主持人提示用戶打開手淘/貓客攝像頭對準屏幕。APP通過AR技術識別和定位,成功后手機端會有衣服從電視浮出。這個實現的方案從邏輯上分為業務層和識別層。

可視的體驗監控

圖片描述

我們怎樣評價確定性?平時習慣于關注常態80%的問題(比如圖片是否顯示?),很少有能力判斷業務達到用戶的真實體驗。我們的目標是構建用戶的真實體驗指標,基于核心的監控來驅動體驗優化。

圖片描述

上圖最右側是終端可以搜集到的信息,左上方是設定的判斷體驗的衡量標準。將其結合在一起,基于邏輯來設計可以產出體驗分析報告,在此基礎上能夠做針對核心點的監控和基礎數據的指導。

這個技術未來可以解決實際的體驗、性能、確定性的數據化訴求。更有意義的是,以更全的界定標準進入,可以全局量化分析產品(組)的業務體驗。

人性化的無障礙端體驗

為了能夠更好地服務視力有缺陷的人,成立了天貓信息無障礙項目,負責對APP和WEB站點進行信息無障礙改進。

已到的未來

從雙11的視角來看前端,前端工程師的未來不應該僅是框架/類庫/組件/??榛冉餼齜槳?。端層有無數的方向被延伸:跨Native&Web、3D/VR/AR、服務層 、性能、數據可視化都是未來的方向。新技術方案的出現是為了滿足現實中的渴求(AR互動)。雙11這種場景是技術未來的一種投射,現在的亮點將會是未來的日常。

來源:CSDN

上一篇: javaScript & jquery完美判斷圖片是否加載完畢

下一篇: 寫給想成為前端工程師的同學們 前端工程師是做什么的?

分享到: 更多
大乐透近100期走势图 河北快3计划软件下载 时时彩后二稳赚技巧 幸运pk10怎么玩 彩神8快3下载 赛车pk10官网开奖记录 超神计划软件 网站赌龙虎庄家控制 云南时时近100期走势图 3d万能七码 黑龙江时时图表10 新宝时时彩自动投注工具 网上说可以追回黑平台的钱 免费计划大全彩计划官网 百家欧赔 北京塞车开奖直播