前言

最近有小伙伴催我更一期前端大廠面試題，前幾天都忙于私事，耽誤了。。。

但是，今天它來了↓

因為很久以前就整理了面試題，所以稍微修改了一下發出來供大家閱讀

這套前端面試題已經有小伙伴成功拿到了騰訊offer，所以大家可以放心借鑒。

為了滿足大家的需求，題都已經分享出來啦，喜歡的小伙伴別忘了給這篇小文章點個小小的贊喲,如果你覺得有用的話，也可以分享給其他小伙伴一起閱讀！

下面請看題：

前端面試題集錦——HTML 篇

1. 你是怎么理解 HTML 語義化

Step 1：先舉例說明 HTML 語義化簡單來說就是用正確的標簽來做正確的事。

比如表示段落用 p 標簽、表示標題用 h1-h6 標簽、表示文章就用 article 等。

Step 2：說說為什么需要使用語義化標簽

前期：前端工作主要由后端人員完成，也就是打野階段，使用的是 table 布局 中期：美工人員使用 div+css 來完成
當前：專業的前端開發應該使用合適的標簽來表達正確含義的頁面結構 讓頁面具有良好的結構和含義，可以有效提高：
可訪問性：幫助輔助技術更好的閱讀和轉譯你的網頁，利于無障礙閱讀；
可檢索性：有了良好的結構和語義，可以提高搜索引擎的有效爬取，提高網站流量；
國際化：全球只有 13%的人口是英語母語使用者，因此通用的語義化標簽可以讓各國開發 者更容易弄懂你網頁的結構；
互用性：減少網頁間的差異性，幫助其他開發者了解你網頁的結構，方便后期開發和維護

2. 你用過哪些 HTML5 標簽 表示結構的標簽

<header> <nav> <main> <article> <section> <aside> <footer> 表示文字形式

<data> ： 舉例：
展示了一些產品名稱，而且每個名稱都和一個產品編碼相關聯。

<p>新產品</p>
<ul> 
<li>
<data value="398">迷你番茄醬</data>
</li>
 <li>
<data value="399">巨 無霸番茄醬</data>
</li>
 <li>
<data value="400">超級巨無霸番茄醬</data>
</li>
</ul> 

<time> ： 表示日期和時間值，機器讀取通過 datetime 屬性指定。
舉例：
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time></p>
<mark>：用于高亮文本 嵌入內容
<video> ： controls：展示視頻自帶的控件
autoplay：視頻馬上自動播放
poster：海報幀的 URL
height、width：視頻顯示區域的寬和高
loop：視頻結尾自動回到視頻開始的地方

<video controls> 
<source src="myVideo.mp4" type="video/mp4"> 
<source src="myVideo.webm" type="video/webm"> 
<p>Your browser doesn't support HTML5 video. Here is a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
<!-- Simple video example --><video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉，您的瀏 覽器不支持內嵌視頻，不過不用擔心，你可以 <a href="videofile.ogg">下載</a> 并用你喜 歡 的 播 放 器 觀 看 !</video><!-- Video with subtitles -->
<video src="foo.ogg"> 
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> 
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"></video> 

<audio> ： 大部分同 <vedio>
controls：展示音頻自帶的控件
autoplay：音頻馬上自動播放
muted：是否靜音
loop：音頻結尾自動回到開始的地方

<audio controls> 
<source src="myAudio.mp3" type="audio/mpeg"> 
<source src="myAudio.ogg" type="audio/ogg"> 
<p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay> Your browser does not support the <code>audio</code> element.</audio>
<audio controls> 
<source src="foo.opus"
type="audio/ogg; codecs=opus"/>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> 
<source src="foo.mp3" type="audio/mpeg"/></audio>
<canvas> ： 通過 JavaScript 和 HTML 的 <canvas> 元素來繪制圖形 <canvas id="canvas" width="300" height="300"></canvas>//獲取HTML 

