不容錯(cuò)過(guò)的一些面試題小細(xì)節(jié)，話不多說(shuō)，直接看題~

大廠面試題分享 面試題庫(kù)

后端面試題庫(kù) （面試必備） 推薦：★★★★★

地址：前端面試題庫(kù)

HTML/CSS/Javascript/ES篇

（1）標(biāo)準(zhǔn)盒模型和怪異盒模型？設(shè)置box-sizing:border-box后，content有哪些內(nèi)容？

標(biāo)準(zhǔn)盒模型：盒子內(nèi)容的寬/高=margin(左右/上下)+border(左右/上下)+padding(左右/上下)+content；內(nèi)容區(qū)只包含 content；設(shè)置box-sizing:content-box; 怪異盒模型：盒子內(nèi)容的寬/高=margin(左右/上下)+content(包含border(左右/上下)+padding(左右/上下))；內(nèi)容區(qū)包含content + padding + border；設(shè)置box-sizing:content-box;

<style>div{width: 200px;height: 200px;background-color: #ff6700;margin: 30px;padding: 10px;border: 20px solid #bfa;}.standardBox{box-sizing: content-box;}.weirdBox{box-sizing: border-box;}</style><h2>標(biāo)準(zhǔn)盒模型</h2><divclass="standardBox"></div>
?<h2>IE|怪異盒模型</h2><divclass="weirdBox"></div>復(fù)制代碼

結(jié)果如圖所示：

（2）有哪些屬性是可以繼承？

可繼承屬性：1.字體系列屬性：font-family，font-size2.文本系列屬性：text-indent，line-height，color3.元素可見(jiàn)性：visibility4.表格布局屬性：border-style5.列表布局屬性：list-stylelist-style-type6.光標(biāo)屬性：cursor復(fù)制代碼

（3）引入css樣式會(huì)不會(huì)阻塞html的渲染？css預(yù)處理器解析css會(huì)阻塞html的渲染？

css的加載會(huì)阻塞html的渲染嘛？css的加載不會(huì)阻塞html的解析，但是會(huì)阻塞渲染。這是因?yàn)閺臑g覽器輸入url到頁(yè)面渲染的過(guò)程中，html通過(guò)html
解析器生成DOM樹，css通過(guò)css解析器把 CSS 解析成 CSS 對(duì)象，然后組裝成 CSSOM 樹,這兩個(gè)步驟是互不影響，并行的，
因此CSS不會(huì)阻塞頁(yè)面DOM的解析。結(jié)合DOM樹 和CSSOM樹，生成一個(gè)render樹（重排），由此可見(jiàn)render tree的生成是依賴DOM Tree和CSSOM Tree的，因
此CSS必然會(huì)阻塞DOM的渲染；嚴(yán)謹(jǐn)一點(diǎn)的說(shuō)，CSS會(huì)阻塞render tree的生成，進(jìn)而會(huì)阻塞DOM的渲染。
復(fù)制代碼

（4）執(zhí)行js腳本會(huì)阻塞html的渲染？有沒(méi)有解決方式？

