前言

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

但是，今天它來了↓

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

這套前端面試題已經有小伙伴成功拿到了騰訊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 童鞋的指出， 放大來看，我畫了張圖供大家徹底理解:

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 靜態

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

如下：

前端面試題集錦——Vue

前端面試題集錦——演算法

…

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

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