2018 前端校招總結

雖然現(xiàn)在很多大公司的校招都已經接近尾聲了我才拿到滿意的一個 offer，但還是稍微分享一下我覺得前端校招的一些內容。

基本上的大公司對于前端校招同學的要求都不僅僅局限于前端領域，因為對于一般的候選人來說都是側重潛力的考察。而小一點的公司對于候選人的技術能力以及項目經歷不會有過多的要求，更多的是希望能夠以比較低廉的價格簽下一個愿意做切圖之類工作的同學。個人覺得對于同學未來幾年的發(fā)展不是很好。

流程

不管是電話面試還是現(xiàn)場面試，基本的流程是：自我介紹，基礎部分，項目經歷，拓展部分（通常都是以面試者自己回答的內容為發(fā)散點），面試者詢問。

自我介紹

這部分應該有很多同學覺得都不用準備，但是事實上面試官第一個問題如果回答的沒有條理不僅面試官的印象會不好，而且對自己接下來的狀態(tài)也會有很大的影響。所以面試者最好自己寫好自我介紹的草稿，設計到的內容包括但不限于為什么學前端？拿過什么樣的獎項之類的？，雖然簡歷中有寫。

接著面試官可能會問：

• 如何學前端的？
• 你認為的前端都要做什么樣的工作？
• 你理解的前端工程師是什么？
• 你認為前端工程師對于用戶和公司有哪些作用？
• 你最近遇到過什么技術挑戰(zhàn)？你是如何解決的？
• 項目中遇到的問題是如何解決的？
• 平時都是怎么學習的？
• 實習了多久，在哪實習，實習的工作是什么？
• 實習過程中能不能完成公司給你的工作？工作量如何？
• ...

好了，前戲差不多了，現(xiàn)在開始劃一下基礎知識的重點。

知識點匯總

HTML

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

CSS

• CSS3 新特性，偽類，偽元素，錨偽類
• CSS 實現(xiàn)隱藏頁面的方式
• 如何實現(xiàn)水平居中和垂直居中。
• 說說 position，display
• 浮動元素引起的問題和解決辦法？絕對定位和相對定位，元素浮動后的 display 值
• link 和@import 引入 css 的區(qū)別
• 解釋一下 css3 的 flexbox，以及適用場景
• inline 和 inline-block 的區(qū)別
• 哪些是塊級元素那些是行級元素，各有什么特點
• grid 布局
• table 布局的作用
• 實現(xiàn)兩欄布局有哪些方法？
• css dpi
• 你知道 attribute 和 property 的區(qū)別么
• css 布局問題？css 實現(xiàn)三列布局怎么做？如果中間是自適應又怎么做？
• 流式布局如何實現(xiàn)，響應式布局如何實現(xiàn)
• 移動端布局方案
• 實現(xiàn)三欄布局（圣杯布局，雙飛翼布局，flex 布局）
• 清除浮動的原理
• overflow:hidden 有什么缺點？
• padding 百分比是相對于父級寬度還是自身的寬度
• css3 動畫，transition 和 animation 的區(qū)別，animation 的屬性，加速度，重力的模擬實現(xiàn)
• CSS 3 如何實現(xiàn)旋轉圖片（transform: rotate）
• sass less
• 對移動端開發(fā)了解多少？（響應式設計、Zepto；@media、viewport、JavaScript 正則表達式判斷平臺。）
• 什么是 bfc，如何創(chuàng)建 bfc？解決什么問題？
• CSS 中的長度單位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）
• CSS 選擇器的優(yōu)先級是怎樣的？
• 雪碧圖
• svg
• 媒體查詢的原理是什么？
• CSS 的加載是異步的嗎？表現(xiàn)在什么地方？
• 常遇到的瀏覽器兼容性問題有哪些？常用的 hack 的技巧
• 外邊距合并
• 解釋一下“::before”和“:after”中的雙冒號和單冒號的區(qū)別

JS

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

ES6

• 談一談 promise
• 所有的 ES6 特性你都知道嗎？如果遇到一個東西不知道是 ES6 還是 ES5, 你該怎么區(qū)分它
• es6 的繼承和 es5 的繼承有什么區(qū)別
• promise 封裝 ajax
• let const 的優(yōu)點
• es6 generator 是什么，async/await 實現(xiàn)原理
• ES6 和 node 的 commonjs 模塊化規(guī)范區(qū)別
• 箭頭函數(shù)，以及它的 this

計算機網絡