<script async></script>當(dāng)瀏覽器讀取到屬性為async的script標(biāo)簽，獲取該腳本的網(wǎng)絡(luò)請(qǐng)求是異步的；解析html的過(guò)程中會(huì)進(jìn)行js腳本的異步
加載，如果網(wǎng)絡(luò)請(qǐng)求腳本返回后，如果此時(shí) HTML 還沒(méi)有解析完，瀏覽器會(huì)暫停解析，先讓 JS 引擎執(zhí)行代碼，執(zhí)行完腳本
后再進(jìn)行解析；反之，如果網(wǎng)絡(luò)請(qǐng)求腳本返回后，html已經(jīng)解析完畢，那就相安無(wú)事。async 是不可控的，因?yàn)閳?zhí)行時(shí)間不確定，如果在異步JS 腳本中獲取某個(gè) DOM 元素，有可能獲取到也有可能獲取不到。如果存在多個(gè) async 的時(shí)候，執(zhí)行順序也不確定，完全依賴于網(wǎng)絡(luò)傳輸結(jié)果，誰(shuí)先到執(zhí)行誰(shuí)?？偨Y(jié)：解析html過(guò)程中會(huì)進(jìn)行腳本的異步下載，下載成功后會(huì)立即執(zhí)行，有可能會(huì)阻斷html的解析。<script defer></script>當(dāng)瀏覽器讀取到屬性為defer的script標(biāo)簽，獲取該腳本的網(wǎng)絡(luò)請(qǐng)求也是異步的；
解析html的過(guò)程中會(huì)進(jìn)行js腳本的異步加載，如果網(wǎng)絡(luò)請(qǐng)求腳本返回后，如果此時(shí) HTML 還沒(méi)有解析完，瀏覽器不會(huì)暫停解
析并執(zhí)行 JS 代碼，而是等待 HTML 解析完畢再執(zhí)行js代碼。如果存在多個(gè)defer script 標(biāo)簽，瀏覽器（IE9及以下除外）會(huì)保證它們按照在 HTML 中出現(xiàn)的順序執(zhí)行，不會(huì)破壞
js腳本之間的依賴關(guān)系。總結(jié)：不會(huì)阻塞html的解析。
復(fù)制代碼

（5）css選擇器有哪些？偽類和偽類選擇器有什么區(qū)別？

css選擇器：通用選擇器：選擇所有元素元素選擇器：按照給定的節(jié)點(diǎn)名稱，選擇所有匹配的元素（div-->匹配任何<div><div>元素）層級(jí)選擇器：如:nth-child(n)屬性選擇器類和id選擇器標(biāo)簽屬性選擇器偽類與偽元素：偽類用于選擇處于特定狀態(tài)的元素（a:hover|a:first等）；偽元素以類似方式表現(xiàn)，不過(guò)表現(xiàn)得是像
你往標(biāo)記文本中加入全新的 HTML元素一樣，而不是向現(xiàn)有的元素上應(yīng)用類（a::after|a::before）關(guān)系選擇器：后代選擇器（AB-->單個(gè)空格組合兩個(gè)選擇器，選擇A元素包含的所有B元素），子代關(guān)系選擇器（A>B-->選擇A的直接子元素B），鄰接兄弟（A+B-->選擇緊跟A后的B）,通用兄弟（A~B-->選擇A后任何地方的B元素），列組合器（A||B-->選擇屬于某個(gè)表格行的節(jié)點(diǎn)，即A作用域內(nèi)的B元素）分組選擇器：通過(guò)（,）將不同的選擇器組合在一起（A,B-->同時(shí)匹配A,B元素）偽類：(:)偽選擇器支持按照未被包含在文檔樹中的狀態(tài)信息來(lái)選擇元素（a:visited-->匹配所有曾被訪問(wèn)過(guò)的 <a> 元素）偽元素：(::) 偽選擇器用于表示無(wú)法用 HTML 語(yǔ)義表達(dá)的實(shí)體（p::first-line 匹配所有 <p> 元素的第一行）
復(fù)制代碼

（6）typeof和instanceof的區(qū)別？

typeof 只能準(zhǔn)確判斷基本數(shù)據(jù)類型，判斷所有的引用類型都為object,但是有兩個(gè)例外：console.log(typeofnull);//objectconsole.log(typeofFunction);//function
?
instanceof 只能準(zhǔn)確判斷引用數(shù)據(jù)類型，但是用來(lái)判斷基本數(shù)據(jù)類型也不會(huì)報(bào)錯(cuò)，例如：const arr=[1,2]console.log(arr instanceofArray);//truelet len=arr.lengthconsole.log(len instanceofNumber);//false復(fù)制代碼

（7）原型和原型鏈？

原型和原型鏈

