1、localstorage、sessionstorage怀薛、與 cookie 的區(qū)別？

　　cookie：一般有服務(wù)器生成失效時(shí)間迷郑，如果是在瀏覽器端生成枝恋，cookie默認(rèn)是關(guān)閉瀏覽器后失效创倔，大小4kb，每次都會(huì)攜帶請(qǐng)求頭焚碌。

　　localStorage：除非清除否則永久保存畦攘，大小5MB，僅存在客戶端十电，不參與通信

　　sessionStorage：僅在當(dāng)前會(huì)話下有效知押，關(guān)閉頁(yè)面或者清除出瀏覽器后清除，大小5MB左右鹃骂，僅在客戶端保存朗徊，不參與通信

2、for..in　　for..of　　for..each 的區(qū)別

　　for..in 適合遍歷對(duì)象偎漫，遍歷數(shù)組的索引

　　for..of 是 ES6 的語(yǔ)法爷恳，只能遍歷實(shí)現(xiàn) Symbol.interator 的接口的對(duì)象，遍歷的是數(shù)組內(nèi)部的元素象踊，不包括數(shù)組的原型屬性 method 和索引 name

　　for..each 是 ES5 的遍歷數(shù)組温亲，不能使用 break 和 return 結(jié)束并退出循環(huán)。

3杯矩、ES6 的新語(yǔ)法

　　const 與 let 變量栈虚、解構(gòu)賦值、for..of 循環(huán)史隆、展開運(yùn)算符魂务、箭頭函數(shù)和 this、Symbol泌射、class粘姜、promise

4、const let 與 var 的區(qū)別

　　var 聲明變量會(huì)掛載到 window 上熔酷，存在變量提升

　　let 和 const 聲明形成塊級(jí)作用域孤紧，塊之外的訪問會(huì)報(bào)錯(cuò)，不能變量提升拒秘，在聲明之前訪問會(huì)報(bào)錯(cuò)号显，不允許在同一級(jí)中重復(fù)聲明

　　let 聲明變量，值和類型都可以改變躺酒，無限制

　　const 聲明常量押蚤，只讀，修改值會(huì)報(bào)錯(cuò)羹应，保存的是內(nèi)存地址揽碘，可以給對(duì)象或數(shù)組添加屬性或元素，不能重新復(fù)寫。

5钾菊、ES6 中箭頭函數(shù) this 的指向

　　全局調(diào)用的時(shí)候 this 代表全局對(duì)象

　　作為對(duì)象方法調(diào)用的時(shí)候，this 指向這個(gè)上級(jí)對(duì)象偎肃，

　　作為構(gòu)造函數(shù)調(diào)用時(shí)煞烫，this 只想這個(gè)新對(duì)象

　　apply 調(diào)用時(shí)，this 指向的是調(diào)用這個(gè)函數(shù)的一個(gè)參數(shù)累颂。

6滞详、對(duì) Promise 的理解

　　Promise 是異步編程的解決方案，Promise 是一個(gè)對(duì)象紊馏，從它可以獲取到異步操作的消息料饥，Promise 有三個(gè)狀態(tài)，pending 等待狀態(tài)朱监、fulfilled 成功狀態(tài)岸啡、reject 失敗狀態(tài)。狀態(tài)一旦更改赫编，就不會(huì)再改變巡蘸，創(chuàng)造 Promise 實(shí)例之后，就會(huì)立即執(zhí)行擂送。它有兩個(gè) API 方法： resolve 和 reject 方法悦荒，調(diào)用成功返回 resolve ，調(diào)用失敗之后返回 reject嘹吨，原型上又兩個(gè)方法 .then 和 .chtch搬味，在請(qǐng)求數(shù)據(jù)上 .then 是請(qǐng)求的數(shù)據(jù)，.chtch 捕獲的錯(cuò)誤異常蟀拷。

7碰纬、原型，原型鏈的理解

　　原型：每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化的一個(gè)屬性问芬，就是 prototype(原型)嘀趟，通俗的講，原型就是一個(gè)模板愈诚，更準(zhǔn)確的說是一個(gè)模板對(duì)象

　　原型鏈：當(dāng)我們?cè)L問一個(gè)對(duì)象的屬性的時(shí)候她按，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去 prototype 里找這個(gè)屬性炕柔，這個(gè) prototype 又會(huì)有自己的 prototype 酌泰，于是就這樣一直找下去，這也就是我們說的原型鏈的概念匕累。通俗的講陵刹，就是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。（大白話版本：對(duì)象的原型指向父級(jí)欢嘿，而父級(jí)的原型又指向父級(jí)的父級(jí)衰琐，像這樣層層指向的關(guān)系也糊，就叫做原型鏈。在查找一個(gè)對(duì)象的屬性的時(shí)候羡宙，javascript 會(huì)向上遍歷原型鏈狸剃，知道找到給定義名稱的屬性為止，當(dāng)查找到原型頂部的時(shí)候狗热，也就是 object.prototype()钞馁，仍然沒有找到指定的屬性，就會(huì)但返回 undefined匿刮。）

