1. 程式人生 > 其它 >2021年前端大廠(騰訊、位元組跳動、阿里......)校招面試真題解析,讓你面試輕鬆無壓力!

2021年前端大廠(騰訊、位元組跳動、阿里......)校招面試真題解析,讓你面試輕鬆無壓力!

前言

校招很重要,應屆生的身份很珍貴!在校招的時候與我們競爭的大部分都是沒有工作經驗的學生,而且校招企業對學生的包容度高,一般對企業來說,社招更看重實際工作經驗,而校招更願意“培養人”,校招招的是有基礎,願意學習的應屆生;社招招的是有經驗,可以直接上手的員工,相比較下來說,應屆生更容易在校招中拿到優質offer。

校招時間線

前端大廠面試真題

下面是收集整理了最新的一些大廠實習面試真題,大家可以參考一下。

騰訊

  • js 資料型別
  • css盒模型
  • css有哪些選擇器 ,選擇器優先順序
  • 水平垂直居中
  • 箭頭函式和普通函式的區別
  • 跨域和相關解決方案
  • http2 的優點和缺點,如何解決
  • react 的渲染流程,diff演算法
  • 原型和原型鏈相關
  • ES6 新特性有哪些
  • 變數提升和暫時性死區的關係
  • 事件迴圈
  • 強快取協商快取
  • cookie 的欄位有哪些,大小限制
  • 說一下你瞭解的排序方法
  • 輸入 URL 到頁面呈現經歷了什麼
  • JS 檔案執行順序和頁面渲染有什麼關係嗎
  • HTTP 常見狀態碼
  • XSS、CSRF 介紹一下
  • Vue 有哪些生命週期
  • v-if 和 v-show 的差別
  • 實現三列布局
  • 實現一個簡單的觀察者模式
  • Node 中介軟體的實現方式
  • React 函式元件和類元件的區別
  • React 事件合成

位元組

  • 專案相關的
  • 對前端的看法
  • 說說JS有什麼特點和優缺點
  • 怎麼解決浮點數精度問題
  • es6 轉換 es5 怎麼處理 for 迴圈裡面 settimeout 列印區域性變數
  • this指向
  • 有哪些內建物件
  • null 和 undefined 的區別
  • js 執行機制和閉包(舉例子)
  • 知道哪些佈局(說明特點和什麼場景適用)
  • 上下左右居中除了 flex 和定位還有哪些方法
  • 生成三角形
  • css變數
  • flex佈局
  • 塊級元素、內聯元素區別,img標籤型別
  • let const var區別
  • 連結串列、佇列、棧的特點和實際工作中有哪些應用場景
  • 演算法題:給出給定字串的迴文子串個數
  • 合併有序陣列
  • 對 CDN 的理解
  • 對 QUIC 協議的理解
  • 談談 HTTP2.0 和 HTTP1.1 的區別,服務端推送和長連線有什麼區別
  • 給你一組數和一個數值,要你返回數值由陣列內的數組合而成的所有可能,陣列中的數可以無限次使用
  • webpack 怎麼載入 CSS,載入器做了什麼?
  • 說說 vue 路由有哪些模式和區別 ?
  • 深拷貝的手動實現?

阿里

  • http2 新特性講一下
  • http2 中的長連線相比於 http1 中手動指定 keep-alive 的優勢
  • vue 資料的雙向繫結原理
  • vue 中有用過類似 react 中的 redux 之類的嗎?
  • vuex 是什麼?實現原理知道嗎?
  • vue2 和 vue3 的區別?
  • node的中介軟體用過嗎?
  • 檔案上傳中介軟體的前後端具體操作
  • 中介軟體的實現原理
  • Webpack 的 loaders 和 plugins 的區別
  • 知道哪些專案優化手段
  • 什麼東西會引起迴流重繪
  • HTTP 的快取機制
  • react 和 vue 的異同
  • XSS 和 CSRF 的原因和解決辦法
  • 模組化標準 ES6 和 CommonJS 有什麼區別?
  • 箭頭函式
  • 程序和執行緒
  • 棧和佇列
  • 閉包(是什麼,用途,缺點,解決辦法)
  • this 指向以及 call、apply 的用法
  • 偽類和偽元素的區別
  • 盒模型

京東

  • 介紹一下 webpack
  • 具體說說 plugins
  • 閉包
  • 原型和原型鏈
  • Promise 應用場景
  • async 和 await
  • position
  • vue 響應式資料原理
  • 對 vue3.0 的瞭解
  • vue 的生命週期
  • v-for 中 key 的作用 具體說說 diff 演算法
  • vuex,為什麼要有action?
  • redux 工作流程
  • 說說 computed 和 watch
  • vh vw rem em
  • css 動畫
  • jQuery和react區別
  • 堆疊區別
  • 排序方法有哪些 ?快排的實現思想、時間複雜度 完善歸併排序
  • 防抖和節流
  • 巨集任務和微任務
  • 對工程化的理解

前端校招面試題精編解析大全

文件內容主要包括 HTML,CSS,前端基礎,前端核心,前端進階,移動端開發,計算機基礎,演算法與資料結構,設計模式,專案等等面試題。

