前端基礎須要學什麼？這篇文章幫你梳理清楚，並附有前端面試551道題

前言

以前小編寫了一篇前端面試套餐：Vue面試題總結+JavaScript前端經典面試題+100道 CSS 面試題文章，有講到打算後面單獨寫一篇詳講前端基礎學什麼，拖了這麼久終於出來了哈哈哈哈。至於前端怎麼學，小夥伴們能夠看看這篇文章，有詳細講了3個學習方法，點擊這直接跳轉到文章。讓咱們一塊兒看看，前端基礎都要學些什麼？

拋開面試，系統學習

在一切以前，應該系統地去學習前端的基礎知識。 對前端而言，這些基礎包括 HTML，CSS，JavaScript，瀏覽器原理，網絡協議，MVVM 框架和一些必要的計算機基礎等。應該先拋開面試的目的去學習這些知識，創建本身的知識體系，而後再結合面試題，運用掌握的知識去理解並解決面試題。

JavaScript 基礎

JavaScript 基礎很是重要，相比於大同小異的框架面試題，JavaScript 能夠問不少東西，並且細問起來也有不少有意思東西，若是時間充足能夠系統地過一遍。（現實每每是沒時間...）

• 執行上下文/做用域鏈/閉包
• this/call/apply/bind
• 原型/繼承
• Promise
• 深淺拷貝
• 事件機制/Event Loop
• 函數式編程
• service worker/web worker
• 經常使用方法
  ...

CSS 基礎

• position
• 行內元素/塊狀元素
• flex
• 1px
• 重繪迴流
• Sass/Less
• 居中/常見佈局
• 層疊上下文
  ...

框架

這一塊主要是關注 Vue 和 React 的共性和特性，側重 Vue（我工做中是主 Vue），過程當中看了一些源碼，加深理解。

• MVVM
• 生命週期
• 數據綁定
• 狀態管理
• 組件通訊
• computed/watch 原理
• Virtual DOM
• diff
• React Hook
• React Hoc/Vue mixin
• Vue 和 React 有什麼不一樣
  ...

工程化

對於寫業務的同窗來講，以前可能沒有大規模接觸過工程化的東西，不過這並不影響咱們能夠本身去學習和了解。

• webpack
• babel
• 模板引擎
• 前端發佈
• weex
  ...

性能優化

性能優化是必備技能，必須瞭解。

• 打包優化
• 網絡優化
• 代碼優化
  ...

TypeScript

TypeScript 不敢寫本身深刻，只是瞭解，因此只是複習了一些基礎的知識點和比較簡單的問題，好比：JavaScript 和 TypeScript 有什麼區別，在進行項目選型時，什麼因素會讓你選擇 TypeScript 等。

網絡/瀏覽器

對於前端開發來講，網絡和瀏覽器也屬於必須瞭解的知識點。

• HTTP
• DNS
• TCP
• HTTPS
• CDN
  ...

經典問題，從輸入 URL 到頁面展現，發生了什麼。這個問題我以爲仍是很考驗廣度和深度的，能夠好好思考一下，每一個人可能回答的結果都會是不同的。

計算機基礎

• 設計模式
• 數據結構
• 基礎算法

• 安全
  ...

  學習輸入，面試輸出

  不少人刷了不少面試題，看了不少面經，知識儲備充分，但面試的時候，即便是本身熟悉的考點，也很難令面試官滿意。其關鍵緣由在於，學習是一種輸入，但面試是一種輸出。

面試須要的不是你懂，而是要讓面試官知道你懂，你必須有能力將考點中的要點聯繫起來，連貫的說出來，這並非看過一次就能達到的。但很多人覺得看過這類文章，知道這個點，就能夠了。事實上，只是「知道」遠遠不夠。

這種問題，根本上，是對技術點的不夠深刻，不夠熟悉，沒有造成本身的理解。我也經歷過這一過程，你知道這些概念，本身也能分清，但難以向別人講明白。簡單測試一個CSS問題：什麼是BFC？ 你確定知道叫塊級格式化上下文，問題是，怎麼向面試官解釋這個東西？

爲了解決這個問題，首先，學習過程注重理解而不是記憶。
第二，一個知識點，須要經過多篇文章學習，重複學習，加深理解，總結出本身的答案和見解。
第三，刻意練習。若是你有夥伴，能夠相互提問。若是沒有，也能夠自問自答。

HTML