8僧凰、對(duì)閉包的理解

　　閉包：就是可以讀取其他函數(shù)內(nèi)部變量的函數(shù)

　　通俗的講：函數(shù)a 和 內(nèi)部函數(shù)b ，被函數(shù)a 外部的一個(gè)變量引用的時(shí)候熟丸，就創(chuàng)建了一個(gè)閉包训措。

　　應(yīng)用場(chǎng)景：函數(shù)封裝的時(shí)候，使用定時(shí)器的時(shí)候

　　閉包的用處：一是能夠讀取其他函數(shù)內(nèi)部的變量光羞，二是讓這些變量值始終保持在內(nèi)存中

　　優(yōu)缺點(diǎn)：

　　　　優(yōu)點(diǎn)：

　　　　　　減少全局變量

　　　　　　減少傳遞函數(shù)的參數(shù)量

　　　　　　封裝

　　　　缺點(diǎn)：

　　　　　　使用閉包會(huì)占用大量的內(nèi)存隙弛，過多的使用閉包會(huì)導(dǎo)致內(nèi)存溢出

　　解決方案：就是把哪些不需要的變量，垃圾回收又收不走的哪些變量賦值為 null 狞山，然后再讓垃圾回收收走全闷。

9、垃圾回收機(jī)制：

　　如果一個(gè)對(duì)象不再被引用萍启，那么這個(gè)對(duì)象就會(huì)被回收总珠，如果兩個(gè)對(duì)象相互被引用，而不在被第三者引用勘纯，那么這兩個(gè)對(duì)象也會(huì)被回收局服，如果，對(duì)象a 被對(duì)象 b 引用驳遵，b 又被除了 a 以外 c 引用淫奔，那么 a 執(zhí)行完以后就不會(huì)被回收。

10堤结、ES5唆迁、ES6 中繼承

　　組合繼承，原型鏈和構(gòu)造函數(shù)的技術(shù)組合到一起來實(shí)現(xiàn)繼承

　　屬性拷貝：將對(duì)象的成員賦值一份給需要繼承的對(duì)象

　　借用構(gòu)造函數(shù)

10竞穷、CSS3 的新特性

　　選擇器(偽類選擇器)唐责、背景和邊框、文本效果瘾带、動(dòng)畫鼠哥、過度、多列布局

11、H5 的新特性

　　語(yǔ)義化標(biāo)簽：header朴恳、footer抄罕、section、nav

　　增強(qiáng)型表單：input 的多個(gè) type

　　新增表單元素：datalist于颖、email呆贿、number、url

　　拖拽

　　本地存儲(chǔ)

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 請(qǐng)求、合理的設(shè)置緩存浙巫、資源合并壓縮金蜀、將外部 js 置底、雪碧圖

15的畴、元素的垂直水平居中

　　1渊抄、文本圖片：line-hiegh；高度：text-align:center

　　2丧裁、絕對(duì)定位：left:50%护桦；top:50%；margin 負(fù)半值煎娇；

　　3二庵、絕對(duì)定位：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 跨域原理

　　動(dòng)態(tài)創(chuàng)建 script 標(biāo)簽汁果，src 連接接口地址涡拘、callback 參數(shù)就是服務(wù)器返回給我們的數(shù)據(jù)，jsonp 支持 get 不支持 post据德，post 請(qǐng)求需要后端來給我們配置

19鳄乏、如何解決 jsonp 跨域原理？

　　跨域原理：協(xié)議棘利、域名橱野、端口號(hào)有一個(gè)不統(tǒng)一就形成跨域

　　jsonp 跨域

　　設(shè)置 nginx 反向代理

　　服務(wù)器設(shè)置請(qǐng)求頭

20、ajax 的原理及具體應(yīng)用場(chǎng)景

　　通過 XMLHttpRequirst 給服務(wù)器發(fā)送請(qǐng)求善玫，再通過 XMLHttpRequest 對(duì)象來接受服務(wù)器返回的數(shù)據(jù)水援，最后通過 dom 操作數(shù)據(jù)寫到頁(yè)面上；

　　XMLHttpRequset 是 ajax 的核心機(jī)制茅郎，實(shí)在 IE5 中首先引用的蜗元，是一種異步的無刷新技術(shù)，簡(jiǎn)單地說系冗，也就是 JS 可以及時(shí)的向服務(wù)器提出請(qǐng)求和處理響應(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ù)組不會(huì)改變

24、偽類和偽元素的區(qū)別

　　偽類不產(chǎn)生新的對(duì)象诚欠，只是在 DOM 中一個(gè)元素的不同狀態(tài)

　　偽元素產(chǎn)生新對(duì)象顽染，在 DOM 樹中看不到

25漾岳、清除浮動(dòng)的方法：

　　1、overflow:hidden

　　2粉寞、clear:both

　　3尼荆、after 偽元素清除浮動(dòng)

26、ajax 的原生對(duì)象唧垦，如何完成一個(gè)完整的 ajax 請(qǐng)求

　　XMLHttpRequest

　　var xhr = new XMLHttpRequest();

