前言

在 20 年春招求職過程中收獲了很多大佬們的經(jīng)驗分享和知識總結(jié)，現(xiàn)在來一份誠意滿滿的回饋，將 2020 年騰訊前端面經(jīng)進行一次大整理，希望大家都能參與進來，祝小伙伴們春秋招順利~

自己也統(tǒng)計了一下，一共整理了 「522」 道真題，這是不是又有一種考試的感覺了呢哈哈哈。

開門見山，直接上思維導(dǎo)圖（需要思維導(dǎo)圖可在文末或者后臺回復(fù)【小獅子】獲取哈，已經(jīng)為大家整理好了）：

考慮圖片過大不太清晰問題，已經(jīng)提前為小伙伴們準(zhǔn)備好了最全資料，在本文末尾自取哈~

“

答案提供在 https://github.com/Chocolate1999/Front-end-learning-to-organize-notes （小獅子前端の學(xué)習(xí)整理筆記），別忘了star 嗷~

”

小伙伴們可根據(jù)不同的 Label 查看對應(yīng)內(nèi)容，助你春秋招牛氣沖天~

星辰大海

“

Chocolate 同學(xué)個人想法，可以下拉直接到達干貨內(nèi)容~

”

在創(chuàng)建前端交流群之前，我創(chuàng)建了一個 acm 的群，當(dāng)時我還沒有開通會員，群人員限制 200 人，猶記得當(dāng)時群里面就 10 來個人，當(dāng)時我在群里大概說了一句：人數(shù)還不怎么多，說不定以后人就多了。

下面是我在 csdn 的一個公告欄，當(dāng)時也是通過這個匯聚的一些 acmer。

當(dāng)時還記得群里一位小伙伴很有熱情的說了一句：可以的，我相信群主可以的?。S著人數(shù)越來越多包括群友改名了，已經(jīng)不太記得那位小伙伴的昵稱了，在此還是非常感謝他的支持?。?/p>

沒想到現(xiàn)如今是 2000 人大群了，群里面融入了許多年輕的血液，交流的內(nèi)容我也跟不上了，我就開始選擇潛水了（畢竟我就是一個 acm 小菜雞QAQ）

就在 23 日晚，看到群友提到了 木下爺 ak 了 IOI，實在是太強了！

對自己而言還是蠻有成就感的，沒想到當(dāng)初一個小小的群，居然也能匯聚這么多優(yōu)秀的人！那么，小獅子前端交流群未來是不是也會呢，很期待~

好了，題外話環(huán)節(jié)就到此了，今天的這篇干貨是當(dāng)初準(zhǔn)備了很久很久的，我自己核實了一遍，然后將文中排版也進行了優(yōu)化，比如代碼塊為了讓讀者更好體驗，選擇用 Carbon 生成代碼圖片，這樣就不會左右拖動查看代碼了，這對于體驗不是很好。其次，對于中英文之間，為了閱讀體驗，進行空格分隔等等。

這篇文章是一次誠意滿滿的回饋，當(dāng)然，我的回饋可不僅僅這篇文章，在去年秋招那會，感觸頗深，因此在今年乃至以后，小獅子都會輸出干貨文章，那么在今年的秋招，我還會輸出哪些文章呢，在這里給大家提前告知一下：

• 簡歷如何制作，Chocolate 同學(xué)個人簡歷分享
• 春秋招中個人覺得很有價值的面試題分析（目前已經(jīng)發(fā)了一篇了）

一道讓你掉頭發(fā)的前端 JS 輸出題，80% 不能全對！

• 一面 二面 三面 總監(jiān)面 HR 面的面試技巧
• 職業(yè)選擇方向
• 三方協(xié)議與實習(xí)協(xié)議的一些踩坑以及注意事項
• 秋招毀 offer 的踩坑經(jīng)歷
• 群友們成功經(jīng)驗分享（考慮中，可能會有？）
• 畢業(yè)季相關(guān)事宜（檔案、團員關(guān)系、報到證吧啦吧啦一堆事情）
• Chocolate 同學(xué)寫畢業(yè)論文，畢業(yè)設(shè)計時用到的一些提高效率的工具
• ...（暫時想到這么多，上述提及的是會落實的）

個人想法到這就結(jié)束了，下文就是干貨內(nèi)容了，我是 Chocolate，小獅子其中一員，當(dāng)然，還會有另外一位原創(chuàng)作者，叫 HearLing，秋招季都會與大家相遇的，學(xué)如逆水行舟，不進則退，好文大家不要白嫖吼，給個「點贊 + 在看」，就算是對小獅子的催更啦~

計算機網(wǎng)絡(luò)

