前端校招：剛出校園，沒有經驗的我們該如何準備面試呢？

前言：
要過年了，準備實習的你是已經在實習了，還是已經辭職回家過年，準備年后重新找作業呢，又或者是錯過秋招，準備2021年春招？
那么還沒沒踏出校門或者是剛出校門沒多久的同學們該如何準備前端校招的面試呢？

簡歷

首先肯定是要準備一份自己的簡歷，簡歷經常是給面試官的第一印象，
簡歷一般包括個人基礎資訊，專業技能，專案經驗，其他模塊，

個人基礎資訊模塊就不說了，太基礎，

專業技能:
專業技能這一節，最好除了列一些通用的技術能力，也寫上一些對某個技術點的深入研究，

先區分大能力，如：
掌握前端基礎能力
有移動 Web 開發能力
了解新技術
……

再歸類小能力，如：
了解常用的螢屏適配方案
了解移動端與 PC 開發的差異
了解 base64 等移動端常用的優化方案

最后補上亮點如：
……
研究過一些手勢庫，了解基本原理，能定制一些特殊手勢實作特殊功能；

專案經驗:
專案經驗可以寫：參加實習做的專案、在學校作業室或參加編程比賽做的專案、自己折騰的技術專案，一般按照時間順序來梳理，

專案經歷不是給面試官講清楚專案是什么，而是突出專案背后通用的技術知識的應用和你解決技術難題的思路，

可以這樣寫：

• 專案名稱，你的角色，時間；
• 專案簡介，一句話講清楚專案的功能和產生的價值；
• 技術堆疊簡介；
• 專案中遇到的技術難點，以及怎么解決，

其他模塊:
跟崗位能力關聯不大的，基本不重要，比如興趣愛好等等，

面試的基本流程是：自我介紹，基礎部分，專案經歷，拓展部分（通常都是以面試者自己回答的內容為發散點），面試者詢問，

自我介紹

面試者最好自己寫好自我介紹的草稿，涉及到的內容包括但不限于簡單的個人基礎，為什么學前端？拿過什么樣的獎項之類的？，雖然簡歷中有寫，

面試官可能會問：

• 如何學前端的？
• 你認為的前端都要做什么樣的作業？
• 你最近遇到過什么技術挑戰？你是如何解決的？
• 專案中遇到的問題是如何解決的？
• 平時都是怎么學習的？
• 實習程序中能不能完成公司給你的作業？作業量如何？
  …

好了，前戲差不多了，現在開始劃一下基礎知識的重點，

面試知識點

主要內容包括html，css，前端基礎，前端核心，前端進階，移動端開發，計算機基礎，演算法與資料結構，設計模式，專案等等，

html

1.瀏覽器頁面有哪三層構成，分別是什么，作用是什么?
2.HTML5的優點與缺點？
3.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
4.HTML5有哪些新特性、移除了哪些元素？
5.你做的網頁在哪些瀏覽器測驗過,這些瀏覽器的內核分別是什么?
6.每個HTML檔案里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
7.說說你對HTML5認識?（是什么,為什么）
8.對WEB標準以及W3C的理解與認識?
9.HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?
10.什么是WebGL,它有什么優點?
11.請你描述一下 cookies，sessionStorage 和 localStorage 的區別?
12.說說你對HTML語意化的理解?
13.link和@import的區別?
14.說說你對SVG理解?
15.HTML全域屬性(global attribute)有哪些?
16.說說超鏈接target屬性的取值和作用？
17.data-屬性的作用是什么？
18.介紹一下你對瀏覽器內核的理解？
19.常見的瀏覽器內核有哪些？
20.iframe有那些缺點？
21.Label的作用是什么，是怎么用的？
22.如何實作瀏覽器內多個標簽頁之間的通信?
23.如何在頁面上實作一個圓形的可點擊區域？
24.title與h3的區別、b與strong的區別、i與em的區別？
25.實作不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
…

CSS

