前端開發兩年，你有沒有以爲很吃力？

時間 2021-05-19

標籤 php css html 前端 vue java node mysql react jquery 欄目 PHP 简体版

原文原文鏈接

前言

前端工做兩年多。大部分前端原理、框架都能徹底運用。工做中幾乎遇不到解決不了的問題（除了那些噁心沒法實現的需求）如今常常被安排去面試新人（被安排去面試，主要是工做能力比較突出的緣由，公司還有不少3年以上的員工）。下面說說個人學習方法或許對你有用！php

1、打好基礎不用說

HTML、CSS、JavaScript 三大件，徹底掌握。不懂得就直接查 MDN。HTML重點掌握語義化。區分塊級和內聯標籤。其餘查文檔就行了。還有就是定義 head 裏面一些meta 瞭解下。css

CSS。重點看盒子模型，定位，層級，過渡，動畫和 transform。知道原理和規則。大部分工做都是照着設計稿化。掌握上面幾個99%還原也不難。接下來重點學習幾種常見的佈局。完了以後去搞flex。最後搞下sass、less。基本就差很少了。html

JavaScript。重點來了，紅寶書看一遍掌握基礎，進階去看《你不知道的 JavaScript》。就這兩套足夠了，別搞那麼多。每一個知識點搞懂。ES6基本沒啥問題。下面幾個問題優搞懂，優先級以下：前端

this 用法，相關原理
原型/原型鏈
閉包
面向對象相關
同步異步/回調/promise/async、await
模塊化 CommonJS, AMD
先搞這懂這些比較難的概念，對你JS理解更加深刻。接下來在開始看框架方面

2、框架方面

前期要會用，後期要懂原理。vue

新人先搞 Vue。Vue 算是比較簡單的框架了，上手容易。照着官方文檔來問題不大。原理方面要提升本身認識。學習怎麼看源碼。github常去逛逛。java

學習框架以前，我其實特別建議，新人先去了解 Babel 和 webpack 不只僅是使用。一些原理方面的東西工做中也會用到。babel 裏面會有教你如何編譯代碼。webpack教你如和打包文件。本身手寫編譯器和打包工具也不是特別難。反正對以後看vue、react源碼幫助挺大。node

搞完 Vue 全家桶，去了解下 React，React hooks 學習下新的理念。再回過頭來看Vue。你會發現他們是如此的類似去又不一樣。mysql

多去實踐總結，對總體框架理解會愈來愈深入。react

今天先馬到這裏。想寫的太多，立刻就要上班下次有空再來碼...jquery

3、如何看源碼

新人剛開始看源碼，會陷入兩個困境中。一是無從下手。二是看了以後感受沒啥收穫。

這個也很正常。通常咱們熟知的框架都有個幾千甚至上萬個PR。太大細節會干擾你。掌握整個節奏和流程。學習原理也比較吃力。就連找個入口都像大海撈針同樣。建議從下面幾個方面入手：

挑簡單的上手。別一開始就搞 vue、react、webpack。太難，會直接勸退新人。不要爲了面試而去讀。反而效果很差，面試稍微問深刻一點就答不出來了。平時有興趣多琢磨琢磨。按照難易程度，函數庫 < 組件庫 < 框架 < 工程化分別典型表明 lodash < vant < vue < webpack
手擼簡易模型。像vue, webpack, babel 都有簡易項目給你擼。有的創始人（尤哥）還直播手擼。國外的更多，youtube 一搜一大堆。就算不看源碼，照着寫出了簡易 demo 對原理和理解提高都是很大的。
調試開源項目。先把項目拉下來。在vscode裏面跑下，核心函數多打幾個斷點。看看裏面變量是怎麼diff的。對理解更深入了。

看了源碼是別人的，學到了是本身的。學習時候邊記筆記，邊思考原理，總結經驗。下面來談談前端工程化怎麼弄。

4、前端工程化

如今最流行的打包工具 webpack 用起來。固然直接用 vue-cli二、vue-cli三、create-react 都是能夠的。可是 webpack 相關仍是得掌握。

首先重點搞下babel、webpack。學習下編譯，打包的原理。本身配置下 webpack。嘗試本身去寫下下 webpack 的 loader 和 plugin。學習這些以前要懂一點 node.js， node.js 不須要所有學習。通常就平常用到讀寫文件fs接口，path 路徑接口。這些 api 都不難寫幾個 demo 就懂了。基本上webpack 裏面配置文件也沒用到多少 node 的東西。最後本身學會配置webpack的配置文件。

若是想深想去優化打包體積和速度，就須要去了解不少webpack插件。webpack 裏面最核心的就是插件了。

