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

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

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

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

具體題目

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

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

那么用什么指標(biāo)來(lái)衡量呢?頁(yè)面加載時(shí)長(zhǎng)和幀率

怎么計(jì)算這些指標(biāo)呢?加載時(shí)長(zhǎng)可以使用performance.timing,API上報(bào)，onload等事件。而幀率可以使用raf來(lái)計(jì)算。

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

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

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

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

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

怎么衡量效率？人日？

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

怎么設(shè)計(jì)埋點(diǎn)系統(tǒng)

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

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

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

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

關(guān)鍵問(wèn)題是資源。因?yàn)槲覀円獯鸢l(fā)放什么資源，什么時(shí)候發(fā)放，怎么發(fā)放，怎么更新、刪除資源，怎么使用資源，資源的優(yōu)先級(jí)、有效期等問(wèn)題

怎么優(yōu)化webpack

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

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

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

尾聲

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

下面是我的思路。

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

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