• 常見狀態(tài)碼知道哪些？304 403 405分別是什么
• http 狀態(tài)碼 302 504分別代表什么意思
• 響應(yīng)狀態(tài)碼，200(from disk cache)，200（from memory cache），304 的區(qū)別。
• POST 和 GET 的區(qū)別，除了長度，安全其他的
• http 介紹一下，為什么 http2.0 不普及，websocket 的基本指令，性能
• 爬蟲，網(wǎng)站如何去做防止，如何判斷
• tcp 和 udp 區(qū)別
• 那如果讓你做一個視頻聊天軟件，你用 tcp 還是 udp ？為什么？
• tcp 是怎么去保證可靠傳輸?shù)模?/section>
• tcp 三次握手
• tcp 握手結(jié)束第一次的包有多大
• TCP 的超時重傳
• TCP 為什么是三次握手呢？
• TCP 如何去終止之前發(fā)送報文的？
• tcp 擁塞控制（四部分）
• CDN 的原理是什么
• dns 過程
• HTTP 協(xié)議，1.1 和 2.0 的區(qū)別，了解哪些請求方法，請求/響應(yīng)頭部
• 為什么項目不用 https 以及 http 與 https 的區(qū)別
• https 的加密過程以及如何防止中間人攻擊
• 為什么 tcp 連接是可靠的（校驗和重傳）
• 通過什么機制處理服務(wù)端接收數(shù)據(jù)亂序丟包等（滑動窗口和擁塞控制）
• 在 TCP 建立連接后，路由器發(fā)生了什么變化
• http 的 header 和 body  講的很詳細 請求方式 請求頭內(nèi)容 狀態(tài)碼
• http2 相關(guān)問題。在 http1 的時代，會經(jīng)常把很多資源部署在不同域名下，為什么？（有可能是減少 cookie 的傳輸量）
• TCP 和 UDP 的區(qū)別和場景，又問如果讓你設(shè)計一個既保證準(zhǔn)確性速度又快的協(xié)議，怎么做
• OSI7 層模型 每層大致用處及相關(guān)協(xié)議
• https ,http2.0，websocket(提了一下)，TLS握手，怎么知道數(shù)字證書的真假
• http2.0 有了解嗎？有抓包看看到底什么個情況嗎？
• cookie session 區(qū)別
• session 怎么保存、有多臺服務(wù)器，sessionid 怎么找
• 為什么 cookie 可以用來保存登錄狀態(tài)
• http 頭部 chunk
• get 發(fā)一個 tcp 包，post 發(fā)兩個 tcp 包，這種情況是一定的嗎，什么情況下不是這樣
• post 如何把數(shù)據(jù)放到 url 中
• 一個 http 的報文的頭和 body 之間有什么分隔
• 出現(xiàn) 304 的場景，通過什么協(xié)議頭來確認（304 的響應(yīng)頭）
• websocket 原理，如何實現(xiàn)，和 http 報文結(jié)構(gòu)有哪些不同（注意是結(jié)構(gòu)不是特性）
• cookie，localStorage，sessionStorage 使用和區(qū)別
• ca 驗證
• wireshark 能抓包到 https 請求的內(nèi)容嗎
• https 怎么預(yù)防中間人攻擊
• http 請求的過程中怎么知道數(shù)據(jù)已經(jīng)發(fā)送完畢要斷開連接，怎么斷開
• 網(wǎng)絡(luò)的七層模型
• get post head 這些請求方式有什么不同
• 了解輪詢和 websocket 嗎？
• 說一下 websocket 的四個階段（websocket 不能使用時要怎么處理、使用什么方式來代替 websocket）

操作系統(tǒng)

• 進程和線程
• 進程之間的通信知道嗎？node 中自己實現(xiàn)過哪種通信？（說了管道，消息隊列，套接字，信號量啥的，表示自己不會 node，沒實現(xiàn)過，說了瀏覽器的多個 tag 之間也屬于進程通信，表示不滿意，不要說應(yīng)用層上的東西）

瀏覽器工作原理

• 同源是什么意思，除了那三個沒有了么
• 事件冒泡和事件捕獲，應(yīng)用？注意？
• 事件輪詢 Eventloop
• promise、console.log、setTimeout、執(zhí)行順序
• 重繪和重排
• URl 到頁面加載過程
• 跨域問題，解決，jsonp 原理，不受跨域影響的標(biāo)簽
• Etag 是什么？
• 瀏覽器儲存 cookie，localStorage，sessionStorage 詳細區(qū)別
• http 緩存，如果緩存還在有效期內(nèi)，但是資源變更了怎么辦
• jsonp 跨域的安全問題
• cors 跨域，要支持兩個域名怎么做
• js 會阻塞加載，怎么阻塞的？
• http 緩存更新靜態(tài)文件的方式
• postmessage
• 瀏覽器卡頓，你怎么去排除？（服務(wù)器到后臺都講了一遍，他告訴我如果數(shù)據(jù)沒問題，是瀏覽器的問題怎么排除，我說了代碼中打斷點調(diào)試，他不滿意，說我 Chrome 的調(diào)試工具臺掌握很不好）
• PC瀏覽器的分布？主流瀏覽器的版本
• 緩存問題，Etag 和 IF-modify-since 是怎么來的？
• 非同源 cookie 怎么訪問
• 如果要你緩存圖片你怎么做？
• 有多臺服務(wù)器，sessionid 怎么找

瀏覽器安全

• 知道哪些前端危險？如何防御
• XSS 的原理，如何防御 XSS？為什么換成實體字符就好了？
• 假如說某鏈接獲取到你的敏感信息，發(fā)送奇怪請求到服務(wù)器，你怎么去防御？
• 講一講 cookie 是怎么發(fā)送到服務(wù)端，具體過程，盡量詳細
• csrf token 能存儲在 cookie 里嗎？其實是可以的，只要服務(wù)端不要去從 cookie 里面取 csrf token 就行
• 黑客是怎么去利用 cookie 的？這個請求到底是怎么構(gòu)造的？
• http 請求中 option 主要是干什么的
• xss 的原理和防御措施（講了加強 cookie，過濾輸入，過濾輸出）
• CSRF 了解過嗎，它的攻擊流程是怎樣的，如何防御（refencer 可不可以被修改、token 可不可以被竊取，既然有漏洞那不是白做了）

HTML

• div 里面嵌套一個 tip，當(dāng) tip 改變的時候，div 會重新渲染嗎，怎么樣實現(xiàn) div 不會重新渲染
• html5 新特性
• HTML 跟 HTML5 的區(qū)別（解釋了本質(zhì)區(qū)別，框架上的區(qū)別）
• web 語義化、語義化標(biāo)簽有哪些、section 標(biāo)簽的作用

JS

基礎(chǔ)問題