固然前端工程化不只僅是這些，CI/CD可持續集成, Umi 瞭解下。shell各類腳本自動化命令、代碼生成技術瞭解下。

5、性能優化的方案

通常來講。性能優化沒什麼系統化的文檔供人學習。徹底靠一些經驗和本身的實踐。

咱們常提到性能好壞是由什麼來衡量呢？

訪問頁面地址 --> 頁面首次加載數據 --> 渲染出完整頁面的時長

非首次狀況下，命中緩存的加載緩存數據 --> 渲染出完整頁面的時長。

通常我從下面幾個方面着手去作，通常問題都不大。

減少資源（靜態資源，後端加載的數據）大小

壓縮代碼HTML/CSS/JS
壓縮圖片、音視頻大小
Tree-Sharking 消除無用代碼
以上webpack均可以搞定

避免同一時間的過屢次數請求

CSS 實現雪碧圖：使用background-position共享一張圖
圖片懶加載：監聽滾動後offsetTop, 使用src 替換 src（真實路徑）
列表懶加載（分批加載）：監聽滾動後offsetTop，發送請求加載下一頁的數據
路由懶加載
代碼分包分塊加載（webpack）
預加載技術
小程序分包、預下載等。

利用緩存（空間換時間）

CDN 內容分發：獲取更近網絡節點緩存下來的靜態資源
瀏覽器緩存（自帶）
部分資源保存在LocalStorage或者APP緩存中（手動操做）

其餘

SSR 服務端渲染：解決SPA框架帶來JS動態渲染頁面帶來的延遲和白屏問題。

這些均可以去實踐的，難度不大。難度大的地方多是 dom 節點成千上萬的時候渲染的性能問題。這個場景遇到的不多，方案不少。不一樣人有不一樣解決方案，有功夫能夠本身去嘗試嘗試。

上面提到不少點均可以深刻到很深。因爲篇幅緣由，點到即止。

純粹是把一些我之前走過的彎路掰直了再分享給你們。畢竟不是《前端入門到精通》哈哈哈

6、學習移動端web開發

前端如今爲何這麼火？各個公司都還挺缺優秀的前端。緣由在於技術紅利。

移動端web流行起來以後，特別是H5和小程序，帶動了多少前端就業，前端迅速取代了安卓和iOS 的大量崗位。

回到正題：因此做爲前端人，移動web通常是都要接觸的。不一樣於PC 端。

移動端有哪些東西呢？不須要所有懂，差很少知道就好了。要用的時候再去學。

絕對單位換相對單位：px => rem / vw / rpx
彈性佈局：使用flex、grid佈局
hairline （1px的粗線處理）：使用僞元素 + transform: scale(倍數) 縮放線框
WebView 環境瞭解下
安卓iOS 兼容踩坑：點擊延遲、穿透、滾動不流暢、安全區域等等。
小程序開發相關踩坑
JSBridge: H5 與App 通訊
H5動畫製做
跨平臺框架：react native、weex、flutter 等等
簡單的說移動web 就是：html/css/js 跑在手機app 裏面的WebView（web運行環境）。

小程序/公衆號就是在這個基礎上，將本身APP裏面的WebView 租售給其餘人使用。

微信APP ----- 提供SDK ----> 微信webview ----- 提供運行環境-----> 公衆號h5 / 小程序

爲何微信能夠容納幾乎無限的H5/小程序頁面呢？

由於公衆號/小程序的代碼都存儲在雲端，經過不一樣的路由就能夠給幾乎無數的開發者使用。

使得微信成爲一個運行環境+入口的存在。

7、作前端我有沒有以爲吃力？

剛作時前端不吃力。由於我是軟件工程專業，學前端以前，學過 C/C++、Java、PHP、.net 成績還不錯基本都是90多分。感受本身幹後端也不吃力。實驗室裏面的項目都是先後都寫。最愛 PHP，當時最崇拜鳥哥。本覺得之後就走上PHP後端工程師的道路了，成爲鳥哥那樣的大神。

因爲項目須要的緣由，後來漸漸開始學起學 HTML、CSS、JavaScript 這些語法相關的東西。剛接觸時沒有感受太大難度。

當時就想着怎麼把頁面搞好看，搞各類動畫炫技。寫一個小球從下面彈出來的效果，換各類姿式彈出。當時以爲前端真的有意思，就入了前端的坑。入坑前，覺得前端就是搞各類漂亮的頁面，各類特性驚豔別人。

隨着接觸的愈來愈深。接觸到了 AJAX， jQuery ，Bootstrap，前端開始注重體驗。各類框架橫空出世 backbone => Angular => React => Vue 眼花繚亂。

