做前端的你有沒有覺得很吃力？
作者：邵鎖
https://www.zhihu.com/question/425782106/answer/1543007211
前端工作兩年多。大部分前端原理、框架都能完全運(yùn)用。工作中幾乎遇不到解決不了的問題（除了那些惡心無法實(shí)現(xiàn)的需求）現(xiàn)在經(jīng)常被安排去面試新人（被安排去面試，主要是工作能力比較突出的原因，公司還有很多3年以上的員工）。下面說說我的學(xué)習(xí)方法或許對你有用！
一. 打好基礎(chǔ)不用說
HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。HTML重點(diǎn)掌握語義化。區(qū)分塊級和內(nèi)聯(lián)標(biāo)簽。其他查文檔就好了。還有就是定義 head 里面一些meta 了解下。CSS。重點(diǎn)看盒子模型，定位，層級，過渡，動畫和 transform。知道原理和規(guī)則。大部分工作都是照著設(shè)計稿化。掌握上面幾個99%還原也不難。接下來重點(diǎn)學(xué)習(xí)幾種常見的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。JavaScript。重點(diǎn)來了，紅寶書看一遍掌握基礎(chǔ)，進(jìn)階去看《你不知道的 JavaScript》。就這兩套足夠了，別搞那么多。每個知識點(diǎn)搞懂。ES6基本沒啥問題。下面幾個問題優(yōu)搞懂，優(yōu)先級如下：
this 用法，相關(guān)原理 原型/原型鏈 閉包 面向?qū)ο笙嚓P(guān) 同步異步/回調(diào)/promise/async、await 模塊化 CommonJS, AMD
先搞這懂這些比較難的概念，對你JS理解更加深入。接下來在開始看框架方面
二、框架方面
前期要會用，后期要懂原理。新人先搞 Vue。Vue 算是比較簡單的框架了，上手容易。照著官方文檔來問題不大。原理方面要提高自己認(rèn)識。學(xué)習(xí)怎么看源碼。github常去逛逛。學(xué)習(xí)框架之前，我其實(shí)特別建議，新人先去了解 Babel 和 webpack 不僅僅是使用。一些原理方面的東西工作中也會用到。babel 里面會有教你如何編譯代碼。webpack教你如和打包文件。自己手寫編譯器和打包工具也不是特別難。反正對之后看vue、react源碼幫助挺大。搞完 Vue 全家桶，去了解下 React，React hooks 學(xué)習(xí)下新的理念。再回過頭來看Vue。你會發(fā)現(xiàn)他們是如此的相似去又不同。多去實(shí)踐總結(jié)，對整體框架理解會越來越深刻。https://zhuanlan.zhihu.com/p/269056226zhuanlan.zhihu.co****m今天先馬到這里。想寫的太多，馬上就要上班下次有空再來碼...
三、如何看源碼
新人剛開始看源碼，會陷入兩個困境中。一是無從下手。二是看了之后感覺沒啥收獲。這個也很正常。一般我們熟知的框架都有個幾千甚至上萬個PR。太大細(xì)節(jié)會干擾你。掌握整個節(jié)奏和流程。學(xué)習(xí)原理也比較吃力。就連找個入口都像大海撈針一樣。建議從下面幾個方面入手：
挑簡單的上手。別一開始就搞 vue、react、webpack。太難，會直接勸退新人。不要為了面試而去讀。反而效果不好，面試稍微問深入一點(diǎn)就答不出來了。平時有興趣多琢磨琢磨。按照難易程度，函數(shù)庫 < 組件庫 < 框架 < 工程化 分別典型代表 lodash < vant < vue < webpack 手?jǐn)]簡易模型。像vue, webpack, babel 都有簡易項(xiàng)目給你擼。有的創(chuàng)始人（尤哥）還直播手?jǐn)]。國外的更多，youtube 一搜一大堆。就算不看源碼，照著寫出了簡易 demo 對原理和理解提升都是很大的。 調(diào)試開源項(xiàng)目。先把項(xiàng)目拉下來。在vscode里面跑下，核心函數(shù)多打幾個斷點(diǎn)。看看里面變量是怎么diff的。對理解更深刻了。
看了源碼是別人的，學(xué)到了是自己的。學(xué)習(xí)時候邊記筆記，邊思考原理，總結(jié)經(jīng)驗(yàn)。下面來談?wù)勄岸斯こ袒趺磁?/p>
四、前端工程化
現(xiàn)在最流行的打包工具 webpack 用起來。當(dāng)然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相關(guān)還是得掌握。首先重點(diǎn)搞下babel、webpack。學(xué)習(xí)下編譯，打包的原理。自己配置下 webpack。嘗試自己去寫下下 webpack 的 loader 和 plugin。學(xué)習(xí)這些之前要懂一點(diǎn) node.js， node.js 不需要全部學(xué)習(xí)。一般就日常用到讀寫文件fs接口，path 路徑接口。這些 api 都不難寫幾個 demo 就懂了。基本上webpack 里面配置文件也沒用到多少 node 的東西。最后自己學(xué)會配置webpack的配置文件。如果想深想去優(yōu)化打包體積和速度，就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。當(dāng)然前端工程化不僅僅是這些，CI/CD可持續(xù)集成, Umi 了解下。shell各種腳本自動化命令、代碼生成技術(shù)了解下。
五、性能優(yōu)化的方案
一般來說。性能優(yōu)化沒什么系統(tǒng)化的文檔供人學(xué)習(xí)。完全靠一些經(jīng)驗(yàn)和自己的實(shí)踐。我們常提到性能好壞是由什么來衡量呢？訪問頁面地址 --> 頁面首次加載數(shù)據(jù) --> 渲染出完整頁面的時長非首次情況下，命中緩存的加載緩存數(shù)據(jù) --> 渲染出完整頁面的時長。一般我從下面幾個方面著手去做，一般問題都不大。
減小資源（靜態(tài)資源，后端加載的數(shù)據(jù)）大小
壓縮代碼HTML/CSS/JS 壓縮圖片、音視頻大小 Tree-Sharking 消除無用代碼
以上webpack都可以搞定。
避免同一時間的過多次數(shù)請求
CSS 實(shí)現(xiàn)雪碧圖：使用background-position共享一張圖 圖片懶加載：監(jiān)聽滾動后offsetTop, ?使用src 替換 src（真實(shí)路徑） 列表懶加載（分批加載）：監(jiān)聽滾動后offsetTop， 發(fā)送請求加載下一頁的數(shù)據(jù) 路由懶加載 代碼分包分塊加載（webpack） 預(yù)加載技術(shù) 小程序分包、預(yù)下載等。
利用緩存（空間換時間）
CDN 內(nèi)容分發(fā)：獲取更近網(wǎng)絡(luò)節(jié)點(diǎn)緩存下來的靜態(tài)資源 瀏覽器緩存（自帶） 部分資源保存在LocalStorage或者APP緩存中（手動操作）
其他
SSR 服務(wù)端渲染：解決SPA框架帶來JS動態(tài)渲染頁面帶來的延遲和白屏問題。
這些都可以去實(shí)踐的，難度不大。難度大的地方可能是 dom 節(jié)點(diǎn)成千上萬的時候渲染的性能問題。這個場景遇到的很少，方案很多。不同人有不同解決方案，有功夫可以自己去嘗試嘗試。上面提到很多點(diǎn)都可以深入到很深。由于篇幅原因，點(diǎn)到即止。純粹是把一些我以前走過的彎路掰直了再分享給大家。畢竟不是《前端入門到精通》哈哈哈
六、學(xué)習(xí)移動端web開發(fā)
前端現(xiàn)在為什么這么火？各個公司都還挺缺優(yōu)秀的前端。原因在于技術(shù)紅利。移動端web流行起來之后，特別是H5和小程序，帶動了多少前端就業(yè)，前端迅速取代了安卓和iOS 的大量崗位。回到正題：所以作為前端人，移動web一般是都要接觸的。不同于PC 端。移動端有哪些東西呢？?不需要全部懂，差不多知道就行了。要用的時候再去學(xué)。
絕對單位換相對單位：px => rem / vw / rpx 彈性布局：使用flex、grid布局 hairline （1px的粗線處理）：使用偽元素 + transform: scale(倍數(shù)) 縮放線框 WebView 環(huán)境了解下 安卓iOS 兼容踩坑：點(diǎn)擊延遲、穿透、滾動不流暢、安全區(qū)域等等。 小程序開發(fā)相關(guān)踩坑 JSBridge: H5 與App 通信 H5動畫制作 跨平臺框架：react native、weex、flutter 等等
簡單的說移動web 就是：html/css/js 跑在手機(jī)app 里面的WebView（web運(yùn)行環(huán)境）。小程序/公眾號就是在這個基礎(chǔ)上，將自己APP里面的WebView 租售給其他人使用。微信APP ----- 提供SDK ----> 微信webview ----- 提供運(yùn)行環(huán)境-----> 公眾號h5 / 小程序**為什么微信可以容納幾乎無限的H5/小程序頁面呢？**因?yàn)楣娞?小程序的代碼都存儲在云端，通過不同的路由就可以給幾乎無數(shù)的開發(fā)者使用。使得微信成為一個運(yùn)行環(huán)境+入口的存在。
七、做前端我有沒有覺得吃力？
剛做時前端不吃力。因?yàn)槲沂擒浖こ虒I(yè)，學(xué)前端之前，學(xué)過 C/C++、Java、PHP、.net 成績還不錯基本都是90多分。感覺自己干后端也不吃力。實(shí)驗(yàn)室里面的項(xiàng)目都是前后都寫。最愛 PHP，當(dāng)時最崇拜鳥哥。本以為以后就走上PHP后端工程師的道路了，成為鳥哥那樣的大神。由于項(xiàng)目需要的原因，后來漸漸開始學(xué)起學(xué) HTML、CSS、JavaScript 這些語法相關(guān)的東西。剛接觸時沒有感覺太大難度。當(dāng)時就想著怎么把頁面搞好看，搞各種動畫炫技。寫一個小球從下面彈出來的效果，換各種姿勢彈出。當(dāng)時覺得前端真的有意思，就入了前端的坑。入坑前，以為前端就是搞各種漂亮的頁面，各種特性驚艷別人。隨著接觸的越來越深。接觸到了 AJAX， jQuery ，Bootstrap，前端開始注重體驗(yàn)。各種框架橫空出世 backbone => Angular => React => Vue 眼花繚亂。折騰了 JQuery 開始折騰 backbone 覺得前端還能這樣玩。有些迷茫了，感覺腦袋快要炸了，那段時間特別焦慮，瘋狂看書寫代碼，怎么這么多東西要學(xué)啊。JavaScript 也不精通，到原型就不理解了，雖然有C++,JAVA面向?qū)ο蟮闹R，但JavaScript 你怎么和別人玩的不是一個套路啊。當(dāng)時就都用ES6了， 行，學(xué)。都用Sass了，行，學(xué)。不學(xué)也可以，看不懂別人的代碼呀。畢業(yè)前為準(zhǔn)備校招前端工程師，真的很吃力。就怕校招面試時，自己啥都不懂。功夫不負(fù)有心人，校招時候順利拿到了自己滿意的Offer。記得當(dāng)時和面試官對答入流，好像找到知音一樣。面試官也是過來人，基本能問的都問了。拿到Offer之后就去了實(shí)習(xí)。實(shí)習(xí)第一個任務(wù)：將一個ES6的后臺管理系統(tǒng)重構(gòu)成 Vue2.0 全家桶的項(xiàng)目。有個導(dǎo)師帶，但是她和我是不同項(xiàng)目，出了架構(gòu)以外代碼都是自己寫。這個階段還是收獲了很多：
git 命令特別熟練。commit、stash、merge/rebase、cherry-pick、push/pull/fetch、reset等等基本都敲都特別多了 嚴(yán)格了代碼規(guī)范。Eslint、prettier 都用起來了 會自己寫業(yè)務(wù)組件，會封裝高級組件、寫常規(guī)頁面了。基本上大部分不是特別復(fù)雜的交互都o(jì)k。難一點(diǎn)多找下資料可以做出來。 學(xué)會管理API了。自己嘗試封裝了 axios。統(tǒng)一處理錯誤和彈窗。 會抽取公共css、JavaScript 函數(shù)，編寫CSS 變量和JavaScript 常量了 webpack 能看懂配置文件了。
實(shí)習(xí)過后順利轉(zhuǎn)正。轉(zhuǎn)正之后，換了另外一個導(dǎo)師帶，加入到項(xiàng)目組作為一個比較大的項(xiàng)目的核心開發(fā)。基本不再做管理系統(tǒng)了。主要做一個saas 平臺。涉及比較難的富文本編輯，UI 拖拽生產(chǎn)文章，數(shù)據(jù)可視化生產(chǎn)報表等等。還寫了幾個谷歌瀏覽器插件。
開始提升寫頁面效率，寫的比較快了。 研究 webpack 的插件打包編譯效率 研究 babel 編譯原理 研究了 Vue 編譯的一些原理 研究了 一些圖表的使用，多半使用的echart。常規(guī)圖表基本都用過。 CI & CD 自己去搭建。學(xué)了一些 shell 腳本開發(fā)。研究了 docker 相關(guān)的東西。 嘗試去寫基礎(chǔ)組件，搭建基礎(chǔ)組件庫。 學(xué)習(xí) React 相關(guān)的語法。 研究富文本編輯，圖片壓縮裁剪原理等等 寫一個簡單的微信公眾號，接觸到了 H5 開發(fā)。
工作第一年，基本上主戰(zhàn)場在PC 端。**前半年挺吃力，后半年熟練后游刃有余。**會懟產(chǎn)品，會噴設(shè)計，會和后端兄弟配合默契。和團(tuán)隊(duì)感情也很深了。無奈項(xiàng)目由于某些原因終止，團(tuán)隊(duì)解散，調(diào)到新團(tuán)隊(duì)。在老東家工作一年多后，由于個人原因離開去了一家新的的公司，主戰(zhàn)場從PC 到了手機(jī)。開始接觸移動H5、hybrid 開發(fā)。
八、學(xué)習(xí)吃力的原因肯定是學(xué)習(xí)方法不太正確，總結(jié)下一般怎么才能真正學(xué)到東西**
詳略得當(dāng)：前端知識太多，抓重點(diǎn)學(xué)，不要像背字典一樣。 不要急著寫代碼，先理清流程（以一個函數(shù)為單位，可以先寫注釋）再寫代碼。 看視頻看講解是會誤以為自己會了，其實(shí)并沒有。 學(xué)會總結(jié)：一句話可以講清楚的事情，不要多說一句。減少心智負(fù)擔(dān)。 不介意復(fù)制代碼，但是要知道這個代碼里面大致實(shí)現(xiàn)原理。感興趣自己重寫一個。 較大的項(xiàng)目，不要急著看代碼。可以先把項(xiàng)目跑起來。通過改代碼里面的參數(shù)來理解里面的核心流程。 demo 式編程。對于新框架，參考demo來上手更快更容易理解。 漸進(jìn)式編程。對于比較復(fù)雜的功能/需求。不要想著一氣呵成。先實(shí)現(xiàn)一個核心，每次往上面加細(xì)節(jié)，有點(diǎn)像繪畫。 斷點(diǎn)單步調(diào)試很有用，定位bug會更快。當(dāng)然有些不易調(diào)試的應(yīng)用選擇打log。一次打 log 要多打點(diǎn)，免得打完log,有得再加。 黑盒太多的項(xiàng)目，實(shí)在找不到bug原因。發(fā)給同事幫忙看。可能很快就能看出來。當(dāng)局者迷，旁觀者清。(很多時候是拼寫的問題)
點(diǎn)個『在看』支持下?