• let,const,var 的區(qū)別。const 定義的對象是否可以修改
• js 的原型和原型鏈，原型鏈的終點在哪里？
• js 的基本數(shù)據(jù)類型
• 事件委托，詳細講
• es6 新特性，常用語法有哪些
• this 的原理，call，apply，bind 的區(qū)別
• 全等和弱等的區(qū)別
• 構(gòu)造函數(shù)的原型
• 函數(shù)柯里化
• 數(shù)組淺拷貝
• 立即執(zhí)行函數(shù)
• 瀏覽器事件模型, IE的有什么特殊, 如何兼容(attachEvent與addEventListener)
• js 宏任務(wù)和微任務(wù)
• 數(shù)組查找的方法
• 了解過 for...of 嗎
• class 繼承和 js 繼承的區(qū)別
• {}的原型鏈
• typeof null 是什么，為什么是這個結(jié)果。
• typeof 和 instanceof 有什么區(qū)別，說說判斷的原理
• 數(shù)組里面新加的方法你有用過哪些？
• 微任務(wù)有哪些？
• 如何判斷 Array 和 Object
• js 精度問題（0.1+0.2==0.3的問題）
• 講一下 generator 生成器
• 講一下聲明提升
• 講一下塊作用域
• 原型對象的 constructor 指向誰
• dom 規(guī)范跟 js 規(guī)范有什么區(qū)別？
• js 定時器，設(shè)置一個時間，會在那個時間之后準(zhǔn)時執(zhí)行嗎？
• transition 有什么需要注意的地方？
• js 的錯誤監(jiān)控機制有了解嗎？

進階問題

• 閉包，應(yīng)用
• 防抖，節(jié)流
• setTimeout 第二個參數(shù)為0時和匿名自執(zhí)行函數(shù)區(qū)別
• js 里堆和棧的區(qū)別
• new 操作符之后的操作
• this 指向
• ES6 的使用，相比ES5的好處
• 簡單說一下 es6 的 symbol 屬性
• ES6的新特性（變量聲明，字符串模板，數(shù)組的新方法 flat，函數(shù)的默認值，箭頭函數(shù)、class 繼承，promise，await/async 講的很詳細）
• 如果要同時啟動兩個異步任務(wù)，怎么做
• 深拷貝/淺拷貝問題
• 說一下鏈表的實現(xiàn)
• bind(object).bind(windows) 后的 this 指向
• 構(gòu)造繼承里 Function.call(argu)里傳進來的參數(shù) argu 是什么
• promise 介紹，你是怎么用 promise 的，怎么實現(xiàn)一個 promise
• async 是什么的語法糖，generator 怎么用
• ajax 有哪些狀態(tài)，每個狀態(tài)分別對應(yīng)什么
• 手動實現(xiàn)一個 ajax，這樣實現(xiàn)的方法叫什么
• require 和 import 的區(qū)別？AMD、CMD、ES6
• callback 的缺點，Promise 的狀態(tài)有哪些，generator，async 和 await
• js 溢出怎么解決
• 如何實現(xiàn)私有的方法/屬性
• ES5 實現(xiàn)繼承的方法，構(gòu)造繼承，原型鏈繼承，組合繼承，寄生組合繼承
• 怎么用正則判斷當(dāng)前域名是否為 qq.com，或者 xxx.qq.com
• try...catch...中如果異步代碼出錯怎么辦？
• js 怎么刪除 cookie
• cookie 的幾個字段的功能
• 怎么創(chuàng)建一個 Promise，參數(shù)是什么，怎么中斷一個 promise，除了拋異常和 return new Promise()還有什么
• 怎么判斷一個空數(shù)組
• 箭頭函數(shù)跟普通函數(shù)的區(qū)別，普通函數(shù)的作用域
• let const, babel 中的實現(xiàn)
• fetch 的使用，考察通信是否了解
• 事件機制，捕獲和冒泡，如何阻止冒泡？
• 阻塞、非阻塞和異步同步是對應(yīng)的嗎？一樣的嗎？
• window.onload 和 document.ready，onload 是所有資源包括圖片都加載完才執(zhí)行
• 如何給不存在的元素綁定事件監(jiān)聽
• 可以在捕獲階段實現(xiàn)事件代理嗎，為什么業(yè)界都用冒泡？（原因應(yīng)該是，捕獲和冒泡沒有明顯的優(yōu)劣之分，但是冒泡事件流模型被大多數(shù)瀏覽器支持，兼容性更好）
• promise 的 api：如果有10個調(diào)用請求，那么哪個api能查到最快調(diào)用的請求
• promise 中不聲明 async，可以用 await嗎
• 內(nèi)存泄漏
• 怎么判斷一個元素有沒有被引用
• 全局變量為什么不會被垃圾處理
• BOM 和 DOM 的區(qū)別,BOM 的方法講完整一點
• 點擊事件是宏任務(wù)還是微任務(wù)
• class 定義類和 function 定義類的區(qū)別

輸出題

• 以下代碼執(zhí)行結(jié)果

• 輸出 for 循環(huán)中定時器的輸出語句結(jié)果
• 打印結(jié)果是什么

• 問如何改造，才能實現(xiàn)真正的效果，閉包可以嗎，然后用閉包實現(xiàn)一下這個效果

TS

• TS 聲明文件
• TS 可選屬性

CSS

• 介紹一下 css 盒模型
• position 的值有哪些，區(qū)別是什么
• bfc 是什么。怎么樣形成 bfc，bfc 有哪些用
• 實現(xiàn)一個垂直水平居中
• 左右布局，sider + 右側(cè)自適應(yīng)如何實現(xiàn)
• animation 的參數(shù)，怎樣實現(xiàn)一個動畫
• 說說盒模型和怪異盒模型
• 預(yù)處理器 sass 優(yōu)點
• 樣式框架的原理，布局方法有哪些，flex，grid，還有嗎
• 為什么下面的 margin 可以居中？

“

.outer { display: flex; } .inner { margin: auto; }

”

• margin-top 為負值，除了絕對定位還有哪些地方碰到過？
• 怎么使兩個 div 并列
• 父元素和子元素寬高不知道的情況如何居中子元素（這個問題其實和父元素高度知不知道無關(guān)，因為文檔流中父元素默認包裹子元素，高度是由子元素撐開的。）
• CSS 基礎(chǔ)好么，知道 DEN 么？
• css 中隱藏元素的方法，display:none, visibility:hidden,區(qū)別？還有什么方式
• css 絕對定位和相對定位都是以誰為基準(zhǔn)
• css 彈性盒子
• CSS 和 JS 實現(xiàn)動畫的方式
• ease-in 怎么用 js 實現(xiàn)？
• CSS 和 JS 實現(xiàn)動畫哪個好？為什么？
• 實現(xiàn)一個塊從左到右的移動
• css 設(shè)置元素隱藏，兩種有什么區(qū)別？
• css 選擇器有哪些？
• css 怎么實現(xiàn)列表中隔一行變一個顏色
• 實現(xiàn)一個自適應(yīng)內(nèi)容的正方形盒子
• css 有哪些單位
• 講一下 css 的 flex 布局
• px 和 rem 的區(qū)別，舉個例子說明一下
• 浮動布局和 flex 布局相比有什么優(yōu)缺點
• 寫 CSS 喜歡用什么布局