折騰了 JQuery 開始折騰 backbone 以爲前端還能這樣玩。有些迷茫了，感受腦殼快要炸了，那段時間特別焦慮，瘋狂看書寫代碼，怎麼這麼多東西要學啊。

JavaScript 也不精通，到原型就不理解了，雖然有C++,JAVA面向對象的知識，但JavaScript 你怎麼和別人玩的不是一個套路啊。當時就都用ES6了，行，學。都用Sass了，行，學。不學也能夠，看不懂別人的代碼呀。

畢業前爲準備校招前端工程師，真的很吃力。就怕校招面試時，本身啥都不懂。

功夫不負有心人，校招時候順利拿到了本身滿意的Offer。記得當時和麪試官對答入流，好像找到知音同樣。面試官也是過來人，基本能問的都問了。

拿到Offer以後就去了實習。實習第一個任務：將一個ES6的後臺管理系統重構成 Vue2.0 全家桶的項目。有個導師帶，可是她和我是不一樣項目，出了架構之外代碼都是本身寫。

這個階段仍是收穫了不少：

git 命令特別熟練。commit、stash、merge/rebase、cherry-pick、push/pull/fetch、reset等等基本都敲都特別多了
嚴格了代碼規範。Eslint、prettier 都用起來了
會本身寫業務組件，會封裝高級組件、寫常規頁面了。基本上大部分不是特別複雜的交互都ok。難一點多找下資料能夠作出來。
學會管理API了。本身嘗試封裝了 axios。統一處理錯誤和彈窗。
會抽取公共css、JavaScript 函數，編寫CSS 變量和JavaScript 常量了
webpack 能看懂配置文件了。

實習事後順利轉正。轉正以後，換了另一個導師帶，加入到項目組做爲一個比較大的項目的核心開發。基本再也不作管理系統了。主要作一個saas 平臺。涉及比較難的富文本編輯，UI 拖拽生產文章，數據可視化生產報表等等。還寫了幾個谷歌瀏覽器插件。

開始提高寫頁面效率，寫的比較快了。
研究 webpack 的插件打包編譯效率
研究 babel 編譯原理
研究了 Vue 編譯的一些原理
研究了一些圖表的使用，多半使用的echart。常規圖表基本都用過。
CI & CD 本身去搭建。學了一些 shell 腳本開發。研究了 docker 相關的東西。
嘗試去寫基礎組件，搭建基礎組件庫。
學習 React 相關的語法。
研究富文本編輯，圖片壓縮裁剪原理等等
寫一個簡單的微信公衆號，接觸到了 H5 開發。

工做第一年，基本上主戰場在PC 端。前半年挺吃力，後半年熟練後遊刃有餘。會懟產品，會噴設計，會和後端兄弟配合默契。和團隊感情也很深了。

無奈項目因爲某些緣由終止，團隊解散，調到新團隊。在老東家工做一年多後，因爲我的緣由離開去了一家新的的公司，主戰場從PC 到了手機。開始接觸移動H五、hybrid 開發。

8、學習吃力的緣由確定是學習方法不太正確

總結下通常怎麼才能真正學到東西

詳略得當：前端知識太多，抓重點學，不要像背字典同樣。
不要急着寫代碼，先理清流程（以一個函數爲單位，能夠先寫註釋）再寫代碼。
看視頻看講解是會誤覺得本身會了，其實並無。
學會總結：一句話能夠講清楚的事情，不要多說一句。減小心智負擔。
不介意複製代碼，可是要知道這個代碼裏面大體實現原理。感興趣本身重寫一個。
較大的項目，不要急着看代碼。能夠先把項目跑起來。經過改代碼裏面的參數來理解裏面的核心流程。
demo 式編程。對於新框架，參考demo來上手更快更容易理解。
漸進式編程。對於比較複雜的功能/需求。不要想着一鼓作氣。先實現一個核心，每次往上面加細節，有點像繪畫。
斷點單步調試頗有用，定位bug會更快。固然有些不易調試的應用選擇打log。一次打 log 要多打點，省得打完log,有得再加。
黑盒太多的項目，實在找不到bug緣由。發給同事幫忙看。可能很快就能看出來。當局者迷，旁觀者清。(不少時候是拼寫的問題)

9、最後

我總結一下前端面試的知識點，但願能對即將面試和將來面試的小老弟們，有所幫助！skr~~skr（面試題完整文檔劃到文末直接免費領取。）

HTML

