一名優(yōu)秀的Web前端開發(fā)工程師的生存攻略

作者：氫靈子

原文：https://juejin.cn/post/7214512376669372453

雖然從畢業(yè)到現(xiàn)在，我只工作了 3、4 年，但我什么都做：前端 Web、移動(dòng)端 Android、后端 .NET，甚至還有嵌入式。但我最喜歡的還是 Web 前端，我喜歡圖形、動(dòng)畫、交互，喜歡 HTML、CSS 和 Javascript 賦予的快速呈現(xiàn)的能力。我喜歡 Web 前端能夠讓我自己實(shí)現(xiàn)自己的需求，喜歡 Web 前端更加靠近視覺、藝術(shù)方面的能力，方便我做一些自己喜歡的動(dòng)畫、游戲等等。

我自認(rèn)為自己在 Web 前端還有點(diǎn)研究，從最初的原生 HTML、CSS、Javascript，到框架 React、Vue、Angular，到繪圖技術(shù) Canvas、SVG，到后端接壤 Node 等。我在工作時(shí)也很開心，編寫網(wǎng)頁(yè)并不會(huì)讓我感到疲勞。但最近的一些事情和現(xiàn)實(shí)情況，卻讓我懷疑，我現(xiàn)在做得事情是否有價(jià)值。

一是個(gè)人的成長(zhǎng)速度放緩。工作中需要的技能，基本上我已具備，一般的工作對(duì)我來(lái)說(shuō)沒有任何問(wèn)題。但我只是做一些大部分 Web 前端工程師都能做得工作：調(diào)用接口、呈現(xiàn)數(shù)據(jù)、填寫表單、發(fā)送請(qǐng)求。少數(shù)讓我覺得興奮之一的工作是數(shù)據(jù)可視化，但比較少。

二是市場(chǎng)上出現(xiàn)了大量“前端已死”的聲音。由于經(jīng)濟(jì)下行，很多公司裁員。而 Web 前端因?yàn)殚T檻低，容易被替代，大量 Web 前端程序員失業(yè)。所以我想，雖然我目前在公司沒有被裁的風(fēng)險(xiǎn)，但其實(shí)不可替代性很低，日后萬(wàn)一有風(fēng)吹草動(dòng)，我會(huì)不會(huì)是最先被裁撤的。

三是 AI 技術(shù)的爆發(fā)發(fā)展。GPT 等模型的出現(xiàn)，使得 AI 代替人擔(dān)任某些崗位似乎成為了可能，GPT-4 更是能夠從設(shè)計(jì)圖直接生成網(wǎng)頁(yè)代碼。很多人對(duì)自己的崗位是否會(huì)被替代而帶有，我也無(wú)法免俗。雖然我認(rèn)為 Web 前端的上限很高，但并不是所有公司都需要那么尖端的 Web 前端技術(shù)。如果真到了 AI 替代人類的那一天，我將何去何從。

以上是我最近的一些擔(dān)憂，它們讓我思考：

• Web 前端的價(jià)值是什么？
• 我是一個(gè)合格的 Web 前端工程師嗎？
• 如果我不再?gòu)氖?Web 前端，那么我能從中汲取什么，并帶到新的領(lǐng)域中？

我想搞清楚這些問(wèn)題，因此我進(jìn)行了一些思考和總結(jié)，寫了一些文章。

我喜歡 Web 前端，熱愛編程。即使有一天我不得不放棄做一名 Web 前端工程師，我希望我離開是因?yàn)榄h(huán)境容不下我，而不是因?yàn)槲也皇且粋€(gè)合格的 Web 前端工程師。我希望但市場(chǎng)不再需要 Web 前端工程師的時(shí)候，在這個(gè)領(lǐng)域?qū)W到的東西，能讓我更好的進(jìn)入另外一個(gè)領(lǐng)域。

就像 JQuery，使用率不斷下降，但它的思想引領(lǐng)了一個(gè)時(shí)代的編程方法，潛移默化地影響了 Web 標(biāo)準(zhǔn)。它并不是被淘汰，而是功成身退。

Web 前端工程師是什么

Web 前端工程師是什么？通俗的來(lái)說(shuō)，是編寫網(wǎng)頁(yè)的人。

但在成為 Web 前端工程師之前，先得是一個(gè)工程師，再是一個(gè)軟件工程師，然后是 Web 前端工程師。

工程師

維基百科這么定義工程師：工程師是指那些在工程專業(yè)領(lǐng)域的人，他們使用科學(xué)知識(shí)來(lái)駕馭技術(shù)以解決實(shí)際問(wèn)題，并以此為職業(yè)[1]。