原型：原型（prototype）是函數(shù)function對(duì)象的一個(gè)屬性，它定義了構(gòu)造函數(shù)制造出來(lái)的對(duì)象（new運(yùn)算符調(diào)用的函數(shù)）的公
共祖先,通過(guò)構(gòu)造函數(shù)產(chǎn)生的對(duì)象可以繼承到該原型的屬性和對(duì)象，原型也是對(duì)象。隱式原型(__proto__-->每個(gè)實(shí)例上都有的屬性)和顯式原型（prototype-->構(gòu)造函數(shù)的屬性）函數(shù)的原型和對(duì)象的原型（對(duì)象原型的最頂端是null）
原型鏈：在原型上再加一個(gè)原型，再加一個(gè)原型..把原型連成鏈，訪問(wèn)順序也是按照這個(gè)鏈的順序跟作用域鏈一樣，叫做原型鏈
復(fù)制代碼

（8）深拷貝和淺拷貝？如何拷貝函數(shù)？

那就聊聊深拷貝和淺拷貝

淺拷貝:    創(chuàng)建一個(gè)新對(duì)象，如果源對(duì)象的屬性是基本數(shù)據(jù)類型，拷貝的是基本數(shù)據(jù)類型的值；如果源對(duì)象的屬性是引用數(shù)據(jù)類型，
拷貝的是內(nèi)存地址，如果新對(duì)象改變了這個(gè)地址，會(huì)影響到源對(duì)象?？截惙绞?#xff1a;Object.assign({},obj,...)，擴(kuò)展運(yùn)算符（...），Array.prototype.concat()，Array.prototype.slice()，Array.prototype.concat()深拷貝：將一個(gè)對(duì)象從內(nèi)存中完整的拷貝一份出來(lái)，從堆內(nèi)存中開辟一個(gè)新的區(qū)域存放新的對(duì)象，且修改新對(duì)象不會(huì)影響
到源對(duì)象?？截惙绞?#xff1a;JSON.parse(JSON.stringify(obj))缺點(diǎn)：A.會(huì)忽略Symbol和undefined和functionB.不能拷貝循環(huán)引用的對(duì)象C.不能序列化函數(shù)，拷貝出來(lái)的對(duì)象的屬性順序可能會(huì)和源對(duì)象不一致D.拷貝Date對(duì)象，得到的是字符串；拷貝RegExp對(duì)象，得到的是{}E.對(duì)象中含有NaN，Infinity會(huì)變成null拷貝函數(shù)：如果拷貝箭頭函數(shù)，可以直接調(diào)用函數(shù)的toString方法，然后通過(guò)eval解析；如果拷貝普通函數(shù)，則需要使用正則表達(dá)式匹配函數(shù)體，然后通過(guò)newFunction生成。
復(fù)制代碼

（9）閉包？

閉包

閉包：當(dāng)一個(gè)外部函數(shù)返回一個(gè)內(nèi)部函數(shù)，這個(gè)內(nèi)部函數(shù)存在對(duì)外部函數(shù)變量的引用，這些變量不會(huì)隨著垃圾回收機(jī)制而被回收，這些變量的集合就是閉包。
復(fù)制代碼

（10）異步編程？

Promise,async-await,generator
復(fù)制代碼

（11）ES6中map和every的區(qū)別？

Array.prototype.map()  參數(shù)為一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)有三個(gè)參數(shù)，item,index,array；有返回值，
返回一個(gè)新數(shù)組
Array.prototype.every()  參數(shù)為一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)有三個(gè)參數(shù)，item,index,array；有返回值，只有所有的
元素都滿足條件，回調(diào)函數(shù)返回trueArray.prototype.some()  參數(shù)為一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)有三個(gè)參數(shù)，item,index,array；有返回值，只要
有一個(gè)元素滿足條件，回調(diào)函數(shù)就會(huì)返回true復(fù)制代碼

