工作兩年，你有沒(méi)有覺(jué)得很吃力？(干貨經(jīng)驗(yàn)分享)

點(diǎn)擊上方“藍(lán)色字體”，選擇“設(shè)為星標(biāo)”

做積極向上的前端人！

前言

前端工作兩年多。大部分前端原理、框架都能完全運(yùn)用。工作中幾乎遇不到解決不了的問(wèn)題（除了那些惡心無(wú)法實(shí)現(xiàn)的需求）現(xiàn)在經(jīng)常被安排去面試新人（被安排去面試，主要是工作能力比較突出的原因，公司還有很多3年以上的員工）。下面說(shuō)說(shuō)我的學(xué)習(xí)方法或許對(duì)你有用！

一、打好基礎(chǔ)不用說(shuō)

HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。HTML重點(diǎn)掌握語(yǔ)義化。區(qū)分塊級(jí)和內(nèi)聯(lián)標(biāo)簽。其他查文檔就好了。還有就是定義 head 里面一些meta 了解下。

CSS。重點(diǎn)看盒子模型，定位，層級(jí)，過(guò)渡，動(dòng)畫(huà)和 transform。知道原理和規(guī)則。大部分工作都是照著設(shè)計(jì)稿化。掌握上面幾個(gè)99%還原也不難。接下來(lái)重點(diǎn)學(xué)習(xí)幾種常見(jiàn)的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。

JavaScript。重點(diǎn)來(lái)了，紅寶書(shū)看一遍掌握基礎(chǔ)，進(jìn)階去看《你不知道的 JavaScript》。就這兩套足夠了，別搞那么多。每個(gè)知識(shí)點(diǎn)搞懂。ES6基本沒(méi)啥問(wèn)題。下面幾個(gè)問(wèn)題優(yōu)搞懂，優(yōu)先級(jí)如下：

• this 用法，相關(guān)原理
• 原型/原型鏈
• 閉包
• 面向?qū)ο笙嚓P(guān)
• 同步異步/回調(diào)/promise/async、await
• 模塊化 CommonJS, AMD
• 先搞這懂這些比較難的概念，對(duì)你JS理解更加深入。接下來(lái)在開(kāi)始看框架方面

二、框架方面

前期要會(huì)用，后期要懂原理。

新人先搞 Vue。Vue 算是比較簡(jiǎn)單的框架了，上手容易。照著官方文檔來(lái)問(wèn)題不大。原理方面要提高自己認(rèn)識(shí)。學(xué)習(xí)怎么看源碼。github常去逛逛。

學(xué)習(xí)框架之前，我其實(shí)特別建議，新人先去了解 Babel 和 webpack 不僅僅是使用。一些原理方面的東西工作中也會(huì)用到。babel 里面會(huì)有教你如何編譯代碼。webpack教你如和打包文件。自己手寫(xiě)編譯器和打包工具也不是特別難。反正對(duì)之后看vue、react源碼幫助挺大。

搞完 Vue 全家桶，去了解下 React，React hooks 學(xué)習(xí)下新的理念。再回過(guò)頭來(lái)看Vue。你會(huì)發(fā)現(xiàn)他們是如此的相似去又不同。

多去實(shí)踐總結(jié)，對(duì)整體框架理解會(huì)越來(lái)越深刻。

今天先馬到這里。想寫(xiě)的太多，馬上就要上班下次有空再來(lái)碼...

三、如何看源碼

新人剛開(kāi)始看源碼，會(huì)陷入兩個(gè)困境中。一是無(wú)從下手。二是看了之后感覺(jué)沒(méi)啥收獲。

這個(gè)也很正常。一般我們熟知的框架都有個(gè)幾千甚至上萬(wàn)個(gè)PR。太大細(xì)節(jié)會(huì)干擾你。掌握整個(gè)節(jié)奏和流程。學(xué)習(xí)原理也比較吃力。就連找個(gè)入口都像大海撈針一樣。建議從下面幾個(gè)方面入手：

