前端相關面試總結

目錄

CSS面試題

1.盒模型

2.如何讓一個盒子水平垂直居中？

3.BFC（Block Formatting Context） 是什么？應用？

4.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

5.px和em,rem的區別

6.解釋下浮動和它的作業原理，清除浮動的方法？

7.如何實作瀏覽器內多個標簽頁之間的通信?

8.CSS隱藏元素的幾種方法

9.css 優先級確定

10.簡述下CSS的元素分類

11.重繪和回流

12、css3中transform、transition、animation的區別

JavaScript基礎面試題

1.js有哪些資料型別

2.堆疊和堆的區別？

2.Javascript實作繼承的幾種方式？

3.Javascript創建物件的幾種方式？

4.Javascript作用鏈域

5.什么是閉包（closure），為什么要用它？

6.javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？

7.深拷貝和淺拷貝

8.JS延遲加載的方式有哪些？

9.什么是跨域問題 ，如何解決跨域問題?

11.DOM操作

12.什么是Cookie 隔離？

16.箭頭函式和普通函式的區別

Vue框架面試題

1.對于MVVM的理解？

2.Vue的生命周期

3.Vue實作資料雙向系結的原理

4.vue路由的鉤子函式

5.for in和for of的區別

6.v-if 和 v-show 有什么區別？

7.對于Vue是一套漸進式框架的理解（此為vue的核心）

8.Vue 組件間通信有哪幾種方式？

9.怎么定義vue-router的動態路由？怎么獲取傳過來的值？

10.vue-router的路由模式有哪些？

11.vue-router有哪幾種路由守衛?

12.vuex有哪幾種屬性？

13.vue等單頁面應用及其優缺點

服務端與網路

1.http/https 協議

10.HTTP和HTTP2的區別

Webpack 相關

演算法

CSS面試題

1.盒模型

盒模型有標準盒模型（W3C）和IE的盒模型：

1、一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），內容與邊框之間的距離元素的邊框（border），元素的外邊距（margin），邊框與外部元素之間的距離四個部分，這四個部分一起構成了盒子模型，

區別：標準盒模型的內容大小是content的大小，而IE的則是content + padding +border 總的大小

2.如何讓一個盒子水平垂直居中？

1、絕對定位，父相子絕，子元素：left：50%，top:50%，transform：translateX（-50%） translateY（-50%）

2、絕對定位，子元素：left：0，right：0，top：0，bottom：0，margin：auto

3、flex布局，父元素：display：flex，aligin-items：center，justify-content：center

3.BFC（Block Formatting Context） 是什么？應用？

1、BFC塊級格式背景關系，屬于定位方案中的普通流，

具有BFC特性的元素可以看作是隔了的獨立容器，容器里的元素不會在布局上影響到外面的元素，簡單的說：可以理解BFC是要給封閉的大箱子，箱子內的元素無

論如何交換，都不會影響到外面的元素，

2、觸發條件：

①body根元素；

②浮動元素float的值不為none；

③絕對定位元素：positon（absolute、fixed）；

④display的值為：display（block、inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid）；

⑤overflow：除了visible以外的值；（hidden、scroll、auto）；

3、應用場景：

①防止margin重疊；②清除內部浮動；③自適應多欄布局

4.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

1、相同點：都會在瀏覽器端保存，有大小和同源限制，

2、不同點：

①cookie會隨請求發送到服務器，作為會話表示，服務器可修改cookie，web storage不會隨請求大宋到服務器，

②cookie有path的概念，子路徑可以訪問父路徑的cookie，父路徑不可以訪問子路徑的cookie，

③有效期： cookie在設定的有效期內有效，默認為瀏覽器關閉消失，sessionStorage在會話視窗關閉后失效，localStorage長期有效，需主動洗掉，

④sessionStorage不能共享，localStorage在同源檔案之間可以共享，cookie在同源且符合path規則的檔案之間可以共享，

⑤localStorage的修改會觸發其他檔案的update事件，