（12）localStorage是永久緩存，如何實(shí)現(xiàn)設(shè)置localStorage的有效期？

這個(gè)實(shí)際上就是根據(jù)業(yè)務(wù)邏輯手動(dòng)去定義一個(gè)有效期，有效期到了就手動(dòng)刪除

（13）瀏覽器的緩存策略（強(qiáng)緩存和協(xié)商緩存）？

已經(jīng)第二次面了，看來(lái)真的很重要！

Vue篇

（14）v-if和v-show的區(qū)別？

v-if:條件渲染通過(guò)操縱DOM元素來(lái)進(jìn)行切換顯示值為true的時(shí)候元素存在于DOM樹中，值為false的時(shí)候從DOM樹中移除會(huì)引起回流和重繪
v-show:原理是修改元素的的CSS屬性(display)來(lái)決定實(shí)現(xiàn)顯示還是隱藏指令后面的內(nèi)容最終都會(huì)解析為布爾值值為真(true)的時(shí)候元素顯示，值為假(false)的時(shí)候元素隱藏?cái)?shù)據(jù)改變之后呢對(duì)應(yīng)的元素的顯示狀態(tài)也是會(huì)同步更新的（響應(yīng)式的）不會(huì)引起回流，但是會(huì)引起重繪
復(fù)制代碼

（15）子組件如何使用父組件的方法（父子組件通信）

組件通信

Props用于父組件向子組件傳值
emit用于子組件向父組件傳值
expose/ref用于父組件接收子組件傳來(lái)的的屬性或方法
provide/inject用于父組件向子組件或者其他跨級(jí)組件或多級(jí)嵌套組件之間的通信
attrs用于子組件接收父組件中不是通過(guò)Props接收的屬性
另外，可以試試mitt.js
復(fù)制代碼

（16）說(shuō)說(shuō)vue中nextTick()？

nextTick():等待下一次 DOM 更新刷新的工具方法
當(dāng)你在 Vue 中更改響應(yīng)式狀態(tài)時(shí)，最終的 DOM 更新并不是同步生效的，而是由 Vue 將它們緩存在一個(gè)隊(duì)列中，直到下一個(gè)
“tick”才一起執(zhí)行。這樣是為了確保每個(gè)組件無(wú)論發(fā)生多少狀態(tài)改變，都僅執(zhí)行一次更新。
nextTick() 可以在狀態(tài)改變后立即使用，以等待 DOM 更新完成。你可以傳遞一個(gè)回調(diào)函數(shù)作為參數(shù)，或者 await 返回的
Promise
?
實(shí)現(xiàn)原理：
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后立即使用 nextTick 來(lái)獲取更新后的 DOM。 nextTick主要
使用了宏任務(wù)和微任務(wù)。 根據(jù)執(zhí)行環(huán)境分別嘗試采用Promise、MutationObserver、setImmediate，如果以上都不行則采用
setTimeout定義了一個(gè)異步方法，多次調(diào)用nextTick會(huì)將方法存入隊(duì)列中，通過(guò)這個(gè)異步方法清空當(dāng)前隊(duì)列
復(fù)制代碼

（17）vue中是如何阻止事件冒泡的？

<!-- 單擊事件將停止傳遞 --><a @click.stop="doThis"></a>
?
<!-- 事件處理器不來(lái)自子元素 --><div @click.self="doThat">...</div>復(fù)制代碼

（18）如何保證一份css文件樣式不會(huì)作用在全局（樣式隔離）？

scoped
BEM(block element modifier) 可讀性好，命名太長(zhǎng)，css打包后的體積會(huì)更大
css-loader（css模塊化） 會(huì)將css類名轉(zhuǎn)換成哈希值；代碼可讀性變差
css in js
預(yù)處理器的嵌套樣式
shadow DOM（微前端）

大廠面試題分享 面試題庫(kù)

后端面試題庫(kù) （面試必備） 推薦：★★★★★

地址：前端面試題庫(kù)