• 挑簡(jiǎn)單的上手。別一開(kāi)始就搞 vue、react、webpack。太難，會(huì)直接勸退新人。不要為了面試而去讀。反而效果不好，面試稍微問(wèn)深入一點(diǎn)就答不出來(lái)了。平時(shí)有興趣多琢磨琢磨。按照難易程度，函數(shù)庫(kù) < 組件庫(kù) < 框架 < 工程化 分別典型代表 lodash < vant < vue < webpack
• 手?jǐn)]簡(jiǎn)易模型。像vue, webpack, babel 都有簡(jiǎn)易項(xiàng)目給你擼。有的創(chuàng)始人（尤哥）還直播手?jǐn)]。國(guó)外的更多，youtube 一搜一大堆。就算不看源碼，照著寫(xiě)出了簡(jiǎn)易 demo 對(duì)原理和理解提升都是很大的。
• 調(diào)試開(kāi)源項(xiàng)目。先把項(xiàng)目拉下來(lái)。在vscode里面跑下，核心函數(shù)多打幾個(gè)斷點(diǎn)。看看里面變量是怎么diff的。對(duì)理解更深刻了。

看了源碼是別人的，學(xué)到了是自己的。學(xué)習(xí)時(shí)候邊記筆記，邊思考原理，總結(jié)經(jīng)驗(yàn)。下面來(lái)談?wù)勄岸斯こ袒趺磁?/p>

四、前端工程化

現(xiàn)在最流行的打包工具 webpack 用起來(lái)。當(dāng)然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相關(guān)還是得掌握。

首先重點(diǎn)搞下babel、webpack。學(xué)習(xí)下編譯，打包的原理。自己配置下 webpack。嘗試自己去寫(xiě)下下 webpack 的 loader 和 plugin。學(xué)習(xí)這些之前要懂一點(diǎn) node.js， node.js 不需要全部學(xué)習(xí)。一般就日常用到讀寫(xiě)文件fs接口，path 路徑接口。這些 api 都不難寫(xiě)幾個(gè) demo 就懂了。基本上webpack 里面配置文件也沒(méi)用到多少 node 的東西。最后自己學(xué)會(huì)配置webpack的配置文件。

如果想深想去優(yōu)化打包體積和速度，就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。

當(dāng)然前端工程化不僅僅是這些，CI/CD可持續(xù)集成, Umi 了解下。shell各種腳本自動(dòng)化命令、代碼生成技術(shù)了解下。

五、性能優(yōu)化的方案

一般來(lái)說(shuō)。性能優(yōu)化沒(méi)什么系統(tǒng)化的文檔供人學(xué)習(xí)。完全靠一些經(jīng)驗(yàn)和自己的實(shí)踐。

我們常提到性能好壞是由什么來(lái)衡量呢？

訪(fǎng)問(wèn)頁(yè)面地址 --> 頁(yè)面首次加載數(shù)據(jù) --> 渲染出完整頁(yè)面的時(shí)長(zhǎng)

非首次情況下，命中緩存的加載緩存數(shù)據(jù) --> 渲染出完整頁(yè)面的時(shí)長(zhǎng)。

一般我從下面幾個(gè)方面著手去做，一般問(wèn)題都不大。

減小資源（靜態(tài)資源，后端加載的數(shù)據(jù)）大小

• 壓縮代碼HTML/CSS/JS
• 壓縮圖片、音視頻大小
• Tree-Sharking 消除無(wú)用代碼

以上webpack都可以搞定

避免同一時(shí)間的過(guò)多次數(shù)請(qǐng)求

• CSS 實(shí)現(xiàn)雪碧圖：使用background-position共享一張圖
• 圖片懶加載：監(jiān)聽(tīng)滾動(dòng)后offsetTop,  使用src 替換 src（真實(shí)路徑）
• 列表懶加載（分批加載）：監(jiān)聽(tīng)滾動(dòng)后offsetTop， 發(fā)送請(qǐng)求加載下一頁(yè)的數(shù)據(jù)
• 路由懶加載
• 代碼分包分塊加載（webpack）
• 預(yù)加載技術(shù)
• 小程序分包、預(yù)下載等。

