根據(jù)自己的實(shí)際面試經(jīng)驗(yàn)以及網(wǎng)上常見的面試題整理的。

基礎(chǔ)

1.怎樣添加类早、移除豆混、移動(dòng)篓像、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)皿伺？

①創(chuàng)建新節(jié)點(diǎn)

createDocumentFragment  //創(chuàng)建新DOM片段
createElement //創(chuàng)建一個(gè)元素
createTextNode //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

②添加 移除 替換 插入

appendChild() //添加
removeChild //移除
replaceChild //替換
insertBofore //插入

③查找

getElementsByTagName() //通過標(biāo)簽名查找
getElementsByName() //通過元素的name屬性查找
getElementById() //通過元素的id查找

2.如何理解閉包

定義和用法：
一個(gè)父函數(shù)里面包含了一個(gè)子函數(shù)员辩，子函數(shù)調(diào)用了父函數(shù)內(nèi)部的變量，如果子函數(shù)在外部被調(diào)用鸵鸥，就產(chǎn)生了閉包奠滑。

簡(jiǎn)單的說：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。

閉包的作用：
①讀取其他函數(shù)內(nèi)部的變量
②變量保存在內(nèi)存中

注意：
使用過多的閉包會(huì)消耗大量?jī)?nèi)存妒穴，造成網(wǎng)頁的性能問題宋税，可以在函數(shù)執(zhí)行完成之前把不需要的局部變量刪除。

3.sessionStorge , localStorge , cookie , Web Storage之間的區(qū)別

①數(shù)據(jù)存儲(chǔ)大小
cookie：4kb
webStorge：5mb

②數(shù)據(jù)存儲(chǔ)有效期限
cookie：根據(jù)自己的設(shè)置時(shí)間
sessionStorage：關(guān)閉窗口后失效

localStorage：永久有效除非js刪除或者瀏覽器刪除
③作用域
cookie和localStorage是在同源窗口讼油，同一個(gè)瀏覽器共享的杰赛，sessionStorage只在同一個(gè)標(biāo)簽頁共享。

4.請(qǐng)指出document load和document ready的區(qū)別矮台？

ready：頁面的文檔結(jié)構(gòu)加載完成乏屯，不包括圖片視頻等非文字內(nèi)容。
load：所有頁面元素都加載完成
ready的速度比load快

5.網(wǎng)站性能優(yōu)化

HTML方面：
①資源文件js css 圖片合并壓縮
②減少頁面dom操作瘦赫，操作多的話可以考慮使用虛擬dom
③減少http請(qǐng)求
④使用cdn加速
cdn的作用：cdn可以處理整個(gè)網(wǎng)站 70%-95%的訪問量辰晕，從而解決網(wǎng)站的并發(fā)量，簡(jiǎn)單的說就是通過在不同地點(diǎn)緩存內(nèi)容确虱，然后通過負(fù)載平衡等技術(shù)將用戶請(qǐng)求定向到最近的緩存服務(wù)器上獲取內(nèi)容含友，提高用戶訪問網(wǎng)站的響應(yīng)速度。
⑤減少cookie大小

6.從瀏覽器地址欄輸入url到顯示頁面的步驟

①瀏覽器根據(jù)請(qǐng)求的URL蝉娜，交給DNS域名解析唱较，找到真實(shí)的ip，交給域名解析召川。
②服務(wù)器交給后端處理完成后返回的數(shù)據(jù)南缓，瀏覽器接收文件HTML,CSS,JS圖片等。
③瀏覽器對(duì)加載的資源進(jìn)行語法解析荧呐，建立相應(yīng)的數(shù)據(jù)內(nèi)部結(jié)構(gòu)汉形。
④解析html纸镊，創(chuàng)建dom樹，自上而下的順序
⑤解析css概疆，優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式逗威；
⑥將css與dom合并，構(gòu)建渲染樹
⑦布局重繪重排岔冀，頁面完成渲染凯旭。

7.常見的HTML狀態(tài)碼和他的含義

1XX：信息狀態(tài)碼
100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)使套，已發(fā)送了http header之后服務(wù)端將返回此信息罐呼，表示確認(rèn)，之后發(fā)送具體參數(shù)信息

2XX：成功狀態(tài)碼
200 OK 正常返回信息
201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請(qǐng)求侦高，但尚未處理

3XX：重定向
301 Moved Permanently 請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置嫉柴。
302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向奉呛，且總是使用 GET 請(qǐng)求新的 URI计螺。
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過瞧壮。

4XX：客戶端錯(cuò)誤
400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式登馒，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
401 Unauthorized 請(qǐng)求未授權(quán)咆槽。
403 Forbidden 禁止訪問谊娇。
404 Not Found 找不到如何與 URI 相匹配的資源。