工程通常是用于實(shí)現(xiàn)某個(gè)需求的一系列工作，而“問(wèn)題”一詞很好地揭示了工程師的本質(zhì)。因?yàn)橥ǔ?lái)說(shuō)，工程不是容易完成的，常伴隨著一系列問(wèn)題。此時(shí)就需要工程師在有限的資源下，想盡辦法來(lái)解決問(wèn)題，完成工程。

因此，通俗的說(shuō)，工程師是解決問(wèn)題的人。

軟件工程師

承襲上面的定義，可以推出軟件工程師是實(shí)現(xiàn)軟件工程的人，通俗的來(lái)說(shuō)，軟件工程師是解決軟件領(lǐng)域問(wèn)題的人。

在傳統(tǒng)項(xiàng)目（比如土木工程）中，工程師通常不是工程的具體操作人（真正操作人是建筑工人），而是設(shè)計(jì)師和規(guī)劃者。在軟件領(lǐng)域，軟件工程也可以分為工程師和程序員，即由軟件工程師來(lái)理解需求、構(gòu)建框架、定義系統(tǒng)，由程序員來(lái)做具體編程的工作。在大型項(xiàng)目中，可能確實(shí)如此。但因?yàn)檐浖I(lǐng)域的體量輕，需要的固定資源少，特別是對(duì)于互聯(lián)網(wǎng)軟件行業(yè)，一家公司可能不會(huì)由很多人，通常是以小團(tuán)隊(duì)為單位進(jìn)行軟件開發(fā)。因此，在這些項(xiàng)目和團(tuán)隊(duì)中，不會(huì)區(qū)分工程師和程序員，即軟件的設(shè)計(jì)人員和編程人員是同一個(gè)。

同時(shí)，對(duì)于這個(gè)世代的程序員來(lái)說(shuō)，交叉工種和學(xué)科的能力幾乎是不可或缺的。一個(gè)程序員也必須學(xué)會(huì)工程、系統(tǒng)等知識(shí)，才能更好的發(fā)展。因此本文不區(qū)分軟件工程師和程序員。

軟件，既是軟件工程師的目標(biāo)，也是軟件工程師的手段。因此，為了完成軟件而必須的編程能力、系統(tǒng)知識(shí)、思想方法，是軟件工程師的核心技能。

Web 前端工程師

Web 前端工程師是軟件工程師的一種。傳統(tǒng)意義的 Web 通常是指運(yùn)行在瀏覽器（如 Chrome）上的軟件，這種軟件的特點(diǎn)是：

• 資源從服務(wù)器獲取
• 運(yùn)行在一個(gè)沙箱中
• 渲染依托于瀏覽器而不是直接使用操作系統(tǒng)的 API

這些特點(diǎn)使得 Web 有諸多限制，比如必須在有網(wǎng)絡(luò)的環(huán)境下運(yùn)行、不能訪問(wèn)本地文件等，但也造就了它天生的最大優(yōu)勢(shì)：跨平臺(tái)。只要是有瀏覽器的地方，就能運(yùn)行網(wǎng)頁(yè)。早年可能還存在瀏覽器之間差異的問(wèn)題，但隨著 Blink 和 Webkit 幾乎統(tǒng)治了瀏覽器市場(chǎng)以及 IE 的入土，Web 標(biāo)準(zhǔn)化（W3C）越來(lái)越深入人心（至少目前是這樣的）。所以前端工程師大部分時(shí)間只需要把重點(diǎn)放在瀏覽器上，相較于其它軟件（比如移動(dòng)端），系統(tǒng)底層差異造成的麻煩就小得多。在非桌面端，也出現(xiàn)了 Hybrid 和 Electron 等跨平臺(tái)的開發(fā)方式。

所以，Web 前端開發(fā)工程師是根據(jù) Web 標(biāo)準(zhǔn)，用運(yùn)行在瀏覽器中的軟件，來(lái)解決問(wèn)題的人。

前端工程師

至此，得到了一個(gè) Web 前端工程師的通俗說(shuō)法。

