學習路線
HTML基礎
HTML是頁面中内容的載體，可以展示開發者想要使用者浏覽的任何文字、圖檔、音頻資訊。對于HTML的各類标簽，不僅要掌握日常開發中經常碰到的，也要慢慢積累那些不常用标簽，塊級、行内元素的定義以及二者互相轉換幾乎是每場技術一面常考問題。
- 浏覽器頁面有哪三層構成，分别是什麼，作用是什麼?
- HTML5的優點與缺點？
- Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
- HTML5有哪些新特性、移除了哪些元素？
- 你做的網頁在哪些浏覽器測試過,這些浏覽器的核心分别是什麼?
- 每個HTML檔案裡開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
- 說說你對HTML5認識?（是什麼,為什麼）
- 對WEB标準以及W3C的了解與認識?
- HTML5行内元素有哪些,塊級元素有哪些, 空元素有哪些?
- 什麼是WebGL,它有什麼優點?
- 請你描述一下 cookies，sessionStorage 和 localStorage 的差別?
- 說說你對HTML語義化的了解?
- link和@import的差別?
- 說說你對SVG了解?
- HTML全局屬性(global attribute)有哪些?
- 說說超連結target屬性的取值和作用？
- data-屬性的作用是什麼？
- 介紹一下你對浏覽器核心的了解？
- 常見的浏覽器核心有哪些？
- iframe有那些缺點？
- Label的作用是什麼，是怎麼用的？
- 如何實作浏覽器内多個标簽頁之間的通信?
- 如何在頁面上實作一個圓形的可點選區域？
- title與h3的差別、b與strong的差別、i與em的差別？
- 實作不使用 border 畫出1px高的線，在不同浏覽器的标準模式與怪異模式下都能保持一緻的效果？
CSS基礎
在校招準備時，掌握CSS各類常用的屬性是必要的，其中浮動、清除浮動以及定位更是必考點。CSS盒模型，CSS各類選擇器也是面試官常考問題，各個選擇器優先級順序、多個選擇器組合時優先級比重的計算都是必須要掌握的。
- 解釋一下CSS的盒子模型？
- 請你說說CSS選擇器的類型有哪些，并舉幾個例子說明其用法？
- 請你說說CSS有什麼特殊性?（優先級、計算特殊值）
- 要動态改變層中内容可以使用的方法？
- 常見浏覽器相容性問題與解決方案？
- 列出display的值并說明他們的作用？
- 如何居中div, 如何居中一個浮動元素?
- CSS中 link 和@import 的差別是？
- 請列舉幾種清除浮動的方法(至少兩種)?
- block，inline和inlinke-block細節對比？
- 什麼叫優雅降級和漸進增強？
- 說說浮動元素會引起的問題和你的解決辦法
- 你有哪些性能優化的方法？
- 為什麼要初始化CSS樣式？
- 解釋下浮動和它的工作原理？清除浮動的技巧？
- CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？
- 談談你對CSS中刻度的認識？
- 請你說說em與rem的差別？
- 請你說說box-sizing屬性的的用法？
- 浏覽器标準模式和怪異模式之間的差別是什麼？
- 怪異Quirks模式是什麼，它和标準Standards模式有什麼差別？
- 說說你對邊距折疊的了解?
- 内聯與塊級标簽有何差別？
- 說說隐藏元素的方式有哪些？
- 為什麼重置浏覽器預設樣式，如何重置默浏覽器認樣式？
- 談談你對BFC與IFC的了解？(是什麼，如何産生，作用)
- 說說你對頁面中使用定位(position)的了解？
- 如何解決多個元素重疊問題？
- 頁面布局的方式有哪些？
- overflow :hidden是否形成新的塊級格式化上下文？
JavaScript
JavaScript主要是為Web頁面添加互動行為，基礎知識超高頻考點有資料類型以及判斷方法、閉包、塊級作用域、函數提升與變量提升、原型鍊、JS繼承、變量深淺拷貝等等，除此之外還有很多零碎知識點都是前端開發必須掌握的。
-
原型鍊
(1) 建立對象有幾種方法？
(2) instanceof的原理？
-
類
(1) 類的聲明？
(2) 生成執行個體？聲明一個類，怎麼生成類的執行個體？
-
繼承
(1) call、apply的共同點與差別?
(2) 用javascript實作對象的繼承/ 繼承的幾種方式，這幾種方式的優缺點?
-
作用域
(1) 說說你對作用域鍊的了解？
(2) this？
-
JS閉包
(1) 閉包的特征？
(2) 閉包應用場景？
(3) 實際開發中閉包的應用？
-
JS運作機制，單線程，異步
(1) 如何了解js的單線程？
(2) js為什麼是單線程的？
(3) 同步和異步的差別是什麼？分别舉一個同步和異步的例子？
(4) 何時需要異步？
(5) 什麼是任務隊列？
(6) 請說出下列的值？
(7) 棧和隊列的差別？
(8) 棧和堆的差別？
(9) 什麼是event loop？
(10) event-loop流程？
(11) 哪些語句會放入異步任務隊列中？
(12) 何時被放入任務隊列？
-
JS資料類型
(1) js使用typeof能得到的哪些類型？
(2) 如何準确判斷一個變量是數組類型？
(3) js變量按照存儲方式區分為哪些類型，并描述其特點？
(4) null和undefined的差別？
(5) undefined的典型用法？
(6) null的典型用法？
(7) chrome60+浏覽器中,a===b的是哪項？
-
JS的内置函數，内置對象
(1) js中有哪些内置函數/ 資料封裝類對象？
(2) js中有哪些内置對象？
(3) js變量按照存儲方式區分為哪些類型，并描述其特點？
(4) 字元串方法/ String對象方法?
(5) 數組方法/ Array對象方法？
(6) 數組API？
(7) 對象API？
-
數組去重
(1) 數組怎麼去重？
(2) 對上述數組去重方法速度比較？
(3) 一句話數組去重？
(4) 保留數組中非重複元素？
(5) 保留數組中重複元素？
-
記憶體洩露
(1) 哪些操作會造成記憶體洩漏？
(2) js記憶體洩漏的解決方式
-
DOM
(1) dom是哪種基本的資料結構？
(2) dom操作的常用api有哪些？
(3) dom節點的attribute和property有何差別？
(4) dom結構操作/ 怎樣添加、移除、移動、複制、建立和查找節點/ dom操作的
常用api？
(5) dom事件的級别？
(6) dom事件模型？
(7) dom事件流？
(8) 描述dom事件捕獲的具體流程？
(9) event對象的常見應用？
(10) 自定義事件/ 模拟事件？
(11) 通用事件綁定/ 編寫一個通用的事件監聽函數？
(12) dom樹、render樹的關系/ dom樹、render樹的差別（第2、3條）？
-
BOM
(1) bom常用屬性？
-
通信
(1) 什麼是同源政策及限制？
(2) 前後端如何通信？
(3) 跨域通信的幾種方式？
(4) jsonp實作？
(5) 可以跨域的三個标簽？
(6) 三個可跨域的标簽的使用場景？
-
Ajax
(1) ajax請求的原理/ 手寫一個ajax請求？
(2) readyState？
(3) ajax異步與同步的差別？
(4) ajax傳遞中文用什麼方法？
-
錯誤監控
(1) 前端錯誤的分類/ 如何檢測js錯誤/ 如何保證你的産品品質？
(2) 錯誤的捕獲方式？
(3) 上報錯誤的基本原理？
-
子產品化
(1) amd、cmd差別？
(2) amd、commonJs差別？
-
虛拟DOM
(1) vdom的如何應用，核心api是什麼？
(2) 虛拟dom轉換成真實dom？
(3) diff實作過程？
浏覽器相關
頁面在浏覽器中顯示時，浏覽器針對頁面中的HTML、CSS、JS代碼，以及各類圖檔、音頻資源有特定的渲染機制，同時頁面資源請求是通過浏覽器代為執行的，出于安全考慮，浏覽器制定了同源政策，當請求方與目的地不同源則需要跨域請求資源，約有5-6種跨域方案，實作原理不同，也有不同方面的優缺點，此類問題幾乎是筆試中問答題的必考題。
- 浏覽器存儲的方式有哪些
- 浏覽器核心的了解
- HTTP 的請求方式場景
- HTTP狀态碼
- 從浏覽器位址欄輸入URL後發生了什麼？
- 請你談談Cookie的優缺點
- cookies ， sessionStorage 和 localStorage 的差別
- 浏覽器緩存
- 浏覽器渲染的步驟
- GET 和 POST 請求的差別
- 什麼是reflow
- 什麼時候會導緻reflow發生呢？
- 減少reflow對性能的影響
架構相關
原生JS雖能實作絕大部分功能，但要麼就是過于繁瑣，要麼就是存在缺陷，故絕大多數開發者都會首選架構開發方案。現階段較熱門是React、Vue兩大架構，兩者工作原理上存在共通點，也存在一些不同點，對于校招來說，不需要兩個架構都學得特别熟，一般面試官會針對你履歷中寫的架構進行提問。
在架構方面，生命周期、鈎子函數、虛拟DOM這些基本知識是必須要掌握的，在學習的過程可以結合架構的官方文檔
Vue架構
知識要點：
1. vue-cli工程
2. vue核心知識點
3. vue-router
4. vuex
5. http請求
6. UI樣式
7. 常用功能
8. MVVM設計模式
React架構
知識要點：
1. 基本知識
2. React 元件
3. React Redux
4. React 路由
計算機網絡
網絡技術是前端頁面資料互動的橋梁，在前端崗的校招中，除了前端方面的知識以外，計算機網絡方面算是第二大重點了。
其中較為常考的主要有：OSI七層模型、各層中的傳輸協定、TCP/UDP差別、TCP三向交握四次揮手、HTTP/HTTPS差別、HTTP各版本、HTTP封包結構等等。這類知識比較枯燥繁瑣，在學的時候可以通過畫圖來加強記憶。
- TCP 建立連接配接的三次握手過程
- cdn 原理
- HTTP 的頭部包含哪些内容。常見的請求方法（我為什麼要 說後面的 options，head，connect）
- 請求方法 head 特性
- HTTP 狀态碼，301和302 有什麼具體差別，200 和 304 的 差別
- OSI 七層模型
- TCP 和 UDP 的差別，為什麼三次握手四次揮手
- HTTP 緩存機制
- websocket 和 ajax 的差別是什麼，websocket 的應用場景有哪些
- TCP/IP 的網絡模型
- 知道什麼跨域方式嗎，jsonp 具體流程是什麼，如何實作 原生 Jsonp 封裝，優化，對于 CORS，伺服器怎麼判斷它該不 該跨域呢
- 怎麼生成 token，怎麼傳遞
- 作業系統程序和線程的差別
- 什麼是程序線程
- 線程的那些資源共享，那些資源不共享
- 作業系統裡面程序和線程的差別
- Linux 查詢程序指令，查詢端口，殺程序
- 程序間的通信方式有哪些？
資料結構與算法
這一塊在筆試、面試的代碼題中考核較多，其中常考的資料結構主要有：數組、連結清單、隊列、棧、Set、Map、哈希表等，不同資料結構有不同的方法以及儲存原理，這些算是技術崗的必備知識。算法部分主要分為兩大塊，排序算法與一些其他算法題。
排序算法根據考頻高低主要有：快速排序、歸并排序、堆排序、冒泡排序、插入排序、選擇排序、希爾排序、桶排序、基數排序、Timsort這十種，這類考核點要麼是算法的時間、空間複雜度、穩定度，要麼是直接手寫代碼，故在了解算法原理的同時，對JS語言版的排序算法代碼也要加強記憶。
- 二叉樹層序周遊
- B 樹的特性，B 樹和 B+樹的差別
- 尾遞歸
- 如何寫一個大數階乘？遞歸的方法會出現什麼問題？
- 把多元數組變成一維數組的方法
- 知道的排序算法 說一下冒泡快排的原理
- Heap 排序方法的原理？複雜度？
- 幾種常見的排序算法，手寫
- 數組的去重，盡可能寫出多個方法
- 如果有一個大的數組，都是整型，怎麼找出最大的前 10 個數
- 知道資料結構裡面的常見的資料結構
- 找出數組中第 k 大的數組出現多少次，比如數組【1，2， 4，4，3，5】第二大的數字是 4，出現兩次，是以傳回 2
- 合并兩個有序數組
- 給一個數，去一個已經排好序的數組中尋找這個數的位 置（通過快速查找，二分查找）
最後
基礎知識是前端一面必問的，如果你在基礎知識這一塊翻車了，就算你架構玩的再6，webpack、git、node學習的再好也無濟于事，因為對方就不會再給你展示的機會，千萬不要因為基礎錯過了自己心怡的公司。前端的基礎知識雜且多，并不是了解就ok了，有些是真的要去記。當然了我們是牛x的前端工程師，每天像背英語單詞一樣去背知識點就沒必要了，隻要平時工作中多注意總結，面試前端刷下題目就可以了。
什麼？你問面試題資料在哪裡，這不是就在你眼前嗎（滑稽
過快速查找，二分查找）
[外鍊圖檔轉存中…(img-euynuft6-1626852956305)]
最後
基礎知識是前端一面必問的，如果你在基礎知識這一塊翻車了，就算你架構玩的再6，webpack、git、node學習的再好也無濟于事，因為對方就不會再給你展示的機會，千萬不要因為基礎錯過了自己心怡的公司。前端的基礎知識雜且多，并不是了解就ok了，有些是真的要去記。當然了我們是牛x的前端工程師，每天像背英語單詞一樣去背知識點就沒必要了，隻要平時工作中多注意總結，面試前端刷下題目就可以了。
什麼？你問面試題資料在哪裡，這不是就在你眼前嗎（滑稽
資料領取方式：戳這裡免費領取