利用緩存（空間換時(shí)間）

• CDN 內(nèi)容分發(fā)：獲取更近網(wǎng)絡(luò)節(jié)點(diǎn)緩存下來(lái)的靜態(tài)資源
• 瀏覽器緩存（自帶）
• 部分資源保存在LocalStorage或者APP緩存中（手動(dòng)操作）

其他

• SSR 服務(wù)端渲染：解決SPA框架帶來(lái)JS動(dòng)態(tài)渲染頁(yè)面帶來(lái)的延遲和白屏問(wèn)題。

這些都可以去實(shí)踐的，難度不大。難度大的地方可能是 dom 節(jié)點(diǎn)成千上萬(wàn)的時(shí)候渲染的性能問(wèn)題。這個(gè)場(chǎng)景遇到的很少，方案很多。不同人有不同解決方案，有功夫可以自己去嘗試嘗試。

上面提到很多點(diǎn)都可以深入到很深。由于篇幅原因，點(diǎn)到即止。

純粹是把一些我以前走過(guò)的彎路掰直了再分享給大家。畢竟不是《前端入門(mén)到精通》哈哈哈

六、學(xué)習(xí)移動(dòng)端web開(kāi)發(fā)

前端現(xiàn)在為什么這么火？各個(gè)公司都還挺缺優(yōu)秀的前端。原因在于技術(shù)紅利。

移動(dòng)端web流行起來(lái)之后，特別是H5和小程序，帶動(dòng)了多少前端就業(yè)，前端迅速取代了安卓和iOS 的大量崗位。

回到正題：所以作為前端人，移動(dòng)web一般是都要接觸的。不同于PC 端。

移動(dòng)端有哪些東西呢？不需要全部懂，差不多知道就行了。要用的時(shí)候再去學(xué)。

• 絕對(duì)單位換相對(duì)單位：px => rem / vw / rpx
• 彈性布局：使用flex、grid布局
• hairline （1px的粗線(xiàn)處理）：使用偽元素 + transform: scale(倍數(shù)) 縮放線(xiàn)框
• WebView 環(huán)境了解下
• 安卓iOS 兼容踩坑：點(diǎn)擊延遲、穿透、滾動(dòng)不流暢、安全區(qū)域等等。
• 小程序開(kāi)發(fā)相關(guān)踩坑
• JSBridge: H5 與App 通信
• H5動(dòng)畫(huà)制作
• 跨平臺(tái)框架：react native、weex、flutter 等等

簡(jiǎn)單的說(shuō)移動(dòng)web 就是：html/css/js 跑在手機(jī)app 里面的WebView（web運(yùn)行環(huán)境）。

小程序/公眾號(hào)就是在這個(gè)基礎(chǔ)上，將自己APP里面的WebView 租售給其他人使用。

微信APP ----- 提供SDK ----> 微信webview ----- 提供運(yùn)行環(huán)境-----> 公眾號(hào)h5 / 小程序

為什么微信可以容納幾乎無(wú)限的H5/小程序頁(yè)面呢？

因?yàn)楣娞?hào)/小程序的代碼都存儲(chǔ)在云端，通過(guò)不同的路由就可以給幾乎無(wú)數(shù)的開(kāi)發(fā)者使用。

使得微信成為一個(gè)運(yùn)行環(huán)境+入口的存在。

七、做前端我有沒(méi)有覺(jué)得吃力？

**剛做時(shí)前端不吃力。**因?yàn)槲沂擒浖こ虒?zhuān)業(yè)，學(xué)前端之前，學(xué)過(guò) C/C++、Java、PHP、.net 成績(jī)還不錯(cuò)基本都是90多分。感覺(jué)自己干后端也不吃力。實(shí)驗(yàn)室里面的項(xiàng)目都是前后都寫(xiě)。最?lèi)?ài) PHP，當(dāng)時(shí)最崇拜鳥(niǎo)哥。本以為以后就走上PHP后端工程師的道路了，成為鳥(niǎo)哥那樣的大神。