node

• node 用什么實現(xiàn)模塊化管理
• 說一下 node 的 nextTick
• 說說瀏覽器和 node.js 里面捕獲錯誤的方式
• 談?wù)勀銓?nodejs 的理解
• node 和瀏覽器有什么區(qū)別嗎

移動端&小程序

• 移動端 300ms 的問題，以及 fastclick 的原理
• 小程序的話，你做了哪些優(yōu)化？說說吧

Webpack

• 介紹一下 webpack，webpack 有哪些配置，loader 和 plugin 有什么區(qū)別
• webpack 的原理機制、配置了入口之后發(fā)生了什么
• Webpack 用過么？里面的 tree-shaking 什么原理？（tree-shaking 是因為 import 靜態(tài)引入的能力，得以對文件內(nèi)容進行淺層比較，去掉未被使用的代碼。）
• webpack 的打包時間優(yōu)化
• webpack 的打包流程
• Require/import 如何解決循環(huán)引用 Webpack 是怎么做的
• webpack 異步加載路由需要怎么配置，問還有優(yōu)化首屏渲染的其他方法嗎
• webpack loader 在什么時期起作用
• 寫一個 webpack 插件應(yīng)該怎么寫
• webpack 中如何實現(xiàn)按需加載的
• webpack 依賴 node 嗎？
• 有了解過 webpack 里面的拆包嗎，說一下你的拆包策略
• 你覺得拆包的意義在哪，結(jié)合 http 的緩存詳細說下拆包你覺得拆包的意義在哪，結(jié)合 http 的緩存詳細說下拆包
• 拆包過程有遇到過什么坑嗎，如何解決的（有個 webpack 的 bundle 和 module 的 id 自增導(dǎo)致緩存失效的問題）
• 了解 PWA 嗎，webpack 怎么做 PWA

設(shè)計模式

• 設(shè)計模型 策略模式，單例模式，工廠模式

前端框架

• 了解有哪些框架，臟數(shù)據(jù)檢測的原理、數(shù)據(jù)劫持的原理、訂閱者發(fā)布者
• 用過哪些前端 router ，實現(xiàn)方式原理[hash、history]
• 框架的好處，壞處，單頁面應(yīng)用，seo 如何解決
• jquery 的 each
• jquery 的 ready
• ready 和 upload 區(qū)別

Vue

• Vue 的生命周期，create 和 mounted 之間發(fā)生了什么
• vue created 和 beforemount 之前會發(fā)生什么
• vue 什么生命周期以后就不會被監(jiān)聽了
• 鉤子？
• 讓你實現(xiàn)一個彈窗組件需要注意什么？
• vue 數(shù)據(jù)雙項綁定 + diff 算法
• 既然有雙向綁定，為什么 VUE 還有虛擬 dom 這個機制，以及這個機制的好處
• VUE 路由的實現(xiàn)原理
• 怎么去實現(xiàn) vue 的計算屬性
• vue 構(gòu)建 v-dom 樹過程
• vue-cli 做了哪些代碼的優(yōu)化，在開發(fā)環(huán)境到生產(chǎn)環(huán)境
• Vue 的預(yù)渲染這個插件，具體是怎么去做的？
• Vue 的子組件與子組件之間的通信講講吧
• 父子組件的通信和子父組件的通信是不是也可以實現(xiàn)呢？
• 說說你對 Vue 的總體看法，特點，以及與其他框架的不同的地方
• Vue 的 spa 首屏優(yōu)化怎么做的，說具體思路
• vue 中通過一個按鈕控制 input 獲得焦點，怎么實現(xiàn)，通過 ref 獲取對象跟原生的 js 有什么不同
• vue 的高級組件了解嗎？
• Vue 的 computed 和 watch 有什么區(qū)別
• 如果要計算頁面渲染時間，應(yīng)該在哪個階段為止
• Vue 生命周期中的 mounted ,在原生 js 中怎么實現(xiàn)？
• Vue 的虛擬 DOM 和 patch 算法
• vue 跟 jquery 的不同，操作 DOM,組件化，MVVM ,虛擬 DOM
• Vuex 5個概念 為什么 mutations 不能異步？異步會怎樣？
• 對 vue 中 data 進行更新會發(fā)生什么（生命周期進行更新、渲染）
• 如果要復(fù)用項目中的某一塊邏輯，你怎么做
• vue 中兄弟組件的通信方式（vuex，vue 組件傳遞分配 props）
• 說說 v-if 和 v-show 的區(qū)別
• 假設(shè)界面顯示價格為 9.99 元，現(xiàn)在我去拉取了后臺的價格，現(xiàn)在數(shù)據(jù)為 8.88 元。當(dāng)你把數(shù)據(jù)設(shè)置為 8.88 后再到頁面顯示成 8.88 元。在這個期間你了不了解 vue 幫你做了什么事情？
• 介紹 vuex 的各個模塊和簡單講講原理
• dispatch 和 commit 的區(qū)別
• vue 父組件先 mounted 還是子組件 mounted
• Vue 中的 nextTick 了解嗎？
• vue 里面的 key 有什么作用

React

• 介紹一下 react 生命周期
• react diff 有了解么
• 介紹一下 redux
• react 數(shù)據(jù)流傳遞
• react 父組件子組件兄弟組件傳遞信息
• react16 新特性
• this.setState 執(zhí)行后干了什么
• 為什么引進 redux
• react 事件機制
• render 在什么時候被調(diào)用
• js 和 react 垃圾處理機制和回收
• 為什么要用到 redux，redux 的原理

項目工程