現(xiàn)在把概念擴(kuò)大一點(diǎn)，把 Web 拿掉，什么是前端工程師呢？這里的“前端”是相對(duì)于后端服務(wù)器而言的，從前不區(qū)分前后端，一個(gè)請(qǐng)求從瀏覽器出發(fā)，到后臺(tái)服務(wù)器，到數(shù)據(jù)返回到瀏覽器，都由后端程序完成。但是隨著需求的增長(zhǎng)，Web 頁(yè)面的復(fù)雜度增加，以及瀏覽器性能的提升促使單頁(yè)面應(yīng)用（SPA）的出現(xiàn)，后端程序員快忙不過(guò)來(lái)了。于是出現(xiàn)了前后端分離，當(dāng)然前后端分離的好處[2]不單單是為后端程序員減輕負(fù)荷，但這不是本片文章的討論范圍，因此不予敘述。

隨著前端的發(fā)展，對(duì)前端工程師的要求也越來(lái)越高，出現(xiàn)了更多對(duì)前端工程師的技能要求。也就是說(shuō)，相較于后端，前端工程師的技術(shù)和思想開始越來(lái)越區(qū)別于后端。主要體現(xiàn)在：

• 良好的美術(shù)審美和用戶交互體驗(yàn)
• 不同設(shè)備顯示方式的兼容（桌面，平板，手機(jī)）
• 數(shù)據(jù)可感知（數(shù)據(jù)可視化，音視頻播放）

從這些角度來(lái)講，開發(fā)桌面端、移動(dòng)端和嵌入式段軟件的工程師，應(yīng)該也屬于前端工程師，而且目前的趨勢(shì)也正是朝著這個(gè)方向前進(jìn)，出現(xiàn)了很多跨平臺(tái)的工具，比如 Flutter 和 Reactive Native。也就是說(shuō)，直接與用戶打交道的界面，都可能是前端工程師的工作。

從內(nèi)容上來(lái)看，現(xiàn)在的前端已不再是簡(jiǎn)單的文字和圖片，也不僅僅是音視頻等各種媒體，而是朝著多維度的可交互方向發(fā)展，比如游戲、VR、網(wǎng)頁(yè)端的復(fù)雜應(yīng)用（比如 Office）、3D 等等。

Web 前端工程師的作用

Web 前端工程師的工作內(nèi)容是編寫網(wǎng)頁(yè)。從工程的角度來(lái)講，這項(xiàng)工作包括：

1. 理解需求，構(gòu)建系統(tǒng)框架
2. 整理系統(tǒng)需要的資源（比如 UI 資源、接口資源、部署資源）
3. 編寫程序源代碼，將代碼轉(zhuǎn)譯或編譯成瀏覽器可用的程序
4. 保證程序在瀏覽器的兼容性和性能要求
5. 將網(wǎng)頁(yè)程序部署到服務(wù)器
6. 監(jiān)控并收集日志，優(yōu)化網(wǎng)頁(yè)、修復(fù)錯(cuò)誤

前端不斷發(fā)展，對(duì)工程師的要求也越來(lái)越高。最近 10 年興起的前端工程化潮流，使得 Web 編程越來(lái)越成熟和完善，各種工具和框架層出不窮，方興未艾。因此，Web 前端工程師不能只滿足于輸出網(wǎng)頁(yè)，也要關(guān)心自己用于開發(fā)網(wǎng)頁(yè)的工具。也也就是老話說(shuō)的：工欲善其事，必先利其器。包括但不限于：

• 源代碼轉(zhuǎn)編譯和打包工具（比如 Webpack）
• Web 標(biāo)準(zhǔn)與瀏覽器兼容性插件（比如 Babel）
• 代碼編輯器和相關(guān)插件（比如 VSCode）
• 瀏覽器和相關(guān)插件
• 網(wǎng)頁(yè)程序部署服務(wù)器（比如 Nginx）

分析需求可行性和開發(fā)資源

Web 前端工程師需要理解需求，當(dāng)然理解需求不是前端工程師一個(gè)人的工作，一起工作的還有產(chǎn)品經(jīng)理和其它程序員等。而前端程序員在這個(gè)步驟中，很重要的一個(gè)作用是判斷需求的可行性，即判斷一個(gè)功能點(diǎn)能否在瀏覽器中實(shí)現(xiàn)，能否滿足性能要求。

這一點(diǎn)對(duì)于產(chǎn)品和項(xiàng)目都很重要。如果某個(gè)功能無(wú)法實(shí)現(xiàn)，那么產(chǎn)品經(jīng)理就需要考慮是否要修改或放棄這個(gè)功能，或者另想辦法，繞個(gè)彎間接地實(shí)現(xiàn)功能。如果功能可以實(shí)現(xiàn)，但是需要很大的研發(fā)投入或開發(fā)時(shí)間，那么項(xiàng)目經(jīng)理就需要把這一風(fēng)險(xiǎn)好好考慮。