　　xhr.open(url, "get", true)

　　xhr.onreadStatechange = function(res){}

　　xhr.send()

27捅儒、內(nèi)存泄漏其他方式（除了閉包）

　　1、DOM 對(duì)象與 js 相互吸引

　　2振亮、給 DOM 對(duì)象用 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、對(duì)搜索引擎的支持比較弱

　　4咬像、破壞了程序的異常機(jī)制

32算撮、ajax 的流程

　　1、創(chuàng)建 XHR 對(duì)象县昂，也就是一個(gè)異步調(diào)用的對(duì)象

　　2肮柜、創(chuàng)建新的 http 請(qǐng)求，指定該 http 請(qǐng)求的方法倒彰， URL 审洞、以及驗(yàn)證信息

　　3、設(shè)置響應(yīng) http 請(qǐng)求狀態(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ù)組對(duì)象）作為參數(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 對(duì)象和一個(gè)數(shù)組 argArray 岸售，如果 arg 不是數(shù)組會(huì)報(bào)錯(cuò) TypeError

　　call 可傳遞多個(gè)參數(shù)践樱，第一個(gè)參數(shù)和 apply 一樣，是用來替換的對(duì)象凸丸，后面是參數(shù)拷邢。

38、ES7 的新特性

　　函數(shù)作用域中嚴(yán)格模式的變更

39屎慢、ES5 的新特性

　　嚴(yán)格模式

? ? ? ? JSON對(duì)象(stringify(obj/arr)瞭稼、parse(json))

? ? ? ? string(擴(kuò)展)：indexOf、lastIndexOf腻惠、substring环肘、concat、length

? ? ? ? Array(擴(kuò)展)：forEach集灌、filter悔雹、map、reduce绝页、some荠商、every

40、http協(xié)議請(qǐng)求過程

　　域名解析续誉，發(fā)起TCP 3次握手莱没，建立 tcp 連接后發(fā)起 http 請(qǐng)求，服務(wù)器響應(yīng)請(qǐng)求酷鸦、瀏覽器獲得 html 代碼饰躲，瀏覽器解析 html 代碼牙咏，并請(qǐng)求 html 代碼中的資源，瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶嘹裂。

41妄壶、ES6 的數(shù)組新增的方法

　　Array.from

　　Arrayof()

　　find

　　fill

　　includes

　　entries

　　flat

42、new 的時(shí)候做了什么

　　1寄狼、創(chuàng)建一個(gè)新的對(duì)象

　　2丁寄、將構(gòu)造函數(shù)中的作用域給新對(duì)象

　　3、執(zhí)行構(gòu)造函數(shù)中的代碼

　　4泊愧、返回新對(duì)象

43伊磺、DOM 的添加、移除删咱、移動(dòng)屑埋、復(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ū)別，分別適合什么樣的場(chǎng)景

　　get 傳送的數(shù)據(jù)長(zhǎng)度有限聪富，post 沒有

　　get 通過 url 傳遞莺丑，在瀏覽器的地址欄可見著蟹，post 是在請(qǐng)求頭中傳遞

　　使用場(chǎng)景：

　　post 一般用于表單的提交

　　get 一般用于簡(jiǎn)單的數(shù)據(jù)查詢墩蔓，嚴(yán)格要求不是那么高的場(chǎng)景

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储藐、不能很好的支持移動(dòng)端

　　　　2、瀏覽器界面無法前進(jìn)或者后退

　　　　3嘶是、對(duì)搜索引擎的支持比較弱

　　　　4钙勃、太多客戶端造成開發(fā)上的成本。

　　　　5聂喇、安全威脅辖源，ajax技術(shù)就如同對(duì)企業(yè)建立了一個(gè)直接通道，這使得開發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和業(yè)務(wù)邏輯

　　同步：

　　　　一個(gè)任務(wù)沒有執(zhí)行完就不會(huì)執(zhí)行下一個(gè)任務(wù)

　　異步：

　　　　同一時(shí)間執(zhí)行多個(gè)任務(wù)

　　優(yōu)缺點(diǎn)：

　　　　1希太、同步的執(zhí)行效率會(huì)比較低核无，耗費(fèi)事件，但是有利我們對(duì)流程進(jìn)行控制抹腿，避免很多不可掌控的意外情況

　　　　2浅浮、異步的執(zhí)行效率很高，節(jié)省時(shí)間芥映，但是對(duì)占用更多的資源洲尊，也不利于我們對(duì)進(jìn)程控制

　　異步的使用場(chǎng)景：

　　　　1、不涉及共享資源奈偏，或者對(duì)共享資源只讀坞嘀，即非互斥操作

　　　　2、沒有秩序上的嚴(yán)格關(guān)系

　　　　3惊来、常用于 IO 操作等一些耗時(shí)操作丽涩，

　　　　4、不影響主線程邏輯

　　同步的好處：

　　　　1裁蚁、同步流程會(huì)結(jié)果處理通常更為簡(jiǎn)單矢渊，可以就近處理

　　　　2、同步流程對(duì)結(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”)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 給某元素刪除指定的樣式