• 登錄功能，從前端到后臺是怎么處理的
• 用戶登錄怎么實現(xiàn)的，怎么知道是同一個用戶（用 userId，那手機號不就沒用了嗎）
• 手機號驗證怎么做的，正則表達式的方法
• 發(fā)送驗證碼功能，向同一個手機發(fā)送多次驗證碼（攻擊），怎么處理
• 項目前端怎么優(yōu)化
• 最近最熟悉的項目，遇到最難解決的問題
• 搜索框優(yōu)化，防抖節(jié)流，還有？
• jQuery 用過嗎，token 如何實現(xiàn)驗證登錄
• 如果我從前端要請求一張圖片，你覺得從前端到后端的整個流程是怎樣的，詳細講講在后端的處理流程，隨便扯了點路由匹配啥的
• 很大的日志讀取，ip 出現(xiàn)最多的十次，怎么分片
• 你是怎么壓縮圖片的？
• 項目上線之后，怎樣排除 js 中存在的問題？
• 如何上傳文件，pc 端
• 本地存儲你有做什么特別處理嗎？
• 說一下緩加載怎么實現(xiàn)的
• 有 50g 的 QQ 號數(shù)據(jù)，一次只能運行 20g，想要找出出現(xiàn)次數(shù)最多的前十個 qq 號，怎么做？
• 圖片壓縮后臺怎么實現(xiàn)你知道嗎？怎么犧牲圖片的畫質(zhì)呢？
• 輸入 有做什么安全處理嗎？（xss攻擊，常見的字符轉(zhuǎn)義處理有哪些？）
• 知道 Base64 嗎
• 如果說要展示一個十萬的數(shù)據(jù)在移動端的網(wǎng)頁上怎么做
• 自己做一個登錄系統(tǒng)從前端到后端需要注意什么
• 介紹一下雅虎的性能優(yōu)化原則
• 海量日志中找 ip 最多出現(xiàn)次數(shù)
• 超大的日志文件, 提取其中的IP地址
• 前后端通信數(shù)據(jù)格式
• 用什么實現(xiàn)離線應(yīng)用：manifest，原理呢？
• 如何提高首屏加載速度
• 圖片懶加載怎么實現(xiàn)
• 博客的話，做過哪些方面的優(yōu)化呢？
• 場景題：現(xiàn)在手機 QQ 要做個成語接龍，你怎么去做，說說思路吧
• 你有什么較好的算法可以盡量減少成語庫的數(shù)量嗎？
• 有沒有想過前端如何去檢測用戶輸入的是不是成語？
• SSR
• SEO 怎么做的，說說技術(shù)細節(jié)
• 用 ajax 上傳圖片
• 預(yù)渲染 prerender 怎么做的，說說技術(shù)細節(jié),具體說一下預(yù)渲染的原理
• 如何減少白屏?xí)r間和首屏?xí)r間
• 如果部署上去的項目有人打開后一直是白屏，怎么去收集這種情況
• 用戶第二次訪問網(wǎng)頁，會快很多，是什么原理？
• 讓你設(shè)計一個登錄、注冊、忘記密碼的頁面你會怎么設(shè)計？
• 組件化開發(fā)是為了什么
• 5000 條數(shù)據(jù)展示
• 如何知道用戶發(fā)生的錯誤（window.onerror）
• 富文本編輯器怎么實現(xiàn)？（給標(biāo)簽設(shè)置 contenteditable 屬性，然后使用瀏覽器支持的 document.execCommand 命令模式 API）
• 富文本編輯器的安全問題
• 如果要實現(xiàn)在離線情況下編輯且不丟失數(shù)據(jù)，怎么辦？（先回答的是使用 localStorage，回答之后不斷追問，還問了能否直接用對象存，后面扯到了引擎方面的問題。）
• 從底層談?wù)?map 數(shù)據(jù)結(jié)構(gòu)的設(shè)計。如果容量不夠了怎么辦，擴容過程中可能會耗費比較多的時間，如果在擴容時要訪問怎么辦；
• 微信附近的人這個功能，如何設(shè)計
• severless 的優(yōu)點
• git 相關(guān)操作
• 如何實現(xiàn)一個可編輯的可以無限延伸的表格？
• 除了 websocket 外還有什么方法能實現(xiàn)后端推送？
• 自動化測試是怎么做的，怎么判斷輸出是不是符合期望
• 100ms 請求事件，有幾種寫法
• 如何能只發(fā)送信息，不進行數(shù)據(jù)緩存
• 前端要加載一個圖片有哪些方式，然后還問到了 base64 是怎么實現(xiàn)的，有什么缺點，icon 是怎么實現(xiàn)的
• 后端一下子給你幾萬條數(shù)據(jù)，你要怎么處理。（一開始我說，這種情況下后端一定會分頁的，然后又問沒分頁怎么辦。然后我說前端手動分頁，然后講了一下具體的實現(xiàn)方法。）
• 有一個高頻觸發(fā)的請求，你會怎么處理，這個饒了好久，一開始沒get到面試官的點，一開始談到了節(jié)流和防抖，然后面試官說這樣會影響用戶體驗，而且這個需求就是需要高頻觸發(fā)，然后又說了一下需要高頻請求的場景，一開始說到表單，然后說到購物車搶購。然后我又說加個 16 位隨機字符串的參數(shù)，然后面試官說這樣只是可以區(qū)分請求，在網(wǎng)絡(luò)傳輸過程中，請求不一定是按先后順序到達服務(wù)器的，那么服務(wù)器怎么知道請求的先后順序呢，其實答案很簡單，就是加個時間戳參數(shù)。不過當(dāng)時一下子沒反應(yīng)過來，還談到了域名發(fā)散，面試官說太復(fù)雜，然后才談到加表明各個請求之間關(guān)系的參數(shù)。
• 性能優(yōu)化（講了雅虎軍規(guī)（資源加載、代碼規(guī)范、緩存、服務(wù)器）下次可以優(yōu)化講成通用性能優(yōu)化的方案雅虎軍規(guī)+vue項目的優(yōu)化）
• 怎么保證 token 的安全性，拿到你的token就可以做全部的事情了嗎？
• 弱類型語言的缺點，平時哪些地方讓你抓狂
• 封裝統(tǒng)一的網(wǎng)絡(luò)請求的好處
• 說一下 babel 是怎么實現(xiàn)各個瀏覽器兼容的，講了一下 babel 的工作流程和AST樹
• 垃圾回收，如何使用這個方法來優(yōu)化，主流的瀏覽器垃圾回收的算法，具體流程
• 標(biāo)記清除為什么比引用清除好
• 要在頁面上實行一個特別慢的 js 代碼，會遇到什么問題，假設(shè)頁面已經(jīng)加載好，用戶點擊之后開始計算，造成沒有響應(yīng)的現(xiàn)象的原因（被禁用還是被延遲）
• 阻塞會造成什么后果
• 很大的計算，會讓頁面卡頓，有什么辦法可以使頁面不卡頓，也讓任務(wù)完成（我回答了異步的方法，面試官問還有沒有其他的方式，例如 html5 的新特性）
• 實現(xiàn)百度搜索,foucs 有下拉框，根據(jù)輸入內(nèi)容能模糊查詢
• 無限滾動列表優(yōu)化問題
• 假如說我們的網(wǎng)頁有一個表單，有人模擬 http 的 post 繞過了表單將數(shù)據(jù)發(fā)送到了后臺應(yīng)該怎么辦
• 怎么去實現(xiàn)一個多人在線文檔（從技術(shù)和需求說，來自騰訊文檔，怎么做到數(shù)據(jù)的渲染、怎么獲取到數(shù)據(jù)、網(wǎng)絡(luò)上需要做什么處理）
• 詳細說明一下你是怎么通過設(shè)置請求頭解決了緩存問題嗎？
• 圖片懶加載原理（節(jié)流是什么）
• 點擊穿透
• fastClick 原理
• 說說不用 nuxt 框架怎么實現(xiàn) SSR，數(shù)據(jù)預(yù)取怎么實現(xiàn)的