如果需求可以實(shí)現(xiàn)，那么就需要評(píng)估完成需求需要的時(shí)間，指出實(shí)現(xiàn)需求必須的資源，然后進(jìn)一步與具體工作的同事溝通。如果需求實(shí)現(xiàn)存在風(fēng)險(xiǎn)，那么應(yīng)及時(shí)提出，以方便項(xiàng)目經(jīng)理調(diào)整安排，或者與同事商量以探索可能的解決方案。

為了做好這一點(diǎn)，要求 Web 前端工程師有這些能力：

• 溝通技巧：抓住重點(diǎn)，提煉要點(diǎn)，傾聽對(duì)方的需求，提出自己的需求。
• 跟隨 Web 標(biāo)準(zhǔn)的發(fā)展，學(xué)習(xí)新知識(shí)和技術(shù)。
• 全面了解瀏覽器的功能，認(rèn)識(shí)瀏覽器能做的和不能做的，以及瀏覽器能夠達(dá)到的極限。
• 了解瀏覽器在不同環(huán)境下的局限（比如在手機(jī)中的瀏覽器可能有性能和網(wǎng)速的問(wèn)題）。
• 抽象需求為代碼結(jié)構(gòu)，將現(xiàn)實(shí)和 UI 領(lǐng)域的概念轉(zhuǎn)換為編程領(lǐng)域的概念。能夠下意識(shí)地想到需求應(yīng)該怎樣實(shí)現(xiàn)，有哪些既有地方案和已存的代碼可以參考。

產(chǎn)出實(shí)現(xiàn)需求、性能優(yōu)秀且對(duì)用戶友好的網(wǎng)頁(yè)

Web 前端工程師的產(chǎn)出，一般來(lái)說(shuō)包括以下：

• 單頁(yè)面應(yīng)用：頁(yè)面內(nèi)容由運(yùn)行時(shí) Javascript 生成且自己管理狀態(tài)，數(shù)據(jù)從后臺(tái)獲取。
• 服務(wù)端渲染應(yīng)用：頁(yè)面內(nèi)容由服務(wù)器直接生成，隨著文檔一起發(fā)送到瀏覽器，通常是為 SEO[3] 設(shè)計(jì)。
• 漸進(jìn)式網(wǎng)頁(yè)應(yīng)用（Progressive Web Application，PWA[4]）：常駐在瀏覽器中，可以離線使用的應(yīng)用。

如果推廣至前端工程師，那么桌面端 GUI 軟件和移動(dòng)端應(yīng)用可能也是前端工程師的工作。這些軟件對(duì)于前端工程師，通常是用基于 Web 的跨平臺(tái)構(gòu)建工具實(shí)現(xiàn)，比如：Electron 和 Webview。當(dāng)然也可以使用自成一派的工具，比如 Flutter。

實(shí)現(xiàn)功能、減少錯(cuò)誤，是對(duì)網(wǎng)頁(yè)最基本的要求，然后再談性能和體驗(yàn)的問(wèn)題。

性能

網(wǎng)頁(yè)的性能主要是指網(wǎng)頁(yè)瀏覽時(shí)的流暢性，包括：

• 從網(wǎng)頁(yè)跳轉(zhuǎn)到顯示主要內(nèi)容的時(shí)間短。
• 用戶點(diǎn)擊或其它交互后網(wǎng)頁(yè)做出反應(yīng)的時(shí)間短。
• 網(wǎng)頁(yè)內(nèi)容發(fā)生變化時(shí)不突變（即通俗來(lái)說(shuō)不卡頓）。

這些指標(biāo)的詳細(xì)研究，可以參考谷歌的 Web 開發(fā)網(wǎng)站[1]。

要做到這些，需要工程師對(duì)可能消耗大量時(shí)間的代碼和操作有所意識(shí)，想辦法減少冗余操作，提高效率。通常來(lái)說(shuō)，算力密集的工作通常由后臺(tái)服務(wù)器來(lái)完成，但隨 Web Application 的發(fā)展，越來(lái)越多的產(chǎn)品將 Web 視作一個(gè)可以獨(dú)立完成工作的平臺(tái)，這對(duì) Web 前端工程師帶來(lái)了更多的挑戰(zhàn)。

可用的方法有：

• 使用瀏覽器開發(fā)工具[5]，檢查性能消耗大的代碼并優(yōu)化。
• 緩存體積大的數(shù)據(jù)（存放在內(nèi)存、LocalStorage 和 IndexDB 等）。
• 使用 Web Worker，并發(fā)運(yùn)行高消耗的程序。
• 降低資源文件體積，減少打包冗余。

