溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了web前端高頻面試題及答案有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇web前端高頻面試題及答案有哪些文章都會有所收獲，下面我們一起來看看吧。
mvvm場景：數據操作比較多的場景，需要大量使用DOM元素時，采用mvvm的開放方式，會更加便捷，讓開發者更多的經歷放在數據的變化上，解放繁瑣的DOM元素
MVVM 模型，
M 數據 從后臺獲取的商品數據
V 視圖 就是寫好的頁面，每一個div，每一個input 都是視圖
VM 視圖模型，
數據發生變化，通過視圖模型會改變視圖的顯示，視圖上的改變，也會通過視圖模型進而影響數據的變化
核心：關于VUE雙向數據綁定，其核心是 Object.defineProperty()方法。
beforeCreate（創建前）、created（創建后）、beforeMount(載入前)、mounted（載入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（銷毀前）、destroyed（銷毀后）
mounted 真實dom掛載完成 updated只要data數據被改變 就會自動更新觸發 destroy銷毀全局計時器和自定義事件
如果使用了keep-alive會在多兩個：activated、deactivated當組件初次加載會執行前4個生命周期，分別為： beforeCreate、created、beforeMount、mounted
相同點:都可以控制dom元素的顯示和隱藏
不同點:v-show只是改變display屬性，dom元素并未消失，切換時不需要重新渲染頁面
v-if直接將dom元素從頁面刪除，再次切換需要重新渲染頁面
async await 是ES7的新增，async用于聲明一個函數，await用于等待一個異步方法執行完成。async函數返回的是一個promise對象,可以用.then方法添加回調函數，在函數執行的中，一旦遇到await就回先返回,等到這個異步操作完成之后，它再進行函數體內后面的這個語句
會改變原數組：
pop (刪除數組的最后一個元素并返回刪除的元素)
push(向數組的末尾添加一個或更多元素，并返回新的長度)
shift(刪除并返回數組的第一個元素）
unshift(向數組的開頭添加一個或更多元素，并返回新的長度)
reverse(反轉數組的元素順序)
sort(對數組的元素進行排序)
splice(用于插入、刪除或替換數組的元素)
不會改變原數組：
concat---連接兩個或更多的數組，并返回結果。
every---檢測數組元素的每個元素是否都符合條件。
some---檢測數組元素中是否有元素符合指定條件。
filter---檢測數組元素，并返回符合條件所有元素的數組。
indexOf---搜索數組中的元素，并返回它所在的位置。
join---把數組的所有元素放入一個字符串。
toString---把數組轉換為字符串，并返回結果。
lastIndexOf---返回一個指定的字符串值最后出現的位置，在一個字符串中的指定位置從后向前搜索。
map---通過指定函數處理數組的每個元素，并返回處理后的數組。
slice---選取數組的的一部分，并返回一個新數組。
valueOf---返回數組對象的原始值
每一個實例對象上有一個proto屬性，指向的構造函數的原型對象，構造函數的原型對象也是一個對象，也有proto屬性，這樣一層一層往上找的過程就形成了原型鏈。
概念：函數嵌套函數，內部變量能訪問外部變量，這個變量稱為自由變量
解決的問題：保存變量
帶來的問題：會造成內存泄漏問題
閉包的應用：防抖節流
新增模板字符串
箭頭函數
for-of（用來遍歷數據—例如數組中的值。）
ES6 將 Promise 對象納入規范，提供了原生的 Promise 對象。
增加了 let 和 const 命令，用來聲明變量。
還有就是引入 module 模塊的概念
給每個dom元素加上key作為唯一標識 ，diff算法可以正確的識別這個節點，使頁面渲染更加迅速!
每個組件都是 Vue 的實例。組件共享 data 屬性，當 data 的值是同一個引用類型的值時，改變其中一個會影響其他
利用子絕父相定位方式來實現
<style>
.container{
width: 300px;
height: 300px;
position: relative;
}
.conter{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
利用Css3的transform，可以輕松的在未知元素的高寬的情況下實現元素的垂直居中。
<style>
.container{
position: relative;
}
.conter{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
flex
<style>
.container{
display: flex;
justify-content: center;
align-items: center;
}
.conter{
}
</style>
基本類型：string，number，boolean，null，undefined，symbol，bigInt
引用類型： object，array
基本類型存儲在棧中，空間小，操作頻繁
引用數據類型存放在堆中，它的地址在棧中，一般我們訪問就是它的地址
是es6引入新的原始數據類型Symbol，表示獨一無二的值
所謂同源策略就是瀏覽器的一種安全機制，來限制不同源的網站不能通信（域名、協議、端口號相同）
promise 是一個對象， 可以從改變對象獲取異步操作信息
他可以解決回調地獄的問題，也就是異步深層嵌套問題
遞歸：如果函數在內部可以調用其本身，那么整函數就是遞歸函數，簡單理解：函數內部自己調用自己，這個函數就是遞歸函數，
優點：機構清晰，可讀性強
缺點：效率低，調用站可能溢出，其實每一次函數調用會在內存棧中分配空間，而每個進程的棧的內容糧食有限的。當調用的層次太多時，就會超出棧的容量，從而導致棧溢出
let 命令不存在變量提升，如果在 let 前使用，會導致報錯
如果塊區中存在 let 和 const 命令，就會形成封閉作用域
不允許重復聲明
const定義的是常量，不能修改，但是如果定義的是對象，可以修改對象內部的數據
函數式組件
路由懶加載
v-for要綁定key key是虛擬dom唯一標志,能幫vue高效的動態渲染頁面,渲染頁面時會使用diff算法,會比較新舊dom,在比較時只比較同一級,不進行跨級比較,key發生變化節點進行銷毀,并且是子節點先銷毀。
computed緩存數據和watch keep-alive緩存組件
v-if和v-for不要同時使用,v-show是display,銷毀是display-none.v-if為true創建.false銷毀。
設計vue響應式數據時不能設計太深.會做全量遞歸的計算.
組件的顆粒度不能設計太細.合理劃分.層級越深性能消耗越大
防抖節流
ui組件庫按需引入
m（數據層）v（視圖層）vm（數據視圖交互層）簡化了大量dom操作 ,只用于單頁面,通過數據來顯示視圖層而不是節點操作。
mvc還需要獲取dom,使頁面渲染性能低且加載速度慢
面試可以說的項目優化：
設計vue響應式數據時不能設計太深.會做全量遞歸的計算.
組件的顆粒度不能設計太細.合理劃分.層級越深性能消耗越大
實現的功能：
改變url且不讓瀏覽器向服務器發請求
檢測url的變化
截獲url地址 并解析出需要的信息匹配路由規則
hash基于url傳參 會有體積限制,不會包括在http請求中對后端完全沒有影響,改變hash不會重新加載頁面; history可以在url里放參數 還可以將數據存放在一個特定對象中.history模式瀏覽器白屏解決方法是在服務端加一個覆蓋所有的情況候選資源,必須要服務端在服務器上有對應的模式才能使用,如果服務器沒配置,可以先使用默認的hash。
塊標簽：div、h2~h7、ul、li、table、p、br、form。
特征：獨占一行，換行顯示，可以設置寬高，可以嵌套塊和行
行標簽：span、a、img、textarea、select、option、input。
特征：只有在行內顯示，內容撐開寬、高，不可以設置寬、高（img、input、textarea等除外）
==是非嚴格意義上的相等
值相等就相等
===是嚴格意義上的相等，會比較兩邊的數據類型和值大小
值和引用地址都相等才相等
變量必須聲明后再使用
函數的參數不能有同名屬性，否則報錯
不能使用 with 語句
禁止 this 指向全局對象
git init 初始化倉庫
git clone 克隆
git status 檢查文件狀態
git add. 將文件添加到暫存區
git commit -m 描述信息
tcp安全性更高 http協議是建立在tcp基礎上的
udp效率比tcp高 容易丟數據
mutations（修改state里面的數據，但是他只能執行同步的操作，異步必須寫在action里面）
state（放數據）
action（執行異步操作）
getter（計算屬性）
moudel（允許將單一store拆分多個store并且同時保存在單一的狀態中）
傳遞過程
頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation，mutation會修改state中對應的值。 最后通過getter把對應值跑出去，在頁面的計算屬性中，通過，mapGetter來動態獲取state中的值
首先 防抖就是觸發下一個事件時停止掉上一個事件
節流是 觸發當前事件需要在上一個事件結束以后
通過設置節流閥(定時器)
重繪：當元素內容以及布局沒有發生改變，只是元素外觀發生改變（background-color），就會重繪
回流：當一部分內容或者布局發生了改變，重新構建頁面就會產生回流
產生回流一定會造成重繪，但是重繪不一定造成回流
!importent>行內> id> 類，偽類，屬性>標簽，偽元素選擇器 > 繼承和通配符
父盒子設置上邊距
overflow：hidden
子盒子脫標
父盒子上 padding
一共有5中方法
父盒子設置高度
overflow：hidden
偽元素
雙偽元素
在父盒子末尾添加一個空盒子，設置 clear:both
split 字符串轉換為數組，參數為以某個字符串分隔
join 數組轉換為字符串 參數表示轉換為的字符串以什么連接
1.利用雙重for循環，再利用數組方法splice方法去重（es5常用）
2.set去重:準備一個數組，數組解構newset,再準備一個函數存放數組的變量作為函數的判斷值，return Array.from(new set(arr))即可
3.數組方法indexof
4.數組方法sort Obj[a]-Obj[b]
全局變量使用不當（沒有聲明的變量）
閉包使用不當
定時器/延時器沒有清理
沒有清理的DOM元素引用(dom清空或刪除時，事件未清除)
beforeCreate
created 數據初始化完成，方法也調用，但是DOM未渲染
beforeMount
mounted DOM和數據掛在完成
state => 基本數據
getters => 從基本數據(state)派生的數據，相當于state的計算屬性
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以異步。
modules => 模塊化Vuex
簡述vuex數據傳遞過程
頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation，mutation會修改state中對應的值。 最后通過getter把對應值跑出去，在頁面的計算屬性中，通過，mapGetter來動態獲取state中的值
相同點
get請求和post請求底層都是基于TCP/IP協議實現的，使用二者中的任意一個，都可以實現客戶端和服務器端的雙向交互
最本質的區別
約定和規范：
規范：定義GET請求是用來獲取資源的，也就是進行查詢操作的，POST請求是用來傳輸實體對象的， 用于 增刪改操作
約定：GET請求 將參數拼接到URL上進行參數傳遞 POST請求將參數寫入請求正文中傳遞
非本質區別
緩存不同 ，get會緩存
參數長度限制不同，get請求的參數是通過URL傳遞的，而URL的長度是有限制的，通常為2K；post請求參數存放在請求正文中，沒有大小限制
回退和刷新不同，get請求可以直接回退和刷新，不會對用戶和程序產生影響；post請求如果直接回滾和刷新，數據將會再次提交
歷史記錄不同，get請求的參數會保存在歷史記錄中，post請求的參數不會
書簽不同，get請求的地址可以被收藏為書簽，post不會
跨域原因：瀏覽器出于安全考慮保護資源，同源策略。(協議、域名、端口號)
解決跨域：
jsonP 但只能使用get 原理-將請求的接口設置給script標簽的src屬性傳遞一個函數給后臺實現跨域。后臺響應的是一個函數調用
cors：最常用。
反向代理:本地前端發送到本地后端,不會跨域,（同源）本地后端接收請求后轉發到其他服務器（服務器和服務器之間不會跨域）代理是需要路徑中的特殊標志。
cookie 設置過期時間刪除，即使窗口或瀏覽器關閉
localStorage 存儲量大，存儲持久數據，瀏覽器關閉后數據不會丟失除非手動刪除
sessionStorage臨時存儲，關閉瀏覽器是存儲內容自動清除
存儲大小：
cookie 數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，單筆cookie大得多，可達到5m或更大
websocket.SharedWoeket;
也可以調用localStorage、cookies等本地存儲方式；localStorage另一個瀏覽器上下文里被添加、修改或刪除時，他都會觸發一個事件，我們通過監聽事件，控制他的值進行頁面信息通信；
注意quirks：Safari在無痕模式下設置localStorage值時會拋出，quotaExceededError的異常
assets文件夾是放靜態資源；
components是方組件；
router是定義路由相關的配置
view是視圖
app.vue是一個應用主組件
main.js是入口文件
router為VueRouter的實例，相當于一個全局的路由器對象，里面含有很多屬性和子對象，例如history對象。。。經常用的跳轉鏈接就可以用this.$router.push，和router-link跳轉一樣。
route相當于當前正在跳轉的路由對象。。可以從里面獲取name,path,params,query等
用JavaScript對象模擬真實DOM樹，對真實DOM進行抽象
diff算法：比較兩棵虛擬樹的差異
pach算法：將兩個虛擬DOM對象的差異應用到真實的DOM樹
箭頭函數沒有原型，原型是undefined
箭頭函數this指向全局對象，而函數指向引用對象
call，apply，bind方法改變不了箭頭函數的指向
數據總是從父組件傳到子組件，子組件沒有權利修改父組件傳過來的數據，只能請求父組件對原數據進行修改
slot插槽，可以理解為slot在組件模板中提前占據了位置，當復用組件時，使用相關的slot標簽時，標簽里的內容就會自動替換組件模板中對應slot標簽的位置，作為承載分發內容的出口
主要作用是：復用和擴展組件，做一些定制化組件的處理
v-model 多用于表單元素實現雙向數據綁定
v-bind：簡寫為：，動態綁定一些元素的屬性，類型可以是：字符串、對象或數組。
v-on:click 給標簽綁定函數，可以縮寫為@，例如綁定一個點擊函數 函數必須寫在methods里面
v-for 格式： v-for="字段名 in(of) 數組json" 循環數組或json
v-show 顯示內容
v-else指令：和v-if指令搭配使用，沒有對應的值。當v-if的值false，v-else才會被渲染出來
v-if指令：取值為true/false，控制元素是否需要被渲染
v-else-if 必須和v-if連用
v-else指令：和v-if指令搭配使用，沒有對應的值。當v-if的值false，v-else才會被渲染出來
v-text 解析文本
v-html 解析html標簽
v-bind:class 三種綁定方法 1、對象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、數組型 '[{red:"isred"},{blue:"isblue"}]'
v-once 進入頁面時 只渲染一次 不在進行渲染
v-cloak 防止閃爍
v-pre 把標簽內部的元素原位輸出
< keep-alive >是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。
< keep-alive > 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
關于“web前端高頻面試題及答案有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“web前端高頻面試題及答案有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