1.解釋一下CSS的盒子模型？
2.請你說說CSS選擇器的型別有哪些，并舉幾個例子說明其用法？
3.請你說說CSS有什么特殊性?（優先級、計算特殊值）
4.要動態改變層中內容可以使用的方法？
5.常見瀏覽器兼容性問題與解決方案？
6.列出display的值并說明他們的作用？
7.如何居中div, 如何居中一個浮動元素?
8.CSS中 link 和@import 的區別是？
9.請列舉幾種清除浮動的方法(至少兩種)?
10.block，inline和inlinke-block細節對比？
11.什么叫優雅降級和漸進增強？
12.說說浮動元素會引起的問題和你的解決辦法
13.你有哪些性能優化的方法？
14.為什么要初始化CSS樣式？
15.解釋下浮動和它的作業原理？清除浮動的技巧？
16.CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？
17.談談你對CSS中刻度的認識？
18.請你說說em與rem的區別？
19.請你說說box-sizing屬性的的用法？
20.瀏覽器標準模式和怪異模式之間的區別是什么？
21.怪異Quirks模式是什么，它和標準Standards模式有什么區別？
22.說說你對邊距折疊的理解?
23.行內與塊級標簽有何區別？
24.說說隱藏元素的方式有哪些？
25.為什么重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？
26.談談你對BFC與IFC的理解？(是什么，如何產生，作用)
27.說說你對頁面中使用定位(position)的理解？
28.如何解決多個元素重疊問題？
29.頁面布局的方式有哪些？
30.overflow :hidden是否形成新的塊級格式化背景關系？

篇幅有限，需要更詳細的內容可以點擊這里獲取完整版PDF檔案

前端基礎