由于項(xiàng)目需要的原因，后來(lái)漸漸開(kāi)始學(xué)起學(xué) HTML、CSS、JavaScript 這些語(yǔ)法相關(guān)的東西。剛接觸時(shí)沒(méi)有感覺(jué)太大難度。

當(dāng)時(shí)就想著怎么把頁(yè)面搞好看，搞各種動(dòng)畫(huà)炫技。寫(xiě)一個(gè)小球從下面彈出來(lái)的效果，換各種姿勢(shì)彈出。當(dāng)時(shí)覺(jué)得前端真的有意思，就入了前端的坑。入坑前，以為前端就是搞各種漂亮的頁(yè)面，各種特性驚艷別人。

隨著接觸的越來(lái)越深。接觸到了 AJAX， jQuery ，Bootstrap，前端開(kāi)始注重體驗(yàn)。各種框架橫空出世 backbone => Angular => React => Vue 眼花繚亂。

折騰了 JQuery 開(kāi)始折騰 backbone 覺(jué)得前端還能這樣玩。有些迷茫了，感覺(jué)腦袋快要炸了，那段時(shí)間特別焦慮，瘋狂看書(shū)寫(xiě)代碼，怎么這么多東西要學(xué)啊。

JavaScript 也不精通，到原型就不理解了，雖然有C++,JAVA面向?qū)ο蟮闹R(shí)，但JavaScript 你怎么和別人玩的不是一個(gè)套路啊。當(dāng)時(shí)就都用ES6了， 行，學(xué)。都用Sass了，行，學(xué)。不學(xué)也可以，看不懂別人的代碼呀。

**畢業(yè)前為準(zhǔn)備校招前端工程師，真的很吃力。**就怕校招面試時(shí)，自己啥都不懂。

功夫不負(fù)有心人，校招時(shí)候順利拿到了自己滿(mǎn)意的Offer。記得當(dāng)時(shí)和面試官對(duì)答入流，好像找到知音一樣。面試官也是過(guò)來(lái)人，基本能問(wèn)的都問(wèn)了。

拿到Offer之后就去了實(shí)習(xí)。實(shí)習(xí)第一個(gè)任務(wù)：將一個(gè)ES6的后臺(tái)管理系統(tǒng)重構(gòu)成 Vue2.0 全家桶的項(xiàng)目。有個(gè)導(dǎo)師帶，但是她和我是不同項(xiàng)目，出了架構(gòu)以外代碼都是自己寫(xiě)。

這個(gè)階段還是收獲了很多：

• git 命令特別熟練。commit、stash、merge/rebase、cherry-pick、push/pull/fetch、reset等等基本都敲都特別多了
• 嚴(yán)格了代碼規(guī)范。Eslint、prettier 都用起來(lái)了
• 會(huì)自己寫(xiě)業(yè)務(wù)組件，會(huì)封裝高級(jí)組件、寫(xiě)常規(guī)頁(yè)面了。基本上大部分不是特別復(fù)雜的交互都o(jì)k。難一點(diǎn)多找下資料可以做出來(lái)。
• 學(xué)會(huì)管理API了。自己嘗試封裝了 axios。統(tǒng)一處理錯(cuò)誤和彈窗。
• 會(huì)抽取公共css、JavaScript 函數(shù)，編寫(xiě)CSS 變量和JavaScript 常量了
• webpack 能看懂配置文件了。

實(shí)習(xí)過(guò)后順利轉(zhuǎn)正。轉(zhuǎn)正之后，換了另外一個(gè)導(dǎo)師帶，加入到項(xiàng)目組作為一個(gè)比較大的項(xiàng)目的核心開(kāi)發(fā)。基本不再做管理系統(tǒng)了。主要做一個(gè)saas 平臺(tái)。涉及比較難的富文本編輯，UI 拖拽生產(chǎn)文章，數(shù)據(jù)可視化生產(chǎn)報(bào)表等等。還寫(xiě)了幾個(gè)谷歌瀏覽器插件。

