本文主要是總結一些前端各方面的面試題，具有一定的參考借鑑價值，需要的朋友可以瞭解一下
1.div+css的佈局較table佈局有什麼優點？
div+css: 結構與樣式分離、代碼語義性好、更符合html 標準規範、SEO友好
table佈局：某種原因不方便加載外部css的場景，例如郵件正文，此時用table佈局可以在無css情況下保持頁面佈局正常
2.爲什麼利用多個域名來存儲網站資源會更有效？
CDN緩存更方便、突破瀏覽器併發限制、節約 cookie 寬帶、節約主域名的連接數，優化頁面響應速度、複製不必要的安全問題
3.開發人員優化性能，從用戶刷新網頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
dns緩存、cdn緩存、瀏覽器緩存、服務器緩存
4.==和===的區別
== 比較 判斷兩者相等，==在比較的時候可以自動轉換數據類型
=== 嚴格比較 判斷兩者嚴格相等 ===嚴格比較，不會進行自動轉換，要求進行比較的操作數必須類型一致，不一致時返回 false
簡而言之：==只要求值相等，===要求值和類型都相等
6.vue和html的區別？
vue是數據驅動
html是非數據驅動
7.同步和異步的區別？
同步（阻塞模式）：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務。
異步（非阻塞模式）：進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態，又消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
8.爲什麼會有跨域的存在？如何解決跨域問題？
原因：由於跨域訪問獲取資源會有很大的安全隱患，所以瀏覽器會限制這種跨域請求，只允許ajax訪問本地同源下的資源
跨域的概念：協議、域名、端口都相同才同域，否則都是跨域
解決方法：jsonp，原理是通過script標籤的src屬性來進行數據請求，因爲不受同源策略的影響，所以能請求數據
9.localStorage、cookie和sessionStorage的區別
localStorage：本地存儲，除非用戶手動清除出，否則信息將永遠存在，存在數據大小一般爲5MB，而且僅在客戶端（瀏覽器）中保存，不參與和服務器的通信
sessionStorage：會話存儲，關閉頁面或瀏覽器後被清楚，僅在客戶端（瀏覽器）中保存，不參與和服務器的通信
cookie：存儲在瀏覽器的信息。如果不在瀏覽器中設置過期時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束。
10.優雅降級和漸進增強？
優雅降級：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果交互等改進和追加功能達到更好的用戶體驗。
11.css選擇器（選擇器越特殊，優先級越高，也就是選擇器指向的越準確，優先級就越高）
*通用選擇器、 #id選擇器、.類選擇器、後代選擇器（利用空格間隔,，如div h1）、羣組選擇器（利用逗號間隔，如p,div,#a）、h1+p相鄰兄弟選擇器
12.display:none與visiblity:hidden的區別是什麼？
display：隱藏對應的元素但不擠佔該元素原來的空間。（對象的寬高各種屬性值都丟失）
visibility：隱藏對應的元素並且擠佔該元素原來的空間。（對象僅是在視覺上看不到，完全透明，而它多佔據的空間位置任然存在）
13.嘗見的兼容性問題
各個瀏覽器兼容寫法：-moz：firefox（火狐） -ms：IE瀏覽器 -webkit：chrome（谷歌）、safari（蘋果瀏覽器） -o：opera
（1）png24位的圖片在IE6瀏覽器上出現背景
解決方案：做成png8的
（2）瀏覽器默認的margin和padding不同
解決方案：加一個全局的*{margin:0;padding:0}來統一
（3）超鏈接訪問過後hover樣式就不在出現了，被點擊訪問過的超鏈接樣式不再具有hover和active
解決方案：改變css屬性的排列順序 L-V-H-A （a:link a:visited a:hover a:active）
14.H5語義化標籤
<header> 頭部 <footer>底部 <nav>導航欄 section>（1.定義文檔中的節，和div類似2.定義文章，這時一般帶有標題）
<article>獨立的內容區域 <aside>側邊欄內容 <time>定義時間或日期 <details>描述文檔或某一部分細節
<video>視頻 <audio> 音頻 <canvas>畫布（通過座標在canvas上繪製圖形）
15.BOM和DOM的區別
BOM（不兼容，IE、谷歌、火狐）:瀏覽器對象模型，用來獲取或設置瀏覽器的屬性、行爲，如新建窗口、獲取屏幕分辨率、瀏覽器版本號等
DOM（部分不兼容）：文檔對象模型，用來獲取或設置文檔中的標籤的屬性，如獲取或者設置input表單的value值。
BOM內容不多，主要還是DOM。由於DOM的操作對象是文檔（Document），所以dom和瀏覽器沒有直接的關係
16. DOM方法：
（1）getElementById() 獲取帶有指定id的節點（元素）getElementsByTagName() 獲取帶有指定標籤名稱的所有元素的節點列表 getElementsByClassName() 獲取帶有指定類名的所有元素的節點列表
（2）appendChild() 插入新的子節點（元素）removeChild() 刪除子節點（元素）replaceChild() 替換節點
（3）createAttribute() 創建屬性節點 createElement() 創建元素節點 createTextNode() 創建文本節點
17.什麼是正向代理和反向代理
正向代理：是一個位於客戶端和原始服務器之間的服務器，爲了從原始服務器取得內容，客戶端向代理髮送一個請求並制定目標（原始服務器），然後代理向原始服務器轉交請求並將獲得的內容返回給客戶端。客戶端才能使用正向代理。
反向代理：是指以代理服務區來接受Internet上的連接請求，然後將請求轉發給內部網絡上的服務器，並將從服務器上得到的結果返回給Internet上請求連接的客戶端，此時代理服務器對外就表現爲一個反向代理服務。
CSS系列
1.盒模型
content-box、border-box、padding-box、margin-box
2.局中佈局
水平居中：行內元素：text-align:center 塊級元素：margin:0 auto flex+justify-content:center
垂直佈局：line-heiigt:height flex+align-items:center table
水平垂直居中
flex+justify-content+align-items
3.選擇器優先級（選擇器從右往左解析）
!important>行內樣式>#id>.class>tag>*>繼承>默認
4.link與@import 的區別
（1）link功能較多，可以定義RSS、Rel，而@import只能用於加載css
（2）當解析到link時，頁面會同步加載所引的css，而@import所引用的css會等到頁面加載完才被被加載
（3）@import需要IE5以上才能使用
（4）link可以使用js動態引入、@import不行
JS系列
1.原型/構造函數/實例
原型：一個簡單的對象，用於實現對象的屬性繼承（對象的爹），每個js對象中都包含一個__proto__的屬性指向該對象的原型
構造函數：可以通過new來新建一個對象的函數
實例：通過構造函數和new創建出來的對象，便是實例。實例通過__proto__指向原型，通過constructor指向構造函數
2.原型鏈
原型鏈是由原型對象組成，每個對象都有__proto__屬性，指向了創建該對象的構造函數的原型，__proto__將對象連接起來組成了原型鏈，是一個用來實現繼承和共享屬性的有限的對象鏈。
3.作用域
執行上下文中還包含作用域鏈。作用域可理解爲該上下文中聲明的變量和聲明的作用範圍，可分爲快級作用域和函數作用域
4.作用域鏈
作用域鏈可以理解爲一組對象列表，包含父級和自身的變量對象，因此我們便能通作用域鏈訪問到父級裏聲明的變量或者函數
5.閉包
閉包屬於一種特殊的作用域，稱爲靜態作用域。它的定義可以理解爲：父函數被銷燬的情況下，返回出的子函數的[[scope]]中仍然保留着父級的單變量對象和作用域鏈，因此可以繼續訪問到父級的變量對象，這樣的函數成爲閉包。
6.script引入方式
（1）html靜態<script>引入
（2）js動態插入<script>
（3）<scriptdefer>異步加載，元素解析完成後執行
（4）<scriptasync>異步加載，與元素渲染並行執行
ES6系列
1.var 和 let 關鍵字的區別，const關鍵字的理解？
let是ES6提出的聲明變量的關鍵字
區別：let 相同變量名不能在同一作用域出現
let 聲明的變量只在塊作用域內有效
不會預解析，不存在變量提升
const：一個聲明常量的關鍵字，聲明後不能改變值，其他的和let差不多
2.對箭頭函數的理解？
箭頭函數是ES6中新提出的一種函數的寫法。也就是簡化函數，一般是用在回調函數的定義中。
特點：結構簡潔，靈活
注意：箭頭函數沒有自己的this，箭頭函數的this不是調用的時候決定的，而是在定義的時候處在的對象就是它的this
擴展理解：箭頭函數的this看外層是否有函數，如果有，外層函數的this就是內部箭頭函數的this，如果沒有，則this就是window。
3.對promise 對象的理解？
promise是ES6中提出的一個對象，主要是來輔助我們更好地進行異步編程的一個實例。
他們的出現是爲了更好地解決javascript中異步編程的問題
Vue系列
1.核心概念：數據綁定（數據驅動）
借鑑angular的模板和數據綁定，借鑑react的組件化和虛擬dom操作
2.vue生命週期： 創建=>掛載=>更新=>銷燬
beforeCreate：組件實例剛被創建，組件屬性計算之前。
created：組件實例創建完成，屬性已綁定，但Dom還未生成，$el還不存在。
beforeMount：模板編譯/掛載之前。
mounted：模板編譯/掛載之後。
beforeUpdate：組件更新之前。
updated:組件更新之後。
beforeDestory：組件銷燬前調用。
destoryed：組件銷燬後調用。
3.優點
體積小、運行效率高、編碼簡潔、PC/移動端都合適
可以輕鬆引入vue插件和其他第三方庫開發項目
4.vue指令：
v-show、v-if、v-else、v-else-if、v-model、v-for、v-bind、v-html
Angular系列
1.四大對象：作用域、控制器、模塊、服務
2.Angular的依賴注入？
依賴注入是Angular的重要特性之一，依賴注入簡化了Angular 解析模塊/組件之間依賴的過程，通常一個組件要獲得它的依賴，有三種方式：
（1）直接創建出依賴，如使用new操作符
（2）能夠查找到依賴，如引入全局變量
（3）在需要的地方傳入依賴
3.angular指令：
ng-bind、ng-if、ng-show、ng-model、ng-init
MVC 和 MVVM
MVC：M-Model 數據：數據實體，用來保存頁面要展示的數據
V-View 視圖：負責顯示數據的，一般就是指html頁面
C-Controller 控制器：控制整個業務邏輯，負責處理數據，比如數據的獲取、數據過濾
MVVM：M-Model 數據：與應用程序的業務邏輯相關的數據的封裝載體
V-View 視圖：界面的顯示和渲染
VM-ViewModel 視圖-數據：是view和model的結合，負責view 和 model 的交互和協作
MVVM的優點：
低耦合：view可以獨立於Model變化和修改，同一個viewMode可以被多個View複用，並且可以做到view和model的變化互不影響
可重用性：可以把一些視圖的邏輯放在ViewModel，讓多個view複用
獨立開發：開發人員可以專注於業務邏輯和數據的開發
可測試性：清晰的view分層，是的針對表現業務邏輯的測試更容易、更簡單
本文章具有一定借鑑意義，並將持續更新