體驗(yàn)

網(wǎng)頁(yè)是給人瀏覽的界面，因此網(wǎng)頁(yè)的操作方法應(yīng)符合人的認(rèn)知邏輯，風(fēng)格應(yīng)符合人的審美（藝術(shù)創(chuàng)新除外），交互方式應(yīng)尊重人的感受。

為了達(dá)到這些要求，網(wǎng)頁(yè)需要做到：

• 頁(yè)面需要一定的焦點(diǎn)控制，即應(yīng)該突出重點(diǎn)部分，同時(shí)引導(dǎo)用戶的焦點(diǎn)在不同部分將流轉(zhuǎn)，有所取舍，不能過(guò)于復(fù)雜。
• 用戶進(jìn)行的一切操作（比如點(diǎn)擊、懸浮、滾動(dòng)、加載等），都應(yīng)有所反饋，反饋的方式包括但不限于：正常的流程、通知、樣式變化等。
• 大面積的內(nèi)容變化（比如彈出框），應(yīng)有動(dòng)畫進(jìn)行過(guò)渡。
• 頁(yè)面重復(fù)出現(xiàn)的元素，有相同的含義且始終保持一致。
• 保存用戶當(dāng)前的操作狀態(tài)，頁(yè)面跳轉(zhuǎn)返回或進(jìn)行其它變更狀態(tài)的操作時(shí)，應(yīng)當(dāng)保存的狀態(tài)（比如列表位置、表單填寫）可以自動(dòng)重現(xiàn)。

Web 前端工程師雖然屬于程序員，更多地是理想思維，但是應(yīng)該向 UI 設(shè)計(jì)師看齊，具有一定的審美水平和設(shè)計(jì)思維，了解基本的的色彩、構(gòu)圖等。這一方面的知識(shí)，可以參考《寫給大家看的設(shè)計(jì)書》[6]。

更進(jìn)一步說(shuō)，前端工程師可以學(xué)習(xí)初步的 UI/UX 設(shè)計(jì)師常用的軟件（比如 Photoshop、Figma 等），以更好的控制美術(shù)資源。

編寫良好的代碼和網(wǎng)頁(yè)的持續(xù)優(yōu)化

在實(shí)現(xiàn)了需求之后，工程師就需要關(guān)心代碼在功能和性能以外的屬性。在這些方面，良好的代碼應(yīng)具有以下特點(diǎn)：

• 良好的可讀性：為了與同事交流，以及日后自己能看懂。
• 可擴(kuò)展和易修改：為了應(yīng)對(duì) Web 快速變化的需求。

這里的表述是從實(shí)際工作中的編程習(xí)慣和多人協(xié)作出發(fā)，而不是傳統(tǒng)意義上的代碼規(guī)范和設(shè)計(jì)模式。關(guān)于良好的代碼規(guī)范和設(shè)計(jì)模式，有很多書籍可以參考，比如《設(shè)計(jì)模式：可復(fù)用面向?qū)ο筌浖幕A(chǔ)》[7]和《重構(gòu)》[8]。因?yàn)閮?nèi)容非常多，這里就不展開了。

編寫網(wǎng)頁(yè)不是一蹴而就的事情，即使在網(wǎng)頁(yè)已經(jīng)發(fā)布了之后，還有很多的甚至是更多的工作要做：

• 修復(fù)用戶報(bào)告或主動(dòng)檢測(cè)到的錯(cuò)誤
• 優(yōu)化網(wǎng)頁(yè)的性能
• 改善代碼結(jié)構(gòu)
• 升級(jí)技術(shù)棧

搭建基礎(chǔ)設(shè)施

雖然編寫網(wǎng)頁(yè)需要的工具不多，一臺(tái)電腦就行。但是為了更高效的工作，Web 前端工程師需要一些基礎(chǔ)設(shè)施，如同現(xiàn)實(shí)中的高速公路一樣，有了它才能把貨物運(yùn)往各地。

為了高效的工作，軟件工程師想到了很多方法。別忘了軟件既是目的，也是手段。

框架

