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

作者：氫靈子

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

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

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

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

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

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

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

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

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

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

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

Web 前端工程師是什么

Web 前端工程師是什么？通俗的來說，是編寫網(wǎng)頁的人。

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

工程師

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

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

因此，通俗的說，工程師是解決問題的人。

軟件工程師

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

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

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

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

Web 前端工程師

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

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

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

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

前端工程師

至此，得到了一個 Web 前端工程師的通俗說法。

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

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

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

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

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

Web 前端工程師的作用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

性能

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

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

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

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

可用的方法有：

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

體驗

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

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

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

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

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

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

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

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

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

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

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

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

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

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

框架

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

這樣一個框架，也可以說是一份模板，把它放在 Git 倉庫中，使用時 fork?；蛘叻旁谒接?NPM 倉庫中，利用npm init <executor>命令[9]進(jìn)行創(chuàng)建。

CI/CD

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

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

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

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

私有 NPM

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

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

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

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

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

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

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

Web 前端工程師的工具包

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

代碼編輯器

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

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

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

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

瀏覽器擴展

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

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

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

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

個人筆記

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

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

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

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

參考資料

[1] Wikipedia，工程師[3]

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

[3] wikipedia，SEO[5]

[4] web.dev，PWA[6]

[5] Chrome，Devtools Performance[7]

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

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

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

[9] NPM，init[11]

[10] Github，CI/CD[12]

[11] 掘金，開發(fā)一個前端監(jiān)控系統(tǒng)：錯誤上報、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)容對你挺有啟發(fā)，我想邀請你幫我個小忙：

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

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

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

點個喜歡支持我吧，在看就更好了