<canvas> 元素的引用const canvas = document.getElementById('canvas');//獲得一 個繪圖上下文
const ctx = canvas.getContext('2d');//讓長方形變成綠色
ctx.fillStyle = 'green';//將 它的左上角放在(10, 10)，把它的大小設置成寬 150 高 100ctx.fillRect(10, 10, 150, 100);

3. 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 指定用戶能夠縮小的最大比例

4.H5 是什么

簡單粗暴：就是一種移動端頁面
深入點：微信上的一種移動營銷頁面 總之不是 HTML5 5.label 標簽的作用 label 標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽 相關的表單控件上。
<label for="Name">Number:</label><input type='text' name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>

6.行內元素有哪些？

塊級元素有哪些？
空(void)元素有那 些？
首先：CSS 規范規定，每個元素都有 display 屬性，確定該元素的類型，每個元素都有默認的 display 值，如 div 的 display 默認值為“block”，則為“塊級”元素；span 默認 display 屬性 值為“inline”，是“行內”元素。

常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、 <blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、 <code>
常用的內聯塊狀元素有：
<img>、<input>
知名的空元素：
<br/> <hr/> <img/> <input/> <link/> <meta/> <br />

7.a 標簽中 如何禁用 href 跳轉頁面 或 定位鏈接

e.preventDefault();href="javascript:void(0);

8. canvas 在標簽上設置寬高和在 style 中設置寬高有什么區別

canvas 標簽的 width 和 height 是畫布實際寬度和高度，繪制的圖形都是在這個上面。而 style 的 width 和 height 是 canvas 在瀏覽器中被渲染的高度和寬度。如果 canvas 的 width 和 height 沒指定或值不正確，就被設置成默認值 。

9.你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別 是什么?

IE: trident 內核 Firefox：gecko 內核 Safari:webkit 內核 Opera:以前是 presto 內核，Opera 現已改用 GoogleChrome 的 Blink 內核
Chrome:Blink(基于 webkit，Google 與 Opera Software 共同開發)

10.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 已經漸漸的退出了前端開發。

11.HTML5 新特性

1. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失; sessionStorage 的 數據在瀏覽器關閉后自動刪除; 新的技術 webworker, websocket, Geolocation;

12.HTML5 離線儲存

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶 機器上的緩存文件。
原理： HTML5 的離線存儲是基于一個新建的.appcache 文件的緩存機制(不是存儲技術)，通 過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。之后 當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。

如何使用： 頁面頭部像下面一樣加入一個 manifest 的屬性；
在 cache.manifest 文件的編寫離線存儲的資源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 在離線狀態時，操作 window.applicationCache 進行需求實現。

13.瀏覽器是怎么對 HTML5 的離線儲存資源進行管理和加 載的呢？

在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 文件，如果是第 一次訪問 app，那么瀏覽器就會根據 manifest 文件的內容下載相應的資源并且進行離線存儲。 如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面， 然后瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，如果文件沒有發生改變，就不做 任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。 離線的情況下，瀏覽器就直接使用離線存儲的資源。

14.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 （包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

15.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.邊距重疊解決方案(BFC) BFC 原理 :

內部的 box 會在垂直方向，一個接一個的放置 每個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸（對于從做往右的格式化，否則相反） box 垂直方向的距離由 margin 決定，屬于同一個 bfc 的兩個相鄰 box 的 margin 會發生重疊 bfc 的區域不會與浮動區域的 box 重疊 bfc 是一個頁面上的獨立的容器，外面的元素不會影響 bfc 里的元素，反過來，里面的也不 會影響外面的 計算 bfc 高度的時候，浮動元素也會參與計算 創建 bfc float 屬性不為 none（脫離文檔流） position 為 absolute 或 fixed display 為 inline-block,table-cell,table-caption,flex,inine-flex overflow 不為 visible 根元素 demo 上這塊 margin-bottom:30px; 下這塊 margin-top:50px;

前端面試題集錦——JavaScript

1.請你談談 Cookie 的優缺點

優點：
極高的擴展性和可用性