現(xiàn)代的 Web 應(yīng)用通常不會(huì)從 0 開始寫 Javascript，而是采用框架和工具（比如 React、Vue、Angular 等）。這些工具大大提高了工作效率，但在這些框架之上，Web 前端工程師還需要一套基于公司和自己業(yè)務(wù)的框架。這套框架在 React、Vue 或 Angular 的基礎(chǔ)上，添加了常用的 UI 組建庫(kù)，包含了業(yè)務(wù)常用的代碼或庫(kù)，以及適用于業(yè)務(wù)的打包和部署代碼。這么做的目的，是為了省下重復(fù)的搭建項(xiàng)目和打包部署的時(shí)間。有些公司的業(yè)務(wù)可能需要 Web 前端工程師隨著工作的推進(jìn)不斷的創(chuàng)建項(xiàng)目，如果此時(shí)能夠“一鍵”生成出上述的內(nèi)容，那么將會(huì)省下很多時(shí)間，同時(shí)也可以不重復(fù)之前犯過(guò)的錯(cuò)誤和踩過(guò)的坑。

這樣一個(gè)框架，也可以說(shuō)是一份模板，把它放在 Git 倉(cāng)庫(kù)中，使用時(shí) fork。或者放在私有 NPM 倉(cāng)庫(kù)中，利用npm init <executor>命令[9]進(jìn)行創(chuàng)建。

CI/CD

Web 通常是需要經(jīng)常更新的，把新修改的代碼打包的文件放到服務(wù)器上，也就是部署。舉例來(lái)說(shuō)，一般的更新過(guò)程如下：

1. 修改代碼
2. 打包代碼
3. 轉(zhuǎn)移代碼到服務(wù)器
4. 重啟服務(wù)器

以前，2、3、4 步都是手動(dòng)完成的，也就是在開發(fā)者電腦上打包，手動(dòng)復(fù)制到服務(wù)器，手動(dòng)輸入命令重啟服務(wù)器。這樣做不僅繁瑣，還容易出錯(cuò)。因此，持續(xù)繼承/持續(xù)部署（Continuous Integration/Continuous Deployment，CI/CD）[10]出現(xiàn)了。它把打包代碼到重啟服務(wù)器的步驟自動(dòng)化，且都在服務(wù)器上完成，開發(fā)者需要做的只是推送代碼。

這一部分的工作通常還需要運(yùn)維工程師的幫忙，但作為一個(gè)軟件工程師，這一部分的只是需要了解，最好能親手試試。

私有 NPM

如前面提到的，Web 前端工程師經(jīng)常需要在不同的工程間共享代碼。一種方法是使用 Git 子模塊（Submodule），即在一個(gè) Git 倉(cāng)庫(kù)中存放一個(gè)子倉(cāng)庫(kù)，子倉(cāng)庫(kù)使用自己的 Git 管理，與本倉(cāng)庫(kù)獨(dú)立。但是這種方法其實(shí)不太適合大規(guī)模的代碼共享，因?yàn)樾枰獏f(xié)調(diào)各個(gè)項(xiàng)目之間的版本關(guān)系，而 Git 其實(shí)不擅長(zhǎng)這個(gè)事情。更通用的是使用 NPM，如果公司有安全性的考慮，可以在公司的內(nèi)網(wǎng)搭建私有的 NPM 服務(wù)器。

關(guān)于創(chuàng)建和上傳 NPM 包，可以參考NPM 官方文檔[2]。

監(jiān)控系統(tǒng)

即使是頂級(jí)的 Web 前端工程師，寫的網(wǎng)頁(yè)也難免有錯(cuò)誤和性能問(wèn)題，這些在開發(fā)時(shí)難以察覺的問(wèn)題或疏忽，在實(shí)際用戶各種各樣的環(huán)境中就有可能出現(xiàn)。因此 Web 前端工程師需要從用戶端收集日志，內(nèi)容包括：

• 頁(yè)面錯(cuò)誤信息
• 性能信息（加載時(shí)間、首屏渲染時(shí)間、接口延遲時(shí)間等）
• 接口調(diào)用信息
• 頁(yè)面運(yùn)行環(huán)境（設(shè)備、瀏覽器、網(wǎng)絡(luò)情況等）
• 用戶信息

這些日志不僅能在用戶報(bào)告了錯(cuò)誤后，對(duì)錯(cuò)誤進(jìn)行分析調(diào)試，也可以對(duì)性能差的頁(yè)面，針對(duì)性的進(jìn)行優(yōu)化。

這一套系統(tǒng)包含兩個(gè)方面，運(yùn)行在用戶端瀏覽器的監(jiān)控程序，和運(yùn)行在服務(wù)器的收集分析程序。市場(chǎng)上有成熟的解決方案，比如阿里云 ARMS，也可以自己搭建。比如在前端編寫收集信息的程序[11]后，在后臺(tái)使用免費(fèi)的 Elasticsearch + Logstash + Kibana[12]方案，或者 Loki + Grafana[13]方案。