⑥cooie有secure屬性要求HTTPS傳輸，

⑦瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每個cookie不能超過4k，webStorage可以支持5M的存盤，

5.px和em,rem的區別

1、em的值并不是固定的；em會繼承父級元素的字體大小，

2、任意瀏覽器的默認字體高都是16px，所有未經調整的瀏覽器都符合: 1em=16px，那么12px=0.75em,10px=0.625em，為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了

3、使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素，這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應，目前，除了IE8及更早版本外，所有瀏覽器均已支持rem，對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告，這些瀏覽器會忽略用rem設定的字體大小，

6.解釋下浮動和它的作業原理，清除浮動的方法？

1、浮動（float）也是大家平常在網頁開發中經常使用的屬性，（主要是為了讓一些標簽并排顯示）

2、浮動元素脫離檔案流，不占據空間，浮動元素碰到包含它的邊框或者浮動元素的邊框停留，

3、使用空標簽清除浮動，給包含浮動元素的父標簽添加overflow屬性，使用after偽物件清除浮動（該方法只適用于非IE瀏覽器，使用中需注意以下幾點，一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干像素；），

7.如何實作瀏覽器內多個標簽頁之間的通信?

1、使用本地存盤器localStorage

使用localStorage.setItem(key,value);添加內容

使用storage事件監聽添加、修改、洗掉的動作

2、使用cookie+setInterval

8.CSS隱藏元素的幾種方法

1、opacity:0; 占位

2、visibility:hidden;占位

3、display:none;不占位

4、height:0;overflow:hidden; 不占位

5、position:absolute;left:-9999px;top:-9999px.;

9.css 優先級確定

1、最近的祖先樣式比其他祖先樣式優先級高，

2、"直接樣式"比"祖先樣式"優先級高，

3、行內樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器

4、計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數

之和（c），按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個，若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷，

5、屬性后插有 !important 的屬性擁有最高優先級，若同時插有 !important，則再利用規則 3、4 判斷優先級，

10.簡述下CSS的元素分類

1、替換和不可替換元素

2、塊級元素和行內元素

8.link@import 匯入 css

①link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS; 頁面被加載的時，link會同時被加載，而@import參考的CSS會等到頁面被加載完再加載; import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

11.重繪和回流

重繪：不會影響頁面布局的操作，比如更改顏色，

回流：布局的改變導致需要重新構建，就是回流，

12、css3中transform、transition、animation的區別

1、transform：描述了元素的靜態樣式，本身不會呈現影片效果，可以對元素進行 旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix，transition和animation兩者都能實作影片效果 transform常常配合transition和animation使用

2、transition樣式過渡，從一種效果逐漸改變為另一種效果

transition:transition-property transition-duration transition-timing-function transition-delay 從左到右分別是：css屬性、過渡效果花費時間、速度曲線、過渡開始的延遲時間

①transform僅描述元素的靜態樣式，常常配合transition和animation使用 ，

②transition通常和hover等事件配合使用，animation是自發的，立即播放，

③animation可設定回圈次數 ，

④animation可設定每一幀的樣式和時間，transition只能設定頭尾，

⑤transition可與js配合使用，js設定要變化的樣式，transition負責影片效果，如：animation屬性類似于transition，他們都是隨著時間改變元素的屬性值，其主要區別在于：transition需要觸發一個事件才會隨著時間改變其CSS屬性；

animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種影片的效果
1）影片不需要事件觸發，過渡需要，
2）過渡只有一組（兩個：開始-結束） 關鍵幀，影片可以設定多個，

3、animation屬性類似于transition，他們都是隨著時間改變元素的屬性值，

JavaScript基礎面試題

1.js有哪些資料型別

1、基本資料型別有7種：String、Number、Boolean、Undefined、Null、Symbol、Bigint

2、參考資料型別 Object（Data、Function、Array等）

2.堆疊和堆的區別？

①堆是應用程式在運行時候請求作業系統分配給自己的記憶體，