• HTTP 協(xié)議頭含有哪些重要的部分，HTTP 狀態(tài)碼
• 網絡 url 輸入到輸出怎么做？
• 性能優(yōu)化為什么要減少 HTTP 訪問次數(shù)？
• Http 請求的過程與原理
• https（對是 https）有幾次握手和揮手？https 的原理。
• http 有幾次揮手和握手？TLS 的中文名？TLS 在哪一網絡層？
• TCP 連接的特點，TCP 連接如何保證安全可靠的？
• 為什么 TCP 連接需要三次握手，兩次不可以嗎，為什么
• 為什么 tcp 要三次握手四次揮手？
• tcp 的三次握手和四次揮手畫圖（當場畫寫 ack 和 seq 的值）？
• tcp 與 udp 的區(qū)別
• get 和 post 的區(qū)別？什么情況下用到？
• http2 與 http1 的區(qū)別？
• websocket
• 什么是 tcp 流，什么是 http 流
• babel 是如何將 es6 代碼編譯成 es5 的
• http2 的持久連接和管線化
• 域名解析時是 tcp 還是 udp
• 域名發(fā)散和域名收斂
• Post 一個 file 的時候 file 放在哪的？
• HTTP Response 的 Header 里面都有些啥？

瀏覽器相關

• 跨域，為什么 JS 會對跨域做出限制
• 前端安全：xss，csrf...
• 瀏覽器怎么加載頁面的？script 腳本阻塞有什么解決方法？defer 和 async 的區(qū)別？
• 瀏覽器強緩存和協(xié)商緩存
• 瀏覽器的全局變量有哪些
• 瀏覽器同一時間能夠從一個域名下載多少資源
• 按需加載，不同頁面的元素判斷標準
• web 存儲、cookies、localstroge 等的使用和區(qū)別
• 瀏覽器的內核
• 如何實現(xiàn)緩存機制？（從 200 緩存，到 cache 到 etag 再到）
• 說一下 200 和 304 的理解和區(qū)別
• 什么是預加載、懶加載
• 一個 XMLHttpRequest 實例有多少種狀態(tài)？
• dns 解析原理，輸入網址后如何查找服務器
• 服務器如何知道你？
• 瀏覽器渲染過程
• ie 的某些兼容性問題
• session
• 拖拽實現(xiàn)
• 拆解 url 的各部分

工程化

• 對 webpack,gulp，grunt 等有沒有了解?對比。
• webpack 的入口文件怎么配置，多個入口怎么分割。
• webpack 的 loader 和 plugins 的區(qū)別
• gulp 的具體使用。
• 前端工程化的理解、如何自己實現(xiàn)一個文件打包，比如一個 JS 文件里同時又 ES5 和 ES6 寫的代碼，如何編譯兼容他們

模塊化

• 對 AMD,CMD,CommonJS 有沒有了解?
• 為什么要模塊化？不用的時候和用 RequireJs 的時候代碼大概怎么寫？
• 說說有哪些模塊化的庫，有了解過模塊化的發(fā)展的歷史嗎？
• 分別說說同步和異步模塊化的應用場景，說下 AMD 異步模塊化實現(xiàn)的原理？
• 如何將項目里面的所有的 require 的模塊語法換成 import 的 ES6 的語法？
• 使用模塊化加載時，模塊加載的順序是怎樣的，如果不知道，根據已有的知識，你覺得順序應該是怎么樣的？

框架

• 使用過哪些框架？
• zepto 和 jquery 是什么關系，有什么聯(lián)系么？
• jquery 源碼如何實現(xiàn)選擇器的，為什么$取得的對象要設計成數(shù)組的形式，這樣設計的目的是什么
• jquery 如何綁定事件，有幾種類型和區(qū)別
• 什么是 MVVM，MVC，MVP
• Vue 和 Angular 的雙向數(shù)據綁定原理
• Vue，Angular 組件間通信以及路由原理
• react 和 vue 的生命周期
• react 和 vue 的虛擬 dom 以及 diff 算法
• vue 的 observer，watcher，compile
• react 和 angular 分別用在什么樣的業(yè)務嗎？性能方面和 MVC 層面上的區(qū)別
• jQuery 對象和 JS 的 Element 有什么區(qū)別
• jQuery 對象是怎么實現(xiàn)的
• jQuery 除了它封裝了一些方法外，還有什么值得我們去學習和使用的？
• jQuery 的$(‘xxx’)做了什么事情
• 介紹一下 bootstrap 的柵格系統(tǒng)是如何實現(xiàn)的

Nodejs

