因爲現在前端競爭太大，公司招聘前端人員選擇太多，因此面試的時候不會問你太多簡單的問題！況且，如果是簡單的不看也是會回答的！
這些面試題總結很多都是我親自遇到過的哦
順便說一句自己的心得，面試的時候，要注意公司環境，判斷一下這個公司的氛圍，環境，領導的態度脾氣等等各方面是否合適哦，不要弄得以後入職很難做，那是得不償失的。
基本信息
1.你覺得前端工程師的價值體現在哪？
爲簡化用戶使用提供技術支持（交互部分）
爲多個瀏覽器兼容性提供支持
爲提高用戶瀏覽速度（瀏覽器性能）提供支持
爲跨平臺或者其他基於webkit或者其他渲染引擎的應用提供支持
爲展示數據提供支持（數據接口）
HTML/HTML5
1.知道語義化嗎？說說你理解的語義化，如果是你，平時會怎麼做來保證語義化？
像html5的新的標籤header,footer,section等就是語義化
一方面，語義化就是讓計算機能夠快讀的讀懂內容，高效的處理信息，可以對搜索引擎更友好
另一方面，便於與他人的協作，他人通過讀代碼就可以理解你網頁標籤的意義
去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重
方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義方式來渲染網頁
便於團隊開發和維護，語義化更具有可讀性，是下一步把網頁的重要動向，遵循W3C標準的團隊都要遵循這個標準，減少差異化
2.介紹HTML5的新特性
新的DOCTYPE聲明
完全支持css3
video和audio
本地存儲
語義化表圈
canvas
新事件如 ondrag onresize
3.如果解決ajax無法後退的問題？
html5裏引入了新的API，即：history.pushState,history.replaceState
可以通過pushState和replaceSate接口瀏覽器歷史，並且改變當前頁面的URL
onpopstate監聽後退
4.websocket和ajax輪詢
websocket是html5中提出的新的協議，可以實現客戶端與服務器的通信，實現服務器的推送功能
優點是，只要簡歷一次連接，就可以連續不斷的得到服務器推送消息，節省帶寬和服務器端的壓力。
ajax輪詢模擬常連接就是每隔一段時間（0.5s）就向服務器發起ajax請求，查詢服務器是否有數據更新
缺點就是，每次都要建立HTTP連接，即使需要傳輸的數據非常少，浪費帶寬
5.web worker和websocket
worker主線程：
通過worker = new worker(url)加載一個js文件來創建一個worker，同時返回一個worker實例
通過worker.postMessage(data)方法來向worker發送數據。
綁定worker.onmessage方法來接收worder發送過來的數據
可以使用worker.terminate()來終止一個worder的執行。
websocket
是web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。他是一個HTML5協議，websocket鏈接是持久的，通過在客戶端和服務器之間保持雙向鏈接，服務器的更新可以被及時推送給客戶端，而不需要客戶端以一定的時間去輪詢
6.Doctype作用？嚴格模式與混雜模式如果區分？意義？
聲明位於文檔的最前面，處於標籤之前。告知瀏覽器以何種模式來渲染文檔嚴格模式的排版和js運作模式是 以該瀏覽器支持的最高標準運行
在混雜模式中，頁面已寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點無法工作
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現
7.Doctype多少種文檔類型？
該標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文檔
HTML4.01規定了三種文檔類型：Strict, Transitional以及Frameset
XHTML 1.0規定了三種XML文檔類型：Strict, Transitional以及Franmeset
Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標籤的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁
8.HTML與XHTML，有什麼區別？
所有的標籤必須要有一個相應的結束標籤
所有標籤的元素和屬性的名字都必須使用小寫
所有的XML標記都必須合理嵌套
所有的屬性必須引號“”括起來
把所有的<和&特殊符號用編碼表示
給所有屬性賦一個值
不要在註釋內容使用’–’
圖片必須要有說明文字
CSS
1.content-box和border-box，爲什麼看起來content-box更合理，但還是經常使用border-box?
content-box是W3C的標準盒模型 元素寬度+padding+border
border-box 是ie的怪異盒模型，他的元素寬度等於內容寬度 內容寬度包含了padding和border
比如有時候在元素基礎上添加內邊距padding或border會將佈局撐破 但是使用border-box就可以輕鬆完成
2.實現三個DIV等分排在一行（考察border-box)
1.設置border-box width 33.33%
2.flexbox flex:1
3.實現兩欄佈局有哪些方法
方法一：
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
#left{
width: 300%;
height: 100%;
float: left;
}
#right{
height: 100%;
margin-left: 300px;
background-color: #eee;
}
方法二：
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
#left{
width: 300px;
height: 100%;
float: left;
}
#right{
height: 100%;
overflow: hidden;
backrgound-color: #eee;
}
以上第二種方法，利用創建一個新的BFC(塊級格式化剩下文)來防止文字環繞的原理來實現的。BFC就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。
它可以通過下一任和一種方式來創建
float的值不爲none
position的值不爲static 或者 relative
display的值爲table-cell，table-caption，inline-block，flex，或者inline-flex其中一個
overflow的值不爲visible
方法三：flex佈局
4.flex屬性值是多少？
flex屬性是flex-grow,flex-shrink 和 flex-basis的簡寫
flex-grow屬性定義項目的放大比例，默認爲0
flex-shrink屬性定義了項目的縮小比例，默認爲1
flex-basis屬性定義了項目的固定空間
5.怎麼實現一個DIV左上角到右下角的移動，有哪些方法？怎麼實現？
改變left值爲window寬度-div寬度 top值爲window高度=div高度
jquery的animate方法
css3的transition
6.垂直居中
單行行內元素
可以設置padding-top,padding-bottom
將height和line-height設爲相等
多行行內元素
可以將元素轉爲tabel樣式，再設置vertical-align:middle;
使用flex佈局
塊級元素
已知高度絕對定位負邊距
未知高度transform:translateY(-50%);
flex佈局
display: flex;
justify-content: center;
aligin-items: center;
7.rem 和 em的區別？
em相對於父元素，rem相對於根元素
8.清除浮動
利用clear屬性進行清理
父容器結尾插入空標籤
.clearfix:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
將父容器形成BFC
BFC能清理浮動主要運用的是它的佈局規則：
內部的Box會在垂直方向，一個接一個的放置
box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰box的margin會發生重疊
每個元素margin box的左邊，與包含快border box的左邊相接觸（對於從左往右的格式化，否則相反）。即使存在浮動也是如此
BFC的區域不會與float box重疊
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也是如此
計算BFC的高度時，浮動元素也參與計算
浮動清理利用的主要是第六條規則，只要將父容器出發爲BFC，就可以實現包含的效果。那麼出發BFC有哪種方法？
根元素
float屬性不爲noe
position爲absolute或fixed
display爲inline-block，table-cell，table-caption，flex，inline-flex
overflow不爲visible
9.position的值， relative和absolute分別是相對於誰進行定位的？
relative:相對定位，相對於自己本身在正常文檔流中的位置進行定位。
absolute:生成絕對定位，相對於最近一級定位不爲static的父元素進行定位。
fixed: （老版本IE不支持）生成絕對定位，相對於瀏覽器窗口或者frame進行定位。
static:默認值，沒有定位，元素出現在正常的文檔流中。
sticky:生成粘性定位的元素，容器的位置根據正常文檔流計算得出。
10.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？
選擇符：
id選擇器（#myId）
類選擇器（.myClassName）
標籤選擇器（div,p,h1）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（*）
屬性選擇器（button[disabled=“true”]）
僞類選擇器（a:hover,li:nth-child）
優先級：
!important > 行內樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 僞類（比重1）;
僞類和僞元素區別：
a:hover,li:nth-child
僞元素：li:before、:after,:first-letter,:first-line,:selecton
11.介紹sass
定義變量css嵌套，允許在代碼中使用算式，支持if判斷for循環
12.transition 和 margin的百分比根據什麼計算？
transition是相對於自身；margin相對於參照物
13.實現一個秒針繞一點轉動的效果
animation: move 60s infinite steps(60);
/*設置旋轉的中心點爲中間底部*/
transform-origin: center bottom;
/*旋轉從0度到360度*/
@keyframes move {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
14.display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文檔佈局中仍保留原來的空間。
15.CSS中link 和@import的區別是？
link屬於HTML標籤，而@import是CSS提供的;
頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
link方式的樣式的權重 高於@import的權重.
16.對BFC規範的理解？
BFC，塊級格式化上下文，一個創建了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。
JS
1.介紹一下閉包和閉包常用場景？
使用閉包主要爲了設計私有的方法和變量，閉包的有點事可以避免變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數纔會產生作用域的概念。
閉包有三個特性：
函數嵌套函數
函數內部可以引用外部的參數和變量
參數和變量不會被垃圾回收機制回收
閉包是指有權訪問另一個函數作用域中的變量的函數，創建閉包常見方式，就是在一個函數的內部創建另一個函數
應用場景，設置私有變量的方法
不適用場景：返回閉包的函數是個非常大的函數
閉包的缺點就是常駐內存，會增大內存使用量，使用不當會造成內存泄漏
2.爲什麼會出現閉包這種東西？解決了什麼問題？
受javascript鏈式作用域鏈的影響，父級變量中無法訪問到子級的變量值
3.介紹一下你所瞭解的作用域鏈，作用域鏈的盡頭是什麼？爲什麼？
每一個函數都有一個作用域，比如創建了一個函數，函數裏面又包含了一個函數，那麼現在又三個作用域，這樣就形成了一個作用域鏈
作用域的特點就是，先在自己的變量範圍中查找，如果找不到，就會沿着作用域鏈網上找
4.ajax簡歷的過程是怎樣的，主要用到哪些狀態碼？
創建XMLHttpRequest對象，也就是創建一個異步調用對象
創建一個新的HTTP請求，並指定該HTTP請求的方法、URL及驗證信息
設置響應HTTP請求狀態變化函數
發送HTTP請求
獲取異步調用返回的數據
使用javascript和DOM實現局部刷新
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
5.使用promise封裝
function getJSON(url){
return new Promise(function(resolve, reject){
var XHR = new XMLHttpRequest();
XHR.open('GET', url，true);
XHR.send();
XHR.onreadystatechange = function() {
if(XHR.readerSate == 4){
if(XHR.status == 200){
try {
var response = JSON.parse(XHR.responseText);
resilve(response);
} cath(e) {
reject(e);
}
}else{
reject(new Error(XHR.statusText));
}
}
}
})
}
getJSON(url).then(res => console.log(res));
當前狀態readystate
0代表未初始化，還沒有調用open方法
1代表正在加載，open方法已被調用，但是send方法還沒有被調用
2代表已加載完畢，send已被調用，請求以及開始
3代表交互中，服務器正在發送響應
4代表完成，響應發送完畢
常用狀態碼status
404沒找到頁面
403禁止訪問
500內部服務器出錯
200正常
304被又被修改(not modified)（服務器返回304狀態，表示源文件沒有被修改）
說說你還知道的其他狀態碼，狀態碼的存在解決了什麼問題？
302/307 臨時重定向
301 永久重定向
藉助狀態碼，用戶可以知道服務器端是正常處理了請求，還是出現了什麼錯誤
6.事件委託
利用冒泡原理，把時間加到父級上，觸發執行效果
可以大量節省內存佔用，減少事件註冊
可以方便地動態添加和修改元素，不需要因爲元素的改動而修改時間綁定
var ul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});
7.javascript的內存回收機制？
垃圾回收器會每隔一段時間找出那些不再使用的內存，然後爲其釋放內存
一般使用標記清除方法 當變量進入環境標記爲進入環境，離開環境標記爲離開環境
還有引用計數方法
堆棧
stack爲自動分配的內存空間，它由系統自動釋放；而heap則是動態分配的內存，大小不定也不會自動釋放
基本數據類型存放在棧中
引用類型 存放在堆內存中，首先從棧中獲得該對象的地址指針，然後再從堆內存中取得所需的數據
8.函數防抖和函數節流？
函數防抖是指頻繁觸發的情況下，只有足夠的空閒時間，才執行代碼一次
函數防抖的要點，也是要一個setTImeout來輔助實現。延遲執行需要跑的代碼
如果方法多次觸發，則要把上次記錄的延遲執行代碼用clearTimeout清掉，重新開始
如果計時完畢，沒有方法進來訪問觸發，則執行代碼
var tiemr = false;
document.getElementById(‘debounce’,onScrll = function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log('111')
}, 300);
}
9.javascript中的this是什麼，有什麼用，指向上面？
全局代碼中的this是指向全局對象
作爲對象的方法調用時指向調用這個函數的對象
作爲構造函數指向創建的對象
使用apply和call設置this
10.判斷數組有哪些方法？
a instanceof Array
a.constructor == Array
Object.protype.toString.call(a) == [Object Array]
11.嚴格模式的特性？
對javascript的語法和行爲，都做了一些改變
全局變量必須顯式的聲明。
對象不能有重名的屬性
函數必須聲明在頂層
消除js語法的一些不合理，不嚴謹之處，減少一些怪異行爲
消除代碼運行的一些不安全之處，保證代碼運行的安全
提高編譯效率，增加運行速度
爲未來新版本的js做好鋪墊
12.js的原型鏈，如何實現繼承？
function foo(){};
foo.prototype.z = 3;
var obj = new foo();
obj.x = 1;
obj.y = 2;
obj.x //1
obj.y //2
obj.z //3
13.圖片懶加載
當頁面滾動的時間被觸發->執行加載圖片操作->判斷圖片是否在可視區域內->在，則動態將data-src的值賦予該圖片
14.webpack常用到哪些功能？
設置入口
設置輸出目錄
設置loader
extract-text-webpack-plugin將css從js代碼中抽出併合並
處理圖片文字等功能
解析jsx解析bable
15.函數組合繼承
原型繼承，構造函數繼承，call apply繼承
var super = function(name){
this.name = name;
}
super.prototype.func1 = function() {console.log('func1')}
var sub = function(name, age){
super.call(this, name);
this.age = age;
}
sub.prototype = new super()'
16.對作用域鏈的理解
作用域鏈的作用是保證執行環境裏有權訪問的變量和函數是有序耳朵，作用域鏈額變量只能向上訪問，變量訪問到window對象即被終止，作用域鏈向下訪問變量是不被允許的
17.js垃圾回收方法
標記清除（mark and sweep）
這是JavaScript最常見的垃圾回收方式，當變量進入執行環境的時候，比如函數中聲明一個變量，垃圾回收器將其標記爲“進入環境”，當變量離開環境的時候（函數執行結束）將其標記爲“離開環境”。
垃圾回收器會在運行的時候給存儲在內存中的所有變量加上標記，然後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成之後仍存在標記的就是要刪除的變量了
引用計數(reference counting)
在低版本IE中經常會出現內存泄露，很多時候就是因爲其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，如果該變量的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值沒法被訪問了，因此可以將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。
在IE中雖然JavaScript對象通過標記清除的方式進行垃圾回收，但BOM與DOM對象卻是通過引用計數回收垃圾的， 也就是說只要涉及BOM及DOM就會出現循環引用問題。
18.js繼承方式及其優缺點
原型鏈繼承的缺點
一是字面量重寫原型會中斷關係，使用引用類型的原型，並且子類型還無法給超類型傳遞參數
借用構造函數（類試繼承）
借用構造函數雖然解決了剛纔兩種問題，但是沒有原型，則複用無從談起，需要原型鏈+借用構造函數的模式，這種模式成爲組合繼承
組合式繼承
組合式繼承是比較常用的一種繼承方法，其背後的思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承，這樣，即通過在原型上定義方法實現了函數複用，有保證每個實例都有它自己的屬性
ES6
1.let和const的區別？
let聲明的變量可以改變，值和類型都可以改變，沒有限制
const聲明的變量不得改變值
2.平時用了es6的哪些疼，和es5有什麼不同？
let,const,箭頭函數，字符串模板，class類，模塊化，promise
ES5 reuqire,react,createclass
3.介紹promise
就是一個對象，用來傳遞異步操作的消息。有三種狀態：pending(進行中)，resolved(已完成)和rejected(失敗)
有了promise對象，就可以將異步操作以同步操作的流程表示出來，避免了層層嵌套的回調函數
前端框架
模塊化
1.使用模塊化加載時，模塊記載的順序是怎麼樣的，如果不知道，根據已有的知識，加載順序是怎麼樣的
commonjs 同步 循序執行
AMD 提前加載，不管是否調用模塊，先解析所有模塊require速度快 有可能浪費資源
CMD提前加載，在正真需要使用（依賴）模塊時才解析該模塊
seajs按需解析，性能比AMD差
框架問題
1.什麼是MVVM，和MVC有什麼區別，原理是什麼？
mvc的界面和邏輯關聯緊密，數據直接從數據庫讀取，必須通過controller來承上啓下，通信都是單向的
mvvm的view 和 viewModel可以互相通信，界面數據從viewmodel中獲取
2.父子組件通信
vue：父組件是通過props屬性給子組件通信，在子組件裏面emit，在父組件監聽
react：props傳遞 父給子穿一個回調函數，將數據傳給父親處理
3.兄弟組件怎麼通信的？
vuex 建立一個vue的實例，emit觸發時間 on監聽時間
redux 子A ->父->子B
4.生命週期有哪些，怎麼用？
beforecreated: el 和 data並未初始化
created： 完成了 data數據的舒適化，el沒有
beforeMount：完成了el 和 data初始化
mounted：完成掛載，updated,destroyed
瀏覽器
1.跨域通信有哪些解決方案？
JSONP:
由於同源策略的限制，XMLHttpRequest只允許請求當前資源（域名、協議、端口）的資源，script標籤沒有同源限制，爲了實現跨域請求，可以通過script標籤實現跨域請求，然後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。
通過動態
缺點：只支持GET請求
var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";
var script = document.createElement('script');
script.setAttribute('src', url); //load javascript
document.getElementsByTagName('head')[0].appendChild(script);
//回調函數
function callbackfunction(data){
var html=JSON.stringify(data.RESULTSET);
alert(html);
}
CORS：
服務器端對於CORS的支持，只要就是通過設置Access-Control-Allow-Orgin來進行的。如果瀏覽器檢測到響應的設置，就可以允許ajax進行跨域訪問。
通過設置Access-Control-Allow-Orgin來允許跨域，cors可以用ajax發請求獲取數據，但是兼容性沒有jsonp好
通過修改document.domain來跨子域
將子域和主域的doucment.domain設爲同一個主域，前提條件：這兩個域名必須屬於同一個基礎域名！而且所用的協議，端口都要一致
主域相同的使用document.domain
使用window.name來進行跨域
window對象有個name屬性，該屬性有個特徵：即在一個窗口的生命週期內，窗口載入的所有的頁面都是共享一個window.name。每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的
使用HTML5中心引進的window.postMessage方法來跨域傳送數據
還有flash，在服務器上設置代理頁面等跨域方式。
2.移動端兼容問題
IOS移動端click時間300ms的延遲響應
一些情況下對非可點擊元素如（label,span）監聽click時間，ios下不會觸發，css增加cursor:poiner就搞定了
3.XML和JSON的區別？
數據體積方面：JSON相對於XML來講，數據的體積小，傳遞的速度更快些
數據交互方面：JSON與js的交互更加方便，更容易解析處理，更好的數據交互
數據描述方面：JSON對數據的描述性比XML較差
傳輸速度方面：JSON的速度遠遠要快於XML
4.漸進增強和優雅降級
漸進增強：針對低版本的瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的體驗效果
優雅降級：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容
構建工具
1.webpack的理解，和gulp有什麼不同？
webpack是模塊打包工具，會分析模塊間的依賴關係，然後使用Loaders處理他們，最後生成一個優化並且合併後的靜態資源
gulp是前端自動化工具，能夠優化前端工作流程，比如文件合併壓縮
2.webpack打包速度很慢， 爲什麼？怎麼解決？
模塊太多
webpck可以配置externals來將依賴的庫指向全局變量，從而不再打包這個庫
3.對webpack的看法
webpack是一個模塊打包工具，可以使用webpack管理你的模塊依賴，並編譯輸出模塊們所需要的靜態文件。能很好的管理、打包web開發中所用到的HTML、js、css以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源。
webpack兩大特色：
code splitting（可以自動完成）
loader 可以處理各種類型的靜態文件，並且支持串聯操作
webpack是以commonJS的形式來書寫腳本，但是AMD/CMD的支持也很全面，方便舊項目進行代碼遷移
webpck具有require和browserify的功能，但仍有很多自己的新特性：
對 CommonJS、AMD、ES6的語法做了兼容
對JS、css、圖片等資源文件都支持打包
串聯式模塊化加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對conffeescript、ES6的支持
有獨立的配置文件webpck.config.js
可以將代碼切割成不同的chunk，實現按需加載，降低了初始化時間
支持sourceUrls和sourceMaps，易於調試
具有強大的plugin接口，大多是內部插件，使用起來比較靈活
webpack使用異步IO並具有多級緩存，在增亮編譯上更加快
網絡&存儲
1.http響應中content-type包含哪些內容？
請求中的消息主題是用何種方式解碼
application/x-www-form-urlencoded
這是最常見的post提交數據的方式，按照key1=val1&key2=val2的方式進行編碼
application/json
告訴服務器端消息主體是序列化後json字符串
2.get和post有什麼不同？
get是從服務器上獲取數據，post是像服務器傳送數據
get請求可以將查詢字符串參數追加到url的末尾；post請求英國把數據作爲請求的主體提交
get請求數據有大小限制；post沒有
post比get安全性更高
3.cookie和session有什麼聯繫和區別？
cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
session比cookie更安全
單個cookie保存的數據不能超過4k，很多瀏覽器都限制一個站點最多保存20個cookie
一般用cookie來存儲sessionid
4.多頁面通信有哪些方案，各有什麼不同？
localstroge在一個標籤頁裏唄添加、修改、刪除時，都會觸發一個storage事件，通過另一個標籤頁裏監聽storage事件，即可得到localstorge存儲的值，實現不同標籤頁之間的通信
settimeout+cookie
5.輸入網站後到頁面展現是過程？
通過dns解析獲取ip
通過dns解析獲取ip
tcp鏈接
客戶端發送http請求
tcp傳輸報文
服務器處理請求返回http報文
6.客戶端解析渲染頁面
構建DOM樹->構建渲染樹->佈局渲染樹：計算盒模型位置和大小->繪製渲染樹
7.前端性能優化
代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器
緩存利用：緩存ajax，使用CDN，使用外部js和css文件以便緩存
添加expires頭，服務器配置Etag，減少DNS查找
請數量：合併樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載
請求帶寬：壓縮文件，開始GZIP
代碼層面的優化：
用hash-table來優化查找
少用全局變量
用innerHTML代替DOM操作，減少DOM操作次數，優化js性能
用setTimeout來避免頁面是去響應
緩存DOM節點查找的結果
避免使用css Expression
避免全局查詢
避免使用with（with會創建自己的作用域，會增加作用域鏈長度）
多少變量聲明合併
避免圖片和iframe等的空src，空src會重新加載當前頁面，印象速度和效率
儘量避免寫在HTML標籤中寫style屬性
樣式放在頂部，腳本放在底部
8.移動端性能優化
儘量使用css3動畫，開啓硬件加速
適當使用touch時間代替click時間
避免使用css3漸變陰影效果
可以用transform: translateZ(0) 來開啓硬件加速
不濫用float。float在渲染時計算量比較大，儘量減少使用
不濫用web字體。web字體需要下載，解析，重繪當前頁面
合理使用requestAnimationFrame動畫代替setTimeout
css中的屬性（css3 transitions、css3 3D transforms、opacity、webGL、video）會觸發GUP渲染，耗電
9.分域名請求圖片的原因和好處？
瀏覽器的併發請求數目限制是針對同一域名的，超過限制數目的請求會被阻塞
瀏覽器併發請求有個數限制，分域名可以同時併發請求大量圖片
10.頁面的加載順醋
html順序加載，其中js會阻塞後續dom和資源加載，css不會阻塞dom和資源的加載
瀏覽器會使用prefetch對引用的資源提前下載
沒有defer或async，瀏覽器會立即加載並執行指定的腳本
有async，加載和渲染後續文檔元素的過程將和script.js的加載與執行並行進行（下載一部，執行同步，加載完就執行）
有defer，加載後續文檔元素的過程將和script.js的加載並行進行（異步），但是script.js的執行要在所有元素解析完成之後，DOMContentLoaded事件觸發之前完成
11.計算機網絡的分層概述
tcp/ip模型：從下往上分別是鏈路層，網絡層，傳輸層，應用層
osi模型：從下往上分別是物理層，鏈路層，網絡層，傳輸層，會話層，表示層，應用層
12.jscss緩存問題
瀏覽器緩存的意義在於提高了執行效率，但是也隨之帶來一些問題，導致修改了js、css，客戶端不能更新
都加上了一個時間戳作爲版本號
13.說說tcp傳輸的三次握手 四次握手策略
三次握手：
爲了準確無誤地吧數據送達目標處，TCP協議採用了三次握手策略。用TCP協議把數據包送出去後，TCP不會對傳送後的情況置之不理，他一定會向對方確認是否送達，握手過程中使用TCP的標誌：SYN和ACK
發送端首先發送一個帶SYN的標誌的數據包給對方，接收端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息
最後，發送端再回傳一個帶ACK的標誌的數據包，代表“握手”結束
如在握手過程中某個階段莫明中斷，TCP協議會再次以相同的順序發送相同的數據包
斷開一個TCP連接需要“四次握手”
第一次揮手：主動關閉方發送一個FIN，用來關注主動方到被動關閉方的數據傳送，也即是主動關閉方告誡被動關閉方：我已經不會再給你發數據了（在FIN包之前發送的數據，如果沒有收到對應的ACK確認報文，主動關閉方依然會重發這些數據）。但是，此時主動關閉方還可以接受數據
第二次揮手：被動關閉方收到FIN包後，發送一個ACK給對方，確認序號收到序號 +1（與SYN相同，一個 FIN佔用一個序號）
第三次揮手：被動關閉方發送一個 FIN。用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，我的數據也發送完了，不會給你發送數據了
第四次揮手：主動關閉方收到FIN後，發送一個ACK給被動關閉方，確認序號爲收到序號+1，至此，完成四次握手
14.TCP和UDP的區別？
TCP是基於連接的協議，也就是說，在正式收發數據前，必須和對方簡歷可靠的連接。一個TCP連接必須要經過三次“對話”才能建立起來
UDP是與TCP相應的協議。他是面向非連接的協議，他不與對方建立連接，而是直接就把數據包發送過去了
UDP適用於一次只傳送少量數據，對可靠性要求不高的應用環境
15.HTTP和HTTPS
HTTP協議通常承載與 TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了我們常說的HTTPS
默認HTTP的端口號爲80，HTTPS的端口號爲443
16.爲什麼HTTPS安全
因爲網絡請求需要中間有很多的服務器路由的轉發，中間的節點都可能篡改信息，而如果使用HTTPS，密鑰在你和終點站纔有，https之所有說比http安全，是因爲他利用ssl/tls協議傳輸。包含證書，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等，保障了傳輸過程的安全性
17.關於http 2.0
http/2 引入了“服務端推”的概念，它允許服務端在客戶端需要數據之前就主動的將數據發送到客戶端緩存中，從而提高性能
http/2提供更多的加密支持
http/2使用多路技術，允許多個消息在一個連接上同時交差
它增加了頭壓縮，因此即使非常小的請求，其請求和響應和header都只會佔用小比例的帶寬
18.defer 和 async
defer並行加載js文件，會按照頁面上script標籤的順序執行
async並行加載js文件，下載完成立即執行，不會按照頁面上script標籤的順序執行
19.Cookie的弊端
cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但是有很多侷限性
第一：每個特定的域名下最多生成20個cookie
IE6或更低的版本，最多20個cookie
IE7和之後的版本最多50cookie
chrom和safari沒有做硬性限制
第二：IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie
cookie的最大大約爲4096字節，爲了兼容性，一般不能超過4095字節
IE提供了一種存儲可以持久化用戶數據，叫做userdata，從IE5.0就開始支持。每個數據最多128K，每個月名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，就一直會在
優點：極高的擴展性和可用性
通過良好的編程，控制保存在cookie中的session對象的大小
通過加密性和安全傳輸技術（SSL），減少cookie被破解的可能性
只在cookie中存放不敏感數據，即使被盜也不會有重大損失
控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie
缺點：
cookie數量和長度的限制，每個domain最多隻能有20調cookie，每個cookie的長度不超過4KB，否則會被截掉
安全性問題，如果cookie被人攔截了，那人就可以取得所有的session信息，即使加密也於事無補，因爲攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就行
有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，我們需要在服務器保存一個計數器，如果我們把這個計數器保存在客戶端，那麼他起不到任何作用
20.瀏覽器本地存儲
較高版本的劉拉你中，js提供了sessionStorage和globalStorage。在HTML5提供了localStorage來取代globalStorage
HTML5中的web storage包括了兩種存儲方式：sessionStorage和 localStorage
sessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據隨之銷燬，因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲
而localStorage用於持久化的本地存儲，除非主要刪除數據，否則數據是永遠不會過期的
21.web storage 和 cookie的區別
web storage的概念和cookie相似，區別是爲更大容量存儲設計的，cookie的大小是受限的，並且每次請求一個新的頁面的時候cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用
除此之外，web storage擁有serItem,getItem,removeItem,clear等方法，cookie得自己封裝setCookie,getCookie
但是cookie也是不可或缺的：cookie的作用是與服務器進行交互，作爲HTTP規範的一部分而存在，而web stroage僅僅是爲了在本地“存儲”在存在
瀏覽器的支持除了IE7及以下不支持外，其他標準都會完全支持（ie及FF需要在web服務器裏進行），值得一提的是IE總是辦好事，例如IE7,IE6的userData其實就是js本地存儲的解決方法，通過簡單的代碼封裝就可以同意到所有的瀏覽器都支持web storage
localStorage和sessionStorage都具有相同的操作方法，例如setItem,getItem,removeItem等
22.cookie 和 session的區別
cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
cookie不是很安全，別人分析存放在本地的cookie進行cookie欺騙
考慮到安全應當使用session
session會在一定時間內保存在服務器上，當訪問增多，會比較佔用你服務器的性能
考慮到減輕服務器性能方面，應當使用cookie
單個cookie保存的數據不能超過4k，很多瀏覽器都限制一個站點最多保存20個cookie
所以個人建議：
將登陸信息等重要信息放在session
其他信息如果需要保留，可以放在cookie
23.常見兼容性問題？
png24位的圖片在ie6瀏覽器上出現背景，解決方案是做成png8，也可以引用一段腳本處理
瀏覽器默認的margin和padding不同，解決方案是加一個全局的*{margin: 0;padding:0;}來統一
IE6雙邊距BUG：塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin得比設置的大
浮動ie產生的雙邊距距離（IE6雙邊距問題：在IE6，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍）
.box{
float:left;
width:10px;
margin:0 0 0 100px;
}
這種情況之下ie會產生20px的距離，解決方案是在float的標籤樣式控制中加入
_display：inline；將其轉化爲行內屬性（_這個符號只有ie6識別）
漸進識別的方式，從總體中逐漸排除局部
首先，巧妙的使用“\9”這一標記，將ie瀏覽器從所有情況中分離出來
接着，再次使用“+”將IE8和IE7，IE6分離出來，這樣IE8已經獨立識別
.a{
background-color: #ccc; /*所有識別*/
.background-color: #ccc\9; /*IE6，7,8識別*/
+background-color: #ccc; /*IE6,7識別*/
_background-color: #ccc; /*IE6識別*/
}
怪異模式問題：漏寫DOCTYPE聲明。firefox仍然會按照標準模式來解析網頁，但是IE中會觸發怪異模式，爲了避免不必要的麻煩，最好聲明 良好習慣
IE6瀏覽器常見的BUG
1.IE6不支持min-height，解決辦法使用css hack
.target{
min-height: 100px;
height: auto !important;
height: 100px; //IE6下內容高度超過會自動擴展高度
}
2.ol內的序號全爲1，不遞增。
爲li設置樣式display: list-item
3.未定位父元素overflow: auto;，包含position: relative；子元素，子元素高於父元素時會溢出
子元素去掉position: relative
不能爲子元素取消定位時，父元素position：relative
4.IE6只支持a標籤的:hover僞類
使用js爲元素監聽mouseenter,mouseleave事件，添加類實現效果
5.IE5-8不支持opacity，
.opacity{
opacity: 0.4;
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
6.IE6在設置height小於font-size時高度值爲font-size
font-size:0;
7.IE6不支持PNG透明背景
IE6下使用gif圖片
8.IE6-7不支持display: inline-block
設置inline並處罰hasLayout
display: inline-block;
*display: inline;
*zoom: 1;
9.IE6下浮動元素在浮動方向上與父元素便捷接觸元素的外邊距會加倍
使用padding控制邊距
浮動元素display: inline;
10.通過塊級元素設置寬度和左右margin爲auto時，IE6不能實現水平居中
爲父元素設置text-align: center