②堆疊中一般存放區域變數，隊中一般存放創建的物件和陣列，

2.Javascript實作繼承的幾種方式？

1、原型鏈繼承

3.Javascript創建物件的幾種方式？

1、語法糖

2、通過new object方法

3、通過建構式

4.Javascript作用鏈域

5.什么是閉包（closure），為什么要用它？

1、閉包就是能夠讀取其他函式內部變數的函式、定義在一個函式內部的函式，

6.javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？

將”use strict”放在腳本檔案的第一行，則整個腳本都將以”嚴格模式”運行，

1、消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為；

2、消除代碼運行的一些不安全之處，保證代碼運行的安全；

3、提高編譯器效率，增加運行速度；

7.深拷貝和淺拷貝

前端中的深拷貝和淺拷貝及相應注意事項_沈行的博客-CSDN博客

8.JS延遲加載的方式有哪些？

1、defer 屬性
2、async 屬性
3、動態創建DOM方式
4、使用jQuery的getScript方法
5、使用setTimeout延遲方法
6、讓JS最后加載

9.什么是跨域問題 ，如何解決跨域問題?

1、通過jsonp解決跨域

通常為了減輕web服務器的負載，我們把js、css，img等靜態資源分離到另一臺獨立域名的服務器上，在html頁面中再通過相應的標簽從不同域名下加載靜態資源，而被瀏覽器允許，基于此原理，我們可以通過動態創建script，再請求一個帶參網址實作跨域通信，

2、通過nginx反向代理解決跨域

跨域原理： 同源策略是瀏覽器的安全策略，不是HTTP協議的一部分，服務器端呼叫HTTP介面只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就不存在跨越問題，

實作思路：通過nginx配置一個代理服務器（域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，并且可以順便修改cookie中domain資訊，方便當前域cookie寫入，實作跨域登錄，

3、后臺配置同源Cors ：設定4項

①允許請求帶有驗證資訊

②允許訪問的客戶端域名

③允許服務端訪問的客戶端請求頭

④允許訪問的方法名,GET POST等

4、后端Java使用springCloud網關

①服務網關(zuul)又稱路由中心，用來統一訪問所有api介面，維護服務，

②Spring Cloud Zuul通過與Spring Cloud Eureka的整合，實作了對服務實體的自動化維護，所以在使用服務路由配置的時候，我們不需要向傳統路由配置方式那樣去指定具體的服務實體地址，只需要通過Ant模式組態檔引數即可

11.DOM操作

12.什么是Cookie 隔離？

或者說：請求資源的時候不要讓它帶cookie怎么做

1、如果靜態檔案都放在主域名下，那靜態檔案請求的時候都帶有的cookie的資料提交給server的，非常浪費流量，所以不如隔離開，
2、因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie資料，這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的，
同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，提高了webserver的http請求的決議速度，

16.箭頭函式和普通函式的區別

1、箭頭函式相當于匿名函式，并且簡化了函式定義，不能作為建構式，不能使用new這種方式，

2、箭頭函式不系結arguments，取而代之用rest引數...解決，

3、箭頭函式不系結this，會捕獲其所在的背景關系的this值，作為自己的this值，

4、箭頭函式通過 call() 或 apply() 方法呼叫一個函式時，只傳入了一個引數，對 this 并沒有影響，

5、箭頭函式沒有原型屬性，

6、箭頭函式不能當做Generator函式,不能使用yield關鍵字，

Vue框架面試題

1.對于MVVM的理解？

1、模型（Model）： 資料保存—存放著各種資料，有的是固定寫死的，大多數是從后端回傳的資料，
2、視圖 （View）：用戶界面，也就是DOM，
3、視圖模型（View-Model）:連接View和Model的橋梁，當資料變化時，ViewModel夠監聽到資料的變化（通過Data Bindings），自動更新視圖，而當用戶操作視圖，ViewModel也能監聽到視圖的變化（通過DOM Listeners），然后通知資料做改動，這就實作了資料的雙向系結，

2.Vue的生命周期