可能會問到的后端問題

• RESTful 的原理
• 數(shù)據(jù)庫百萬條數(shù)據(jù)，有幾種語文，數(shù)學(xué)，計算平均分，排序出來，如何解決
• 后臺有注解，前端有嗎？裝飾器用過嗎？
• 關(guān)系型和非關(guān)系型數(shù)據(jù)庫
• 數(shù)據(jù)庫的索引的原理和用法
• 數(shù)據(jù)庫的事務(wù)知道嗎？
• 連接查詢有哪些方式？
• 你知道 Java 為啥能夠運行在幾乎所有系統(tǒng)上嗎？
• linux 相關(guān)操作（查看進程用ps）
• mysql 跟 mongondb 的不同
• 數(shù)據(jù)庫優(yōu)化方法
• pm2 查看日志的命令
• koa 的底層原理
• koa 的洋蔥模型，和 express 有什么區(qū)別
• 事務(wù)的原理了解嗎
• 什么是內(nèi)外連接
• 索引了解嗎，為什么索引能加快速度
• 同步和異步的區(qū)別
• 如果有六百萬名考生的高考成績要排序應(yīng)該怎么做
• web服務(wù)用過哪些？
• 你提到了nginx，有做過一些負載均衡嗎？

算法

• 找出數(shù)組中 n 項，n 項的和為 m
• 口述快速排序
• 冒泡，及冒泡的優(yōu)化
• 講講迪杰斯特拉算法
• 講講最小生成樹算法
• 講講 hash 算法
• 堆排序
• 數(shù)組三分，如果一個數(shù)組能夠分成非空的三個部分，每個部分和相等，則返回 true
• 查找算法應(yīng)該用堆還是用棧
• 數(shù)據(jù)結(jié)構(gòu)有那些
• 快排時間復(fù)雜度+快排什么時候最慢
• 洗牌算法
• dp 和二叉樹
• 二叉樹根據(jù)一個節(jié)點查找下一個節(jié)點
• 從一個數(shù)組的后十個數(shù)中找出 3 個和為 10 的數(shù)字
• 找出兩個字符串（str1,str2）的最大公共子長度
• 一次可以跳一步，兩步，三步，問n步的路有多少種到達終點方式？（斐波那契，寫了個尾遞歸）
• 大量數(shù)據(jù)的數(shù)組，怎么找出排名前n個數(shù)
• 給定一個 haystack 字符串和一個 needle 字符串，在 haystack 字符串中找出 needle 字符串出現(xiàn)的第一個位置 (從0開始)。如果不存在，則返回 -1
• 實現(xiàn) string 的 indexOf() 函數(shù)
• 
• 大數(shù)相加
• 鏈表反轉(zhuǎn)
• 二叉樹排序
• 二叉樹的翻轉(zhuǎn)
• 出現(xiàn)最多的字母個數(shù)
• 找一篇文章中出現(xiàn)最多的英文單詞
• 正則匹配字符串
• 現(xiàn)在給你一個樹狀對象，{value:1,children:{value:2,children:{...}}}這樣的結(jié)構(gòu)，如何把所有value刪去，返回一個新對象？
• 如何判斷一個對象中有沒有叫value的屬性？不要考慮代碼的復(fù)雜性，能說幾種說幾種
• 說說你知道的排序和查找算法吧
• 堆排序是如何實現(xiàn)的？時間復(fù)雜度是多少？
• 有 1000 步的臺階，每次只能選擇走 1 步、2 步或者 3 步，走完臺階一共有多少種走法
• 長度為 1 億的字符串，尋找字符串包含 'tencent' 子串的數(shù)量
• 無序數(shù)組中選擇第 k 大的數(shù)，分析算法時間復(fù)雜度
• 兩個整數(shù)求和會超過 int 范圍 怎么運算
• DFS 非遞歸 先序遍歷
• 數(shù)組中超過一半的數(shù)是同一個數(shù)，找出那個數(shù)（分析復(fù)雜度，如何優(yōu)化）
• 手撕二叉樹的題目，leetcode124
• 生成一個 8*8 的 01 棋盤，每行每列不能多于 1 個 1，輸出生成的棋盤和符不符合規(guī)定
• 數(shù)組和鏈表隨機訪問的時間復(fù)雜度
• O(N) 尋找最長的連續(xù)字符串
• 小明從老板那里拿到了一個密碼表，說是如果解開密碼表中的秘密，就可以升職加薪，贏取白富美，走向人生巔峰。這個密碼表是一個 CSV 文件，里面的數(shù)據(jù)由數(shù)字（沒有小數(shù)點）、字母組成。小明需要提取每個數(shù)據(jù)中的數(shù)字（例如 1a2b3c 提取后得到 123，提取后的數(shù)字整體看作一個十進制數(shù)），把數(shù)值為奇數(shù)的項相加，就可以解開這個秘密。請你實現(xiàn)一個函數(shù) sum，幫小明完成這項工作。