5XX: 服務(wù)器錯(cuò)誤
500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤罗晕。
503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）。

8.對(duì)瀏覽器內(nèi)核的理解

主要分為渲染引擎和js引擎
渲染引擎：主要負(fù)責(zé)取得網(wǎng)頁的（html赠堵，xml小渊，圖片等），整理信息結(jié)合css渲染頁面茫叭，計(jì)算網(wǎng)頁的顯示方式酬屉，瀏覽器內(nèi)核的不同對(duì)網(wǎng)頁的語法解釋也會(huì)有所不同，所以渲染效果也會(huì)有所不同揍愁，這就存在了兼容性的問題呐萨。

js引擎：解析和執(zhí)行js來達(dá)到網(wǎng)頁的動(dòng)態(tài)交互效果
最開始渲染引擎和js引擎沒有太區(qū)分，后來越來越獨(dú)立化莽囤，然后內(nèi)核一般就是指渲染引擎了谬擦。

9.html5有哪些新特性

新增了 canvas，video朽缎，audio惨远，nav谜悟，section，footer北秽，header等元素葡幸。
表單控件，calendar贺氓、date蔚叨、time、email辙培、url蔑水、search
存儲(chǔ)技術(shù)：localStorage，sessionStorage等
新的技術(shù)：webworker, websocket, Geolocation

10.iframed的缺點(diǎn)

①iframe會(huì)阻塞頁面的 onload事件
②搜索引擎不能夠解讀 iframe 頁面虏冻，不利于 seo
③iframe和主頁面共享連接池肤粱，然而瀏覽器對(duì)相同域的鏈接是有限制的，所以這會(huì)影響頁面的并行加載厨相。
④如果想要繞開以上的2個(gè)問題领曼，可以考慮通過js動(dòng)態(tài)給 iframe添加src值。

11.web標(biāo)準(zhǔn)以及w3c標(biāo)準(zhǔn)

標(biāo)簽閉合蛮穿，標(biāo)簽小寫庶骄，不亂嵌套，使用外鏈形式的css和js践磅，結(jié)構(gòu)層单刁，表現(xiàn)層，行為層分離府适。

12.xhtml和html有什么區(qū)別

一個(gè)是功能上的差別

主要是XHTML可兼容各大瀏覽器羔飞、手機(jī)以及PDA，并且瀏覽器也能快速正確地編譯網(wǎng)頁
另外是書寫習(xí)慣的差別

XHTML 元素必須被正確地嵌套檐春，閉合逻淌，區(qū)分大小寫，文檔必須擁有根元素

簡(jiǎn)單的說疟暖，xhtml更加嚴(yán)格卡儒。

13.Doctype作用，嚴(yán)格模式與混雜模式如何區(qū)分俐巴？它們有何意義?

Doctype處于文檔的最前面骨望，用來告訴瀏覽器的解析器，文檔的類型欣舵。
嚴(yán)格模式的js運(yùn)行和排版是按照瀏覽器支持的最高標(biāo)準(zhǔn)的擎鸠。
混雜模式就是兼容性模式，當(dāng)頁面兼容不好的時(shí)候缘圈，就可以選用這種模式糠亩，防止頁面布局錯(cuò)落無法站點(diǎn)工作虐骑。

14.行內(nèi)元素有哪些，塊級(jí)元素有哪些赎线，空(void)元素有那些廷没？行內(nèi)元素和塊級(jí)元素有什么區(qū)別？

行內(nèi)元素：a b span img input select strong
塊級(jí)元素：div ul li ol dl dt dd h1 h2 h3 p
空元素：br hr link meta
塊級(jí)元素獨(dú)占一行垂寥，行內(nèi)元素合一并行一行

15.html的全局屬性有哪些

class：為元素設(shè)置類標(biāo)識(shí)
data-**：為元素添加自定義屬性
draggable：設(shè)置元素是否可以拖曳
id：元素的id颠黎，同一個(gè)id文檔內(nèi)是唯一的
style：元素樣式
title：鼠標(biāo)上移顯示信息

16.canvas和svg的區(qū)別

svg繪制出來的圖片有獨(dú)立dom節(jié)點(diǎn)，可以綁定事件滞项，是矢量圖狭归，放大圖片不會(huì)有鋸齒。
canvas繪制出來的圖片是一個(gè)畫布文判，等于就是一張圖过椎，放大會(huì)產(chǎn)生鋸齒。

17.css sprite是什么戏仓，有什么優(yōu)缺點(diǎn)

就是將多個(gè)小圖標(biāo)拼接在一張圖片上疚宇，減少對(duì)圖片的請(qǐng)求，使用 background-size來定位到相關(guān)圖片上赏殃。

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