• 對 nodejs 有沒有了解
• Express 和 koa 有什么關系，有什么區(qū)別？
• nodejs 適合做什么樣的業(yè)務？
• nodejs 與 php，java 有什么區(qū)別
• Nodejs 中的 Stream 和 Buffer 有什么區(qū)別？
• node 的異步問題是如何解決的？
• node 是如何實現(xiàn)高并發(fā)的？
• 說一下 Nodejs 的 event loop 的原理

數(shù)據結構

• 基本數(shù)據結構：（數(shù)組、隊列、鏈表、堆、二叉樹、哈希表等等）
• 8 種排序算法，原理，以及適用場景和復雜度
• 說出越多越好的費波拉切數(shù)列的實現(xiàn)方法？

性能優(yōu)化

• cdn 的用法是什么？什么時候用到？
• 瀏覽器的頁面優(yōu)化？
• 如何優(yōu)化 DOM 操作的性能
• 單頁面應用有什么 SEO 方案？
• 單頁面應用首屏顯示比較慢，原因是什么？有什么解決方案？

其他

• 正則表達式
• 前端渲染和后端渲染的優(yōu)缺點
• 數(shù)據庫的四大特性，什么是原子性，表的關系
• 你覺得前端體系應該是怎樣的？
• 一個靜態(tài)資源要上線，里面有各種資源依賴，你如何平穩(wěn)上線
• 如果要你去實現(xiàn)一個前端模板引擎，你會怎么做
• 知道流媒體查詢嗎？
• SEO
• mysql 和 mongoDB 有什么區(qū)別？
• restful 的 method 解釋
• 數(shù)據庫知識、操作系統(tǒng)知識
• click 在 ios 上有 300ms 延遲，原因及如何解決
• 移動端的適配，rem+媒體查詢/meta 頭設置
• 移動端的手勢和事件；
• unicode，utf8，gbk 編碼的了解，亂碼的解決

三面、四面常問的開放性問題

• 你都看過什么書？最近在看什么書？
• 用過什么框架？有沒有看過什么框架的代碼？
• 有沒有學過設計模式？
• 說一說觀察者模式吧！能不能寫出來？
• 你最大的優(yōu)點是什么？那你最大的缺點呢？
• 你大學期間做過最瘋狂的事情是什么？
• 你除了寫博客還有什么輸出？
• 現(xiàn)在你的領導給你了一份工作，要求你一個星期完成，但你看了需求以后估計需要 3 周才能完成，你該怎么辦？
• 平時關注的前端技術
• 如何規(guī)劃自己的職業(yè)生涯
• 項目過程中，有遇到什么問題嗎？怎么解決的？
• 最近在研究哪方面的東西？
• 請介紹一項你最熱愛、最擅長的專業(yè)領域，并且介紹的學習規(guī)劃。
• 請介紹你參與的印象最深刻的一個項目，為什么？并且介紹你在項目中的角色和發(fā)揮的作用。

HR 面

• 你為什么要學習前端？
• 你平時的是怎么學習前端的？有什么輸出？
• 你覺得自己最好的項目是什么？
• 身邊比較佩服的人有什么值得你學習的？你為什么沒有跟他們一樣？
• 同事的什么問題會讓你接受不了
• 壓力最大的事情是什么？
• 和同學做過的最好的項目？
• 身邊的朋友通常對你的評價是什么
• 喜歡什么樣的工作氛圍
• 如何看待加班
• 有沒有對象
• 意向城市
• 其他的 offer
• 為什么要錄取你？
• 大學里花費時間最多的三件事情
• 周末都會干什么？
• 未來職業(yè)規(guī)劃

建議

1. 面試的時候不要表現(xiàn)出自己想創(chuàng)業(yè)。敲黑板。
2. 從來沒有看過源碼的話，建議從 jQuery，zepto 這之類的源碼入手，后期可以了解 Vue，React 常見的功能的源碼思路和實現(xiàn)。
3. 項目經驗描述的時候不用太太太詳細，揀重點的講。（因為我就一直說一直說，最后面試官評價插不上話評價減分。）

最后

我接近兩個月的校招里，這里的很多知識點都是從別人的博客、面經一篇一篇的摳下來的，這是前人給后人鋪好的路。前端的知識點其實說多也不多，只是太雜，所以我沒有整理的特別詳細。我之所以以這樣的形式分享而不是以面經的形式，主要是有需要的同學們能夠“拿去即用”，也是整理一下我原來的筆記。

呀，身邊的人都好強，繼續(xù)學習。[抱拳]