1.說一下http和https
2.tcp三次握手，一句話概括
3.TCP和UDP的區別
4.WebSocket的實作和應用
5.HTTP請求的方式，HEAD方式
6.一個圖片url訪問后直接下載怎樣實作？
7.說一下web Quality（無障礙）
8.幾個很實用的BOM屬性物件方法?
9.說一下HTML5 drag api
10.說一下http2.0
11.補充400和401、403狀態碼
12.fetch發送2次請求的原因
13.Cookie、sessionStorage、localStorage的區別
14.說一下web worker
15.對HTML語意化標簽的理解
16.iframe是什么？有什么缺點？
17.Doctype作用?嚴格模式與混雜模式如何區分？它們有何意義?
18.Cookie如何防范XSS攻擊
19.Cookie和session的區別
20.一句話概括RESTFUL
21.講講viewport和移動端布局
22.click在ios上有300ms延遲，原因及如何解決？
23.addEventListener引數
24.cookie sessionStorage localStorage區別
25.cookie session區別
26.介紹知道的http回傳的狀態碼
27.http常用請求頭
28.強，協商快取
29.HTTP狀態碼說說你知道的
30.講講304
31.強快取、協商快取什么時候用哪個
32.前端優化
33.GET和POST的區別
34.301和302的區別
35.如何畫一個三角形
36.狀態碼304和 200
37.說一下瀏覽器快取
38.HTML5新增的元素
39.在地址欄里輸入一個URL,到這個頁面呈現出來，中間會發生什么？
40.cookie和session的區別，localstorage和sessionstorage的區別
41.常見的HTTP的頭部
42.HTTP2.0 的特性
43.cache-control的值有哪些
44.瀏覽器在生成頁面的時候，會生成那兩顆樹？
45.csrf和xss的網路攻擊及防范
46.怎么看網站的性能如何
47.介紹HTTP協議(特征)
48.說一下對Cookie和Session的認知，Cookie有哪些限制？
49.描述一下XSS和CRSF攻擊？防御方法？
50.知道304嗎，什么時候用304？
51.具體有哪些請求頭是跟快取相關的
52.cookie和session的區別
53.cookie有哪些欄位可以設定
54.cookie有哪些編碼方式？
55.既然你看過圖解http，那你回答下200和304的區別
56.除了cookie，還有什么存盤方式，說說cookie和localStorage的區別
57.瀏覽器輸入網址到頁面渲染全程序
58.HTML5和CSS3用的多嗎？你了解它們的新屬性嗎？有在專案中用過嗎？
59.http常見的請求方法
60.get和post的區別
61.說說302，301，304的狀態碼
62.web性能優化
63.瀏覽器快取機制
64.post和get區別
65.說一下css盒模型
66.畫一條0.5px的線
67.link標簽和import標簽的區別
68.transition和animation的區別
69.Flex布局
70.BFC（塊級格式化背景關系，用于清楚浮動，防止margin重疊等）
71.垂直居中的方法
72.關于js影片和css3影片的差異性
73.說一下塊元素和行元素
74.多行元素的文本省略號
75.visibility=hidden, opacity=0，display:none
76.雙邊距重疊問題（外邊距折疊）
77.position屬性
78.浮動清除
79.css3新特性
80.CSS選擇器有哪些，優先級呢
81.怎么樣讓一個元素消失
82.介紹一下盒模型
83.css影片如何實作
84.如何實作圖片在某個容器中居中的？
85.如何實作元素的垂直居中
86.CSS3中對溢位的處理
87.float的元素，display是什么
88.隱藏頁面中某個元素的方法
89.三欄布局的實作方式，盡可能多寫，浮動布局時，三個div的生成順序有沒有影響
90.什么是BFC
91.calc屬性
92.有一個width300，height300，怎么實作在螢屏上垂直水平居中
93.display：table和本身的table有什么區別
94.position屬性的值有哪些及其區別
95.z-index的定位方法
96.CSS盒模型
97.如果想要改變一個DOM元素的字體顏色，不在它本身上進行操作？
98.對CSS的新屬性有了解過的嗎？
99.用的最多的css屬性是啥？
100.line-height和height的區別
101.設定一個元素的背景顏色，背景顏色會填充哪些區域？
102.知道屬性選擇器和偽類選擇器的優先級嗎
103.inline-block、inline和block的區別；為什么img是inline還可以設定寬高
104.用css實作一個硬幣旋轉的效果
105.了解重繪和重排嗎，知道怎么去減少重繪和重排嗎，讓檔案脫離檔案流有哪些方法
106.CSS畫正方體，三角形
107.overflow的原理
108.清除浮動的方法
109.box-sizing的語法和基本用處
110.使元素消失的方法有哪些？
111.兩個嵌套的div，position都是absolute，子div設定top屬性，那么這個top是相對于父元素的哪個位置定位的
112.說說盒子模型
113.display
114.怎么隱藏一個元素
115.display:none和visibilty:hidden的區別
116.相對布局和絕對布局，position:relative和obsolute
117.flex布局
118.block、inline、inline-block的區別
119.css的常用選擇器
120.css布局
121.css定位
122.relative定位規則
123.垂直居中
124.css前處理器有什么
125.get請求傳參長度的誤區
126.補充get和post請求在快取方面的區別
127.說一下閉包
128.說一下類的創建和繼承
129.如何解決異步回呼地獄
130.說說前端中的事件流
131.如何讓事件先冒泡后捕獲
132.說一下事件委托
133.說一下圖片的懶加載和預加載
134.mouseover和mouseenter的區別
135.js的new運算子做了哪些事情
136.改變函式內部this指標的指向函式（bind，apply，call的區別）
137.js的各種位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區別？
138.js拖拽功能的實作
139.異步加載js的方法
140.Ajax解決瀏覽器快取問題
141.js的節流和防抖
142.JS中的垃圾回識訓制
143.eval是做什么的
144.如何理解前端模塊化
145.說一下Commonjs、AMD和CMD
146.物件深度克隆的簡單實作
147.實作一個once函式，傳入函式引數只執行一次
148.將原生的ajax封裝成promise
149.js監聽物件屬性的改變
150.如何實作一個私有變數，用getName方法可以訪問，不能直接訪問
151.和=、以及Object.is的區別
152.setTimeout、setInterval和requestAnimationFrame之間的區別
153.實作一個兩列等高布局，講講思路
154.自己實作一個bind函式
155.用setTimeout來實作setInterval
…