1. 數據持久性。
2. 不需要任何服務器資源。 Cookie 存儲在客戶端并在發送后由服務器讀取。 3) 可配置到期規則。 控制 cookie 的生命期，使之不會永遠有效。偷盜者很可 能拿到一個過期的 cookie 。
3. 簡單性。 基于文本的輕量結構。
4. 通過良好的編程，控制保存在 cookie 中的 session 對象的大小。
5. 通過加密和安全傳輸技術（ SSL ），減少 cookie 被破解的可能性。
6. 只在 cookie 中存放不敏感數據，即使被盜也不會有重大損失。
   缺點：
7. Cookie 數量和長度的限制 。 數量：每個域的 cookie 總數有限。 a) IE6 或更低版本最多 20 個 cookie b) IE7 和之后的版本最后可以有 50 個 cookie c) Firefox 最多 50 個 cookie d) chrome 和 Safari 沒有做硬性限制 長度：每個 cookie 長度不超過 4KB （ 4096B ），否則會被截掉。
8. 潛在的安全風險 。 Cookie 可能被攔截、篡改。如果 cookie 被攔截，就有 可能取得所有的 session 信息。
9. 用戶配置為禁用 。有些用戶禁用了瀏覽器或客戶端設備接受 cookie 的能 力，因此限制了這一功能。
10. 有些狀態不可能保存在客戶端 。例如，為了防止重復提交表單，我們需要在 服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到 任何作用。

2.Array.prototype.slice.call(arr，2)方法的作用是：

利用 Array 原型上的 slice 方法，使用 call 函數的第一個參數，讓這個方法中 的 this 指向 arr，并傳遞參數 2，實際上等于 arr.slice(2)，即從下標為 2 開 始截取到末尾。

3.以下代碼執行后，控制臺的輸出是：

var a = 10; function a(){} console.log(typeof a)
A."number" B."object" C."function" D."undefined&quot

答案：C
函數提升優先級高于變量提升，所以代碼等價于 function a(){} var a； a = 10; console.log(typeof a)

4、簡單說一下瀏覽器本地存儲是怎樣的

總的來說，瀏覽器存儲分為以下幾種：
1、Cookie 存儲，明文，大小限制 4k 等
2、localStorage，持久化存儲方式之一，不用在兩端之間傳輸，且限制大小為 10M
3、sessionStorage，會話級存儲方式，瀏覽器關閉立即數據丟失
4、indexDb，瀏覽器端的數據庫
5.原型 / 構造函數 / 實例 原型(prototype): 一個簡單的對象，用于實現對象的 屬性繼承。可以簡單的理 解成對象的爹。在 Firefox 和 Chrome 中，每個 JavaScript 對象中都包含一個 proto (非標準)的屬性指向它爹(該對象的原型)，可 obj.proto進行訪 問。構造函數: 可以通過 new 來 新建一個對象 的函數。 實例: 通過構造函數和 new 創建出來的對象，便是實例。 實例通過proto 指向原型，通過 constructor 指向構造函數。 說了一大堆，大家可能有點懵逼，這里來舉個栗子，以 Object 為例，我們常用 的 Object 便是一個構造函數，因此我們可以通過它構建實例。

// 實例 const instance = new Object()復制代碼 則此時， 實例為 instance, 構造函數為 Object，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:

// 原型 const prototype = Object.prototype 這里我們可以來看出三者的關系: 實例.proto === 原型 原型.constructor === 構造函數 構造函數.prototype === 原型 // 這條線其實是是基于原型進行獲取的，可以理解成一條基于原型的映射線// 例如: // const o = new Object()// o.constructor === Object --> true// o.proto = null;// o.constructor === Object --> false// 注意: 其 實實例上并不是真正有 constructor 這個指針，它其實是從原型鏈上獲取的// instance.hasOwnProperty('constructor') === false (感謝 劉博海 Brian 童鞋實例.constructor === 構造函數 此處感謝 caihaihong 童鞋的指出。 放大來看，我畫了張圖供大家徹底理解:

image

