初級前端必看——2020最完整大廠高頻面試真題分享（含答案）！
HTML部分
1.你是怎麼理解HTML語義化
Step 1：先舉例說明
HTML語義化簡單來說就是用正確的標籤來做正確的事。
比如表示段落用 p 標籤、表示標題用 h1-h6 標籤、表示文章就用 article 等。
Step 2：說說為什麼需要使用語義化標籤
前期：前端工作主要由後端人員完成，也就是打野階段，使用的是table佈局
中期：美工人員使用div+css來完成
當前：專業的前端開發應該使用合適的標籤來表達正確含義的頁面結構
讓頁面具有良好的結構和含義，可以有效提高：
可訪問性：幫助輔助技術更好的閱讀和轉譯你的網頁，利於無障礙閱讀；
可檢索性：有了良好的結構和語義，可以提高搜尋引擎的有效爬取，提高網站流量；
國際化：全球只有13%的人口是英語母語使用者，因此通用的語義化標籤可以讓各國開發者更容易弄懂你網頁的結構；
互用性：減少網頁間的差異性，幫助其他開發者瞭解你網頁的結構，方便後期開發和維護
2. meta viewport 是做什麼用的，怎麼寫？
Step 1：使用目的
是為了在移動端不讓使用者縮放頁面使用的
Step 2：怎麼寫
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
Step 3：解釋每個單詞的含義
with=device-width 將佈局視窗（layout viewport）的寬度設定為裝置螢幕解析度的寬度
initial-scale=1 頁面初始縮放比例為螢幕解析度的寬度
maximum-scale=1 指定使用者能夠放大的最大比例
minimum-scale=1 指定使用者能夠縮小的最大比例
3.H5是什麼
簡單粗暴：就是一種移動端頁面
深入點：微信上的一種移動營銷頁面
總之不是HTML5
4.label標籤的作用
label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。
<label for="Name">Number:</label><input type='text' name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>
5.CSS3新增偽類有哪些：
CSS3新增偽類舉例：
p:first-of-type 選擇屬於其父元素的首個元素的每個
元素。
p:last-of-type 選擇屬於其父元素的最後元素的每個
元素。
p:only-of-type 選擇屬於其父元素唯一的元素的每個
元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個元素。
:enabled :disabled 控制表單控制元件的禁用狀態。:checked 單選框或複選框被選中。
6.a標籤中 如何禁用href 跳轉頁面 或 定位連結
e.preventDefault();href="javascript:void(0);
7. canvas在標籤上設定寬高 和在style中設定寬高有什麼區別
canvas標籤的width和height是畫布實際寬度和高度，繪製的圖形都是在這個上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。如果canvas的width和height沒指定或值不正確，就被設定成預設值 。
8.你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?
IE: trident核心
Firefox：gecko核心
Safari:webkit核心
Opera:以前是presto核心，Opera現已改用GoogleChrome的Blink核心
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
9.iframe有哪些缺點？
iframe是一種框架，也是一種很常見的網頁嵌入方
iframe的優點：
1.iframe能夠原封不動的把嵌入的網頁展現出來。
2.如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現呼叫的每一個頁面內容的更改，方便快捷。
3.網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來巢狀，可以增加程式碼的可重用。
4.如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。
iframe的缺點：
1.會產生很多頁面，不容易管理。
2.iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，使用者體驗度差。
3.程式碼複雜，無法被一些搜尋引擎索引到，這一點很關鍵，現在的搜尋引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜尋引擎優化。
4.很多的移動裝置（PDA 手機）無法完全顯示框架，裝置相容性差。
5.iframe框架頁面會增加伺服器的http請求，對於大型網站是不可取的。
現在基本上都是用Ajax來代替iframe，所以iframe已經漸漸的退出了前端開發。
10.HTML5新特性
1.本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失; sessionStorage 的資料在瀏覽器關閉後自動刪除;
新的技術webworker, websocket, Geolocation;
11.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。
12.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）、<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文件。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。
（3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。複製程式碼
你知道多少種Doctype文件型別？
該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。
HTML 4.01 規定了三種文件型別：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。
13.HTML與XHTML——二者有什麼區別
區別：
1.所有的標記都必須要有一個相應的結束標記
2.所有標籤的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理巢狀
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在註釋內容中使“--”
8.圖片必須有說明文字複製程式碼
由於文章篇幅限制，不可能將所有面試題以文字形式展示出來，本篇為大家精選了一些面試題，有需要的程式猿（媛）可以到文末領取哦~
CSS部分
1. 頁面渲染時，dom 元素所採用的 佈局模型,可通過box-sizing進行設定。根據計算寬高的區域可分為：
content-box (W3C 標準盒模型) border-box (IE 盒模型) padding-box (FireFox 曾經支援) margin-box (瀏覽器未實現)
Tips: 理論上是有上面 4 種盒子，但現在 w3c 與 mdn 規範中均只支援 content-box 與 border-box；
2. ie盒模型算上border、padding及自身（不算margin），標準的只算上自身窗體的大小 css設定方法如下：
標準模型 :box-sizing:content-box; IE模型:box-sizing:border-box
3.幾種獲得寬高的方式 :
dom.style.width/height
這種方式只能取到dom元素內聯樣式所設定的寬高，也就是說如果該節點的樣式是在style標籤中或外聯的CSS檔案中設定的話，通過這種方法是獲取不到dom的寬高的。
dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成後的結果，就是說不管是哪種方式設定的樣式，都能獲取到。但這種方式只有IE瀏覽器支援。
window.getComputedStyle(dom).width/height
這種方式的原理和2是一樣的，這個可以相容更多的瀏覽器，通用性好一些。
dom.getBoundingClientRect().width/height
這種方式是根據元素在視窗中的絕對位置來獲取寬高的
dom.offsetWidth/offsetHeight
這個就沒什麼好說的了，最常用的，也是相容最好的。
4.拓展各種獲得寬高的方式 :
獲取螢幕的高度和寬度（螢幕解析度）： window.screen.height/width
獲取螢幕工作區域的高度和寬度（去掉狀態列）： window.screen.availHeight/availWidth
網頁全文的高度和寬度： document.body.scrollHeight/Width
滾動條捲上去的高度和向右卷的寬度： document.body.scrollTop/scrollLeft
網頁可見區域的高度和寬度（不加邊線）： document.body.clientHeight/clientWidth網頁可見區域的高度和寬度（加邊線）： document.body.offsetHeight/offsetWidth
5.css優先確定級：
每個選擇器都有權值，權值越大越優先
繼承的樣式優先順序低於自身指定樣式
！important優先順序最高 js也無法修改
權值相同時，靠近元素的樣式優先順序高 順序為內聯樣式表（標籤內部）> 內部樣式表（當前檔案中）> 外部樣式表（外部檔案中）
由於文章篇幅限制，不可能將所有面試題以文字形式展示出來，本篇為大家精選了一些面試題，有需要的程式猿（媛）可以到文末領取哦~
JavaScript
1.JS中的垃圾回收機制
必要性：由於字串、物件和陣列沒有固定大小，所有當他們的大小已知時，才能對他們進行動態的儲存分配。JavaScript程式每次建立字串、陣列或物件時，直譯器都必須分配記憶體來儲存那個實體。只要像這樣動態地分配了記憶體，最終都要釋放這些記憶體以便他們能夠被再用，否則，JavaScript的直譯器將會消耗完系統中所有可用的記憶體，造成系統崩潰。
這段話解釋了為什麼需要系統需要垃圾回收，JS不像C/C++，他有自己的一套垃圾回收機制（Garbage Collection）。JavaScript的直譯器可以檢測到何時程式不再使用一個物件了，當他確定了一個物件是無用的時候，他就知道不再需要這個物件，可以把它所佔用的記憶體釋放掉了。例如：
var a="hello world";
var b="world";
var a=b;
//這時，會釋放掉"hello world"，釋放記憶體以便再引用
垃圾回收的方法：標記清除、計數引用。
標記清除
這是最常見的垃圾回收方式，當變數進入環境時，就標記這個變數為”進入環境“,從邏輯上講，永遠不能釋放進入環境的變數所佔的記憶體，永遠不能釋放進入環境變數所佔用的記憶體，只要執行流程進入相應的環境，就可能用到他們。當離開環境時，就標記為離開環境。
垃圾回收器在執行的時候會給儲存在記憶體中的變數都加上標記（所有都加），然後去掉環境變數中的變數，以及被環境變數中的變數所引用的變數（條件性去除標記），刪除所有被標記的變數，刪除的變數無法在環境變數中被訪問所以會被刪除，最後垃圾回收器，完成了記憶體的清除工作，並回收他們所佔用的記憶體。
引用計數法
另一種不太常見的方法就是引用計數法，引用計數法的意思就是每個值沒引用的次數，當聲明瞭一個變數，並用一個引用型別的值賦值給改變數，則這個值的引用次數為1,；相反的，如果包含了對這個值引用的變數又取得了另外一個值，則原先的引用值引用次數就減1，當這個值的引用次數為0的時候，說明沒有辦法再訪問這個值了，因此就把所佔的記憶體給回收進來，這樣垃圾收集器再次執行的時候，就會釋放引用次數為0的這些值。
用引用計數法會存在記憶體洩露，下面來看原因：
function problem() {
var objA = new Object();
var objB = new Object();
objA.someOtherObject = objB;
objB.anotherObject = objA;
}
在這個例子裡面，objA和objB通過各自的屬性相互引用，這樣的話，兩個物件的引用次數都為2，在採用引用計數的策略中，由於函式執行之後，這兩個物件都離開了作用域，函式執行完成之後，因為計數不為0，這樣的相互引用如果大量存在就會導致記憶體洩露。
特別是在DOM物件中，也容易存在這種問題：
var element=document.getElementById（’‘）；
var myObj=new Object();
myObj.element=element;
element.someObject=myObj;
這樣就不會有垃圾回收的過程。
2.說一下Commonjs、AMD和CMD
一個模組是能實現特定功能的檔案，有了模組就可以方便的使用別人的程式碼，想要什麼功能就能載入什麼模組。
Commonjs：開始於伺服器端的模組化，同步定義的模組化，每個模組都是一個單獨的作用域，模組輸出，modules.exports，模組載入require()引入模組。
AMD：中文名非同步模組定義的意思。
requireJS實現了AMD規範，主要用於解決下述兩個問題。
1.多個檔案有依賴關係，被依賴的檔案需要早於依賴它的檔案載入到瀏覽器
2.載入的時候瀏覽器會停止頁面渲染，載入檔案越多，頁面失去響應的時間越長。
語法：requireJS定義了一個函式define，它是全域性變數，用來定義模組。
requireJS的例子：
//定義模組
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
//載入模組
require(['myModule'], function (my){
my.printName();
}
requirejs定義了一個函式define,它是全域性變數，用來定義模組：
define(id?dependencies?,factory)
在頁面上使用模組載入函式：
require([dependencies],factory)；
總結AMD規範：require（）函式在載入依賴函式的時候是非同步載入的，這樣瀏覽器不會失去響應，它指定的回撥函式，只有前面的模組載入成功，才會去執行。
因為網頁在載入js的時候會停止渲染，因此我們可以通過非同步的方式去載入js,而如果需要依賴某些，也是非同步去依賴，依賴後再執行某些方法。
3.物件深度克隆的簡單實現
function deepClone(obj){
var newObj= obj instanceof Array ? []:{};
for(var item in obj){
var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
newObj[item] = temple;
}
return newObj;
}
ES5的常用的物件克隆的一種方式。注意陣列是物件，但是跟物件又有一定區別，所以我們一開始判斷了一些型別，決定newObj是物件還是陣列~
由於文章篇幅限制，不可能將所有面試題以文字形式展示出來，本篇為大家精選了一些面試題，有需要的程式猿（媛）可以到文末領取哦~
Vue部分
1.nextTick
在下次dom更新迴圈結束之後執行延遲迴調，可用於獲取更新後的dom狀態
新版本中預設是microtasks, v-on中會使用macrotasks
macrotasks任務的實現:
osetImmediate / MessageChannel / setTimeout
2.什麼是vue生命週期
Vue 例項從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、解除安裝等一系列過程，我們稱這是 Vue 的生命週期。
3.vuex
state: 狀態中心
mutations: 更改狀態
actions: 非同步更改狀態
getters: 獲取狀態
modules: 將state分成多個modules，便於管理
4.vue中 key 值的作用
使用key來給每個節點做一個唯一標識
key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，
否則vue只會替換其內部屬性而不會觸發過渡效果。
5.Vue 元件中 data 為什麼必須是函式？
在 new Vue() 中，data 是可以作為一個物件進行操作的，然而在 component 中，data 只能以函式的形式存在，不能直接將物件賦值給它。
當data選項是一個函式的時候，每個例項可以維護一份被返回物件的獨立的拷貝，這樣各個例項中的data不會相互影響，是獨立的。
6.v-for 與 v-if 的優先順序
v-for的優先順序比v-if高。
7.說出至少 4 種 vue 當中的指令和它的用法
v-if(判斷是否隱藏)
v-for(把資料遍歷出來)
v-bind(繫結屬性)
v-model(實現雙向繫結)
8.vue中子元件呼叫父元件的方法
第一種方法是直接在子元件中通過this.emit向父元件觸發一個事件，父元件監聽這個事件就行了。
第三種是父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法。
9.vue中父元件呼叫子元件的方法
父元件利用ref屬性操作子元件方法。
父：
<child ref="childMethod"></child>
子：
method: {
test() {
alert(1)
}
}
在父元件裡呼叫test即 this.$refs.childMethod.test()
10.vue頁面級元件之間傳值
1.使用vue-router通過跳轉連結帶引數傳參。
2.使用本地快取localStorge。
3.使用vuex資料管理傳值。
11.說說vue的動態元件。
多個元件通過同一個掛載點進行元件的切換，is的值是哪個元件的名稱，那麼頁面就會顯示哪個元件。
主要考查面試這 component的 is屬性。
由於文章篇幅限制，不可能將所有面試題以文字形式展示出來，本篇為大家精選了一些面試題，有需要的程式猿（媛）可以到文末領取哦~
服務端與網路部分
1.常見狀態碼
1xx: 接受，繼續處理
200: 成功，並返回資料
201: 已建立
202: 已接受
203: 成為，但未授權
204: 成功，無內容
205: 成功，重置內容
206: 成功，部分內容
301: 永久移動，重定向
302: 臨時移動，可使用原有URI
304: 資源未修改，可使用快取
305: 需代理訪問
400: 請求語法錯誤
401: 要求身份認證
403: 拒絕請求
404: 資源不存在
500: 伺服器錯誤
2.get / post
get: 快取、請求長度受限、會被歷史儲存記錄
o無副作用(不修改資源)，冪等(請求次數與資源無關)的場景
post: 安全、大資料、更多編碼型別
兩者詳細對比如下圖:
3.Websocket
Websocket 是一個 持久化的協議， 基於 http ， 服務端可以 主動 push
相容：
oFLASH Socket
o長輪詢： 定時傳送 ajax
olong poll： 傳送 --> 有訊息時再 response
new WebSocket(url)
ws.onerror = fn
ws.onclose = fn
ws.onopen = fn
ws.onmessage = fn
ws.send()
4.TCP三次握手
建立連線前，客戶端和服務端需要通過握手來確認對方:
客戶端傳送 syn(同步序列編號) 請求，進入 syn_send 狀態，等待確認
服務端接收並確認 syn 包後傳送 syn+ack 包，進入 syn_recv 狀態
客戶端接收 syn+ack 包後，傳送 ack 包，雙方進入 established 狀態
5.TCP四次揮手
客戶端 -- FIN --> 服務端， FIN—WAIT
服務端 -- ACK --> 客戶端， CLOSE-WAIT
服務端 -- ACK,FIN --> 客戶端， LAST-ACK
客戶端 -- ACK --> 服務端，CLOSED
最後
面試是跳槽漲薪最直接有效的方式，現在可以開始準備明年春季的面試了，各位做好面試造飛機，工作擰螺絲的準備了嗎？
掌握了這些知識點，面試時在候選人中又可以奪目不少，暴擊9999點。機會都是留給有準備的人，只有充足的準備，才可能讓自己可以在候選人中脫穎而出。
快速入手通道：（點這裡）下載！誠意滿滿！！！
整理不易，覺得有幫助的朋友可以幫忙點贊分享支援一下小編~你的支援，我的動力；祝各位前程似錦，offer不斷！！！