HTML

  • 瀏覽器頁面有哪三層構成,分別是什麼,作用是什麼?
  • HTML5的優點與缺點?
  • Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?
  • HTML5有哪些新特性、移除了哪些元素?
  • 你做的網頁在哪些瀏覽器測試過,這些瀏覽器的核心分別是什麼?
  • 每個HTML檔案裡開頭都有個很重要的東西,Doctype,知道這是幹什麼的嗎?
  • 說說你對HTML5認識?(是什麼,為什麼)
  • 對WEB標準以及W3C的理解與認識?
  • HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?
  • 什麼是WebGL,它有什麼優點?
  • 請你描述一下 cookies,sessionStorage 和 localStorage 的區別?
  • .說說你對HTML語義化的理解?
  • link和@import的區別?
  • 說說你對SVG理解?
  • HTML全域性屬性(global attribute)有哪些?
  • 說說超連結target屬性的取值和作用?
  • data-屬性的作用是什麼?
  • 介紹一下你對瀏覽器核心的理解?
  • 常見的瀏覽器核心有哪些?
  • iframe有那些缺點?
  • ......

CSS

  • 解釋一下CSS的盒子模型?
  • 請你說說CSS選擇器的型別有哪些,並舉幾個例子說明其用法?
  • 請你說說CSS有什麼特殊性?(優先順序、計算特殊值)
  • 要動態改變層中內容可以使用的方法?
  • 常見瀏覽器相容性問題與解決方案?
  • 列出display的值並說明他們的作用?
  • 如何居中div, 如何居中一個浮動元素?
  • CSS中 link 和@import 的區別是?
  • 請列舉幾種清除浮動的方法(至少兩種)?
  • block,inline和inlinke-block細節對比?
  • 什麼叫優雅降級和漸進增強?
  • 說說浮動元素會引起的問題和你的解決辦法
  • 你有哪些效能優化的方法?
  • 為什麼要初始化CSS樣式?
  • 解釋下浮動和它的工作原理?清除浮動的技巧?
  • CSS樣式表根據所在網頁的位置,可分為哪幾種樣式表?
  • 談談你對CSS中刻度的認識?
  • 請你說說em與rem的區別?
  • 請你說說box-sizing屬性的的用法?
  • 瀏覽器標準模式和怪異模式之間的區別是什麼?
  • ......

前端基礎

  • 說一下http和https
  • tcp三次握手,一句話概括
  • TCP和UDP的區別
  • WebSocket的實現和應用
  • HTTP請求的方式,HEAD方式
  • 說一下web Quality(無障礙)
  • 幾個很實用的BOM屬性物件方法?
  • 說一下HTML5 drag api
  • 說一下http2.0
  • 補充400和401、403狀態碼
  • fetch傳送2次請求的原因
  • .Cookie、sessionStorage、localStorage的區別
  • 說一下web worker
  • 對HTML語義化標籤的理解
  • iframe是什麼?有什麼缺點?
  • Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?
  • Cookie如何防範XSS攻擊
  • Cookie和session的區別
  • 一句話概括RESTFUL
  • ......

前端核心

  • JSONP的缺點
  • 跨域(jsonp,ajax)
  • 如何實現跨域
  • dom是什麼,你的理解?
  • 關於dom的api有什麼
  • ajax返回的狀態
  • 實現一個Ajax
  • 如何實現ajax請求,假如我有多個請求,我需要讓這些ajax請求按照某種順序一次執行,有什麼辦法呢?如何處理ajax跨域
  • 如何實現一個ajax請求?如果我想發出兩個有順序的ajax需要怎麼做?
  • Fetch和Ajax比有什麼優缺點?
  • 移動應用和web應用的關係
  • 知道PWA嗎
  • 做過移動端嗎
  • ......

前端進階

  • 前端測試
  • 介面文件的制定
  • webpack和gulp區別(模組化與流的區別)
  • redux用處
  • redux裡常用方法
  • angularJs和react區別
  • vue雙向繫結原理
  • 說說vue react angularjs jquery的區別
  • node的事件方法講講看
  • node的特性,適合處理什麼場景
  • 你有用到Express,講講Express
  • promise的狀態有那些
  • ......

計算機基礎

  • 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,怎麼傳遞
  • 作業系統程序和執行緒的區別
  • 什麼是程序執行緒
  • ......

演算法與資料結構

  • 二叉樹層序遍歷
  • B 樹的特性,B 樹和 B+樹的區別
  • 尾遞迴
  • 如何寫一個大數階乘?遞迴的方法會出現什麼問題?
  • 把多維陣列變成一維陣列的方法
  • 知道的排序演算法 說一下冒泡快排的原理
  • Heap 排序方法的原理?複雜度?
  • 幾種常見的排序演算法,手寫
  • 陣列的去重,儘可能寫出多個方法
  • 如果有一個大的陣列,都是整型,怎麼找出最大的前 10 個數
  • 知道資料結構裡面的常見的資料結構
  • 找出陣列中第 k 大的陣列出現多少次,比如陣列【1,2, 4,4,3,5】第二大的數字是 4,出現兩次,所以返回 2
  • 合併兩個有序陣列
  • ......
前端校招面試題、學習筆記、大廠面試題等 PDF(含答案解析)均可分享,加入這邊的Q裙:【624369675】免費領取!