減少HTTP請(qǐng)求數(shù)敷待，極大地提高頁面加載速度
增加圖片信息重復(fù)度，提高壓縮比仁热，減少圖片大小
更換風(fēng)格方便榜揖，只需在一張或幾張圖片上修改顏色或樣式即可實(shí)現(xiàn)
缺點(diǎn)：

圖片合并麻煩
維護(hù)麻煩，修改一個(gè)圖片可能需要從新布局整個(gè)圖片抗蠢，樣式

18.display: none;與visibility: hidden;的區(qū)別

他們的作用都是讓元素不可見
區(qū)別：
display：none會(huì)讓元素完全從 dom 樹中消失举哟，渲染的時(shí)候不占據(jù)任何空間。
visibility：hidden不會(huì)讓元素從渲染樹 dom 中消失迅矛，而且還是會(huì)占據(jù)一定的空間炎滞，只是內(nèi)容不可見而已。

19.link與@import的區(qū)別

1.link是html 的方式诬乞，@import是css的方式
2.link最大限度支持并行下載，@import過多嵌套導(dǎo)致串行下載
3.link可以通過rel="alternate stylesheet"指定候選樣式
4.總體來說：link優(yōu)于@import

20.清除浮動(dòng)的幾種方式

1.clear：both钠导，添加一個(gè)空標(biāo)簽div
2.父級(jí)div定義偽類:after和zoom
3.父級(jí)div定義overflow:hidden
4.父級(jí)div也浮動(dòng)震嫉，需要定義寬度
5.結(jié)尾處加br標(biāo)簽clear:both

我自己常用的浮動(dòng)清除

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.clearfix{display:inline-table}
.clearfix{height:1%}
.clearfix{display:block;*zoom:1}

21.為什么要初始化css樣式

因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的牡属，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異票堵。
當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響逮栅，但魚和熊掌不可兼得悴势，但力求影響最小的情況下初始化

22.css3有哪些新特性

新增各種css選擇器
圓角 border-radius
多列布局
陰影和反射
文字特效text-shadow
線性漸變
旋轉(zhuǎn)transform
動(dòng)畫效果

23.介紹一下css盒子模型

有兩種窗宇， IE盒子模型、W3C盒子模型特纤；
盒模型： 內(nèi)容(content)军俊、填充(padding)、邊界(margin)捧存、 邊框(border)粪躬；
區(qū) 別： IE（低版本）的content部分把 border 和 padding計(jì)算了進(jìn)去;

24.css的優(yōu)先級(jí)算法是怎么樣的

優(yōu)先級(jí)為: !important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

25.base64的原理及優(yōu)缺點(diǎn)

優(yōu)點(diǎn)可以加密，減少了http請(qǐng)求
缺點(diǎn)是需要消耗CPU進(jìn)行編解碼

在上傳圖片的時(shí)候會(huì)用到

26.說說你對(duì)作用于鏈的理解

作用域鏈中的變量都是向上訪問的昔穴，變量訪問到windows對(duì)象后終止镰官，向下訪問是不允許的。
簡(jiǎn)單的說吗货，作用域就是變量函數(shù)的可訪問范圍泳唠。

27.js原型，原型鏈有什么特點(diǎn)

每個(gè)對(duì)象在內(nèi)部都是會(huì)初始化一個(gè)屬性的宙搬，prototype（原型）笨腥，當(dāng)我們?cè)L問一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象不存在這個(gè)屬性害淤，那么他就會(huì)去 prototype中查找扇雕，然后 prototype中還有自己的 prototype，就這樣一直找下去窥摄，這就是原型鏈的概念镶奉。

28.什么是事件代理，事件委托

假如我們有一個(gè) ul 列表崭放，里面有4個(gè)li哨苛，我們可以在 li 上綁定 click 事件，但是也可以在她們的 父節(jié)點(diǎn) ul上綁定币砂，這種在 父節(jié)點(diǎn)上綁定事件來代替子節(jié)點(diǎn)事件的方法建峭，就叫做事件委托。

29.對(duì)this的理解

this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）
如果有new關(guān)鍵字决摧，this指向new出來的那個(gè)對(duì)象
在事件中亿蒸，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是掌桩，IE中的attachEvent中的this總是指向全局對(duì)象Window

30.事件模型是什么

w3c中定義的事件發(fā)生的過程的3個(gè)階段：
捕獲階段（capturing）边锁、目標(biāo)階段（targetin）、冒泡階段（bubbling）

31.ajax的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：
通過異步模式波岛，提升了用戶體驗(yàn).
優(yōu)化了瀏覽器和服務(wù)器之間的傳輸茅坛，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.
Ajax在客戶端運(yùn)行则拷，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作贡蓖，減少了大用戶量下的服務(wù)器負(fù)載曹鸠。
Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）

缺點(diǎn)：
安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
對(duì)搜索引擎的支持比較弱斥铺。
不容易調(diào)試彻桃。

