根據(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)單的說(shuō)：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
閉包的作用：
①讀取其他函數(shù)內(nèi)部的變量
②變量保存在內(nèi)存中
注意：
使用過多的閉包會(huì)消耗大量?jī)?nèi)存，造成網(wǎng)頁(yè)的性能問題，可以在函數(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)簽頁(yè)共享。
4.請(qǐng)指出document load和document ready的區(qū)別？
ready：頁(yè)面的文檔結(jié)構(gòu)加載完成，不包括圖片視頻等非文字內(nèi)容。
load：所有頁(yè)面元素都加載完成
ready的速度比load快
5.網(wǎng)站性能優(yōu)化
HTML方面：
①資源文件js css 圖片合并壓縮
②減少頁(yè)面dom操作，操作多的話可以考慮使用虛擬dom
③減少http請(qǐng)求
④使用cdn加速
cdn的作用：cdn可以處理整個(gè)網(wǎng)站 70%-95%的訪問量，從而解決網(wǎng)站的并發(fā)量，簡(jiǎn)單的說(shuō)就是通過在不同地點(diǎn)緩存內(nèi)容，然后通過負(fù)載平衡等技術(shù)將用戶請(qǐng)求定向到最近的緩存服務(wù)器上獲取內(nèi)容，提高用戶訪問網(wǎng)站的響應(yīng)速度。
⑤減少cookie大小
6.從瀏覽器地址欄輸入url到顯示頁(yè)面的步驟
①瀏覽器根據(jù)請(qǐng)求的URL，交給DNS域名解析，找到真實(shí)的ip，交給域名解析。
②服務(wù)器交給后端處理完成后返回的數(shù)據(jù)，瀏覽器接收文件HTML,CSS,JS圖片等。
③瀏覽器對(duì)加載的資源進(jìn)行語(yǔ)法解析，建立相應(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)建渲染樹
⑦布局重繪重排，頁(yè)面完成渲染。
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)頁(yè)已永久移動(dòng)到新位置。
302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過。
4XX：客戶端錯(cuò)誤
400 Bad Request 服務(wù)器無(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í)無(wú)法處理請(qǐng)求（可能是過載或維護(hù)）。
8.對(duì)瀏覽器內(nèi)核的理解
主要分為渲染引擎和js引擎
渲染引擎：主要負(fù)責(zé)取得網(wǎng)頁(yè)的（html，xml，圖片等），整理信息結(jié)合css渲染頁(yè)面，計(jì)算網(wǎng)頁(yè)的顯示方式，瀏覽器內(nèi)核的不同對(duì)網(wǎng)頁(yè)的語(yǔ)法解釋也會(huì)有所不同，所以渲染效果也會(huì)有所不同，這就存在了兼容性的問題。
js引擎：解析和執(zhí)行js來(lái)達(dá)到網(wǎng)頁(yè)的動(dòng)態(tài)交互效果
最開始渲染引擎和js引擎沒有太區(qū)分，后來(lái)越來(lái)越獨(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ì)阻塞頁(yè)面的 onload事件
②搜索引擎不能夠解讀 iframe 頁(yè)面，不利于 seo
③iframe和主頁(yè)面共享連接池，然而瀏覽器對(duì)相同域的鏈接是有限制的，所以這會(huì)影響頁(yè)面的并行加載。
④如果想要繞開以上的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)頁(yè)
另外是書寫習(xí)慣的差別
XHTML 元素必須被正確地嵌套，閉合，區(qū)分大小寫，文檔必須擁有根元素
簡(jiǎn)單的說(shuō)，xhtml更加嚴(yán)格。
13.Doctype作用，嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
Doctype處于文檔的最前面，用來(lái)告訴瀏覽器的解析器，文檔的類型。
嚴(yán)格模式的js運(yùn)行和排版是按照瀏覽器支持的最高標(biāo)準(zhǔn)的。
混雜模式就是兼容性模式，當(dāng)頁(yè)面兼容不好的時(shí)候，就可以選用這種模式，防止頁(yè)面布局錯(cuò)落無(wú)法站點(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繪制出來(lái)的圖片有獨(dú)立dom節(jié)點(diǎn)，可以綁定事件，是矢量圖，放大圖片不會(huì)有鋸齒。
canvas繪制出來(lái)的圖片是一個(gè)畫布，等于就是一張圖，放大會(huì)產(chǎn)生鋸齒。
17.css sprite是什么，有什么優(yōu)缺點(diǎn)
就是將多個(gè)小圖標(biāo)拼接在一張圖片上，減少對(duì)圖片的請(qǐng)求，使用 background-size來(lái)定位到相關(guān)圖片上。
優(yōu)點(diǎn)：
減少HTTP請(qǐng)求數(shù)，極大地提高頁(yè)面加載速度
增加圖片信息重復(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.總體來(lái)說(shuō)：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)瀏覽器之間的頁(yè)面顯示差異。
當(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.說(shuō)說(shuō)你對(duì)作用于鏈的理解
作用域鏈中的變量都是向上訪問的，變量訪問到windows對(duì)象后終止，向下訪問是不允許的。
簡(jiǎn)單的說(shuō)，作用域就是變量函數(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)上綁定事件來(lái)代替子節(jié)點(diǎn)事件的方法，就叫做事件委托。
29.對(duì)this的理解
this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）
如果有new關(guān)鍵字，this指向new出來(lái)的那個(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)了一部分本來(lái)由服務(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è)置代理頁(yè)面
一般由后臺(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 交互界面的庫(kù)，是一個(gè)精簡(jiǎn)的 MVVM。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)。實(shí)際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters
AngularJS
是一個(gè)比較完善的前端MVVM框架，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，依賴注入等所有功能，模板功能強(qiáng)大豐富，自帶了豐富的 Angular指令
react
React 僅僅是 VIEW 層是facebook公司。推出的一個(gè)用于構(gòu)建UI的一個(gè)庫(kù)，能夠?qū)崿F(xiàn)服務(wù)器端的渲染。用了virtual dom，所以性能很好。
35.eval是做什么的
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行
應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(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)?==無(wú)法分別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)求，用戶看得到頁(yè)面刷新，重新發(fā)請(qǐng)求,等請(qǐng)求完，頁(yè)面刷新，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作
異步：瀏覽器訪問服務(wù)器請(qǐng)求，用戶正常操作，瀏覽器后端進(jìn)行請(qǐng)求。等請(qǐng)求完，頁(yè)面不刷新，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容
39.漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
漸進(jìn)增強(qiáng) ：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(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ū)ο笫且怨δ軄?lái)劃分問題，而不是步驟
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的指向不通