• 在一個字符串中找出連續(xù)重復(fù)的字符，這個字符可以是數(shù)字、字母和中文等
• 有效括號 - 判斷一個字符串中括號是否都能匹配
• 一個字符串里面有一些不可見的字符，如"\n"，寫一個算法剔除它們

手撕

• 數(shù)據(jù)綁定實現(xiàn)【框架和拋開框架，手撕】
• 排序數(shù)組，查詢某個值，存在則返回索引，不存在返回插入位置；優(yōu)化，for~二分 【手撕】
• js實現(xiàn)階乘
• 創(chuàng)建一個 Person 類，其包含公有屬性 name 和私有屬性 age 以及公有方法 setAge ；創(chuàng)建一個 Teacher 類，使其繼承 Person ，并包含私有屬性 studentCount 和私有方法 setStudentCount
• 實現(xiàn)一個類似百度輸入框的功能，根據(jù)用戶的輸入，找出一個數(shù)組中匹配到的數(shù)顯示出來
• 一個輸入框?qū)崿F(xiàn)百度搜索那樣的 autocomplete 效果
• 請寫一個函數(shù)，計算一篇英文文章中出現(xiàn)次數(shù)最多的單詞及出現(xiàn)次數(shù)
• 怎么用 js 實現(xiàn)隊列
• js 觀察者模式
• 數(shù)組扁平化
• 實現(xiàn)一個實數(shù)的堆棧，使得其 push pop max 方法的時間復(fù)雜度為 O(1)
• 有一個整數(shù)二維數(shù)組，每行的元素個數(shù)不同，輸出它的全排列，同一行的數(shù)互斥。要求不使用遞歸完成
• 實現(xiàn)一個函數(shù)，檢查二叉樹是否平衡。
• 實現(xiàn)一個 Http 請求池，需要能夠限制并發(fā)數(shù)
• 合并二叉樹
• 奇偶鏈表
• 使用閉包實現(xiàn)變量自加一
• 雙向鏈表轉(zhuǎn)二叉樹，二叉樹轉(zhuǎn)雙向鏈表
• url 正則匹配
• nlogn 排序算法有哪些，快排穩(wěn)定么
• 構(gòu)建排序二叉樹
• 搜索二叉樹找第 k 大的數(shù)
• 手寫原生 ajax，new XMLHttpRequest()
• 手寫對象深拷貝
• 獲取標(biāo)簽名稱為 div 的元素的個數(shù)，并且判斷是不是數(shù)組，考察類型判斷
• 給兩個構(gòu)造函數(shù) A 和 B ，如何實現(xiàn) A 繼承 B
• 用戶權(quán)限認證過程
• 寫個模塊導(dǎo)出的案例
• 說下異步的問題，寫個 promise 的使用小案例
• 拖拽代碼 (手寫)
• 手撕代碼：大數(shù)相乘
• 手撕代碼：函數(shù)無限柯里化（有n個參數(shù)，函數(shù)調(diào)用n+1次得到結(jié)果）
• 手撕代碼：實現(xiàn)一個輪詢器，主要考察 Promise
• 用 es5 的 let 實現(xiàn)一個閉包
• 繼承（實現(xiàn)私有屬性和私有方法）
• 設(shè)計實現(xiàn)一個固定執(zhí)行順序的 script 加載
• 手寫代碼題：找出字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)次數(shù)
• 編程題（對輸入的一段字符串（有逗號 有回車，挑出其中的數(shù)字，然后求和，求和之后再把數(shù)中的奇數(shù)加） 1.正則做法 2.字符串遍歷做法，挑出數(shù)字 ， 換行，再按換行分割，再按，號分割，數(shù)組扁平，求和，變字符串，遍歷
• 數(shù)組去重手寫，越多越好
• 將一個平鋪的數(shù)組用 js 寫成樹的結(jié)構(gòu)
• 完成函數(shù)的實現(xiàn)，使得它可以實現(xiàn)達到 Array.prototype.forEach 相同的功能
• 看下面代碼執(zhí)行結(jié)果，說明原因

• 
• token 過期怎么做
• 怎么知道用戶和 token 的對應(yīng)關(guān)系
• token 和 cookie 區(qū)別
• token 為什么比 cookie 更不容易受到攻擊，為什么要用 cookie
• 手撕 Event bus
• 手撕函數(shù)組合
• 手撕對象扁平化

• 給列表中的 li（里面是a標(biāo)簽）綁定點擊事件，點擊時彈出其在列表中的順序（頁面不跳轉(zhuǎn)）

• JS實現(xiàn)一個 JSON.stringify() 功能的函數(shù)

• 三次重試：假設(shè)有一個函數(shù)名為 job,調(diào)用 job 后會執(zhí)行一些異步任務(wù)，并返回一個 Promise ,但 job 執(zhí)行的異步任務(wù)任務(wù)有可能會失敗

• 請實現(xiàn)函數(shù) retry ,把 job 作為 retry 函數(shù)的參數(shù)傳入，當(dāng) retry 執(zhí)行后會嘗試調(diào)用 job,如果 job 返回成功（即 Promise fulfilled），則 retry 函數(shù)返回job函數(shù)的返回內(nèi)容；

