2018 前端校招總結(jié)
雖然現(xiàn)在很多大公司的校招都已經(jīng)接近尾聲了我才拿到滿意的一個(gè) offer，但還是稍微分享一下我覺(jué)得前端校招的一些內(nèi)容碑诉。
基本上的大公司對(duì)于前端校招同學(xué)的要求都不僅僅局限于前端領(lǐng)域，因?yàn)閷?duì)于一般的候選人來(lái)說(shuō)都是側(cè)重潛力的考察德挣。而小一點(diǎn)的公司對(duì)于候選人的技術(shù)能力以及項(xiàng)目經(jīng)歷不會(huì)有過(guò)多的要求快毛，更多的是希望能夠以比較低廉的價(jià)格簽下一個(gè)愿意做切圖之類(lèi)工作的同學(xué)。個(gè)人覺(jué)得對(duì)于同學(xué)未來(lái)幾年的發(fā)展不是很好屯掖。
流程
不管是電話面試還是現(xiàn)場(chǎng)面試襟衰，基本的流程是：自我介紹，基礎(chǔ)部分瀑晒，項(xiàng)目經(jīng)歷绍坝，拓展部分（通常都是以面試者自己回答的內(nèi)容為發(fā)散點(diǎn)）陷嘴，面試者詢問(wèn)间坐。
自我介紹
這部分應(yīng)該有很多同學(xué)覺(jué)得都不用準(zhǔn)備，但是事實(shí)上面試官第一個(gè)問(wèn)題如果回答的沒(méi)有條理不僅面試官的印象會(huì)不好劳澄，而且對(duì)自己接下來(lái)的狀態(tài)也會(huì)有很大的影響蜈七。所以面試者最好自己寫(xiě)好自我介紹的草稿，設(shè)計(jì)到的內(nèi)容包括但不限于為什么學(xué)前端砂缩？拿過(guò)什么樣的獎(jiǎng)項(xiàng)之類(lèi)的三娩？，雖然簡(jiǎn)歷中有寫(xiě)双吆。
接著面試官可能會(huì)問(wèn)：
- 如何學(xué)前端的？
- 你認(rèn)為的前端都要做什么樣的工作好乐？
- 你理解的前端工程師是什么？
- 你認(rèn)為前端工程師對(duì)于用戶和公司有哪些作用岭妖？
- 你最近遇到過(guò)什么技術(shù)挑戰(zhàn)反璃？你是如何解決的？
- 項(xiàng)目中遇到的問(wèn)題是如何解決的？
- 平時(shí)都是怎么學(xué)習(xí)的侄泽？
- 實(shí)習(xí)了多久，在哪實(shí)習(xí)柿扣，實(shí)習(xí)的工作是什么闺魏？
- 實(shí)習(xí)過(guò)程中能不能完成公司給你的工作？工作量如何司草？
- ...
好了泡仗，前戲差不多了，現(xiàn)在開(kāi)始劃一下基礎(chǔ)知識(shí)的重點(diǎn)娩怎。
知識(shí)點(diǎn)匯總
HTML
- HTML5 新特性，語(yǔ)義化
- 瀏覽器的標(biāo)準(zhǔn)模式和怪異模式
- xhtml 和 html 的區(qū)別
- 使用 data-的好處
- meta 標(biāo)簽
- canvas
- HTML 廢棄的標(biāo)簽
- IE6 bug爬泥，和一些定位寫(xiě)法
- css js 放置位置和原因
- 什么是漸進(jìn)式渲染
- html 模板語(yǔ)言
- meta viewport 原理
CSS
- CSS3 新特性袍啡，偽類(lèi)，偽元素葬馋，錨偽類(lèi)
- CSS 實(shí)現(xiàn)隱藏頁(yè)面的方式
- 如何實(shí)現(xiàn)水平居中和垂直居中。
- 說(shuō)說(shuō) position蛋逾，display
- 浮動(dòng)元素引起的問(wèn)題和解決辦法窗悯？絕對(duì)定位和相對(duì)定位，元素浮動(dòng)后的 display 值
- link 和@import 引入 css 的區(qū)別
- 解釋一下 css3 的 flexbox亏钩，以及適用場(chǎng)景
- inline 和 inline-block 的區(qū)別
- 哪些是塊級(jí)元素那些是行級(jí)元素欺旧，各有什么特點(diǎn)
- grid 布局
- table 布局的作用
- 實(shí)現(xiàn)兩欄布局有哪些方法？
- css dpi
- 你知道 attribute 和 property 的區(qū)別么
- css 布局問(wèn)題栅哀？css 實(shí)現(xiàn)三列布局怎么做称龙？如果中間是自適應(yīng)又怎么做？
- 流式布局如何實(shí)現(xiàn)鲫尊，響應(yīng)式布局如何實(shí)現(xiàn)
- 移動(dòng)端布局方案
- 實(shí)現(xiàn)三欄布局（圣杯布局，雙飛翼布局咳蔚，flex 布局）
- 清除浮動(dòng)的原理
- overflow:hidden 有什么缺點(diǎn)搔驼？
- padding 百分比是相對(duì)于父級(jí)寬度還是自身的寬度
- css3 動(dòng)畫(huà)，transition 和 animation 的區(qū)別堆巧，animation 的屬性泼菌，加速度，重力的模擬實(shí)現(xiàn)
- CSS 3 如何實(shí)現(xiàn)旋轉(zhuǎn)圖片（transform: rotate）
- sass less
- 對(duì)移動(dòng)端開(kāi)發(fā)了解多少荒揣？（響應(yīng)式設(shè)計(jì)焊刹、Zepto恳蹲；@media俩滥、viewport、JavaScript 正則表達(dá)式判斷平臺(tái)错忱。）
- 什么是 bfc挂据，如何創(chuàng)建 bfc？解決什么問(wèn)題掷倔？
- CSS 中的長(zhǎng)度單位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）
- CSS 選擇器的優(yōu)先級(jí)是怎樣的个绍？
- 雪碧圖
- svg
- 媒體查詢的原理是什么？
- CSS 的加載是異步的嗎？表現(xiàn)在什么地方吟宦？
- 常遇到的瀏覽器兼容性問(wèn)題有哪些？常用的 hack 的技巧
- 外邊距合并
- 解釋一下“::before”和“:after”中的雙冒號(hào)和單冒號(hào)的區(qū)別
JS
- js 的基本類(lèi)型有哪些袁波？引用類(lèi)型有哪些蜗侈？null 和 undefined 的區(qū)別。
- 如何判斷一個(gè)變量是 Array 類(lèi)型枷颊？如何判斷一個(gè)變量是 Number 類(lèi)型该面？（都不止一種）
- Object 是引用類(lèi)型嘛？引用類(lèi)型和基本類(lèi)型有什么區(qū)別题造？哪個(gè)是存在堆哪一個(gè)是存在棧上面的？
- JS 常見(jiàn)的 dom 操作 api
- 解釋一下事件冒泡和事件捕獲 https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html
- 事件委托（手寫(xiě)例子）界赔，事件冒泡和捕獲，如何阻止冒泡淮悼？如何組織默認(rèn)事件？
- 對(duì)閉包的理解渊鞋？什么時(shí)候構(gòu)成閉包瞧挤？閉包的實(shí)現(xiàn)方法？閉包的優(yōu)缺點(diǎn)执俩？
- this 有哪些使用場(chǎng)景癌刽？跟 C,Java 中的 this 有什么區(qū)別？如何改變 this 的值衡奥？
- call远荠，apply，bind
- 顯示原型和隱式原型档址，手繪原型鏈，原型鏈?zhǔn)鞘裁词厣欤繛槭裁匆性玩?/li>
- 創(chuàng)建對(duì)象的多種方式
- 實(shí)現(xiàn)繼承的多種方式和優(yōu)缺點(diǎn)
- new 一個(gè)對(duì)象具體做了什么
- 手寫(xiě) Ajax尼摹，XMLHttpRequest
- 變量提升
- 舉例說(shuō)明一個(gè)匿名函數(shù)的典型用例
- 指出 JS 的宿主對(duì)象和原生對(duì)象的區(qū)別剂娄，為什么擴(kuò)展 JS 內(nèi)置對(duì)象不是好的做法？有哪些內(nèi)置對(duì)象和內(nèi)置函數(shù)宜咒？
- attribute 和 property 的區(qū)別
- document load 和 document DOMContentLoaded 兩個(gè)事件的區(qū)別
- === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
- typeof 能夠得到哪些值
- 什么是“use strict”,好處和壞處
- 函數(shù)的作用域是什么故黑？js 的作用域有幾種庭砍？
- JS 如何實(shí)現(xiàn)重載和多態(tài)
- 常用的數(shù)組 api混埠，字符串 api
- 原生事件綁定（跨瀏覽器），dom0 和 dom2 的區(qū)別揭北？
- 給定一個(gè)元素獲取它相對(duì)于視圖窗口的坐標(biāo)
- 如何實(shí)現(xiàn)圖片滾動(dòng)懶加載
- js 的字符串類(lèi)型有哪些方法吏颖？ 正則表達(dá)式的函數(shù)怎么使用？
- 深拷貝
- 編寫(xiě)一個(gè)通用的事件監(jiān)聽(tīng)函數(shù)
- web 端 cookie 的設(shè)置和獲取
- setTimeout 和 promise 的執(zhí)行順序
- JavaScript 的事件流模型都有什么疚俱？
- navigator 對(duì)象缩多，location 和 history
- js 的垃圾回收機(jī)制
- 內(nèi)存泄漏的原因和場(chǎng)景
- DOM 事件的綁定的幾種方式
- DOM 事件中 target 和 currentTarget 的區(qū)別
- typeof 和 instanceof 區(qū)別，instanceof 原理
- js 動(dòng)畫(huà)和 css3 動(dòng)畫(huà)比較
- JavaScript 倒計(jì)時(shí)（setTimeout）
- js 處理異常
- js 的設(shè)計(jì)模式知道那些
- 輪播圖的實(shí)現(xiàn)梁钾，以及輪播圖組件開(kāi)發(fā)逊抡，輪播 10000 張圖片過(guò)程
- websocket 的工作原理和機(jī)制。
- 手指點(diǎn)擊可以觸控的屏幕時(shí)麦射，是什么事件灯谣？
- 什么是函數(shù)柯里化蛔琅？以及說(shuō)一下 JS 的 API 有哪些應(yīng)用到了函數(shù)柯里化的實(shí)現(xiàn)？(函數(shù)柯里化一些了解辜窑，以及在函數(shù)式編程的應(yīng)用寨躁，最后說(shuō)了一下 JS 中 bind 函數(shù)和數(shù)組的 reduce 方法用到了函數(shù)柯里化。)
- JS 代碼調(diào)試
ES6
- 談一談 promise
- 所有的 ES6 特性你都知道嗎职恳？如果遇到一個(gè)東西不知道是 ES6 還是 ES5, 你該怎么區(qū)分它
- es6 的繼承和 es5 的繼承有什么區(qū)別
- promise 封裝 ajax
- let const 的優(yōu)點(diǎn)
- es6 generator 是什么，async/await 實(shí)現(xiàn)原理
- ES6 和 node 的 commonjs 模塊化規(guī)范區(qū)別
- 箭頭函數(shù)色徘，以及它的 this
計(jì)算機(jī)網(wǎng)絡(luò)
- HTTP 協(xié)議頭含有哪些重要的部分，HTTP 狀態(tài)碼
- 網(wǎng)絡(luò) url 輸入到輸出怎么做横腿？
- 性能優(yōu)化為什么要減少 HTTP 訪問(wèn)次數(shù)？
- Http 請(qǐng)求的過(guò)程與原理
- https（對(duì)是 https）有幾次握手和揮手耿焊？https 的原理扬蕊。
- http 有幾次揮手和握手？TLS 的中文名歇父？TLS 在哪一網(wǎng)絡(luò)層再愈？
- TCP 連接的特點(diǎn)，TCP 連接如何保證安全可靠的垂睬？
- 為什么 TCP 連接需要三次握手抗悍，兩次不可以嗎，為什么
- 為什么 tcp 要三次握手四次揮手缴渊？
- tcp 的三次握手和四次揮手畫(huà)圖（當(dāng)場(chǎng)畫(huà)寫(xiě) ack 和 seq 的值）？
- tcp 與 udp 的區(qū)別
- get 和 post 的區(qū)別蝌借？什么情況下用到指蚁？
- http2 與 http1 的區(qū)別？
- websocket
- 什么是 tcp 流稍坯，什么是 http 流
- babel 是如何將 es6 代碼編譯成 es5 的
- http2 的持久連接和管線化
- 域名解析時(shí)是 tcp 還是 udp
- 域名發(fā)散和域名收斂
- Post 一個(gè) file 的時(shí)候 file 放在哪的搓劫？
- HTTP Response 的 Header 里面都有些啥袜蚕？
瀏覽器相關(guān)
- 跨域牲剃，為什么 JS 會(huì)對(duì)跨域做出限制
- 前端安全：xss雄可，csrf...
- 瀏覽器怎么加載頁(yè)面的？script 腳本阻塞有什么解決方法数苫？defer 和 async 的區(qū)別？
- 瀏覽器強(qiáng)緩存和協(xié)商緩存
- 瀏覽器的全局變量有哪些
- 瀏覽器同一時(shí)間能夠從一個(gè)域名下載多少資源
- 按需加載箱残，不同頁(yè)面的元素判斷標(biāo)準(zhǔn)
- web 存儲(chǔ)止吁、cookies、localstroge 等的使用和區(qū)別
- 瀏覽器的內(nèi)核
- 如何實(shí)現(xiàn)緩存機(jī)制盼理？（從 200 緩存俄删，到 cache 到 etag 再到）
- 說(shuō)一下 200 和 304 的理解和區(qū)別
- 什么是預(yù)加載、懶加載
- 一個(gè) XMLHttpRequest 實(shí)例有多少種狀態(tài)臊诊？
- dns 解析原理，輸入網(wǎng)址后如何查找服務(wù)器
- 服務(wù)器如何知道你抓艳？
- 瀏覽器渲染過(guò)程
- ie 的某些兼容性問(wèn)題
- session
- 拖拽實(shí)現(xiàn)
- 拆解 url 的各部分
工程化
- 對(duì) webpack,gulp秽褒，grunt 等有沒(méi)有了解?對(duì)比威兜。
- webpack 的入口文件怎么配置，多個(gè)入口怎么分割蚂踊。
- webpack 的 loader 和 plugins 的區(qū)別
- gulp 的具體使用笔宿。
- 前端工程化的理解棱诱、如何自己實(shí)現(xiàn)一個(gè)文件打包迈勋，比如一個(gè) JS 文件里同時(shí)又 ES5 和 ES6 寫(xiě)的代碼，如何編譯兼容他們
模塊化
- 對(duì) AMD,CMD,CommonJS 有沒(méi)有了解?
- 為什么要模塊化靡菇？不用的時(shí)候和用 RequireJs 的時(shí)候代碼大概怎么寫(xiě)米愿？
- 說(shuō)說(shuō)有哪些模塊化的庫(kù)，有了解過(guò)模塊化的發(fā)展的歷史嗎较鼓？
- 分別說(shuō)說(shuō)同步和異步模塊化的應(yīng)用場(chǎng)景违柏，說(shuō)下 AMD 異步模塊化實(shí)現(xiàn)的原理？
- 如何將項(xiàng)目里面的所有的 require 的模塊語(yǔ)法換成 import 的 ES6 的語(yǔ)法脖母？
- 使用模塊化加載時(shí)闲孤，模塊加載的順序是怎樣的，如果不知道讼积，根據(jù)已有的知識(shí)，你覺(jué)得順序應(yīng)該是怎么樣的舆绎？
框架
- 使用過(guò)哪些框架们颜？
- zepto 和 jquery 是什么關(guān)系，有什么聯(lián)系么努溃？
- jquery 源碼如何實(shí)現(xiàn)選擇器的阻问，為什么$取得的對(duì)象要設(shè)計(jì)成數(shù)組的形式，這樣設(shè)計(jì)的目的是什么
- jquery 如何綁定事件，有幾種類(lèi)型和區(qū)別
- 什么是 MVVM哮塞，MVC凳谦，MVP
- Vue 和 Angular 的雙向數(shù)據(jù)綁定原理
- Vue，Angular 組件間通信以及路由原理
- react 和 vue 的生命周期
- react 和 vue 的虛擬 dom 以及 diff 算法
- vue 的 observer邻眷，watcher剔交，compile
- react 和 angular 分別用在什么樣的業(yè)務(wù)嗎？性能方面和 MVC 層面上的區(qū)別
- jQuery 對(duì)象和 JS 的 Element 有什么區(qū)別
- jQuery 對(duì)象是怎么實(shí)現(xiàn)的
- jQuery 除了它封裝了一些方法外驯镊，還有什么值得我們?nèi)W(xué)習(xí)和使用的竭鞍？
- jQuery 的$(‘xxx’)做了什么事情
- 介紹一下 bootstrap 的柵格系統(tǒng)是如何實(shí)現(xiàn)的
Nodejs
- 對(duì) nodejs 有沒(méi)有了解
- Express 和 koa 有什么關(guān)系，有什么區(qū)別偎快？
- nodejs 適合做什么樣的業(yè)務(wù)？
- nodejs 與 php裆馒，java 有什么區(qū)別
- Nodejs 中的 Stream 和 Buffer 有什么區(qū)別丐怯？
- node 的異步問(wèn)題是如何解決的？
- node 是如何實(shí)現(xiàn)高并發(fā)的梗搅？
- 說(shuō)一下 Nodejs 的 event loop 的原理
數(shù)據(jù)結(jié)構(gòu)
- 基本數(shù)據(jù)結(jié)構(gòu)：（數(shù)組效览、隊(duì)列、鏈表丐枉、堆、二叉樹(shù)洼哎、哈希表等等）
- 8 種排序算法沼本，原理，以及適用場(chǎng)景和復(fù)雜度
- 說(shuō)出越多越好的費(fèi)波拉切數(shù)列的實(shí)現(xiàn)方法识补？
性能優(yōu)化
- cdn 的用法是什么辫红？什么時(shí)候用到？
- 瀏覽器的頁(yè)面優(yōu)化贴妻？
- 如何優(yōu)化 DOM 操作的性能
- 單頁(yè)面應(yīng)用有什么 SEO 方案？
- 單頁(yè)面應(yīng)用首屏顯示比較慢澎胡，原因是什么？有什么解決方案攻谁？
其他
- 正則表達(dá)式
- 前端渲染和后端渲染的優(yōu)缺點(diǎn)
- 數(shù)據(jù)庫(kù)的四大特性弯予，什么是原子性，表的關(guān)系
- 你覺(jué)得前端體系應(yīng)該是怎樣的受楼？
- 一個(gè)靜態(tài)資源要上線呼寸，里面有各種資源依賴，你如何平穩(wěn)上線
- 如果要你去實(shí)現(xiàn)一個(gè)前端模板引擎骚灸，你會(huì)怎么做
- 知道流媒體查詢嗎？
- SEO
- mysql 和 mongoDB 有什么區(qū)別甚牲？
- restful 的 method 解釋
- 數(shù)據(jù)庫(kù)知識(shí)蝶柿、操作系統(tǒng)知識(shí)
- click 在 ios 上有 300ms 延遲，原因及如何解決
- 移動(dòng)端的適配雏赦，rem+媒體查詢/meta 頭設(shè)置
- 移動(dòng)端的手勢(shì)和事件；
- unicode星岗，utf8，gbk 編碼的了解俏橘，亂碼的解決
三面、四面常問(wèn)的開(kāi)放性問(wèn)題
- 你都看過(guò)什么書(shū)靴寂？最近在看什么書(shū)召耘？
- 用過(guò)什么框架？有沒(méi)有看過(guò)什么框架的代碼收壕？
- 有沒(méi)有學(xué)過(guò)設(shè)計(jì)模式轨蛤？
- 說(shuō)一說(shuō)觀察者模式吧！能不能寫(xiě)出來(lái)祥山？
- 你最大的優(yōu)點(diǎn)是什么？那你最大的缺點(diǎn)呢澳窑？
- 你大學(xué)期間做過(guò)最瘋狂的事情是什么供常？
- 你除了寫(xiě)博客還有什么輸出？
- 現(xiàn)在你的領(lǐng)導(dǎo)給你了一份工作麻裁，要求你一個(gè)星期完成，但你看了需求以后估計(jì)需要 3 周才能完成煎源，你該怎么辦香缺？
- 平時(shí)關(guān)注的前端技術(shù)
- 如何規(guī)劃自己的職業(yè)生涯
- 項(xiàng)目過(guò)程中，有遇到什么問(wèn)題嗎锋拖？怎么解決的？
- 最近在研究哪方面的東西兽埃？
- 請(qǐng)介紹一項(xiàng)你最熱愛(ài)、最擅長(zhǎng)的專(zhuān)業(yè)領(lǐng)域讲仰，并且介紹的學(xué)習(xí)規(guī)劃痪蝇。
- 請(qǐng)介紹你參與的印象最深刻的一個(gè)項(xiàng)目，為什么趁矾？并且介紹你在項(xiàng)目中的角色和發(fā)揮的作用给僵。
HR 面
- 你為什么要學(xué)習(xí)前端？
- 你平時(shí)的是怎么學(xué)習(xí)前端的蔓同？有什么輸出？
- 你覺(jué)得自己最好的項(xiàng)目是什么斑粱？
- 身邊比較佩服的人有什么值得你學(xué)習(xí)的脯爪？你為什么沒(méi)有跟他們一樣？
- 同事的什么問(wèn)題會(huì)讓你接受不了
- 壓力最大的事情是什么尚揣？
- 和同學(xué)做過(guò)的最好的項(xiàng)目掖举？
- 身邊的朋友通常對(duì)你的評(píng)價(jià)是什么
- 喜歡什么樣的工作氛圍
- 如何看待加班
- 有沒(méi)有對(duì)象
- 意向城市
- 其他的 offer
- 為什么要錄取你？
- 大學(xué)里花費(fèi)時(shí)間最多的三件事情
- 周末都會(huì)干什么滨巴？
- 未來(lái)職業(yè)規(guī)劃
建議
- 面試的時(shí)候不要表現(xiàn)出自己想創(chuàng)業(yè)。敲黑板恭取。
- 從來(lái)沒(méi)有看過(guò)源碼的話熄守，建議從 jQuery耗跛，zepto 這之類(lèi)的源碼入手调塌，后期可以了解 Vue，React 常見(jiàn)的功能的源碼思路和實(shí)現(xiàn)羔砾。
- 項(xiàng)目經(jīng)驗(yàn)描述的時(shí)候不用太太太詳細(xì)偶妖，揀重點(diǎn)的講。（因?yàn)槲揖鸵恢闭f(shuō)一直說(shuō)态秧，最后面試官評(píng)價(jià)插不上話評(píng)價(jià)減分扼鞋。）
最后
我接近兩個(gè)月的校招里，這里的很多知識(shí)點(diǎn)都是從別人的博客云头、面經(jīng)一篇一篇的摳下來(lái)的，這是前人給后人鋪好的路匣砖。前端的知識(shí)點(diǎn)其實(shí)說(shuō)多也不多竿痰，只是太雜，所以我沒(méi)有整理的特別詳細(xì)变隔。我之所以以這樣的形式分享而不是以面經(jīng)的形式，主要是有需要的同學(xué)們能夠“拿去即用”匣缘，也是整理一下我原來(lái)的筆記鲜棠。
呀，身邊的人都好強(qiáng)柑爸，繼續(xù)學(xué)習(xí)盒音。[抱拳]
