最近接觸了不少面試題目，有這么一類常見的題目，沒有標(biāo)準(zhǔn)答案，上下限差距很大，第一次碰到?jīng)]有準(zhǔn)備的話，回答起來總會比較糾結(jié)。

具體的題目有性能優(yōu)化，提升代碼質(zhì)量，做埋點系統(tǒng)，優(yōu)化webpack等，這里我把他們統(tǒng)稱為系統(tǒng)設(shè)計和優(yōu)化題。

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

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

具體題目

如何做性能優(yōu)化？

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

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

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

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

如何提升代碼質(zhì)量?

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

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

如何進(jìn)行效率提升

怎么衡量效率？人日？

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

怎么設(shè)計埋點系統(tǒng)

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

怎么做搭建系統(tǒng)

關(guān)鍵的元素是頁面。因此我們要圍繞頁面的生產(chǎn)，頁面的配置，頁面的管理，頁面的渲染等來進(jìn)行討論

怎么做客戶端離線資源系統(tǒng)？

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

怎么優(yōu)化webpack

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

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

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

尾聲

不知道大家找到一些規(guī)律了嗎？

下面是我的思路。

找到問題的關(guān)鍵點，找到如何衡量關(guān)鍵點的方法，從系統(tǒng)運行的全流程進(jìn)行分析，針對每個流程進(jìn)行分別優(yōu)化。

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