Web 前端工程師的工具包

工欲善其事，必先利其器。作為一個(gè)工程師，Web 前端開發(fā)者需要很多的工具，最好是自己熟悉和常用的，同時(shí)可以自己配置從而最適合自己的。這樣一套工具組成一個(gè)環(huán)境，讓工程師在工作室隨手可用。

代碼編輯器

開發(fā)網(wǎng)頁(yè)需要的軟件工具不多，一個(gè)代碼編輯器和一個(gè)瀏覽器就足夠。但是隨著 Web 前端內(nèi)容形式和編程方式的發(fā)展，以及為了更高效地工作，一個(gè)好的代碼編輯器往往可以達(dá)到事半功倍的效果。

每個(gè)程序員都有自己喜歡的編輯器，但是為了達(dá)到上述“適合自己”和“隨手可用”的效果，編輯器最好可以安裝插件和同步配置。

以 VSCode 為例，它可以安裝各種插件，從語(yǔ)言 Lint、調(diào)試工具、代碼美化、資源預(yù)覽等一應(yīng)俱全，同時(shí)它支持登陸 Github 或 Microsoft 賬號(hào)，以在不同設(shè)備間同步插件和設(shè)置。這樣就滿足了程序員在不同的工作環(huán)境中都能用自己最舒適的編輯器編程的需求。

如果有的功能代碼編輯器沒有實(shí)現(xiàn)，也沒有現(xiàn)成的插件，可以自己嘗試編寫插件[14]。

瀏覽器擴(kuò)展

Web 前端工程師在調(diào)試網(wǎng)頁(yè)時(shí)，可用的方法有斷點(diǎn)調(diào)試和控制臺(tái)日志輸出，除此以外還可以借助瀏覽器擴(kuò)展。

現(xiàn)代的 Web 開發(fā)框架（React、Vue、Angular）等都提供了瀏覽器擴(kuò)展，用于顯示當(dāng)前頁(yè)面中組件的狀態(tài)、成員變量值、路由信息等，非常直觀。有些工具還可以實(shí)時(shí)設(shè)置變量的值，而頁(yè)面也能立即反應(yīng)變化，很方便。

除了框架，一些知名庫(kù)，也提供了開發(fā)擴(kuò)展，比如 Three.js。在移動(dòng)端，如果沒有擴(kuò)展，可以依靠如 vConsole[16] 這樣的 NPM 庫(kù)，在移動(dòng)端模擬如桌面瀏覽器那樣的開發(fā)控制臺(tái)。

同樣的，如果現(xiàn)成的擴(kuò)展不能滿足要求，也可以自己開發(fā)。

個(gè)人筆記

Web 前端是一個(gè)交叉學(xué)科的領(lǐng)域，涉及的知識(shí)面非常廣。即使一個(gè)人的記憶力再好，也總有突然之間想不起某個(gè)知識(shí)點(diǎn)的情況。特別是在現(xiàn)在技術(shù)飛速發(fā)展的年代，知道一個(gè)東西比記得它的詳細(xì)內(nèi)容更重要。因?yàn)槲覀兛梢詫⒓?xì)節(jié)記錄在筆記中，需要時(shí)查詢即可。

比如，NPM 有很多有用的庫(kù)，程序員可以給用過(guò)且好用的庫(kù)打個(gè)標(biāo)簽，記下筆記。需要時(shí)，查詢筆記，使用相應(yīng)的庫(kù)即可。

有很多軟件可以記錄筆記，比如印象筆記和有道云筆記，它們的免費(fèi)功能就已經(jīng)夠用了。如果覺得放在廠商的服務(wù)器上不安全（廠商有跑路的風(fēng)險(xiǎn)），那么也可以記在自己的電腦上，然后用 Git 同步到遠(yuǎn)程倉(cāng)庫(kù)，當(dāng)在公司工作時(shí)，就可以在網(wǎng)頁(yè)上瀏覽筆記。

更進(jìn)一步說(shuō)，既然我們是 Web 前端工程師，我們可以自己開發(fā)一個(gè)網(wǎng)頁(yè)，存放在比如 OSS 的地方，滿足我們對(duì)筆記的瀏覽和編輯等要求。

參考資料

[1] Wikipedia，工程師[3]

[2] 知網(wǎng)，Web 項(xiàng)目前后端分離的設(shè)計(jì)與實(shí)現(xiàn)[4]

[3] wikipedia，SEO[5]

[4] web.dev，PWA[6]

[5] Chrome，Devtools Performance[7]

