在簡(jiǎn)歷上寫(xiě)了精通 H5，結(jié)果面試官上來(lái)就問(wèn)：

同學(xué)，你說(shuō)你精通 H5 ，那你能不能說(shuō)一下怎么實(shí)現(xiàn) H5 秒開(kāi)？

由于沒(méi)怎么做過(guò)性能優(yōu)化，我只能憑著印象，斷斷續(xù)續(xù)地羅列了幾點(diǎn)：

• 網(wǎng)絡(luò)優(yōu)化：http2、dns 預(yù)解析、使用 CDN
• 圖片優(yōu)化：壓縮、懶加載、雪碧圖
• 體積優(yōu)化：分包、tree shaking、壓縮、模塊外置
• 加載優(yōu)化：延遲加載、骨架屏
• ...

看得出來(lái)面試官不太滿意，最后面試也掛了。于是我請(qǐng)教了我的好友 Gahing ，問(wèn)問(wèn)他的觀點(diǎn)。

Gahing：

你列的這些優(yōu)化手段本身沒(méi)啥問(wèn)題，如果是一個(gè)工作一兩年的我會(huì)覺(jué)得還可以。但你已經(jīng)五年以上工作經(jīng)驗(yàn)了，需要有一些系統(tǒng)性思考了。

好像有點(diǎn) PUA 的味道，于是我追問(wèn)道：什么是系統(tǒng)性的思考？

Gahing：

我們先說(shuō)回答方式，你有沒(méi)有發(fā)現(xiàn)，你回答時(shí)容易遺漏和重復(fù)。

比如說(shuō)「圖片懶加載」，你歸到了「圖片優(yōu)化」，但其實(shí)也可以歸到「加載優(yōu)化」。同時(shí)你還漏了很多重要的優(yōu)化手段，比如資源緩存、服務(wù)端渲染等等。

究其原因應(yīng)該是缺少抽象分類方法。

那針對(duì)這個(gè)問(wèn)題，應(yīng)該如何分類回答？

Gahing：

分類并非唯一，可以有不同角度，但都需遵從 MECE 原則（相互獨(dú)立、完全窮盡） ，即做到不重不漏。

• 按頁(yè)面加載鏈路分類：容器啟動(dòng)、資源加載、代碼執(zhí)行、數(shù)據(jù)獲取、繪制渲染。

• 按資源性能分類：CPU、內(nèi)存、本地 I/O、網(wǎng)絡(luò)。該分類方法又被叫做 USE 方法（Utilization Saturation and Errors Method）。

• 按協(xié)作方分類：前端、客戶端、數(shù)據(jù)后臺(tái)、圖片服務(wù)、瀏覽器引擎等。

• 按流程優(yōu)化分類：前置、簡(jiǎn)化、拆分。

  • 前置即調(diào)整流程，效果上可能是高優(yōu)模塊前置或并行，低優(yōu)模塊后置；
  • 簡(jiǎn)化即縮減或取消流程，體積優(yōu)化是簡(jiǎn)化，執(zhí)行加速也是簡(jiǎn)化；
  • 拆分即細(xì)粒度拆解流程，本身沒(méi)有優(yōu)化效果，是為了更好的進(jìn)行前置和簡(jiǎn)化。
  • 這個(gè)角度抽象層次較高，通常能回答出來(lái)的都是高手。

• 多級(jí)分類：使用多個(gè)層級(jí)的分類方法。比如先按頁(yè)面加載鏈路分類，再將鏈路中的每一項(xiàng)用協(xié)作方或者流程優(yōu)化等角度再次分類。突出的是一個(gè)系統(tǒng)性思維。

選擇好分類角度，也便于梳理優(yōu)化方案的目標(biāo)。

現(xiàn)在，嘗試使用「頁(yè)面加載鏈路+流程優(yōu)化+協(xié)作方」的多級(jí)分類思維，對(duì)常見(jiàn)的首屏性能優(yōu)化手段進(jìn)行分類。