篇幅有限，需要更詳細的內容可以點擊這里獲取完整版PDF檔案

前端核心

1.JSONP的缺點
2.跨域（jsonp，ajax）
3.如何實作跨域
4.dom是什么，你的理解？
5.關于dom的api有什么
6.ajax回傳的狀態
7.實作一個Ajax
8.如何實作ajax請求，假如我有多個請求，我需要讓這些ajax請求按照某種順序一次執行，有什么辦法呢？如何處理ajax跨域
9.如何實作一個ajax請求？如果我想發出兩個有順序的ajax需要怎么做？
10.Fetch和Ajax比有什么優缺點？
11.移動應用和web應用的關系
12.知道PWA嗎
13.做過移動端嗎
14.知道touch事件嗎

前端進階

1.前端測驗
2.介面檔案的制定
3.webpack和gulp區別（模塊化與流的區別）
4.redux用處
5.redux里常用方法
6.angularJs和react區別
7.vue雙向系結原理
8.說說vue react angularjs jquery的區別
9.node的事件方法講講看
10.node的特性，適合處理什么場景
11.你有用到Express,講講Express
12.promise的狀態有那些
13.陣列移除第一個元素的方法有哪些？

移動端開發

1.介紹一下react
2.React單項資料流
3.react生命周期函式和react組件的生命周期
4.react和Vue的原理，區別，亮點，作用
5.reactJs的組件交流
6.有了解過react的虛擬DOM嗎，虛擬DOM是怎么對比的呢
7.專案里用到了react，為什么要選擇react，react有哪些好處
8.怎么獲取真正的dom
9.選擇react的原因
10.react的生命周期函式
11.setState之后的流程
12.react高階組件知道嗎？
13.React的生命周期
14.說說自己理解的react
15.react的組件是通過什么去判斷是否重繪的

計算機基礎

1.TCP 建立連接的三次握手程序
2.cdn 原理
3.HTTP 的頭部包含哪些內容，常見的請求方法（我為什么要 說后面的 options，head，connect）
4.請求方法 head 特性
5.HTTP 狀態碼，301和302 有什么具體區別，200 和 304 的 區別
6.OSI 七層模型
7.TCP 和 UDP 的區別，為什么三次握手四次揮手
8.HTTP 快取機制
9.websocket 和 ajax 的區別是什么，websocket 的應用場景有哪些
10.TCP/IP 的網路模型
11.知道什么跨域方式嗎，jsonp 具體流程是什么，如何實作 原生 Jsonp 封裝，優化，對于 CORS，服務器怎么判斷它該不 該跨域呢
12.怎么生成 token，怎么傳遞
13.作業系統行程和執行緒的區別
14.什么是行程執行緒
15.執行緒的那些資源共享，那些資源不共享
16.作業系統里面行程和執行緒的區別
17.Linux 查詢行程指令，查詢埠，殺行程
18.行程間的通信方式有哪些？
19.Redis 和 mysql

演算法與資料結構

1.二叉樹層序遍歷
2.B 樹的特性，B 樹和 B+樹的區別
3.尾遞回
4.如何寫一個大數階乘？遞回的方法會出現什么問題？
5.把多維陣列變成一維陣列的方法
6.知道的排序演算法 說一下冒泡快排的原理
7.Heap 排序方法的原理？復雜度？
8.幾種常見的排序演算法，手寫
9.陣列的去重，盡可能寫出多個方法
10.如果有一個大的陣列，都是整型，怎么找出最大的前 10 個數
11.知道資料結構里面的常見的資料結構
12.找出陣列中第 k 大的陣列出現多少次，比如陣列【1，2， 4，4，3，5】第二大的數字是 4，出現兩次，所以回傳 2
13.合并兩個有序陣列
14.給一個數，去一個已經排好序的陣列中尋找這個數的位 置（通過快速查找，二分查找）
……

文章到這里就結束了，如果覺得對你有幫助可以點個贊哦，如果有需要可以點擊這里獲取前端校招面試題PDF完整版，包括前端校招面試題和答案決議，