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