前端面試題大彙總
阿新 • • 發佈：2021-12-17
HTML
- 什麼是 HTML 語義化，有什麼好處
- HTML5的新特性？
- 為什麼要在html檔案開頭加上一個<!DOCTYPE html>
- DOCTYPE的作用，嚴格與混雜模式的區別，有何意義
- HTML5為什麼只需要寫<!DOCTYPE HTML>
- 請寫出table標籤下面會包含哪些標籤元素
- 很多網站不常用table iframe這兩個元素，知道原因嗎？
- jpg和png格式的圖片有什麼區別？
- 常用瀏覽器有哪些，核心都是什麼？
- a標籤在新視窗開啟連結怎麼加屬性？
- form標籤上定義請求型別的是哪個屬性？定義請求地址的是哪個屬性？
css
- 元素水平垂直居中的方法
- flex佈局介紹。
- css盒模型中，IE盒模型和標準盒模的區別。
- 選擇器的優先順序。
- css中link和@import的區別。
- position的屬性。
- 介紹下和偽元素和偽類。
- 如何清除浮動。
- less 和 sass是什麼？他們的區別。
- 如何實現頁面適配 簡寫程式碼
- 原生複選框如何去點選改變裡面的樣式？比如把點選勾選的樣式變成圓圈的樣式？
- 瞭解過處理相容性的問題嗎？
- 標準的CSS的盒子模型？
- 說下盒模型?
- 與低版本IE的盒子模型有什麼不同的？
- box-sizing屬性？
- 盒子模型在不同瀏覽器上的區別
- 不定寬高水平垂直居中？
- 文字在垂直和水平方向重疊的兩個屬性分別是什麼？
- 如何居中div
- 為什麼margin: 0 auto會讓div居中
- 對BFC的理解？
- 如何觸發BFC？
- BFC解決了什麼問題？
- 為什麼overflow:hidden能觸發bfc？
- Position定位值有哪些？
- absolute的containing block計算方式跟正常流有什麼不同？
- display有哪些值？說明他們的作用?
- display:none與visibility：hidden的區別？
- display:inline-block 什麼時候會顯示間隙？
- overflow屬性定義溢位元素內容區的內容會如何處理?
- visibility屬性有個collapse屬性值？在不同瀏覽器下以後什麼區別？
- position跟display、overflow、float這些特性相互疊加後會怎麼樣？
- 為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式？
- margin和padding分別適合什麼場景使用？
- CSS常用選擇器
- 哪些屬性可以繼承？
- CSS優先順序演算法如何計算？
- CSS3新增偽類有那些?
- ::before 和 :after 中雙冒號和單冒號的區別？這2個偽元素的作用？
- Flex佈局
- 請解釋一下flexbox（彈性盒佈局模型）,以及適用場景？
- 如何讓DOM元素不顯示在瀏覽器的可視範圍內？
- 一個滿屏品字佈局如何設計?
- 常見的相容性問題？
- 瀏覽器相容性有哪些
- CSS 前處理器
- CSS 3的新增特性？
- CSS 建立一個三角形
- CSS 初始化樣式是為什麼？
- CSS 優化 提高效能的方法有哪些？
- CSS 選擇器是怎樣被瀏覽器解析的？
- CSS Sprites
- CSS Hack是什麼?ie6,7,8的hack分別是什麼？
- CSS 引入方式？
- 移動端的佈局用過媒體查詢嗎
- 在網頁中的應該使用奇數還是偶數的字型？為什麼呢？
- 元素豎向的百分比設定是相對於容器的高度嗎？
- 全屏滾動的原理是什麼？用到了CSS的哪些屬性？
- 什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
- 視差滾動效果？
- li與li之間不可見空白間隔引起原因？解決辦法？
- width: auto 和 width: 100% 的區別
- 有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度
- png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
- style標籤寫在body後與body前有什麼區別？
- 使用 base64 編碼的優缺點
- 超連結訪問過後hover樣式就不出現的問題時什麼？如何解決？
- rgba()和opacity的透明效果有什麼區別？
- px和em的區別
- 描述一個“reset”的css檔案並如何使用它。知道normalize.css嗎？你瞭解他們的不同之處嗎?
vuereact
- vue的生命週期有哪些。
- 子元件和父元件如何傳值的。
- v-if 和 v-show之間的區別。
- 介紹以下watch和computed vue中watch的用法和講解
- vue2是如何監聽資料的
- 為啥不使用全域性物件來管理資料，要用vuex
- 自定義指令哪些引數自定義指令的生命週期
- vue2x監聽方面有什麼缺點？所以才有了vue3.0
- 使用路由懶載入的時候，如何讓點選載入A頁面的時候，B頁面也能載入？
- .react跟vue的區別？
- 不用v-model是怎樣實現雙向資料繫結的？比如我用的不是input輸入框，而是下拉選擇，是怎樣實現的？
- react diff大致原理
- react setState什麼時候同步什麼時候非同步為什麼會這樣
- 你們當前react版本多少，此版本做了哪些優化
- 跳轉頁面時如何去監聽路由的變化？
- hook中setState原理
- 什麼是vue生命週期？
- 詳細說明生命週期
- vue生命週期的作用是什麼？
- vue生命週期總共有幾個階段？
- 第一次頁面載入會觸發哪幾個鉤子？
- DOM 渲染在 哪個週期中就已經完成？
- Vue內建指令
- vue-cli如何新增自定義指令？
- v-if 和 v-show 區別
- Vue模板語法-插值
- vue幾種常用的指令
- 事件修飾符
- 鍵值修飾符
- 計算屬性computed
- 計算屬性與methods的區別
- 計算屬性與watch的區別
- 什麼是vue的計算屬性？
- 插槽slot
- Vue的雙向繫結資料的原理
- 單向資料流和雙向資料繫結
- 單向資料流
- 雙向資料繫結
- Vue 如何去除url中的 #
- 元件通訊
- 父元件向子元件通訊
- 子元件向父元件通訊
- vue-router相關
- vue-router是什麼 它有哪些元件？
- vue-router 路由實現
- $route和$router的區別
- 怎麼定義vue-router的動態路由？
- 怎麼獲取傳過來的動態引數？
- Vue的路由實現：
- 前端怎麼控制管理路由
- vue-router提供兩種模式的原因？
- Hash基本介紹
- vue-router原理
- active-class是哪個元件的屬性？巢狀路由怎麼定義？
- 談談你對MVVM開發模式的理解
- 為什麼會出現MVVM
- 虛擬dom的原理
- 說一下virtual Dom中key的作用
- 為什麼要使用虛擬DOM？
- Vuex是什麼？怎麼使用？哪種功能場景使用它？
- Vue 3.0
- Vue 元件 data 為什麼必須是函式
- Vue 中怎麼自定義過濾器
- Vue 中 key 的作用
- 簡述Vue的響應式原理
- Vue中如何監控某個屬性值的變化？
- Vue元件間的引數傳遞
- css只在當前元件起作用
- vue.js的兩個核心是什麼？
- vue常用的修飾符？
- vue等單頁面應用及其優缺點
- MVC
- vue.nextTick實現原理
- Emit事件怎麼發，需要引入什麼
- 使用import時，webpack對node_modules裡的依賴會做什麼
- vue怎麼監聽陣列
- Proxy 相比於 defineProperty 的優勢
- RESTful
- 架構優點
- 什麼是RESTful API？怎麼使用?
- RESTful架構設計原則（不同公司具體細節可能不同）：
- vue 元件的優點，以及註冊使用的過程
- Vue.js中ajax請求程式碼應該寫在元件的methods中還是vuex的actions中？
js
- this指向問題
- promise說一下promise的原生實現 實現promise並指出為何能夠實現.then連續呼叫
- 箭頭函式 使用箭頭函式應注意什麼
- 解構賦值
- Ajax以及axios使用和二次封裝 通過axios 請求攔截器
- 閉包
- 原型 原型鏈
- 作用域
- 鉤子函式是什麼
- 設計模式 設計模式用過嗎？最熟悉的模式是什麼？
- 事件冒泡事件捕獲
- 優雅降級和漸進增強
- 閉包
- 事件委託
- js延遲載入
- 深拷貝和淺拷貝
- 重排和重繪
- 跨域
- 寫一個氣泡排序
- 建構函式，例項，原型之間的關係
- cookie sessionStorage localStorage區別及相關安全等
- Webpack打包效能優化webpack大致執行流程
- 單例模式的實現原理是什麼 手寫一個
- 說一下輸入URL到頁面顯示的過程，越詳細越好
- 手寫JS的繼承
- 說一下巨集任務和微任務有什麼區別 那麼promise和setTimeout會誰先執行
- 說一下vue雙向繫結實現的原理
- es6瞭解過嗎？模組化是怎麼實現的？怎麼做到變數名之間互不干擾就是模組之間如何保證互不影響，模組化是怎麼做到的？
- ES5和ES6的區別？說一下你所知道的ES6
- class es6變為es5是怎麼寫的
- 防抖怎麼寫
- 做過什麼外掛
- 大檔案上傳
- 斷點續傳怎麼分包
- 資料一開始沒定義，後面新增，不會變化，怎麼修改
- import和require的區別
- 表單提交的時候的報文頭
- 圖片線上預覽 new blob
- 事件迴圈(出了好幾道)
- 深拷貝
- 靜態資源快取是怎樣實現的？cdn加速又是怎樣實現的
- 使用axios請求時 ，如何中斷請求
- 儲存資料在瀏覽器有哪些方法？如何設定一個時間讓儲存在瀏覽器裡面的資料消失？
- 瀏覽器的快取策略是怎樣的？如何給強快取設定過期時間？協商快取傳送了什麼請求？
- 原型鏈相關
- 實現class中的extends
- Proxy為什麼不能被babel polyfill
- 如何壓縮圖片？
- 當git上傳之後，發現程式碼有bug，該如何去做？
- object.definedproperty引數有哪些？分別是哪些？
- 瞭解過處理相容性的問題嗎？
- video如何實現自動播放？
- 傳送請求要不要加密？是如何加密的？全部都能請求到後臺資料嗎？
- 怎樣實現路由懶載入？不用懶載入有什麼後果？
- 為什麼不直接用mutaction去傳送請求，請求之後直接修改資料。而要在action裡面傳送非同步請求？
- ES6 怎麼寫class ，為何會出現 class？
- 實現compose函式
- 擴充套件運算子與rest運算子的區別？
- 解決非同步的方式有哪些
- event loop簡述原理
- ajax原理
- ajax到async的發展過程
- 什麼是同源策略？
- 跨域的方式及原理？
- Axios的特點
- es5與es6繼承方式？
- 處理陣列用過哪些方法？
- 陣列物件，變異和非變異方法？
- js判斷是不是陣列的方法？
- 陣列去重有哪些方法？
- 利用set的唯一性來達到去重效果（es6中最常用）
- 利用雙重for迴圈，然後splice去重（es5中最常用）
- 利用indexOf去重
- 利用sort（）排序方法來實現
- 利用es7中新增的includes方法
- 利用hasOwnProperty()方法和filter
- 處理字串用過哪些方法？
- 處理物件用過哪些方法？
- Math物件常用的方法？
- js的資料型別有哪些？
- substr與substring的區別？
- 陣列的map，filter，forEach的區別？
- 閉包？
- 閉包的適用場景？
- 什麼是記憶體洩漏？
- 如何解決記憶體洩漏？
- 什麼是垃圾回收機制？
- 說下原型鏈？
- js事件流？
- 深拷貝和淺拷貝？
- DOM操縱 增刪改查？
- 如何做防止重複提交？
- 防抖和節流
網路
- http常見狀態碼
- 跨域
- 表單請求的header
- http與https區別 https大致實現原理
- 服務端渲染與客戶端渲染相比好處，減少多少首屏渲染時間
- 怎樣解決跨域跨域時的請求頭option請求什麼時候發
- http1.1跟http2.0有什麼區別？
演算法
- 排序陣列去重 要求不新建情況下返回去重後的新陣列元素個數
- 二叉樹鏡象
- 陣列輸出翻轉後的陣列 要求空間複雜度為0（1）
- 根據最小位進行排序相同則根據進位排序例in: [1,20,33,31,50] out: [20,50,1,31,33]14.實現相同數字消除例如[1,3,2,2,2,3,5] => [1,3,3,5] => [1,5]
- 爬樓梯只能爬1梯或2梯求爬第n梯有幾種跳法
- ast語法樹都能幹哪些事
- 實現柯里化函式
- 瞭解過diff演算法嗎？是如何計算的？
小程式
- 小程式中是否能實現後端可配置動態頁面，是否能過微信稽核
- 小程式渲染出頁面整個流程
- 微信小程式生命週期？
- 微信小程式用哪種響應式方案？
優化
- 怎樣減少http請求？
- 專案部署時候，前端還有什麼優化效能方案
安全
- 對web效能安全有什麼瞭解嗎？（主要說了xss和csrf）
- xss一般會過濾什麼？（尖括號、斜槓）
- 為什麼要過濾尖括號？（可以插入指令碼，如)
- 瞭解過哪些web安全及防護原理？
手寫部分：
1. 以下程式碼會不會報錯，如何不報錯輸出什麼，為什麼?（備註，es6介紹下）
var y = 10;
if (!(x in window)) {
var x = 10;
} else {
++y;
}
2. 以下程式碼會不會報錯，如何不報錯輸出什麼，為什麼?（備註，資料型別介紹）
var a = {n: 1};
var b = a;
a = {n: 2}
a.x = a;
console.log(a.x);
console.log(b.x);
3. 以下程式碼輸出什麼。（備註，閉包介紹）
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}