[6] 豆瓣，寫給大家看的設(shè)計(jì)書[8]

[7] 豆瓣，設(shè)計(jì)模式：可復(fù)用面向?qū)ο筌浖幕A(chǔ)[9]

[8] 豆瓣，重構(gòu)[10]

[9] NPM，init[11]

[10] Github，CI/CD[12]

[11] 掘金，開發(fā)一個(gè)前端監(jiān)控系統(tǒng)：錯(cuò)誤上報(bào)、AJAX 監(jiān)控、性能指標(biāo)[13]

[12] Elastic，ELK[14]

[13] Grafana，Loki[15]

[14] VSCode，API[16]

[15] Chrome，Extensions[17]

[16] vConsole[18]

參考資料

[1]

https://web.dev/vitals/: https://link.juejin.cn?target=https%3A%2F%2Fweb.dev%2Fvitals%2F

[2]

https://docs.npmjs.com/: https://link.juejin.cn?target=https%3A%2F%2Fdocs.npmjs.com%2F

[3]

https://zh.wikipedia.org/wiki/%E5%B7%A5%E7%A8%8B%E5%B8%88: https://link.juejin.cn?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2F%25E5%25B7%25A5%25E7%25A8%258B%25E5%25B8%2588

[4]

https://kns.cnki.net/kcms2/article/abstract?v=3uoqIhG8C44YLTlOAiTRKibYlV5Vjs7i8oRR1PAr7RxjuAJk4dHXorePou3XcM7FPWoV2jZsjXuB3DxyrNmSXQPxBCxfcRMg&uniplatform=NZKPT: https://link.juejin.cn?target=https%3A%2F%2Fkns.cnki.net%2Fkcms2%2Farticle%2Fabstract%3Fv%3D3uoqIhG8C44YLTlOAiTRKibYlV5Vjs7i8oRR1PAr7RxjuAJk4dHXorePou3XcM7FPWoV2jZsjXuB3DxyrNmSXQPxBCxfcRMg%26uniplatform%3DNZKPT

[5]

https://zh.wikipedia.org/wiki/SEO: https://link.juejin.cn?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FSEO

[6]

https://web.dev/learn/pwa/: https://link.juejin.cn?target=https%3A%2F%2Fweb.dev%2Flearn%2Fpwa%2F

[7]

https://developer.chrome.com/docs/devtools/performance/: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.chrome.com%2Fdocs%2Fdevtools%2Fperformance%2F

[8]

https://book.douban.com/subject/26657933/: https://link.juejin.cn?target=https%3A%2F%2Fbook.douban.com%2Fsubject%2F26657933%2F

[9]

https://book.douban.com/subject/34262305/: https://link.juejin.cn?target=https%3A%2F%2Fbook.douban.com%2Fsubject%2F34262305%2F

[10]

https://book.douban.com/subject/4262627/: https://link.juejin.cn?target=https%3A%2F%2Fbook.douban.com%2Fsubject%2F4262627%2F

[11]

https://docs.npmjs.com/cli/v9/commands/npm-init: https://link.juejin.cn?target=https%3A%2F%2Fdocs.npmjs.com%2Fcli%2Fv9%2Fcommands%2Fnpm-init

[12]

https://github.com/solutions/ci-cd/: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsolutions%2Fci-cd%2F

[13]

https://juejin.cn/post/6975324063476482056: https://juejin.cn/post/6975324063476482056

[14]

https://www.elastic.co/cn/what-is/elk-stack: https://link.juejin.cn?target=https%3A%2F%2Fwww.elastic.co%2Fcn%2Fwhat-is%2Felk-stack

[15]

https://grafana.com/oss/loki/: https://link.juejin.cn?target=https%3A%2F%2Fgrafana.com%2Foss%2Floki%2F

[16]

https://code.visualstudio.com/api: https://link.juejin.cn?target=https%3A%2F%2Fcode.visualstudio.com%2Fapi

[17]

https://developer.chrome.com/docs/extensions/: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.chrome.com%2Fdocs%2Fextensions%2F

[18]

https://github.com/Tencent/vConsole: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FTencent%2FvConsole

最后

如果你覺得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我個(gè)小忙：

1. 點(diǎn)個(gè)「喜歡」或「在看」，讓更多的人也能看到這篇內(nèi)容

2. 我組建了個(gè)氛圍非常好的前端群，里面有很多前端小伙伴，歡迎加我微信「sherlocked_93」拉你加群，一起交流和學(xué)習(xí)

3. 關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。

點(diǎn)個(gè)喜歡支持我吧，在看就更好了