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