最近接觸了不少面試題目，有這么一類常見的題目，沒有標準答案，上下限差距很大，第一次碰到沒有準備的話，回答起來總會比較糾結。

具體的題目有性能優化，提升代碼質量，做埋點系統，優化webpack等，這里我把他們統稱為系統設計和優化題。

在這里我嘗試找一下應對這些問題的套路，讓大家可以在工作和面試中找到感覺，順利過關。

下面我就同時寫題目和我自己的答案，希望大家能在閱讀的過程中找到一些規律。

具體題目

如何做性能優化？

問題的關鍵是性能，那么，性能指的是什么？頁面加載的快慢和頁面是否流暢。

那么用什么指標來衡量呢?頁面加載時長和幀率

怎么計算這些指標呢?加載時長可以使用performance.timing,API上報，onload等事件。而幀率可以使用raf來計算。

那么我們要怎么做性能優化呢?針對用戶訪問的全流程，每一步進行優化。如dns解析，tcp鏈接，渲染頁面等。詳情可以查看我的文章。

如何提升代碼質量?

同樣我們要先想以下的問題 什么是代碼質量？代碼質量有哪些指標（代碼性能、代碼的缺陷數量）？怎么計算指標？

怎么提升代碼質量？從研發的流程著手。需求評審、代碼初始化、寫代碼（eslint）、提交代碼(git commit鉤子)、測試代碼、發布代碼（規則攔截）、數據監控

如何進行效率提升

怎么衡量效率？人日？

怎么提升效率?跟上面的提升代碼質量的階段比較接近，不重復講了。

怎么設計埋點系統

關鍵的問題是數據，因此我們要從數據著手，了解我們要上報哪些數據（性能/用戶行為/錯誤），怎么上報數據（gif，api），怎么處理數據（日志清洗，歸類，存儲），怎么查看數據（可視化，權限系統），怎么利用數據（生成報表，報警監控）

怎么做搭建系統

關鍵的元素是頁面。因此我們要圍繞頁面的生產，頁面的配置，頁面的管理，頁面的渲染等來進行討論

怎么做客戶端離線資源系統？

關鍵問題是資源。因為我們要解答發放什么資源，什么時候發放，怎么發放，怎么更新、刪除資源，怎么使用資源，資源的優先級、有效期等問題

怎么優化webpack

webpack的優化可以分為縮小體積和減少打包時間兩個方向。

我們可以從webpack打包的流程為切入點進行分析。

初始化參數階段、加載插件階段、確定入口階段、編譯階段、完成編譯、輸出資源、寫入文件

尾聲

不知道大家找到一些規律了嗎？

下面是我的思路。

找到問題的關鍵點，找到如何衡量關鍵點的方法，從系統運行的全流程進行分析，針對每個流程進行分別優化。

希望大家可以有一些收獲。