量化指標(biāo)是與非：挽救被量化指標(biāo)扼殺的技術(shù)團(tuán)隊(duì)
作者 | 劉新翠整理 | 徐杰承本文整理自快狗打車技術(shù)總監(jiān)劉新翠在WOT2023大會(huì)上的主題分享，更多精彩內(nèi)容及現(xiàn)場(chǎng)PPT，請(qǐng)關(guān)注51CTO技術(shù)棧公眾號(hào)，發(fā)消息【W(wǎng)OT2023PPT】即可直接領(lǐng)取
每年的云音樂年度聽歌報(bào)告，就像一個(gè)靠譜的老朋友，總會(huì)在忙碌一年的時(shí)光盡頭里叩響記憶的大門。
首次訪問年報(bào)活動(dòng)為例，好的用戶體驗(yàn)主要包括以下幾個(gè)方面：
圖片
簡(jiǎn)而言之，體驗(yàn)優(yōu)涉及以下幾個(gè)方面：
1、頁面導(dǎo)航：包括首屏秒開，頁面轉(zhuǎn)場(chǎng)等
2、資源管理：包括圖片、視頻、音頻和字體包等
3、頁面適配：包括文本適配、動(dòng)效適配和機(jī)型適配等
首屏秒開是指用戶從點(diǎn)擊鏈接開始到展示頁面內(nèi)容大約在1s左右完成。整個(gè)過程經(jīng)歷如圖所示：
容器初始化 -> CDN -> TCP 建連 -> html/js/css 加載解析 -> DOM / CSSOM 解析 -> 渲染布局 -> 繪制
圖片
對(duì)于前端開發(fā)來說，優(yōu)化難度是從右到左，越到左邊就越需要跨團(tuán)隊(duì)合作來完成。可以簡(jiǎn)單的分析總結(jié)：
為了有效管控年報(bào)中多個(gè)視圖的高效展示和切換，采用了 SPA[1] 的形式對(duì)H5進(jìn)行組織，同時(shí)為頁面路由提供了路由表的配置。
路由表簡(jiǎn)單理解是各個(gè)子頁面路由對(duì)象的集合，這個(gè)集合可以是全局?jǐn)?shù)組對(duì)象，本地文件，或者服務(wù)端下發(fā)的配置。集合內(nèi)的順序決定了用戶看到報(bào)告頁順序。這樣也可以根據(jù)產(chǎn)品的述求，靈活調(diào)整集合內(nèi)的順序，這樣就能動(dòng)態(tài)調(diào)整頁面順序了。
各個(gè)子頁面路由對(duì)象的屬性具體如下。建議不用傳統(tǒng)的 path，因?yàn)樽禹撁鏀?shù)量多，且名稱很難記憶，可以使用 routerIndex，這是子頁面在交互稿中的位置代號(hào)，方便開發(fā)和調(diào)試。其中 ignoreSwipe 是使用在下節(jié)手勢(shì)處理中「子容器接管父容器手勢(shì)」的場(chǎng)景。
export interface PageProps { model: unknown; position?: number; // 頁面埋點(diǎn)使用}export interface PageRouteProps { c: ComponentType<PageProps>; cId: string; // 當(dāng)前頁面唯一id routerIndex: number | string; // 路由索引 ignoreSwipe?: boolean; // 是否忽略滑動(dòng)，默認(rèn)false}年報(bào)項(xiàng)目中用戶可以通過點(diǎn)擊、左右滑動(dòng)、上下滑動(dòng)來切換頁面。為了防止手勢(shì)沖突，全局只有一個(gè)父容器，各個(gè)報(bào)告頁面是子容器；一些手勢(shì)頻控、頁面狀態(tài)變化等通用邏輯統(tǒng)一在父容器中實(shí)現(xiàn)。只在父容器中使用 hammerjs 做手勢(shì)監(jiān)聽，子容器不再負(fù)責(zé)頁面切換的手勢(shì)監(jiān)聽，關(guān)鍵代碼如下。
hammer = new Hammer(reportRef.current); hammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL }); hammer.on('swipeleft', onNextPageWrap); hammer.on('swiperight', onPrePageWrap); hammer.on('swipeup', onNextPage); hammer.on('swipedown', onPrePage);對(duì)于子容器，可能會(huì)有以下幾種特殊情況：
情況一：如果子容器需要感知用戶手勢(shì)事件，可以監(jiān)聽父容器發(fā)出的自定義事件。
// 【翻頁】動(dòng)效：下一頁export const ON_PAGE_NEXT = 'ON_PAGE_NEXT';// 【翻頁】動(dòng)效：上一頁export const ON_PAGE_PREV = 'ON_PAGE_PREV';情況二：如果子容器需要完全接管父容器的手勢(shì)監(jiān)聽事件，例如年度歌手相關(guān)的所有頁面。首先需要在路由表中將 ignoreSwipe=ture 設(shè)置忽略手勢(shì)，然后在監(jiān)聽父容器發(fā)出的通知，進(jìn)行自定義的事件處理。最后當(dāng)子容器接管結(jié)束后，需要根據(jù)需要再次觸發(fā)父容器的切換事件。關(guān)鍵代碼如下：
const onNextPage = useCallback( (nextAction) => { if (currentPage >= len - 1) { nextAction(); // 結(jié)束接管，再次觸發(fā)父容器的切換事件 return; } setCurrentPage(currentPage + 1); }, [currentPage, len]);useEffect(() => { bus.on(ON_PAGE_NEXT, onNextPage); return () => { bus.off(ON_PAGE_NEXT, onNextPage); }; }, [onNextPage, onPrePage]);情況三：如果子容器存在特定區(qū)域需要響應(yīng)特點(diǎn)手勢(shì)，例如歌手來信頁面左右切換是查看歌手來信。這時(shí)候需要子容器調(diào)用stopPropagation主動(dòng)阻止手勢(shì)向父容器傳遞。
在路由表和手勢(shì)處理準(zhǔn)備就緒后，最后來看看頁面之間轉(zhuǎn)場(chǎng)的實(shí)現(xiàn)。年報(bào)頁面的轉(zhuǎn)場(chǎng)效果使用React官方實(shí)現(xiàn)的 react-transition-group 組件。由于篇幅限制，這里不詳細(xì)介紹react-transition-group 組件的底層原理。結(jié)合路由表順序和當(dāng)前頁面位置，通過 z-index 和 match 來控制子頁面的層級(jí)和顯示隱藏。使用 CSSTransition 實(shí)現(xiàn)頁面間的進(jìn)場(chǎng)和退場(chǎng)CSS動(dòng)畫。關(guān)鍵代碼如下：
(pages || []).map((item, index) => { // zIndex 和 match是關(guān)鍵代碼 const zIndex = (pages.length - index) * 100; const match = index === currentIdx; return ( <div key={item.cId} style={{ zIndex, pointerEvents: match ? 'auto' : 'none', overflow: 'hidden', }}> <CSSTransition in={match} timeout={100} ... appear unmountOnExit> <item.c model={item.model} positinotallow={index} /> </CSSTransition> </div> );})但是以上的頁面轉(zhuǎn)場(chǎng)存在一個(gè)問題，即頁面之間只能存在一種轉(zhuǎn)場(chǎng)方式。如何自定義頁面之間的轉(zhuǎn)場(chǎng)效果？基本思路是各自頁面維護(hù)自己的轉(zhuǎn)場(chǎng)效果；大部分頁面只需將轉(zhuǎn)場(chǎng)信息配置到路由表中；小部分頁面可以通過頁面上下文獲得上一個(gè)或者下一個(gè)頁面的信息，動(dòng)態(tài)決定如何進(jìn)場(chǎng)或者退場(chǎng)。基于該思路，改造路由表對(duì)象，新增一個(gè) TransitionParams 協(xié)議，并且提供漸隱漸顯的默認(rèn)轉(zhuǎn)場(chǎng)實(shí)現(xiàn)。關(guān)鍵代碼如下：
export type TransitionParams = { timeout: number | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined }; classNames: CSSTransitionClassNames;};export interface PageRouteProps { c: ComponentType<PageProps>; cId: string; // 當(dāng)前頁面唯一id routerIndex: number; // 路由索引 transition: TransitionParams; //默認(rèn)是漸隱漸顯的轉(zhuǎn)場(chǎng)效果 ignoreSwipe?: boolean; // 是否忽略滑動(dòng)，默認(rèn)false}CSSTransition 配合改造后的關(guān)鍵代碼如下：
<CSSTransition in={match} timeout={item.transition.timeout} // 關(guān)鍵代碼 classNames={item.transition.classNames} appear unmountOnExit> <item.c model={item.model} positinotallow={index} /></CSSTransition>資源管理主要任務(wù)是將網(wǎng)絡(luò)資源下載到本地，最終將本地資源加載到內(nèi)存，以便程序可以使用這些資源。優(yōu)化資源管理可以有效提高年報(bào)用戶體驗(yàn)。通常開發(fā)者會(huì)通過壓縮資源的大小，并通過內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）加快資源的下載速度。但是除了這些還有其他通用的方法呢？
在介紹具體優(yōu)化手段前，先來看以下關(guān)鍵字，這些是性能優(yōu)化的通用方法。
總結(jié)如下圖：
圖片
接下來，將從圖片、視頻、字體包等各個(gè)資源，進(jìn)一步解析如何結(jié)合上述關(guān)鍵詞進(jìn)行優(yōu)化。
關(guān)鍵字：提前 preload、懶加載 lazy、緩存 cache圖片資源占整個(gè)年報(bào)項(xiàng)目資源中的比例是最高的，大概 70% 左右。所以圖片展示速度是否足夠快和內(nèi)容是否完整都會(huì)直接影響用戶體驗(yàn)。
優(yōu)先將圖片資源使用 tinypng 進(jìn)行手動(dòng)壓縮，在不失真的情況下，保證圖片大小足夠小。其次正確選擇圖片格式能有效減少圖片大小。其中圖片格式很多，主流的有：
不同圖片格式在不同場(chǎng)景上使用。格式?jīng)]選準(zhǔn)確，會(huì)導(dǎo)致資源浪的費(fèi)。如在「年度總覽」一頁中，海浪
本文鏈接：http://www.tebozhan.com/showinfo-26-99645-0.html云音樂2023年報(bào)前端大揭秘
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)