這段時間去找工作，發現了很多出現概率比較高的面試題，這裡記錄一下，希望對大家有幫助！

盒子模型的型別和區別
盒子包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。
分為盒子模型(標準盒模型)和IE盒子模型(怪異盒模型)，兩者最大的區別是總寬/高包括的範圍的不同
標準盒模型：盒子總寬度/高度=width/height+padding+border+margin。
怪異盒模型：盒子總寬度/高度=width/height + margin （即 width/height=內容區寬度/高度 + padding + border）

而box-sizing屬性可以指定盒子模型種類，content-box指定盒子模型為W3C（標準盒模型），border-box為IE盒子模型（怪異盒模型）。

Js的基本資料型別
JS共有7種資料型別，分別是儲存在堆裡的引用資料型別（物件、陣列和函式）和儲存在棧裡的原始資料型別（Undefined、Null、Boolean、Number、String）

普通函式和箭頭函式的區別？

1. 寫法不同：普通函式要寫function，箭頭函式不用；
2. 宣告方式不同：普通函式可以是宣告式的，也可以是賦值式，而箭頭函式只能是賦值式的；
3. this指向不同：普通函式有原型prototype，this指向不確定，箭頭函式本身沒有this，因為沒有原型，this指向確定，指向他父級作用域；
4. new不同：普通函式可以new，箭頭函式不能new，就是因為沒有原型prototype；
5. 傳參方式：普通函式可以獲取arguments，箭頭函式不能獲取可以通過...arg，一般傳參需要一一明確

div塊垂直水平居中

1. 彈性佈局
   .box{ display: flex; justify-content:center; align-items:center; }

2.已知塊級元素的寬和高，使用絕對定位+外邊距設定水平垂直居中
父元素 position:relative，子元素 position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;

3.未知塊級元素的寬和高，使用絕對定位+css3樣式屬性transform
父元素 position:relative，子元素 position:absolute;transform: translate(-50%,-50%);

效能優化
（1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。
（2） 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
（4） 當需要設定的樣式很多時設定className而不是直接操作style。
（5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。
（7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。
（8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢。

ajax請求
ajax作用：可以不用重新整理整個頁面實現頁面的部分更新。
主要有GET請求 POST請求
get和post的區別：
url可見性：get，引數url可見；post，url引數不可見
資料傳輸上：get，通過拼接url進行傳遞引數；post，通過body體傳輸引數
快取性：get請求是可以快取的；post請求不可以快取
後退頁面的反應：get請求頁面後退時，不產生影響；post請求頁面後退時，會重新提交請求
傳輸資料的大小：post請求傳輸資料比get大
安全性：post比get安全

js快取方案
sessionStorage:臨時的會話儲存，只要當前的會話視窗未關閉，儲存的資訊就不會丟失，即便重新整理了頁面或者在編輯器中更改了程式碼，儲存的會話資訊也不會丟失。
localStorage:是一種如果你不主動去清除，會一直將資料儲存在客戶端的儲存方式，即使關閉了瀏覽器，下次開啟的時候仍然可以看到之前儲存的未主動清除的資料（即便是
防毒軟體或者瀏覽器自帶的清除功能，也不能將localStorage儲存的資料清除掉）
cookie屬於較老且最常見用的最多的技術了
cookie相容所有的瀏覽器，但儲存的資料是有大小限制，一般是4kb；
本地儲存的資料會被髮送到伺服器

ES6的新特性
新增資料型別 const、let宣告變數方式 模板字串 物件解構賦值
延展運算子（...） 物件字面量增強 Class類的支援 Promise非同步物件模組
import、export 陣列、物件新增方法

在瀏覽器輸入一個url地址，瀏覽器都幹了什麼？
域名解析 --> 發起3次握手 --> 建立連線後發起http請求 --> 伺服器響應請求，瀏覽器得到html程式碼 --> 瀏覽器解析html程式碼，並請求html程式碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給使用者

常見的瀏覽器核心

注：部分內容來源於網路
未完待續...