• 你是怎麼理解HTML語義化
• 你用過哪些HTML5標籤
• meta viewport 是作什麼用的，怎麼寫？
• H5是什麼
• label標籤的做用
• 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
• a標籤中 如何禁用href 跳轉頁面 或 定位連接
• canvas在標籤上設置寬高 和在style中設置寬高有什麼區別
• 你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
• iframe有哪些缺點？

CSS

• 頁面渲染時，dom 元素所採用的 佈局模型,可經過box-sizing進行設置。根據計算寬高的
• ie盒模型算上border、padding及自身（不算margin），標準的只算上自身窗體的大
• 幾種得到寬高的方式 :
• 拓展各類得到寬高的方式 :
• css reset和normalize.css有什麼區別：
• 居中方法：
• css優先肯定級：
• 如何清除浮動：
• 自適應佈局：
• 畫三角形：
• link @import導入css：
• 長寬比方案：
• display相關：
• CSS優化：

JavaScript

• 請你談談Cookie的優缺點
• Array.prototype.slice.call(arr，2)方法的做用是：
• 簡單說一下瀏覽器本地存儲是怎樣的
• 原型 / 構造函數 / 實例
• 原型鏈：
• 執行上下文(EC)
• 變量對象
• 做用域鏈
• 閉包
• 對象的拷貝
• new運算符的執行過程
• instanceof原理
• 代碼的複用
• 繼承

瀏覽器

• 跨標籤頁通信
• 瀏覽器架構
• 從輸入 url 到展現的過程
• 重繪與迴流
• 存儲
• Web Worker
• V8垃圾回收機制
• 內存泄露
• reflow(迴流)和repaint(重繪)優化
• 如何減小重繪和迴流?
• 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
• localStorage 與 sessionStorage 與cookie的區別總結
• 瀏覽器如何阻止事件傳播，阻止默認行爲
• 虛擬DOM方案相對原生DOM操做有什麼優勢，實現上是什麼原理？

服務端與網絡

• http/https 協議
• 常見狀態碼
• get / post
• Websocket
• TCP三次握手
• TCP四次揮手
• Node 的 Event Loop: 6個階段
• URL概述
• 安全
• HTTPS和HTTP的區別
• HTTP版本
• 從輸入URL到頁面呈現發生了什麼？
• HTTP緩存
• 緩存位置
• 強緩存

Vue

• vue.js的兩個核心是什麼？
• vue 的雙向綁定的原理是什麼？
• vue生命週期鉤子函數有哪些？
• 請問 v-if 和 v-show 有什麼區別？
• vue經常使用的修飾符
• nextTick
• 什麼是vue生命週期
• 數據響應(數據劫持)
• virtual dom 原理實現
• Proxy 相比於 defineProperty 的優點
• vuex
• vue中 key 值的做用
• Vue 組件中 data 爲何必須是函數？
• v-for 與 v-if 的優先級
• 說出至少 4 種 vue 當中的指令和它的用法

算法

• 五大算法
• 基礎排序算法
• 高級排序算法
• 遞歸運用(斐波那契數列)： 爬樓梯問題
• 數據樹
• 天平找次品

文章篇幅有限緣由，前端面試題精編解析PDF完整版請 【點擊這裏免費領取】

學習&面試：注重邏輯表達

若是上一點是說能正確回答問題，這點則是能更好的回答問題。一個邏輯清晰的回答，能讓面試官感覺到，面前的小夥子不只熟悉這個問題，還有比較優秀的語言能力和邏輯能力。

好比，常見問題：說說 var, let/const 的區別。大部分人都能羅列出它們的區別和注意點，但這很難給面試官留下什麼印象。可是，若是你添加幾句聯繫性的語句，效果就不同了：

var是 ES5 以前的變量聲明方式， 存在不少容易產生誤解的缺陷，具體體如今：……（羅列 var 的一些不足）, 針對這些問題，ES6 提出了 let/const 的變量聲明方式，它們具備一些新的特性：……（羅列 let/ const 特性）。

這幾句簡單的鏈接，讓整個回答從一個簡單的要點堆砌變成關係密切的表達。

然而，這並不是易事。前提是必需要有較好的邏輯思惟，既然選擇這行，相信各位這點沒有問題。

在學習每個技術點的時候，都要注意一些問題：是什麼？爲了解決什麼問題？如何實現的，有沒有更深的原理？如何使用？使用的時候須要注意什麼？有哪些應用的場景？有什麼不足？這些不足可否避免？ 這些問題能讓你更加全面地體會各個問題的聯繫。