6.原型鏈： 原型鏈是由原型對象組成，每個對象都有 proto 屬性，指向了創建該對象 的構造函數的原型，proto 將對象連接起來組成了原型鏈。是一個用來實現 繼承和共享屬性的有限的對象鏈。

屬性查找機制: 當查找對象的屬性時，如果實例對象自身不存在該屬性，則沿著 原型鏈往上一級查找，找到時則輸出，不存在時，則繼續沿著原型鏈往上一級查 找，直至最頂級的原型對象 Object.prototype，如還是沒找到，則輸出 undefined；

屬性修改機制: 只會修改實例對象本身的屬性，如果不存在，則進行添加該屬性， 如果需要修改原型的屬性時，則可以用: b.prototype.x = 2；但是這樣會造成 所有繼承于該對象的實例的屬性發生改變。

7.執行上下文(EC)

執行上下文可以簡單理解為一個對象:
它包含三個部分:
o 變量對象(VO) o 作用域鏈(詞法作用域) othis 指向
它的類型: o 全局執行上下文 o 函數執行上下文 oeval 執行上下文
代碼執行過程: o 創建 全局上下文 (global EC) o 全局執行上下文 (caller) 逐行 自上而下 執行。遇到函數時，函數執行上下 文 (callee) 被 push 到執行棧頂層 o 函數執行上下文被激活，成為 active EC, 開始執行函數中的代碼，caller 被 掛起o 函數執行完后，callee 被 pop 移除出執行棧，控制權交還全局上下文 (caller)，繼續執行。

8.變量對象

變量對象，是執行上下文中的一部分，可以抽象為一種 數據作用域，其實也可 以理解為就是一個簡單的對象，它存儲著該執行上下文中的所有 變量和函數聲 明(不包含函數表達式)。

活動對象 (AO): 當變量對象所處的上下文為 active EC 時，稱為活動對象。

9.作用域鏈

我們知道，我們可以在執行上下文中訪問到父級甚至全局的變量，這便是作用域 鏈的功勞。作用域鏈可以理解為一組對象列表，包含 父級和自身的變量對象， 因此我們便能通過作用域鏈訪問到父級里聲明的變量或者函數。

由兩部分組成: o[[scope]]屬性: 指向父級變量對象和作用域鏈，也就是包含了父級的[[scope]] 和 AO oAO: 自身活動對象 如此 [[scopr]]包含[[scope]]，便自上而下形成一條 鏈式作用域。

10.閉包

閉包屬于一種特殊的作用域，稱為 靜態作用域。它的定義可以理解為: 父函數 被銷毀 的情況下，返回出的子函數的[[scope]]中仍然保留著父級的單變量對象 和作用域鏈，因此可以繼續訪問到父級的變量對象，這樣的函數稱為閉包。

閉包會產生一個很經典的問題: o 多個子函數的[[scope]]都是同時指向父級，是完全共享的。因此當父級的變 量對象被修改時，所有子函數都受到影響。 解決: o 變量可以通過 函數參數的形式 傳入，避免使用默認的[[scope]]向上查找 o 使用 setTimeout 包裹，通過第三個參數傳入 o 使用 塊級作用域，讓變量成為自己上下文的屬性，避免共享 6. script 引入方式： html 靜態<script>引入 js 動態插入<script> <script defer>: 延遲加載，元素解析完成后執行 <script async>: 異步加載，但執行時會阻塞元素渲染

除了以上的小部分題外，還包括了其他前端面試題(實在是太多了頁面寫不下)

大廠面試

如下：

前端面試題集錦——Vue

前端面試題集錦——算法

.............................................................

由于篇幅太長，大家讀起來較冗長，我就不一一列舉出來了，下面請看這套面試題的目錄你就知道了

面試題目錄

大廠面試題

最后的最后，大家都知道答案僅供參考，看了題不要死記，一定要自己理解，用自己的方式表達出來，在這里預祝各位成功拿下自己心儀的offer。需要完整面試題的朋友可以點擊這里免費分享學習~