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不斷！！！