常用的主要有8個：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

3.Vue實作資料雙向系結的原理

資料發生變化，頁面會重新渲染，資料的vue回應式

1、偵測資料的變化 -----------》資料劫持/資料代理（使Object.defineProperty和ES6的Proxy）

2、收集視圖看下哪些依賴于這些有變化的資料 -----------》依賴收集（watcher，在getter中收集依賴，在setter中觸發依賴）

3、資料變化時，自動通知需要更新的視圖部分，并進行更新 -----------》發布訂閱模式（update更新視圖）

4.vue路由的鉤子函式

1、全域鉤子：beforeEach函式有三個引數：
to:router即將進入的路由物件
from:當前導航即將離開的路由
next:Function,進行管道中的一個鉤子，如果執行完了，則導航的狀態就是 confirmed （確認的）；否則為false，終止導航，
afterEach函式不用傳next()函式
這類鉤子主要作用于全域,一般用來判斷權限,以及以及頁面丟失時候需要執行的操作，

例如//使用鉤子函式對路由進行權限跳轉

2、單個路由里面的鉤子
主要用于寫某個指定路由跳轉時需要執行的邏輯，

3、組件路由

主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,這幾個鉤子都是寫在組件里面也可以傳三個引數(to,from,next),作用與前面類似.

5.for in和for of的區別

for in是ES5標準，遍歷得到的是key，更適合遍歷物件，
for of是ES6引入，遍歷value，更適合遍歷陣列，

6.v-if 和 v-show 有什么區別？

1、v-if本質是向Dom樹內添加或者洗掉Dom元素，v-show類似于display：none

2、如果頻繁切換就用v-show，不頻繁切換就用v-if

7.對于Vue是一套漸進式框架的理解（此為vue的核心）

Vue漸進式-先使用Vue的核心庫，再根據你的需要的功能再去逐漸增加加相應的插件，

1、資料驅動專注于View 層，它讓開發者省去了操作DOM的程序，只需要改變資料，

2、組件回應原理資料（model）改變驅動視圖（view）自動更新

3、組件化擴展HTML元素，封裝可重用的代碼，

8.Vue 組件間通信有哪幾種方式？

1、props / $emit()

2、provide / inject

3、vuex

4、$parent / $children　＆ ref

5、$emit / $on

6、$attrs / $listeners

9.怎么定義vue-router的動態路由？怎么獲取傳過來的值？

params重繪會消失，，，query則不會

1、params的型別（引數重繪會消失，另相當于post請求）

2、query的型別（重繪引數不會消失，另相當于get請求，引數在地址欄顯示）

10.vue-router的路由模式有哪些？

vue-router 有 3 種路由模式：hash、history、abstract：

1、hash: 原理: 在 url 中的 # 之后對應的是 hash 值, 其原理是通過hashChange() 事件監聽hash值的變化, 根據路由表對應的hash值來判斷加載對應的路由加載對應的組件，支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；

2、history : 依賴 HTML5 History API 和服務器配置，具體可以查看 HTML5 History 模式；

3、abstract : 支持所有 JavaScript 運行環境，如 Node.js 服務器端，如果發現沒有瀏覽器的 API，路由會自動強制進入這個模式；

11.vue-router有哪幾種路由守衛?

1、全域前置守衛beforeEach

2、全域后置路由守衛afterEach

3、全域決議守衛beforeResolve

4、路由獨享守衛beforeEnter

5、組件內的守衛beforeRouteXXX(beforeRouteEnter)

12.vuex有哪幾種屬性？

1、state：vuex的基本資料，用來存盤變數(后四個屬性都是用來操作state里面儲存的變數的)，

2、getters：是對state里面的變數進行過濾的，

3、mutation:提交更新資料的方法，必須是同步的(如果需要異步使用action)，

4、action：和mutation的功能大致相同，不同之處在于：

1.Action提交的是mutation，而不是直接變更狀態， 也就是action是用來修改mutation并提交的 而 mutation是通過修改state