• 如果 job 返回失?。?Promise rejected ）,retry 函數(shù)會再次嘗試調(diào)用 job 函數(shù)。

• 如果 job 連續(xù)三次均返回失敗，retry 則不再嘗試調(diào)用，并返回其最后一次失敗的內(nèi)容。

• 給了一個代碼片段，大概就是一個產(chǎn)生隨機數(shù)的 for 循環(huán)，然后把這個隨機數(shù)當(dāng)作參數(shù)傳到一個異步函數(shù)，問怎么保證輸出順序也是有序的，其實就是類似于同時發(fā)送幾個 http 請求，怎么保證響應(yīng)順序也按照請求順序依次返回
• 寫了個類型判斷函數(shù)

• 遍歷根結(jié)點下所有子節(jié)點

• 實現(xiàn)頁腳在內(nèi)容最底部

智力題

• 100 人教室 70 人喜歡足球，80 人喜歡籃球，問同時喜歡足球和籃球的人數(shù)
• 試探玻璃杯破碎的樓層
• 時針與分針夾角
• 5.25 時針和分針夾角
• 上一題拓展:X 時 Y 分夾角
• 一個班里 60% 喜歡 A, 70% 喜歡 B, 80% 喜歡 C, 問同時喜歡 ABC 的
• 一瓶汽水一塊錢，倆空瓶可以換一瓶汽水，給你 20 塊錢，最多喝多少瓶？
• 給你一個 A4 紙張，隨便剪掉一個隨意位置寬高的矩形，給你一個沒有刻度的尺子和筆，怎么一刀把剩下的 A4 紙張分成面積同樣大小的兩半。
• 如何洗開一副撲克牌
• a 和 b 兩個人投擲硬幣，朝上 a 得 1 分，反之 b 得分，現(xiàn)在 a8 分、b7 分，請問 a 和 b 先到 10 分的概率各是多少。
• 一根不均勻繩子燒完一個小時，問怎么使用多根這種繩子來計算 15 分鐘
• 一個烤盤，每次最多烤兩塊肉，一面烤 10min，問要烤幾分鐘
• 20 個瓶子，有 19 個瓶子每顆藥 1g，有一個瓶子每顆藥 1.1g，問怎么用一把稱一次找出 1.1g 的瓶子

拓展問題

• excel 同步/沖突
• OT 算法

非技術(shù)相關(guān)

• 講一下你覺得最自豪的項目
• 對該職位的學(xué)習(xí)方式（根據(jù)對方的回答，需要的人員應(yīng)該是看過專業(yè)書籍，有去了解這一方面的大佬并針對其技術(shù)分享進行學(xué)習(xí)。而不只是用的時候再學(xué)，野網(wǎng)站學(xué)習(xí)?？梢院啙崬樵敢獠⑶視鲃拥貙W(xué)習(xí)）
• 認為前端開發(fā)中比較難、比較重要的地方
• 除了 react 還用了哪些技術(shù)
• 遇到過的難點，如何解決的？
• 有讀英文文檔的習(xí)慣嗎？
• ts 和 java 對比，ts 和 es6 對比，js 對比框架
• 面試過其他什么公司
• 什么時候開始學(xué)習(xí)前端的，學(xué)習(xí)前端的方式，平時都看過哪些書？
• 平時學(xué)前端看什么書呀？說說學(xué)習(xí)路線吧
• 你看書或者看博客學(xué)習(xí)的時候，是怎么做總結(jié)的
• 最近都有再看什么書？
• 寫文章的時候總有個先后順序或者一定的結(jié)構(gòu)吧，你是怎么做的
• 沒有試過思維導(dǎo)圖
• 在前端上未來有什么打算？有沒有什么想學(xué)的東西？是只想找個工作還是想怎么發(fā)展？
• 為什么說自己擅長溝通和有抗壓能力
• 問了計算機組成，問我 cache 知道嗎，我大概說了說，然后問為什么 cache 更快
• 操作系統(tǒng)，銀行家算法，死鎖怎么解決
• 為什么學(xué)習(xí)前端
• 我在學(xué)習(xí)過程中遇到了哪些困難，怎么解決的。
• 有沒有關(guān)注前端的新技術(shù)
• flutter 有了解嗎
• h5 有寫過嗎，移動端有了解嗎
• 了解過小程序嗎
• 如何衡量一個軟件的質(zhì)量？如何保證產(chǎn)品的質(zhì)量？（軟件工程的思想，敏捷中的測試驅(qū)動開發(fā)）
• 找出不多于三個關(guān)鍵詞形容自己
• 怎么跟一個不懂前端的人介紹前端

HR問題

• 自我介紹
• 講一講最近收獲最大的一個項目，在項目擔(dān)任的角色
• 有什么愛好，為什么喜歡
• 是否為獨生子女
• 是否去過深圳
• 是否考研
• 什么專業(yè)，為什么不選擇省外的高校
• 是否有其它公司 offer
• 入職時間，可實習(xí)多久
• 說說自己性格的優(yōu)點和缺點
• 你怎么看我們部門
• 你了解過我們是做什么的嗎
• 你平常怎么學(xué)習(xí)
• 你的未來規(guī)劃是什么
• 你女朋友不讓你來深圳怎么辦
• 什么時候能入職 能做多久
• 參加過什么比賽，拿過什么獎
• 老師和同學(xué)對自己評價的優(yōu)缺點
• 成績在年級上的位置
• 說下團隊的規(guī)模，在團隊的角色
• 覺得自己技術(shù)怎么樣
• 什么時候開始用 GitHub，更新頻率怎么樣

總監(jiān)面

• 如何學(xué)習(xí)全新的框架
• 一個卡頓的項目交給你，怎么去進行優(yōu)化
• 周圍有人拿到騰訊 offer 了嗎？
• 介紹了一下我的專業(yè)干啥的
• 日常開發(fā)中遇到問題怎么解決
• 建立中的項目有啥亮點
• 前端處理耗時比較長的計算問題，如何防止頁面卡頓的優(yōu)化方案
• bilibili 上面一鍵三連怎么實現(xiàn)
• 自己的職業(yè)規(guī)劃