PS: 可以打開(kāi)飛書(shū)文檔原文查看思維導(dǎo)圖

好像有點(diǎn)東西，但是我并沒(méi)有做過(guò)性能優(yōu)化，面試官會(huì)覺(jué)得我在背八股么？

Gahing:

可以沒(méi)有實(shí)操經(jīng)驗(yàn)，但是得深入理解。隨便追問(wèn)一下，比如「頁(yè)面預(yù)渲染效果如何？有什么弊端？什么情況下適用？」，如果純背不加理解的話很容易露餡。

另外，就我個(gè)人認(rèn)為，候選人擁有抽象思維比實(shí)操經(jīng)驗(yàn)更重要，更何況有些人的實(shí)操僅僅是知道怎么做，而不知道為什么做。

那我按上面的方式回答了，能順利通過(guò)面試么 ?? ？

Gahing:

如果能按上面的抽象思維回答，并頂住追問(wèn)，在以前應(yīng)該是能順利通過(guò)面試的（就這個(gè)問(wèn)題）。

但如今行業(yè)寒冬，大廠降本增效，對(duì)候選人提出了更高的要求，即系統(tǒng)性思考和業(yè)務(wù)理解能力。

從這個(gè)問(wèn)題出發(fā)，如果想高分通過(guò)，不僅需要了解優(yōu)化方案，還要關(guān)注研發(fā)流程、數(shù)據(jù)指標(biāo)、項(xiàng)目協(xié)作等等，有沉淀自己的方法論和指導(dǎo)性原則，能實(shí)施可執(zhí)行的 SOP。。

最后，我還是忍不住問(wèn)了 Gahing ：如果是你來(lái)回答這個(gè)問(wèn)題，你會(huì)怎么回答？

Gahing:

H5 秒開(kāi)是一個(gè)系統(tǒng)性問(wèn)題，可以從深度和廣度兩個(gè)方向來(lái)回答。

深度關(guān)注的是技術(shù)解決方案，可以從頁(yè)面加載鏈路進(jìn)行方案拆解，得到容器啟動(dòng)、資源加載、代碼執(zhí)行、數(shù)據(jù)獲取、繪制渲染各個(gè)環(huán)節(jié)。其中每個(gè)環(huán)節(jié)還可以從協(xié)作方和流程優(yōu)化的角度進(jìn)一步拆解。

廣度關(guān)注的是整個(gè)需求流程，可以用 5W2H 進(jìn)行拆解，包括：

• 優(yōu)化目標(biāo)（What）：了解優(yōu)化目標(biāo)，即前端首屏加載速度
• 需求價(jià)值（Why）：關(guān)注需求收益，從技術(shù)指標(biāo)（FMP、TTI）和業(yè)務(wù)指標(biāo)（跳失率、DAU、LT）進(jìn)行分析
• 研發(fā)周期（When）：從開(kāi)發(fā)前到上線后，各個(gè)環(huán)節(jié)都需要介入
• 項(xiàng)目協(xié)作（Who）：確定優(yōu)化專項(xiàng)的主導(dǎo)方和協(xié)作方
• 優(yōu)化范圍（Where）：關(guān)注核心業(yè)務(wù)鏈路，確定性能卡點(diǎn)
• 技術(shù)方案（How）：制定具體的優(yōu)化策略和行動(dòng)計(jì)劃
• 成本評(píng)估（How much）：評(píng)估優(yōu)化方案的成本和效益?？紤]時(shí)間、資源和預(yù)期收益，確保優(yōu)化方案的可行性和可持續(xù)性。

通過(guò) 5W2H 分析法，可以建立系統(tǒng)性思維，全面了解如何實(shí)現(xiàn) H5 秒開(kāi)，并制定相應(yīng)的行動(dòng)計(jì)劃來(lái)改進(jìn)用戶體驗(yàn)和頁(yè)面性能。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-510484.html

到了這里，關(guān)于如何實(shí)現(xiàn) H5 秒開(kāi)？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！