• 開(kāi)始提升寫(xiě)頁(yè)面效率，寫(xiě)的比較快了。
• 研究 webpack 的插件打包編譯效率
• 研究 babel 編譯原理
• 研究了 Vue 編譯的一些原理
• 研究了 一些圖表的使用，多半使用的echart。常規(guī)圖表基本都用過(guò)。
• CI & CD 自己去搭建。學(xué)了一些 shell 腳本開(kāi)發(fā)。研究了 docker 相關(guān)的東西。
• 嘗試去寫(xiě)基礎(chǔ)組件，搭建基礎(chǔ)組件庫(kù)。
• 學(xué)習(xí) React 相關(guān)的語(yǔ)法。
• 研究富文本編輯，圖片壓縮裁剪原理等等
• 寫(xiě)一個(gè)簡(jiǎn)單的微信公眾號(hào)，接觸到了 H5 開(kāi)發(fā)。

工作第一年，基本上主戰(zhàn)場(chǎng)在PC 端。**前半年挺吃力，后半年熟練后游刃有余。**會(huì)懟產(chǎn)品，會(huì)噴設(shè)計(jì)，會(huì)和后端兄弟配合默契。和團(tuán)隊(duì)感情也很深了。

無(wú)奈項(xiàng)目由于某些原因終止，團(tuán)隊(duì)解散，調(diào)到新團(tuán)隊(duì)。在老東家工作一年多后，由于個(gè)人原因離開(kāi)去了一家新的的公司，主戰(zhàn)場(chǎng)從PC 到了手機(jī)。開(kāi)始接觸移動(dòng)H5、hybrid 開(kāi)發(fā)。

八、學(xué)習(xí)吃力的原因肯定是學(xué)習(xí)方法不太正確。總結(jié)下一般怎么才能真正學(xué)到東西

• 詳略得當(dāng)：前端知識(shí)太多，抓重點(diǎn)學(xué)，不要像背字典一樣。
• 不要急著寫(xiě)代碼，先理清流程（以一個(gè)函數(shù)為單位，可以先寫(xiě)注釋?zhuān)┰賹?xiě)代碼。
• 看視頻看講解是會(huì)誤以為自己會(huì)了，其實(shí)并沒(méi)有。
• 學(xué)會(huì)總結(jié)：一句話(huà)可以講清楚的事情，不要多說(shuō)一句。減少心智負(fù)擔(dān)。
• 不介意復(fù)制代碼，但是要知道這個(gè)代碼里面大致實(shí)現(xiàn)原理。感興趣自己重寫(xiě)一個(gè)。
• 較大的項(xiàng)目，不要急著看代碼。可以先把項(xiàng)目跑起來(lái)。通過(guò)改代碼里面的參數(shù)來(lái)理解里面的核心流程。
• demo 式編程。對(duì)于新框架，參考demo來(lái)上手更快更容易理解。
• 漸進(jìn)式編程。對(duì)于比較復(fù)雜的功能/需求。不要想著一氣呵成。先實(shí)現(xiàn)一個(gè)核心，每次往上面加細(xì)節(jié)，有點(diǎn)像繪畫(huà)。
• 斷點(diǎn)單步調(diào)試很有用，定位bug會(huì)更快。當(dāng)然有些不易調(diào)試的應(yīng)用選擇打log。一次打 log 要多打點(diǎn)，免得打完log,有得再加。
• 黑盒太多的項(xiàng)目，實(shí)在找不到bug原因。發(fā)給同事幫忙看。可能很快就能看出來(lái)。當(dāng)局者迷，旁觀(guān)者清。(很多時(shí)候是拼寫(xiě)的問(wèn)題)