1、localstorage、sessionstorage、與 cookie 的區別？
cookie：一般有服務器生成失效時間，如果是在瀏覽器端生成，cookie默認是關閉瀏覽器后失效，大小4kb，每次都會攜帶請求頭。
localStorage：除非清除否則永久保存，大小5MB，僅存在客戶端，不參與通信
sessionStorage：僅在當前會話下有效，關閉頁面或者清除出瀏覽器后清除，大小5MB左右，僅在客戶端保存，不參與通信
2、for..in for..of for..each 的區別
for..in 適合遍歷對象，遍歷數組的索引
for..of 是 ES6 的語法，只能遍歷實現 Symbol.interator 的接口的對象，遍歷的是數組內部的元素，不包括數組的原型屬性 method 和索引 name
for..each 是 ES5 的遍歷數組，不能使用 break 和 return 結束並退出循環。
3、ES6 的新語法
const 與 let 變量、解構賦值、for..of 循環、展開運算符、箭頭函數和 this、Symbol、class、promise
4、const let 與 var 的區別
var 聲明變量會掛載到 window 上，存在變量提升
let 和 const 聲明形成塊級作用域，塊之外的訪問會報錯，不能變量提升，在聲明之前訪問會報錯，不允許在同一級中重復聲明
let 聲明變量，值和類型都可以改變，無限制
const 聲明常量，只讀，修改值會報錯，保存的是內存地址，可以給對象或數組添加屬性或元素，不能重新復寫。
5、ES6 中箭頭函數 this 的指向
全局調用的時候 this 代表全局對象
作為對象方法調用的時候，this 指向這個上級對象，
作為構造函數調用時，this 只想這個新對象
apply 調用時，this 指向的是調用這個函數的一個參數。
6、對 Promise 的理解
Promise 是異步編程的解決方案，Promise 是一個對象，從它可以獲取到異步操作的消息，Promise 有三個狀態，pending 等待狀態、fulfilled 成功狀態、rejected 失敗狀態。狀態一旦更改，就不會再改變，創造 Promise 實例之后，就會立即執行。它有兩個 API 方法： resolve 和 rejeck 方法，調用成功返回 resolve ，調用失敗之后返回 rejeck，原型上又兩個方法 .then 和 .chtch，在請求數據上 .then 是請求的數據，.chtch 捕獲的錯誤異常。
7、原型，原型鏈的理解
原型：每個對象都會在其內部初始化的一個屬性，就是 prototype(原型)，通俗的講，原型就是一個模板，更准確的說是一個模板對象
原型鏈：當我們訪問一個對象的屬性的時候，如果這個對象內部不存在這個屬性，那么他就會去 prototype 里找這個屬性，這個 prototype 又會有自己的 prototype ，於是就這樣一直找下去，這也就是我們說的原型鏈的概念。通俗的講，就是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。（大白話版本：對象的原型指向父級，而父級的原型又指向父級的父級，像這樣層層指向的關系，就叫做原型鏈。在查找一個對象的屬性的時候，javascript 會向上遍歷原型鏈，知道找到給定義名稱的屬性為止，當查找到原型頂部的時候，也就是 object.prototype()，仍然沒有找到指定的屬性，就會但返回 undefined。）
8、對閉包的理解
閉包：就是可以讀取其他函數內部變量的函數
通俗的講：函數a 和 內部函數b ，被函數a 外部的一個變量引用的時候，就創建了一個閉包。
應用場景：函數封裝的時候，使用定時器的時候
閉包的用處：一是能夠讀取其他函數內部的變量，二是讓這些變量值始終保持在內存中
優缺點：
優點：
減少全局變量
減少傳遞函數的參數量
封裝
缺點：
使用閉包會占用大量的內存，過多的使用閉包會導致內存溢出
解決方案：就是把哪些不需要的變量，垃圾回收又收不走的哪些變量賦值為 null ，然后再讓垃圾回收收走。
9、垃圾回收機制：
如果一個對象不再被引用，那么這個對象就會被回收，如果兩個對象相互被引用，而不在被第三者引用，那么這兩個對象也會被回收，如果，對象a 被對象 b 引用，b 又被除了 a 以外 c 引用，那么 a 執行完以后就不會被回收。
10、ES5、ES6 中繼承
組合繼承，原型鏈和構造函數的技術組合到一起來實現繼承
屬性拷貝：將對象的成員賦值一份給需要繼承的對象
借用構造函數
10、CSS3 的新特性
選擇器(偽類選擇器)、背景和邊框、文本效果、動畫、過度、多列布局
11、H5 的新特性
語義化標簽：header、footer、section、nav
增強型表單：input 的多個 type
新增表單元素：datalist、keygen、output
拖拽
本地存儲
12、盒模型：
組成：content、padding、border、margin
標准盒模型：只計算 content 的寬高，不加 padding、border、margin
怪異盒模型：計算 content + padding + border，不加 margin
13、如何優化代碼
代碼重用、避免全局變量、適當的注釋、內存的管理
14、WEB 前端性能優化
減少 HTTP 請求、合理的設置緩存、資源合並壓縮、將外部 js 置底、雪碧圖
15、元素的垂直水平居中
1、文本圖片：line-hiegh；高度：text-align:center
2、絕對定位：left:50%；top:50%；margin 負半值；
3、絕對定位：margin + auto，top:0; left:0; right:0; bottom:0;
16、響應式布局的實現
meta 標簽定義、百分比布局、rem 布局、媒體查詢、彈性盒布局
17、瀏覽器的緩存
localstorage、sessionstorage、cookie、
18、jsonp 跨域原理
動態創建 script 標簽，src 連接接口地址、callback 參數就是服務器返回給我們的數據，jsonp 支持 get 不支持 post，post 請求需要后端來給我們配置
19、如何解決 jsonp 跨域原理？
跨域原理：協議、域名、端口號有一個不統一就形成跨域
jsonp 跨域
設置 nginx 反向代理
服務器設置請求頭
20、ajax 的原理及具體應用場景
通過 XMLHttpRequirst 給服務器發送請求，再通過 XMLHttpRequest 對象來接受服務器返回的數據，最后通過 dom 操作數據寫到頁面上；
XMLHttpRequset 是 ajax 的核心機制，實在 IE5 中首先引用的，是一種異步的無刷新技術，簡單地說，也就是 JS 可以及時的向服務器提出請求和處理響應，而不是阻塞用戶，從而達到無刷新的效果。
表單輸入規范驗證；用來做性能優化
21、反向代理怎么配置：
location / {
proxy_pass http://apachephp;
22、js 數據類型
基本數據類型：string、boolean、number、underfined、object、null
引用數據類型：object（array、data、function）
23、map 和 forEach 的區別
forEach() 返回的 undefined，不可以鏈式調用
map() 返回的是一個新數組，原數組不會改變
24、偽類和偽元素的區別
偽類不產生新的對象，只是在 DOM 中一個元素的不同狀態
偽元素產生新對象，在 DOM 樹中看不到
25、清除浮動的方法：
1、overflow:hidden
2、clear:both
3、after 偽元素清除浮動
26、ajax 的原生對象，如何完成一個完整的 ajax 請求
XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open(url, "get", true)
xhr.onreadStatechange = function(res){}
xhr.send()
27、內存泄漏其他方式（除了閉包）
1、DOM 對象與 js 相互吸引
2、給 DOM 對象用 attachEvent 綁定事件
3、從外到內執行 appendChild
4、反復重寫一個屬性
28、css 預處理器
scss
嵌套、$變量、@mixin混合、@extend繼承、@import引入
29、阻止事件冒泡
e.stopPropation() 標准瀏覽器
event.cancelBubble = true IE9之前
30、阻止默認事件：
return false
e.preventDefault()
31、ajax 的缺點：
1、不支持瀏覽器的 back 按鈕
2、暴露了與服務器交互的細節
3、對搜索引擎的支持比較弱
4、破壞了程序的異常機制
32、ajax 的流程
1、創建 XHR 對象，也就是一個異步調用的對象
2、創建新的 http 請求，指定該 http 請求的方法， URL 、以及驗證信息
3、設置響應 http 請求狀態變化的函數
4、獲取異步調用返回過來的數據
5、使用 js 和 DOM 實現局部刷新
33、== 和 === 的區別
== 檢查值相等，允許類型轉換；
=== 檢查值和類型相等，不允許類型轉換
34、js 高階函數
1、array.prototype.map
2、array.prototype.filter
3、array.prototype.reduce
35、css 實現三角形
div{ width:0;
height: 0;
border-top:50px solid blue;
border-right:50px solid red;
border-bottom:50px solid green;
border-left:50px solid yellow;
}
36、數組去重
1、利用 indexOf 檢測元素在數組中第一次出現的位置是否和元素現在的位置相等，如果不是說明在元素是重復元素
function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } return Array.prototype.filter.call(arr, function(item, index){ return arr.indexOf(item) === index; }); }
2、Set 函數可以接受一個數組（或類數組對象）作為參數來初始化，利用該性能也能做到給數組去重
function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } return [...new Set(arr)] }
37、call 和 apply 的區別
apply 最多只能有兩個參數，新 this 對象和一個數組 argArray ，如果 arg 不是數組會報錯 TypeError
call 可傳遞多個參數，第一個參數和 apply 一樣，是用來替換的對象，后面是參數。
38、ES7 的新特性
函數作用域中嚴格模式的變更
39、EC5 的新特性
嚴格模式、JSON對象(stringify(obj/arr)、parse(json))、parse(json)、object擴展、Array擴展、function擴展
40、http協議請求過程
域名解析，發起TCP 3次握手，建立 tcp 連接后發起 http 請求，服務器響應請求、瀏覽器獲得 html 代碼，瀏覽器解析 html 代碼，並請求 html 代碼中的資源，瀏覽器對頁面進行渲染呈現給用戶。
41、ES6 的數組新增的方法
Array.from
Arrayof()
find
fill
includes
entries
flat
42、new 的時候做了什么
1、創建一個新的對象
2、將構造函數中的作用域給新對象
3、執行構造函數中的代碼
4、返回新對象
43、DOM 的添加、移除、移動、復制、創建、查找
創建新節點
createDocumentFragment() 創建一個的 DOM 片段
createElement() 創建一個具體的元素
createTextNode() 創建一個文本節點
添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
查找
getElementsByTagName() 通過標簽名稱
getElementsByName() 通過元素的 Name 屬性值
getElementById() 通過元素 id
44、HTTP 協議中 GET 和 POST 有什么區別，分別適合什么樣的場景
get 傳送的數據長度有限，post 沒有
get 通過 url 傳遞，在瀏覽器的地址欄可見，post 是在請求頭中傳遞
使用場景：
post 一般用於表單的提交
get 一般用於簡單的數據查詢，嚴格要求不是那么高的場景
45、js 作用域鏈
局部變量：局部變量就是在定義在函數內部的變量，這個變量只能在函數內部使用，即作用域范圍只是函數內部，形參也是局部變量。
全部變量：全局變量就是定義在函數外部的變量，這個變量在任何函數中都有效，即作用域范圍時當前文件的任何地方。
46、ajax 的優點，同步 異步的區別
ajax 優點：
1、無刷新更新數據
2、異步與服務器通信
3、前后端負載均衡
4、基於規范被廣泛使用
5、界面與應用分離
ajax 缺點：
1、不能很好的支持移動端
2、瀏覽器界面無法前進或者后退
3、對搜索引擎的支持比較弱
4、太多客戶端造成開發上的成本。
5、安全威脅，ajax技術就如同對企業建立了一個直接通道，這使得開發者在不經意間會暴露比以前更多的數據和業務邏輯
同步：
一個任務沒有執行完就不會執行下一個任務
異步：
同一時間執行多個任務
優缺點：
1、同步的執行效率會比較低，耗費事件，但是有利我們對流程進行控制，避免很多不可掌控的意外情況
2、異步的執行效率很高，節省時間，但是對占用更多的資源，也不利於我們對進程控制
異步的使用場景：
1、不涉及共享資源，或者對共享資源只讀，即非互斥操作
2、沒有秩序上的嚴格關系
3、常用於 IO 操作等一些耗時操作，
4、不影響主線程邏輯
同步的好處：
1、同步流程會結果處理通常更為簡單，可以就近處理
2、同步流程對結果的處理始終和前文保持在一個上下文內
3、同步流程可以很容易捕獲，處理異常
4、同步流程是好的控制過程順序執行的方式
異步的好處：
1、異步流程可以立即給調用方法返回初步的結果
2、異步流程可以延時給掉調用方最終的結果數據，
3、異步流程在執行的過程中，可以釋放占用的線程等資源，避免阻塞
4、異步流程可以等多次調用的結果出來后，在同一返回一次結果集合，提高響應率