HTML5新特性，語義化
瀏覽器的標準模式和怪異模式
xhtml和html的區別
使用data-的好處
meta標籤
canvas
HTML廢棄的標籤
IE6 bug，和一些定位寫法
css js放置位置和緣由
什麼是漸進式渲染
html模板語言
meta viewport原理

CSS

盒模型，box-sizing
CSS3新特性，僞類，僞元素，錨僞類
CSS實現隱藏頁面的方式
如何實現水平居中和垂直居中。
說說position，display
請解釋*{box-sizing:border-box;}的做用，並說明使用它的好處
浮動元素引發的問題和解決辦法？絕對定位和相對定位，元素浮動後的display值
link和@import引入css的區別
解釋一下css3的flexbox，以及適用場景
inline和inline-block的區別
哪些是塊級元素那些是行級元素，各有什麼特色
grid佈局
table佈局的做用
實現兩欄佈局有哪些方法？
css dpi
你知道attribute和property的區別麼
css佈局問題？css實現三列布局怎麼作？若是中間是自適應又怎麼作？
流式佈局如何實現，響應式佈局如何實現
移動端佈局方案
實現三欄佈局（聖盃佈局，雙飛翼佈局，flex佈局）
清除浮動的原理
overflow:hidden有什麼缺點？
padding百分比是相對於父級寬度仍是自身的寬度
css3動畫，transition和animation的區別，animation的屬性，加速度，重力的模擬實現
CSS 3 如何實現旋轉圖片（transform: rotate）
sass less
對移動端開發瞭解多少？（響應式設計、Zepto；@media、viewport、JavaScript 正則表達式判斷平臺。）
什麼是bfc，如何建立bfc？解決什麼問題？
CSS中的長度單位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）
CSS 選擇器的優先級是怎樣的？
雪碧圖
svg
媒體查詢的原理是什麼？
CSS 的加載是異步的嗎？表如今什麼地方？
常遇到的瀏覽器兼容性問題有哪些？經常使用的hack的技巧
外邊距合併
解釋一下「::before」和「:after」中的雙冒號和單冒號的區別

JS

js的基本類型有哪些？引用類型有哪些？null和undefined的區別。
如何判斷一個變量是Array類型？如何判斷一個變量是Number類型？（都不止一種）
Object是引用類型嘛？引用類型和基本類型有什麼區別？哪一個是存在堆哪個是存在棧上面的？
JS常見的dom操做api
解釋一下事件冒泡和事件捕獲
事件委託（手寫例子），事件冒泡和捕獲，如何阻止冒泡？如何組織默認事件？
對閉包的理解？何時構成閉包？閉包的實現方法？閉包的優缺點？
this有哪些使用場景？跟C,Java中的this有什麼區別？如何改變this的值？
call，apply，bind
顯示原型和隱式原型，手繪原型鏈，原型鏈是什麼？爲何要有原型鏈
建立對象的多種方式
實現繼承的多種方式和優缺點
new 一個對象具體作了什麼
手寫Ajax，XMLHttpRequest
變量提高
舉例說明一個匿名函數的典型用例
指出JS的宿主對象和原生對象的區別，爲何擴展JS內置對象不是好的作法？有哪些內置對象和內置函數？
attribute和property的區別
document load和document DOMContentLoaded兩個事件的區別
=== 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
typeof可以獲得哪些值
什麼是「use strict」,好處和壞處
函數的做用域是什麼？js 的做用域有幾種？
JS如何實現重載和多態
經常使用的數組api，字符串api
原生事件綁定（跨瀏覽器），dom0和dom2的區別？
給定一個元素獲取它相對於視圖窗口的座標
如何實現圖片滾動懶加載
js 的字符串類型有哪些方法？正則表達式的函數怎麼使用？
深拷貝
編寫一個通用的事件監聽函數
web端cookie的設置和獲取
setTimeout和promise的執行順序
JavaScript 的事件流模型都有什麼？
navigator對象，location和history
js的垃圾回收機制
內存泄漏的緣由和場景
DOM事件的綁定的幾種方式
DOM事件中target和currentTarget的區別
typeof 和 instanceof 區別，instanceof原理
js動畫和css3動畫比較
JavaScript 倒計時（setTimeout）
js處理異常
js的設計模式知道那些
輪播圖的實現，以及輪播圖組件開發，輪播10000張圖片過程
websocket的工做原理和機制。
手指點擊能夠觸控的屏幕時，是什麼事件？
什麼是函數柯里化？以及說一下JS的API有哪些應用到了函數柯里化的實現？(函數柯里化一些瞭解，以及在* 函數式編程的應用，最後說了一下JS中bind函數和數組的reduce方法用到了函數柯里化。)
JS代碼調試