2.Action可以包含任意異步操作，(一般比較復雜的資料都在action中操作)

3.action先會執行異步操作再去呼叫mutation，隨后才跟新state

5、modules：專案特別復雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理，

13.vue等單頁面應用及其優缺點

優點
Vue 的目標是通過盡可能簡單的 API 實作回應的資料系結和組合的視圖組件，核心是一個回應的資料系結系統，

資料驅動、組件化、輕量、簡潔、高效、模塊友好、頁面切換快
缺點
不支持低版本的瀏覽器，最低只支持到IE9；
不利于SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；
首屏加載耗時相對長一些；
不可以使用瀏覽器的導航按鈕需要自行實作前進、后退，

瀏覽器面試題

2.瀏覽器架構

3.瀏覽器下事件回圈(Event Loop)

4.從輸入 url 到展示的程序

6.存盤

7.Web Worker

8.V8 垃圾回識訓制

9.記憶體泄露

服務端與網路

1.http/https 協議

1、https協議需要到ca申請證書，一般免費證書較少，因而需要一定費用，

2、http是超文本傳輸協議，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議，

3、http和https使用的是完全不同的連接方式，用的埠也不一樣，前者是80，后者是443，

4、http的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全，

2.常見狀態碼

3.get/ post

4.Websocket

5.TCP 三次握手

6.TCP 四次揮手

7.Node 的 Event Loop: 6 個階段

1、timer階段：執行到期的setTimeout / setInterval 佇列回呼；

2、I/O階段：執行上輪殘留的callback

3、idle，prepare：這個階段僅在內部使用，可以不必理會

4、poll階段：等待回呼，a：執行回呼，b：執行定時器（如果遇到setTimeout / setInterval ，則回傳到timer階段，如果遇到setImmediate，則前往check階段，）

5、check階段：執行setImmediate（）的回呼函式，

6、close callbacks階段：例如：socket.on(‘close’, …)這種close事件的回呼，

9.安全

10.HTTP和HTTP2的區別

1，二進制傳輸
http2采用二級制傳輸，相對于http1的文本傳輸安全性要高

2，多路復用
http一個鏈接只能提交一個請求，而http2能同時處理無數個請求，可以降低連接的數量，提高網路的吞吐量，

3，頭部壓縮
http2通過gzip與compress對頭部進行壓縮，并且在客戶端與服務端各維護了一份頭部索引表，只需要根據索引id就可以進行頭部資訊的傳輸，縮小了頭部容量，間接提升了傳輸效率，

4，服務端推送
http2可以主動推送資源到客戶端，避免客戶端花過多時間逐個請求，降低相應時間

Webpack 相關

1.原理簡述

把所有依賴打包成一個 bundle.js 檔案，通過代碼分割成單元片段并按需加載，

2.Loader

loader用于加載某些資源檔案，因為webpack本身只能打包common.js規范的js檔案，對于其他資源如css，img等，是沒有辦法加載的，這時就需要對應的loader將資源轉化，從而進行加載，

3.Plugin

plugin用于擴展webpack的功能，不同于loader，plugin的功能更加豐富，比如壓縮打包，優化，不只局限于資源的加載，

4.編譯優化

1、減小代碼體積，可以使用CDN引入一些npm包，區域引入一些類別庫，避免無用的檔案的引入，

2、在使用loader的時候，使用exclude和include，減少loader遍歷的目錄范圍，加快webpack的構建速度，

3、在resolve中配置alias，減少檢索路徑，

4、使用dllPlugin或者allReferencePlugin 進行預先構建，把改變頻率比較小的第三方庫等依賴單獨構建，

演算法

1.五大演算法

2.基礎排序演算法

3.高級排序演算法

4.遞回運用(斐波那契數列)： 爬樓梯問題

5.資料樹

6.天平找次品

進階知識

React框架

1.Fiber

2.生命周期

3.setState

4.HOC(高階組件)

5.Redux

6.React Hooks

7.SSR 服務端渲染

8.函式式編程