32.怎么解決跨域問題

jsonp、 iframe仅父、window.name叛薯、window.postMessage、服務(wù)器上設(shè)置代理頁面
一般由后臺(tái)設(shè)置允許跨域

33.哪些操作會(huì)造成內(nèi)存泄漏

內(nèi)存泄漏是指 一些對(duì)象我們不在使用它的時(shí)候笙纤，他任然存在
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話耗溜，會(huì)引發(fā)內(nèi)存泄漏
閉包使用不當(dāng)

34.vue、react省容、angular

Vue.js
一個(gè)用于創(chuàng)建 web 交互界面的庫抖拴，是一個(gè)精簡(jiǎn)的 MVVM。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來腥椒。實(shí)際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters

AngularJS
是一個(gè)比較完善的前端MVVM框架阿宅，包含模板，數(shù)據(jù)雙向綁定笼蛛，路由洒放，模塊化，服務(wù)滨砍，依賴注入等所有功能往湿，模板功能強(qiáng)大豐富，自帶了豐富的 Angular指令

react
React 僅僅是 VIEW 層是facebook公司惋戏。推出的一個(gè)用于構(gòu)建UI的一個(gè)庫领追，能夠?qū)崿F(xiàn)服務(wù)器端的渲染。用了virtual dom响逢，所以性能很好绒窑。

35.eval是做什么的

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行
應(yīng)該避免使用eval，不安全舔亭，非常耗性能（2次些膨，一次解析成js語句，一次執(zhí)行）
由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval钦铺，var obj =eval('('+ str +')')

36.null和undefine的區(qū)別

undefine:
表示不存在這個(gè)值订雾，如果變量被聲明了沒有賦值
null：
變量被定義賦值了，但是為空的情況职抡，沒有任何屬性方法和值
在驗(yàn)證null時(shí)，一定要使用　=== 误甚，因?yàn)?==無法分別null 和　undefined

37.對(duì)json的了解

是一種輕量級(jí)的數(shù)據(jù)交換格式
數(shù)據(jù)格式簡(jiǎn)單缚甩，易于讀寫

JSON字符串轉(zhuǎn)換為JSON對(duì)象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSON對(duì)象轉(zhuǎn)換為json字符串

var last=obj.toJSONString();
var last=JSON.stringify(obj);

38.同步和異步的區(qū)別

同步：瀏覽器訪問服務(wù)器請(qǐng)求谱净，用戶看得到頁面刷新，重新發(fā)請(qǐng)求,等請(qǐng)求完擅威，頁面刷新壕探，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作
異步：瀏覽器訪問服務(wù)器請(qǐng)求郊丛，用戶正常操作李请，瀏覽器后端進(jìn)行請(qǐng)求。等請(qǐng)求完厉熟，頁面不刷新导盅，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容

39.漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng) ：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面揍瑟，保證最基本的功能白翻，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)绢片。
優(yōu)雅降級(jí) ：一開始就構(gòu)建完整的功能滤馍，然后再針對(duì)低版本瀏覽器進(jìn)行兼容

40.attribute和property的區(qū)別是什么？

attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性底循；
property就是dom元素在js中作為對(duì)象擁有的屬性巢株。

41.談?wù)剬?duì)ES6的理解

新增了 字符串模板/箭頭函數(shù)/for of（遍歷對(duì)象中的值）/增加了塊級(jí)作用域

42.什么是面向?qū)ο蟮木幊毯兔嫦蜻^程的編程，他們的異同和優(yōu)缺點(diǎn)

面向過程就是對(duì)一個(gè)問題提出解決思路熙涤，然后一步步的列出函數(shù)解決阁苞，依次調(diào)用。
面向?qū)ο缶褪菍?gòu)成問題分解成各個(gè)對(duì)象灭袁，建立對(duì)象的目的不是為了完成一個(gè)步驟猬错，而是為了描敘某個(gè)事物在整個(gè)解決問題的步驟中的行為。
面向?qū)ο笫且怨δ軄韯澐謫栴}茸歧，而不是步驟

43.面向?qū)ο蟮木幊趟枷?/h6>

基本思想是使用封裝倦炒，類，對(duì)象的方法進(jìn)行程序設(shè)計(jì)软瞎。
優(yōu)點(diǎn)：
容易維護(hù)
易擴(kuò)展
開發(fā)工作的重用性逢唤、繼承性高，降低重復(fù)工作量涤浇。
縮短了開發(fā)周期

44.函數(shù)式編程

它具有以下特性：閉包和高階函數(shù)鳖藕、惰性計(jì)算、遞歸只锭、函數(shù)是"第一等公民"著恩、只用"表達(dá)式"

45.箭頭函數(shù)與普通函數(shù)的區(qū)別

this的指向不通