前端面試題
常用的偽元素有哪些？
說說盒模型？
標(biāo)準(zhǔn)盒模型：元素的寬度和高度只包括內(nèi)容（content），不包括內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。 IE盒模型：元素的寬度和高度包括內(nèi)容（content）、內(nèi)邊距（padding）和邊框（border），但不包括外邊距（margin） Content box: 這個(gè)區(qū)域是用來顯示內(nèi)容，大小可以通過設(shè)置 width 和 height 。 Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域；大小通過 padding 相關(guān)屬性設(shè)置。 Border box: 邊框盒包裹內(nèi)容和內(nèi)邊距。大小通過 border 相關(guān)屬性設(shè)置。 Margin box: 這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域。大小通過 margin 相關(guān)屬性設(shè)置。 實(shí)現(xiàn)水平垂直居中的方式？
9.使用absolute絕對定位，配合translate 移動(dòng)轉(zhuǎn)換，實(shí)現(xiàn)水平垂直居中
移動(dòng)端如何適配不同的設(shè)備？
1、媒體查詢
2、百分比布局
3、彈性盒子布局
4、rem單位 + 動(dòng)態(tài)的font-size
5、Viewport單位
css中的自適應(yīng)單位有哪些？
使用px，結(jié)合Media Query進(jìn)行階梯式的適配； 使用%，按百分比自適應(yīng)布局； 使用rem，結(jié)合html元素的font-size來根據(jù)屏幕寬度適配； 使用vw、vh，直接根據(jù)視口寬高適配。
本地儲(chǔ)存有哪些，有什么區(qū)別？
存儲(chǔ)大?。篶ookie數(shù)據(jù)大小不能超過4k，sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大
有效時(shí)間：localStorage存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；sessionStorage數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除；cookie設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉
數(shù)據(jù)與服務(wù)器之間的交互方式，cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端；sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存
js的數(shù)據(jù)類型？如何判斷數(shù)據(jù)類型？
其中基礎(chǔ)類型包括：undefined，Null，Number，String，Boolean，Symbol，BigInt
引用類型：Object （其中Object又包括 Array，RegExp，Date，Math，F(xiàn)unction）
為什么typeOf null是object？
在判斷數(shù)據(jù)類型時(shí)，是根據(jù)機(jī)器碼低位標(biāo)識來判斷的，而null的機(jī)器碼標(biāo)識為全0，而對象的機(jī)器碼低位標(biāo)識為000。所以typeof null的結(jié)果被誤判為Object。
var，let，const的區(qū)別？
var的特點(diǎn)： 存在變量提升，一個(gè)變量可多次聲明，后面的聲明會(huì)覆蓋前面的聲明，在函數(shù)中使用var聲明變量的時(shí)候，該變量是局部的，如果在函數(shù)內(nèi)不使用var，該變量是全局的。
let的特點(diǎn)： 不存在變量提升，let聲明變量前，該變量不能使用（暫時(shí)性死區(qū)），let命令所在的代碼塊內(nèi)有效，let不允許在相同作用域中重復(fù)聲明，注意是相同作用域，不同作用域有重復(fù)聲明不會(huì)報(bào)錯(cuò)。
const的特點(diǎn)： const聲明一個(gè)只讀的變量，聲明后，值就不能改變，const必須初始化，const并不是變量的值不能改動(dòng)，而是變量指向的內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)，let該有的特點(diǎn)const都有。
能用const的情況下盡量使用const，大多數(shù)情況使用let，避免使用var。
數(shù)組去重有哪些方法？
利用 ES6 Set 去重 利用 for 嵌套 for，然后 splice 去重 利用 indexOf 去重 利用遞歸去重
ES6新特性有哪些？
說一下防抖和節(jié)流？
如何實(shí)現(xiàn)深淺拷貝？
深拷貝則不會(huì)出現(xiàn)上述問題，引用數(shù)據(jù)類型，地址跟數(shù)據(jù)都會(huì)拷貝出來。
閉包是什么，用它解決過什么問題？
一個(gè)是可以讀取函數(shù)內(nèi)部的變量；
另一個(gè)就是讓這些變量的值始終保存在內(nèi)存中。
Ajax 請求的成功回調(diào)，事件綁定的回調(diào)方法， setTimeout 的延時(shí)回調(diào)，或者函數(shù)內(nèi)部返回另一個(gè)匿名函數(shù)，這些都是閉包
說出你知道的數(shù)組方法？
1.shift 刪除數(shù)組中的第一個(gè)元素
2.pop 刪除數(shù)組中的最后一個(gè)元素
3.unshift 增加元素在數(shù)組的前面
4.push 增加元素在數(shù)組的后面
5.map 循環(huán)，并且返回新的數(shù)組
6.forEach 循環(huán)，遍歷
7.filter 過濾，篩選出數(shù)組中的滿足條件的，并且返回新的數(shù)組
8.concnt 合并數(shù)組
9.find 查找出第一個(gè)符合條件中的數(shù)組元素
10.findIndex 查找出第一個(gè)符合條件中的數(shù)組元素，所在的索引位置
11.flat 將多維數(shù)組轉(zhuǎn)為一維數(shù)組
12.join將數(shù)組轉(zhuǎn)為字符串
13.reverse 顛倒數(shù)組中的順序
14.every檢測數(shù)組中元素是否都是符合條件 === bollean
15.some檢測數(shù)組中元素是否有滿足條件的元素 === bollean
16.splice(start,n,添加元素) 開始位置 刪除個(gè)數(shù)，添加元素
17.sort 排序
18.slice(start,end) 選中[start.end)之間的元素
19.indexOf 查找值所在的位置
20.includes 查看數(shù)組中是否存在此元素
哪些遍歷方法會(huì)改變原數(shù)組？
sort(): sort() 方法會(huì)改變原數(shù)組，按照指定的排序方式對數(shù)組進(jìn)行排序。
splice(): splice() 方法會(huì)改變原數(shù)組，通過刪除或替換現(xiàn)有元素或者添加新元素來修改數(shù)組。
push() / pop() / shift() / unshift(): 這些方法在改變原數(shù)組的同時(shí)添加或刪除元素。
說說this指向？
改變this指向的方法，有什么區(qū)別？
1、call，apply會(huì)調(diào)用函數(shù)，且改變函數(shù)內(nèi)部this指向
2、call，apply傳遞參數(shù)不一樣，apply必須以數(shù)組形式
3、bind不會(huì)調(diào)用函數(shù)，但會(huì)改變函數(shù)內(nèi)部this指向
什么是跨域？如何解決？
當(dāng)一個(gè)請求url的協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁面url不同即為跨域 2.JSONP 是服務(wù)器與客戶端跨源通信的常用方法。最大特點(diǎn)就是簡單適用，兼容性好（兼容低版本IE），缺點(diǎn)是只支持get請求，不支持post請求。 2.CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標(biāo)準(zhǔn)，屬于跨源 AJAX 請求的根本解決方法。 3.反向代理 js引入為什么放在底部？
因?yàn)闉g覽器加載完 JS 文件就會(huì)去執(zhí)行，這時(shí)候如果 JS 里面有對 DOM 的操作的話，DOM 可能還未加載完，可能就會(huì)出錯(cuò)。
因?yàn)闉g覽器渲染HTML文件是從上往下渲染的。
mvc和mvvm的理解？
MVC思想 ：Controller負(fù)責(zé)將Model的數(shù)據(jù)用View顯示出來。
MVVM由Model，View，ViewModel三部分構(gòu)成。
Model 和 View 并無直接關(guān)聯(lián)，而是通過 ViewModel 來進(jìn)行交互的（即雙向數(shù)據(jù)綁定）
Model 和 ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系。View的變化可以引起Model的變化，Model的變化也可以引起View變化（類似于淺拷貝）。ViewModel是View和Model層的橋梁，數(shù)據(jù)會(huì)綁定到viewModel層并自動(dòng)將數(shù)據(jù)渲染到頁面中，視圖變化的時(shí)候會(huì)通知viewModel層更新數(shù)據(jù)。
vue的雙向綁定原理？
vue的雙向綁定，即數(shù)據(jù)與視圖的響應(yīng)式設(shè)計(jì)。具體表現(xiàn)為：View的改變能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新View。
Vue 數(shù)據(jù)雙向綁定原理是通過 數(shù)據(jù)劫持 + 發(fā)布者-訂閱者模式 的方式來實(shí)現(xiàn)的，首先是通過Object.defineProperty() 方法來劫持（監(jiān)聽）各屬性的 getter、setter，并在當(dāng)監(jiān)聽的屬性發(fā)生變動(dòng)時(shí)通知訂閱者，是否需要更新，若更新就會(huì)執(zhí)行對應(yīng)的更新函數(shù)。
vue的生命周期有哪些，每個(gè)階段做什么？
beforeCreat() 創(chuàng)建前 在new一個(gè)vue實(shí)例后，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件，其他的東西都還沒創(chuàng)建。在此生命周期執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法
created（）被創(chuàng)建 data 和 methods都已經(jīng)被初始化好了，可以調(diào)用了
beforeMount() 掛載前 在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中，此時(shí)，頁面還是舊的
mounted（）已掛載 Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段，進(jìn)入到了運(yùn)行階段。如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn)，最早可以在和這個(gè)階段中進(jìn)行
beforeupdate（）更新前 頁面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的， 頁面還沒有和最新的數(shù)據(jù)保持同步
updated（）更新 頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
beforeDestroy() 銷毀前 Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段，這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
destroyed（）被銷毀 這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。
v-if和v-show的區(qū)別？
當(dāng)使用v-if時(shí)，元素是否渲染到DOM取決于表達(dá)式的值是否為真。如果表達(dá)式為假，元素將不會(huì)被渲染到DOM中。
當(dāng)使用v-show時(shí)，元素始終會(huì)渲染到DOM中，但是通過CSS的display屬性來控制元素的顯示與隱藏。如果表達(dá)式為假，元素會(huì)被隱藏，但仍然占據(jù)著DOM空間。
vue2中data為什么是一個(gè)函數(shù)？
是為了防止多個(gè)組件實(shí)例對象之間共用一個(gè)data，產(chǎn)生數(shù)據(jù)污染。采用函數(shù)的形式，initData時(shí)會(huì)將其作為工廠函數(shù)都會(huì)返回全新data對象。
vue常用的指令有哪些？
v-for為什么需要key？
vuex有幾個(gè)屬性，作用是什么？
keep-alive是什么？
keep-alive 是 Vue 的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 transition 相似，keep-alive 是一個(gè)抽象組件：它自身不會(huì)渲染成一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。
在組件切換過程中將狀態(tài)保留在內(nèi)存中 ，防止重復(fù)渲染DOM，減少加載時(shí)間及性能消耗，提高用戶體驗(yàn)性。
vue的計(jì)算屬性和監(jiān)聽屬性有什么區(qū)別？
Vue中的計(jì)算屬性和監(jiān)聽屬性都可以用來監(jiān)聽數(shù)據(jù)的變化并做出相應(yīng)的響應(yīng)。它們的區(qū)別在于計(jì)算屬性是根據(jù)依賴的數(shù)據(jù)動(dòng)態(tài)計(jì)算得出的值，而監(jiān)聽屬性是在數(shù)據(jù)變化時(shí)執(zhí)行特定的回調(diào)函數(shù)。
vue中組件通訊有哪些方式？
1.props和events：父組件通過props向子組件傳遞數(shù)據(jù)，子組件通過events向父組件發(fā)送消息。
2.自定義事件
3.vuex
4.本地儲(chǔ)存
5.事件總線
eventBus是什么?
在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發(fā)送事件或接收事件，所以組件都可以上下平行地通知其他組件。
vue2和3的區(qū)別？
多根節(jié)點(diǎn)
組合式API
Vue3 在組合式API（Composition API，下面展開）中使用生命周期鉤子時(shí)需要先引入，而 Vue2 在選項(xiàng)API（Options API）中可以直接調(diào)用生命周期鉤子
Vue3 響應(yīng)式原理基礎(chǔ)是 Proxy
TypeScript支持
打包優(yōu)化
首屏加載優(yōu)化有什么方法？
壓縮和合并資源
圖片優(yōu)化懶加載
盡量減少CSS文件的大小 代碼壓縮、去除不必要的注釋和空格等方式來減小JavaScript文件的大小。服務(wù)端渲染（SSR）
CDN加速
請求跨域中，服務(wù)器代理是什么原理？
代理前：客戶端 -> 服務(wù)器
代理后：客戶端 -> 代理服務(wù)器 -> 服務(wù)器
跨域只是瀏覽器和服務(wù)器之間存在，而服務(wù)器之間不存在跨域。
導(dǎo)入樣式時(shí)，link和@import的區(qū)別？
vue中$nextTick的作用？
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
當(dāng)數(shù)據(jù)更新了，在dom中渲染后，自動(dòng)執(zhí)行該函數(shù)，
vue的優(yōu)點(diǎn)和缺點(diǎn)？
Vue的優(yōu)點(diǎn)包括：- 簡單易學(xué)
- 響應(yīng)式數(shù)據(jù)綁定
- 組件化開發(fā)
- 輕量級
- 生態(tài)系統(tǒng)相對較?。合啾扔贏ngular和React，Vue的生態(tài)系統(tǒng)相對較小，可能會(huì)缺少一些插件和工具支持。
- 社區(qū)支持不如React：雖然Vue在國內(nèi)有很好的社區(qū)支持，但在國際上還不如React那么活躍。
- 某些功能相對不完善：Vue在某些功能上可能不如React或Angular完善，需要開發(fā)者自行擴(kuò)展或?qū)ふ业谌讲寮С帧?/span>
vuex保存的數(shù)據(jù)頁面刷新會(huì)丟失怎么解決？
1.使用vuex-along
2.使用localStorage或者sessionStroage
vue中組件和插件的區(qū)別？
- 組件：組件就是把圖形、非圖形的各種邏輯均抽象為一個(gè)統(tǒng)一的概念（組件）來實(shí)現(xiàn)開發(fā)的模式，在 Vue 中每一個(gè) .vue 結(jié)尾的文件都可以視為一個(gè)組件
- 插件：插件通常用來為 Vue 構(gòu)造函數(shù)添加全局功能，比如 vue-router、VueX 都是插件
vue中常用的修飾符有哪些？
- .prevent：阻止默認(rèn)行為
- .stop：阻止事件冒泡
- .once：只觸發(fā)一次
- .capture：使用事件捕獲模式
- .self：只有事件是由自身觸發(fā)時(shí)才觸發(fā)事件處理程序
- .passive：告訴瀏覽器不要阻止事件的默認(rèn)行為
小程序打包超出2M怎么解決？
-
檢查項(xiàng)目中是否有未使用的資源文件，將其刪除或者優(yōu)化。
-
使用小程序的分包功能，將部分功能或資源文件放入分包中，減少主包的大小。
-
壓縮圖片和視頻等資源文件，減小文件體積。
-
使用代碼壓縮工具對代碼進(jìn)行壓縮，減小代碼體積。
-
使用懶加載或按需加載的方式加載資源文件，減少首次加載時(shí)的壓力。
（以上面試題來自網(wǎng)絡(luò)收集）
現(xiàn)在面試問的越來越趨向于項(xiàng)目經(jīng)驗(yàn)，就問你之前的項(xiàng)目經(jīng)歷，解決過什么難點(diǎn)，不知道大家有沒有感覺...
雪天前端
10個(gè)內(nèi)容
把在線網(wǎng)址打包APP(一看就會(huì)系列)2024-02-04把網(wǎng)頁打包成app(簡單)2024-01-31
前端CSS魔法2024-01-28
Vue新手引導(dǎo)插件2024-01-27
Vue3優(yōu)秀的UI組件庫(高顏值)2024-01-19
下載量超高的vscode AI插件2024-01-14
github 中文排行榜2024-01-12
來檢測下你的vue水平2024-01-05
好用的截圖工具2023-12-21
github訪問不了？2023-12-19
如有幫助，求個(gè)在看，愿道友龍年財(cái)源滾滾，大吉大利，步步高升，龍騰萬里！