這段時間去找工作，發現了很多出現概率比較高的面試題，這里記錄一下，希望對大家有幫助！
盒子模型的類型和區別
盒子包括：外邊距（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）
普通函數和箭頭函數的區別？
- 寫法不同：普通函數要寫function，箭頭函數不用；
- 聲明方式不同：普通函數可以是聲明式的，也可以是賦值式，而箭頭函數只能是賦值式的；
- this指向不同：普通函數有原型prototype，this指向不確定，箭頭函數本身沒有this，因為沒有原型，this指向確定，指向他父級作用域；
- new不同：普通函數可以new，箭頭函數不能new，就是因為沒有原型prototype；
- 傳參方式：普通函數可以獲取arguments，箭頭函數不能獲取可以通過...arg，一般傳參需要一一明確
div塊垂直水平居中
- 彈性布局
.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、圖片等） --> 瀏覽器對頁面進行渲染呈現給用戶
常見的瀏覽器內核
| 瀏覽器/RunTime | 內核（渲染引擎） | JavaScript 引擎 |
|---|---|---|
| Chrome | Blink（28~） | |
| Webkit（Chrome 27） | V8 | |
| FireFox | Gecko | SpiderMonkey |
| Safari | Webkit | JavaScriptCore |
| Edge | EdgeHTML | Chakra(for JavaScript) |
| IE | Trident | Chakra(for JScript) |
| PhantomJS | Webkit | JavaScriptCore |
| Node.js | - | V8 |
注：部分內容來源於網絡，如有侵權，請留言
未完待續...