前端試題整理

一：什麼是閉包？閉包的用處？

（1）閉包就是能夠讀取其他函數内部變量的函數。在本質上，閉包就

是将函數内部和函數外部連接配接起來的一座橋梁。

（2）閉包可以用在許多地方。它的最大用處有兩個，一個是可以讀取函數内部的變量，另一個就是讓這些變量的值始終保持在記憶體中

閉包的特性：

①.封閉性：外界無法通路閉包内部的資料，如果在閉包内聲明變量，外界是無法通路的，除非閉包主動向外界提供通路接口；

②.持久性：一般的函數，調用完畢之後，系統自動登出函數，而對于閉包來說，在外部函數被調用之後，閉包結構依然儲存在系統中，閉包中的資料依然存在，進而實作對資料的持久使用。

閉包的缺點就是常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。

vue面試題

一：簡述vue的了解

Vue是一個漸進式的輕量級架構，核心是關注視圖層，是一個建構資料驅動的頁面，将資料綁定視圖上，vue提供資料和視圖雙向綁定原理使我們開發頁面更簡單，修改資料，視圖自動更新。 vue是子產品化群組塊化，如果頁面要更改資料之類的，就隻在元件來修改就可以，vue有幾大特點：（1） 簡潔 （2） 輕量 （3）快速 （4） 資料驅動 （5） 子產品化 （6） 元件化Vue

通過添加元件系統、用戶端路由、大規模狀态管理來建構一個完整的架構，可以通過豐富的指令擴充模闆，可以通過各種各樣的插件來增強功能

過濾器是針對一些資料 進行篩選、過濾、格式化等相關的處理，變成我們想要的資料。

過濾器的本質 就是一個帶有參數帶有傳回值的方法。

Vue元件的過程：元件可以提升整個項目的開發效率，能夠把頁面拆分為多個獨立的子產品，解決了效率低，難維護，複用性，等問題。

Vue是一個資料驅動頁面的一個架構，基于MVVM模式，M指的是資料，V值得是視圖，VM是視圖模型，将資料綁定視圖上（雙向綁定）

Vue.js是一套建構使用者界面的漸進式（沒有強主張，沒有多做職責之外的事。）架構。

Vue的生命周期

   生命周期就是鈎子函數，主要是在什麼時候來調用這些函數，比如是在建立，挂載，更新，銷毀完成之後還是之前，初始化資料完成之前還是之後等

   從開始建立、初始化資料、編譯模闆、挂載Dom→渲染、更新→渲染、解除安裝等一系列

過程，我們稱這是 Vue 的生命周期

beforeCreate : 資料聲明還沒被調用時使用

created : vue渲染完畢後，所有資料和方法初始化後調用

mounted : 挂載元素之後

updated : 如果對資料統一處理，在這裡寫上相應函數

beforeDestroy : 可以做一個确認停止事件的确認框

nextTick : 更新資料後立即操作dom

BeforeMount 挂載開始之前被調用

1. vue生命周期的作用是什麼？

答：它的生命周期中有多個事件鈎子，讓我們在控制整個Vue執行個體的過程時更容易形成好的邏輯。

2. 第一次頁面加載會觸發哪幾個鈎子？

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鈎子

3.vue的優點是什麼？

低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。 可重用性。你可以把一些視圖邏輯放在一個ViewModel裡面，讓很多view重用這段視圖邏輯。 獨立開發。開發人員可以專注于業務邏輯和資料的開發（ViewModel），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xml代碼。 可測試。界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。 5.vue元件之間的傳值  

1.父元件給子元件傳值 （props） 

2.子元件給父元件傳值 （emit）

3.兄弟元件間的傳值（on和emit）

6.架構的好處

提高代碼的品質，開發速度

提高代碼的複用率

降低子產品之間的耦合度（高内聚低耦合）

二。Vue.js開發環境

1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘寶npm鏡像安裝相關依賴

 在cmd裡直接輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回車，等待安裝...

3.安裝全局vue-cli腳手架,用于幫助搭建所需的模闆架構

在cmd裡 1)輸入：cnpm install -g vue-cli，回車，等待安裝...

            2).輸入：vue，回車，若出現vue資訊說明表示成功

4.建立項目

在cmd裡輸入：vue init webpack vue_test(項目檔案夾名)，回車，等待一小會兒

5.安裝依賴

在cmd裡  1).輸入：cd vue_test（項目名），回車，進入到具體項目檔案夾

       2).輸入：cnpm install，回車，等待一小會兒

回到項目檔案夾，會發現項目結構裡，多了一個node_modules檔案夾（該檔案裡的内容就是之前安裝的依賴）

6.測試環境是否搭建成功

方法1：在cmd裡輸入：cnpm run dev

方法2：在浏覽裡輸入：localhost:8080(預設端口為8080)

三、vue中常見的指令有哪些?

v-for/v-if/v-else-if/v-else/v-on/v-bind/v-show/v-html/v-model

四、雙向資料綁定是如何實作的？好處有哪些

v-model

好處？

元件是一個具有特定功能的 可被反複使用的視圖，

各個指令實作資料和視圖的綁定，解耦（降低耦合度的過程）

元件有什麼好處？

封裝好了元件，提高了代碼複用率

提高了代碼的可讀性

降低了測試難度

五、Vue執行個體中常見的屬性有哪些？

data 存儲資料

methods 方法

directives 指令

filters 過濾器/管道

router 路由

props 接收調用該元件時傳來的資料

watch 監聽雙向資料綁定的資料的變化

computed 用在邏輯複雜的地方，計算屬性是基于它們的依賴進行緩存的，提高性能

六、過濾器

本質是一個帶有參數 有傳回值的方法;支援多重過濾

<any>{{表達式 | myFilter(arg1,arg2) | myFilter2}}</any>

七、refs

1、給子元件要指定一個屬性 <son ref="mySon"></son>

2、通過引用名字mySon怎麼得到子元件的執行個體？ this.$refs.mySon

1Vue元件化的了解

首先元件的基本構成分别是：樣式結構，行為邏輯，資料。web中的元件其實就是頁面組成的一部分，每個元件都會提供一些對外接口，允許使用者設定和調整參數屬性，可以将不同功能的元件結合在一起，快速的構成一個符合實際需求的應用。

2Vue路由的了解

首先Vue的單頁面應用是基于路由群組件的，路由用于設定通路路徑，并将路徑群組件映射起來。傳統的頁面應用，是通過超連結來實作頁面的切換和跳轉。在Vue-router中是路徑之間的切換，也就是元件的切換。

3你對Vue鈎子函數的了解

vue-router的導航鈎子主要用來攔截導航，讓他完成跳轉或取消。

4如何讓css隻在目前元件中起作用

在每一個vue元件中都可以定義各自的css，js，如果希望元件内寫的css隻對目前元件起作用，隻需要在style中寫入scoped：<style scoped></style>

5created和mounted差別

created執行個體建立完成之後的鈎子函數；$el屬性不可見為undefined

mounted将編譯好的HTML挂載到頁面完成後執行的鈎子函數，在整個執行個體生命周期中隻執行一次；$el已建立，同時DOM結構已生成

6mounted和created分别什麼時候用

隻有ajax資料請求放在created裡面就可以了，這樣可以及早發請求擷取資料；如果有依賴DOM的情況下，就放到mounted裡面

7Vue和angular分别采用什麼技術實作雙向資料綁定？

AngularJS 采用“髒值檢測”的方式，資料發生變更後，對于所有的資料和視圖的綁定關系進行一次檢測，識别是否有資料發生了改變，有變化進行處理，可能進一步引發其他資料的改變，是以這個過程可能會循環幾次，一直到不再有資料變化發生後，将變更的資料發送到視圖，更新頁面展現。如果是手動對 ViewModel 的資料進行變更，為確定變更同步到視圖，需要手動觸發一次“髒值檢測”。

VueJS 則使用 ES5 提供的 Object.defineProperty() 方法，監控對資料的操作，進而可以自動觸發資料同步。并且，由于是在不同的資料上觸發同步，可以精确的将變更發送給綁定的視圖，而不是對所有的資料都執行一次檢測。

8v-show和v-if差別

v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隐藏

v-if指令是直接銷毀和重建DOM達到讓元素顯示和隐藏的效果

一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。是以，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運作時條件不太可能改變，則使用 v-if 較好

9<keep-alive></keep-alive>的作用是什麼

<keep-alive></keep-alive> 包裹動态元件時，會緩存不活動的元件執行個體,主要用于保留元件狀态或避免重新渲染。

大白話: 比如有一個清單和一個詳情，那麼使用者就會經常執行打開詳情=>傳回清單=>打開詳情…這樣的話清單和詳情都是一個頻率很高的頁面，那麼就可以對清單元件使用<keep-alive></keep-alive>進行緩存，這樣使用者每次傳回清單的時候，都能從緩存中快速渲染，而不是重新渲染

10Vue中引入元件的步驟

1.采用ES6的import ... from ...文法或CommonJS的require()方法引入元件

2.對元件進行注冊,代碼如下

// 注冊Vue.component('my-component', {  template: '<div>A custom component!</div>'})

3.使用元件<my-component></my-component>

11請列舉出3個Vue中常用的生命周期鈎子函數

created: 執行個體已經建立完成之後調用,在這一步,執行個體已經完成資料觀測, 屬性和方法的運算, watch/event事件回調. 然而, 挂載階段還沒有開始, $el屬性目前還不可見

mounted: el被新建立的 vm.$el 替換，并挂載到執行個體上去之後調用該鈎子。如果 root 執行個體挂載了一個文檔内元素，當 mounted 被調用時 vm.$el 也在文檔内。

activated::keep-alive元件激活時調用

12請簡述下Vuex的原理和使用方法

一個應用可以看作是由上面三部分組成: View, Actions,State,資料的流動也是從View => Actions => State =>View 以此達到資料的單向流動.但是項目較大的, 元件嵌套過多的時候, 多元件共享同一個State會在資料傳遞時出現很多問題.Vuex就是為了解決這些問題而産生的.

Vuex可以被看作項目中所有元件的資料中心,我們将所有元件中共享的State抽離出來,任何元件都可以通路和操作我們的資料中心.

上圖可以很好的說明Vuex的組成,一個執行個體化的Vuex.Store由state, mutations和actions三個屬性組成:

state中儲存着共有資料

改變state中的資料有且隻有通過mutations中的方法,且mutations中的方法必須是同步的

如果要寫異步的方法,需要些在actions中, 并通過commit到mutations中進行state中資料的更改.

13vue與angular的差別

vue的雙向邦定是基于ES5 中的 3.getter/setter來實作的，而angular而是由自己實作一套模版編譯規則，需要進行所謂的“髒”檢查，vue則不需要。是以，vue在性能上更高效，但是代價是對于ie9以下的浏覽器無法支援。

14active-class是哪個元件的屬性？

vue-router子產品的router-link元件

15怎麼定義vue-router的動态路由？怎麼擷取傳過來的動态參數

1、路由配置檔案找到對應的路由，在path屬性上添加/:id

2、在需要出發跳轉的頁面router-link配置實際要傳遞的參數資料<router-link :to="{ name:'detail', params: { id: item.id } }">

3、在目标元件通過路由對象下的$route.params進行接收

16vue-router有哪幾種導航鈎子

鈎子函數種類：

router全局：beforeEach、afterEach

單個路由：beforeEnter

元件内的鈎子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

鈎子函數接收的參數：

to：要進入的目标，路有對象 到哪裡去

from：正要離開導航的路由對象 從哪裡來

next：用來決定跳轉或取消導航

17在vue.cli中的安裝使用步驟是？有哪幾大特性？

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：然後在元件的style标簽加上lang屬性 ，例如：lang=”scss”

18vue-router是什麼？它有哪些元件

vue的路由插件。router-link、router-view

19請說出vue.cli項目中src目錄每個檔案夾和檔案的用法

assets檔案夾是放靜态資源；components是放元件；router是定義路由相關的配置;view視圖；app.vue是一個應用主元件；main.js是入口檔案

20什麼是vue生命周期

Vue 執行個體從建立到銷毀的過程，就是生命周期。也就是從開始建立、初始化資料、編譯模闆、挂載Dom→渲染、更新→渲染、解除安裝等一系列過程，我們稱這是 Vue 的生命周期。

vue生命周期的作用是什麼？它的生命周期中有多個事件鈎子，讓我們在控制整個Vue執行個體的過程時更容易形成好的邏輯。

21vue生命周期總共有幾個階段

它可以總共分為8個階段：建立前/後, 載入前/後,更新前/後,銷毀前/銷毀後

22第一次頁面加載會觸發哪幾個鈎子

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鈎子

23DOM 渲染在 哪個周期中就已經完成

DOM 渲染在 mounted 中就已經完成了

24簡單描述每個周期具體适合哪些場景

生命周期鈎子的一些使用方法： beforecreate : 可以在這加個loading事件，在加載執行個體時觸發 created : 初始化完成時的事件寫在這裡，如在這結束loading事件，異步請求也适宜在這裡調用 mounted : 挂載元素，擷取到DOM節點 updated : 如果對資料統一處理，在這裡寫上相應函數 beforeDestroy : 可以做一個确認停止事件的确認框 nextTick : 更新資料後立即操作dom

arguments是一個僞數組，沒有周遊接口，不能周遊

25computed VS methods

你可能已經注意到我們可以通過在表達式中調用方法來達到同樣的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在元件中 methods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  } }

我們可以将同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果确實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性隻有在它的相關依賴發生改變時才會重新求值。這就意味着隻要 message 還沒有發生改變，多次通路 reversedMessage 計算屬性會立即傳回之前的計算結果，而不必再次執行函數。

這也同樣意味着下面的計算屬性将不再更新，因為 Date.now() 不是響應式依賴：

computed: {  now: function () {    return Date.now()  } }

相比之下，每當觸發重新渲染時，調用方法将總會再次執行函數。

我們為什麼需要緩存？假設我們有一個性能開銷比較大的的計算屬性 A，它需要周遊一個巨大的數組并做大量的計算。然後我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們将不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。

26computed VS watch

Vue 提供了一種更通用的方式來觀察和響應 Vue 執行個體上的資料變動：偵聽屬性。當你有一些資料需要随着其它資料變動而變動時，你很容易濫用 watch——特别是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是指令式的 watch 回調。細想一下這個例子：

<div id="demo">{{ fullName }}</div>

var vm = new Vue({  el: '#demo',  data: {    firstName: 'Foo',    lastName: 'Bar',    fullName: 'Foo Bar'  },  watch: {    firstName: function (val) {      this.fullName = val + ' ' + this.lastName    },    lastName: function (val) {      this.fullName = this.firstName + ' ' + val    }  } })

jquery總結

一.對jquery的了解

jQuery是一個輕量級的javascript架構，極大的簡化了js的程式設計。

1.首先jQuery提供了強大的元素選擇器。用于擷取html頁面中封裝了html元素的jQuery對象。像常見的選擇器有:基本選擇器，層次選擇器，過濾選擇器，表單選擇器。

2.第二點就是jQuery提供了對css樣式操作的支援，像對class屬性的增加删除切換操作。還有對單個樣式操作的支援的css方法，提供了一種簡潔統一的操作樣式的方法。

3.第三點就是jQuery出色的DOM操作的封裝，極大的簡化了javascript的對dom節點的增删改查操作，讓我們可以使用一種更加簡潔的方法來操作節點。

4.第四點就是jQuery還是一個為事件處理特點設計的架構，提供了靜态綁定事件和動态綁定事件，完善了事件的處理機制。

5.jQuery解決了大量浏覽器之間的相容性的問題。

6.jQuery極大的簡化ajax程式設計，提供了一種更加簡潔，統一的程式設計方式。

7.jQuery内置了一些簡單有用的内置動畫，像常見的slideDown/slideUp,hide/show,fadeIn/fadeOut等，還支援基于定位機制使用animate來自定義動畫效果。

二.jQuery和Zepto的差別和用途

jQuery主要用于pc端，Zepto主要用于移動端，Zepto更加小巧

三.jquery裡的ready與window.onload的差別的差別？

  ready：

  1.具有簡寫寫法

  2.一個HTML頁面中允許編寫多個

  3.(效率高)需要在DOM加載後就可以執行

  window.onload

  1.沒有任何簡寫

  2.一個HTML頁面中隻能編寫一個

  3.(效率低)必須在頁面中所有内容都加載完畢後,才能執行

四．請簡要說明jQuery架構的顯著特點。

答：jQuery強調的理念是寫的少，做的多。其主要特點有：輕量級、強大的選擇器、漂亮的DOM操作封裝、可靠的事件處理機制、完善的Ajax處理、出色的浏覽器相容性、鍊式操作方式、豐富的插件支援、開源産品。

五．jQuery如何解決跨域問題？

答：借助JSONP這個非官方的協定，其允許在伺服器端內建script tags傳回至用戶端，通過callback的形式實作跨域通路JSONP即JSON with Padding。如果要進行跨域請求，我們可以通過使用html的script标記來進行跨域請求，并在響應中傳回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。

六．如何編寫高性能的jQuery代碼？

答：定義jQuery變量的時候添加var關鍵字；DOM操作請務必記住緩存（cache）；盡量使用鍊式操作；盡量把一些代碼都整合到一起；避免使用全局類型的選擇器；盡量使用.on方法，因為其它任何方法都是最終使用.on方法來實作的；盡量使用最新版本的jQuery架構類庫。 

七．jQuery與jQuery UI有啥差別？

答：

（1）jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

（2）jQuery UI則是在jQuery的基礎上，利用jQuery的擴充性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。

八．jQuery鍊式調用的最大優點是什麼？

答：避免頻繁操作的DOM，鍊式調用可以實作先緩存再操作。

九．jQuery架構的源碼看過嗎？能不能簡單說一下它的實作原理？

    首先是采用閉包技術，然後用window作為形參傳入

答：jQuery架構通過改變javascript編碼方式來建立了全新的程式設計理念。譬如關于jQuery聲明的流程：先查找（建立）jQuery對象，然後調用jQuery對象的方法完成我們需要完成的工作。jQuery就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的，這個流程就是jQuery的編碼邏輯核心。 

十．jQuery中如何将對象轉化為json字元串，然後再轉化回來？

答：可以通過JSON.stringify方法把一個對象轉換成json字元串，再通過JSON.parse方法把一個json字元串解析成對象。 

十一．jQuery中的load方法一般怎麼用的？

答：load方法一般在載入遠端HTML代碼并插入到DOM中的時候用，通常用來從Web伺服器上擷取靜态的資料檔案。如果要傳遞參數的話，可以使用$.get()或$.post()方法。

十二．描述一下.get()、[]和.eq()方法的差別。

答：eq傳回原生jQuery對象，截取某些el元素生成jQuery新對象；get和[]傳回的都是原生的DOM對象，原理一緻；get和[]差別是get是通過jQuery對象的方法擷取，[]是根據jQuery是一個數組對象擷取。

十三。jQuery的了解：

jQuery是一個輕量級的javascript架構，極大的簡化了js的程式設計。

1.首先jQuery提供了強大的元素選擇器。用于擷取html頁面中封裝了html元素的jQuery對象。像常見的選擇器有:基本選擇器，層次選擇器，過濾選擇器，表單選擇器。

2.第二點就是jQuery提供了對css樣式操作的支援，像對class屬性的增加删除切換操作。還有對單個樣式操作的支援的css方法，提供了一種簡潔統一的操作樣式的方法。

3.第三點就是jQuery出色的DOM操作的封裝，極大的簡化了javascript的對dom節點的增删改查操作，讓我們可以使用一種更加簡潔的方法來操作節點。

 4.第四點就是jQuery還是一個為事件處理特點設計的架構，提供了靜态綁定事件和動态綁定事件，完善了事件的處理機制。

5.jQuery解決了大量浏覽器之間的相容性的問題。

6.jQuery極大的簡化ajax程式設計，提供了一種更加簡潔，統一的程式設計方式。

7.jQuery内置了一些簡單有用的内置動畫，像常見的slideDown/slideUp,hide/show,fadeIn/fadeOut等，還支援基于定位機制使用animate來自定義動畫效果。

十四、 bind()、live()、one()和on()的差別?

       * bind() - 綁定事件

       * live() - 老版本具有,新版本移除

       * one() - 隻綁定一次事件

       * on() - 是jQuery底層提供的機制

十五：jquery裡的ready與window.onload的差別的差別？

  ready

      具有簡寫寫法

  一個HTML頁面中允許編寫多個

  (效率高)需要在DOM加載後就可以執行

      window.onload

      沒有任何簡寫

  一個HTML頁面中隻能編寫一個

  (效率低)必須在頁面中所有内容都加載完畢後,才能執行

十六：jQuery中如何将對象轉化為json字元串，然後再轉化回來？

答：可以通過JSON.stringify方法把一個對象轉換成json字元串，再通過JSON.parse方法把一個json字元串解析成對象。

ajax方面

一．Ajax是什麼？

答：是指一種建立互動式網頁應用的網頁開發技術。通過在背景與伺服器進行少量資料交換，AJAX可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

什麼是ajax，為什麼要使用Ajax（請談一下你對Ajax的認識）?

答案：Ajax是用戶端請求伺服器資料的一種技術。是一種向伺服器發送異步請求的一種技術，從伺服器獲得資料，Ajax技術不必重新整理整個頁面，隻需對頁面的局部進行更新，可以節省網絡帶寬，提高頁面的加載速度，進而縮短使用者等待時間，改善使用者體驗。

為什麼要用ajax：Ajax應用程式的優勢在于：

• 通過異步模式，提升了使用者體驗

• 優化了浏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了帶寬占用

ajax引擎在用戶端運作，承擔了一部分本來由伺服器承擔的工作，進而減少了大使用者量下的伺服器負載。

二．同步請求和異步請求的差別？

答：

• 同步：送出請求→等待伺服器處理→處理完畢傳回，這個期間用戶端浏覽器不能幹任何事。

• 異步：請求通過事件觸發→伺服器處理（這是浏覽器仍然可以作其他事情）→處理完畢。

三．異步加載的方式有哪些？

答：

（1）defer，隻支援IE；

（2）async；

（3）建立script，插入到DOM；

四、 JSON 的了解

輕量級資料互動格式，可以形成複雜的嵌套格式，解析非常友善

五、請解釋 ajax 的工作原理

Ajax 的工作原理相當于在使用者和伺服器之間加了—個中間層，使使用者操作與伺服器響應異步化。這樣把以前的一些伺服器負擔的工作轉嫁到用戶端，利于用戶端閑置的處理能力來處理，減輕伺服器和帶寬的負擔，進而達到節約 ISP 的空間及帶寬租用成本的目的。簡單來說通過 XmlHttpRequest 對象來向伺服器發異步請求，從伺服器獲得資料，然後用javascript 來操作 DOM 而更新頁面。

六、ajax優點：

1.無重新整理更新資料，減少使用者等到時間，更好的使用者體驗

2.異步與伺服器通信，無需打斷使用者，響應更加迅速

3.可以把伺服器的一些負擔轉到用戶端，利用用戶端閑置的能力來處理，減輕伺服器和帶寬的負擔，節約空間和寬帶租用成本。并且減輕伺服器的負擔，AJAX的原則是“按需取資料”，可以最大程度的減少備援請求和響應對伺服器造成的負擔，提升站點性能。

4.基于标準化，廣泛被支援

二：AJAX最大的特點是什麼。

Ajax可以實作動态重新整理（局部重新整理）頁面。就是能在不更新整個頁面的前提下維護資料。這使得Web應用程式更為迅捷地回應使用者動作，并避免了在網絡上發送那些沒有改變過的資訊。

七、ajax缺點

1.破壞了前進後退功能，使用者往往通過後退按鈕來取消上一步操作，但是使用ajax無法實作。可以使用Gmail來解決這個問題，它隻是采用的一個比較笨但是有效的辦法，即使用者單擊後退按鈕通路曆史記錄時，通過建立或使用一個隐藏的IFRAME來重制頁面上的變更。

2.安全問題。ajax技術就如同對企業資料建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。ajax的邏輯可以對用戶端的安全掃描技術隐藏起來，允許黑客從遠端伺服器上建立新的攻擊。還有自身受到如跨站腳本攻擊，SQL注入等攻擊。

3.對搜尋引擎支援較弱

4.一些手持裝置不能很好的支援等

八、json與jsonp的差別？

  Json:是一種輕量級的資料交換格式。它是基于JavaScript的一個子集。資料格式簡單, 易于讀寫, 占用帶寬小

  Jsonp實作資料跨域傳輸的一種手段

九、解釋jsonp的原理，以及為什麼不是ajax

動态建立一個script标簽，利用script标簽src屬性通路沒有限制，實作跨域。

九、實作原生ajax的四個步驟？

  (1)建立XHR對象

   var xhr = new XMLHttpRequest();

  (2)監聽XHR的狀态改變

   xhr.onreadystatechange = function(){}

  (3)連接配接到Web伺服器

   xhr.open(請求方法, URL, 是否為異步請求);

  (4)發送請求消息

 xhr.send( 上傳資料 );

十、GET和POST的差別，何時使用POST？

GET：一般用于資訊擷取

 POST：一般用于修改伺服器上的資源

 (1) 傳遞給伺服器端的參數的處理不同

    GET請求,參數跟在URL後面

    POST請求,參數放在請求體中送出

 (2) 參數的限制

    GET請求,對參數的大小和長度有限制

    POST請求,沒有限制

 (3) 安全性

    GET請求:安全性很差

    POST請求:相對安全

使用 POST 請求：

無法使用緩存檔案（更新伺服器上的檔案或資料庫）

向伺服器發送大量資料（POST 沒有資料量限制）

發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

十一、http請求由三部分組成，分别是：請求行、消息報頭、請求正文

HTTP（超文本傳輸協定）是一個基于請求與響應模式的、無狀态的、應用層的協定，常基于TCP的連接配接方式，HTTP1.1版本中給出一種持續連接配接的機制，絕大多數的Web開發，都是建構在HTTP協定之上的Web應用。

履歷面試題：

一．HTML5和CSS3新特性：

CSS3新特性：圓角border-radius，陰影 box-shadow，旋轉transform，動畫animation，過渡子產品transition，

HTML5新特性：視訊video ，音頻audio，畫布canvas，表單控件屬性data，url，email、file、time。新标簽footer，nav，header，section

二．對W3C的了解

1. 對于結構要求：标簽閉合，标簽字母要小寫，标簽不要亂嵌套

2. 對于css和js來說：使用外鍊css和js，結構，表現，行為分離三塊，結構清晰，提高頁面加載速度，使用者體驗提高

三．對Less了解

 Less語言是css的預處理器，動态性語言，可以聲明變量，存儲的值可以随時調用，還可以值運算，函數等方式。

四．WebStorage和cookie的差別

 webStorage是html5的屬性，分别是sessionStorage和localStorage

相同點：都是儲存在浏覽器端，且同源的。

1.存儲的大小不一樣，cookie存儲小，數量限制在20個，資料最多不能超過4k，webStorage存儲比較大，能達到5M或者更大。

2.共享方式，cookie在同源下隻要沒過期就會一直共享，localStorage在同源中沒被删除也會共享，sessionStorage在視窗關閉之前在同一個視窗同源下才會共享

3.cookie始終在同源的http請求中攜帶，而sessionStorage和localStorage不會自動把資料發送給伺服器，僅在本地儲存

4.資料的有效期不一樣，  sessionStorage：僅在目前的浏覽器視窗關閉有效

 localStorage：始終有效，視窗或浏覽器關閉也一直儲存，是以用作持久資料

 Cookie：隻在設定的cookie過期時間之前一直有效，即時視窗和浏覽器關閉

五．你對ajax的了解

 Ajax是用戶端向伺服器發送異步請求資料的一種技術，從伺服器擷取資料，ajax不必重新整理整個頁面，隻需對局部頁面進行更新，提高頁面的加載速度，進而縮短使用者等待時間，改善使用者體驗。

Ajax優點：

1. 無需重新整理就可以更新資料，減少使用者等待時間，更好的使用者體驗

2. 異步與伺服器通信，無需打斷使用者，響應更加迅速

3. 可以把伺服器端的一些負擔轉到用戶端，利用用戶端閑置的時間來處理。減去伺服器的壓力

六．講一下MVVM和MVC模式

MVVM模式：

Model（資料模型）負責對資料的存和取，View（視圖負責頁面展示），ViewModel（視圖資料模型，負責業務邏輯處理），MVVM模式是通過視圖模型viewModel來實作連接配接，view和Model是通過viewModel實作資料雙向綁定，分離視圖和資料模型

優點：1主要目的是分離視圖和模型

      2降低代碼耦合度，提高視圖或者邏輯的複用性

      3提高了子產品的可測試性

MVC模式：Model（模型）處理資料，view（視圖）展示資料的界面，controller（控制器）連結模型和視圖的橋梁

MVC是一種業務邏輯，資料，界面顯示分離的方法組織代碼，将業務邏輯聚集到一個部件裡面，在改進界面及使用者互動的同時不需要重新編寫業務邏輯。實作分離資料模型和視圖的代碼。

優點：低耦合，複用性高，可維護性高，分離視圖和模型

MVC和MVVM的差別：

 MVC的控制器變成MVVM的視圖模型，MVVM解決了MVC大量的DOM操作使頁面渲染性能降低，加載速度變慢，影響使用者體驗，當模型Model頻繁發生變化，開發者需要主動更新視圖，MVC的控制器不能直接改變視圖，視圖還要依賴于模型，所有MVVM解決了這些問題

七．SQL的了解

 SQL是結構化查詢語言，是一種資料庫查詢語言，和資料庫通信的語言

八．MySQL的了解

 MySQL是關系型資料庫，特點：開源，免費，輕量，跨平台

 優點：1.免費開源，節約成本

       2.性能優越，執行速度非常快

       3.操作簡單，學習成本低

       4.應用廣泛

九．git的了解

 Git是建構代碼管理工具，

優點：1.适合分布式開發，強調個體

      2.公共伺服器壓力和資料量都不會太大

      3.速度快，靈活

      4.任意兩個開發者之間可以很容易的解決沖突

      5.離線工作

十．Git和svn的差別

 1.git是分布式的，svn不是

 2.git和svn的分支不同

 3.git的内容完整性要高于svn

git和svn的差別是什麼？

http://blog.csdn.net/saint1126/article/details/5953339

1.GIT是分布式的，SVN不是：

2.GIT把内容按中繼資料方式存儲，而SVN是按檔案：

3.GIT分支和SVN的分支不同：

4.GIT沒有一個全局的版本号，而SVN有：

5.GIT的内容完整性要優于SVN：

1.SVN優缺點

優點： 

 1、管理友善，邏輯明确，符合一般人思維習慣。 

 2、易于管理，集中式伺服器更能保證安全性。 

 3、代碼一緻性非常高。 

 4、适合開發人數不多的項目開發。 

缺點： 

 1、伺服器壓力太大，資料庫容量暴增。 

 2、如果不能連接配接到伺服器上，基本上不可以工作，看上面第二步，如果伺服器不能連接配接   上，就不能送出，還原，對比等等。 

 3、不适合開源開發但 是一般集中式管理的有非常明确的權限管理機制（例如分支通路限制），可以實作分層管理，進而很好的解決開發人數衆多的問題。

2.Git優缺點

優點： 

1、适合分布式開發，強調個體。 

2、公共伺服器壓力和資料量都不會太大。 

3、速度快、靈活。 

4、任意兩個開發者之間可以很容易的解決沖突。 

5、離線工作。 

缺點： 

1、學習周期相對而言比較長。 

2、不符合正常思維。 

3、代碼保密性差，一旦開發者把整個庫克隆下來就可以完全公開所有代碼和版本資訊。

十一．Vue的了解

  Vue是一套用于建構使用者界面的漸進式架構，可以為複雜的單頁面應用提供驅動，支援元件化，可以将頁面封裝成很多個元件，資料驅動加元件化的前端開發，通過簡單的API實作響應式的資料綁定群組合的視圖元件，核心是關注視圖層，是一個建構資料驅動頁面的一個架構，将資料綁定視圖上，vue提供資料和視圖雙向綁定原理使我們開發頁面更簡單，修改了資料，視圖會自動更新。Vue是子產品化群組件化，如果頁面要更新資料，在元件來修改就可以。

Vue有幾個特點：1簡潔2輕量3快速4子產品化5元件化6資料驅動

Vue元件的過程：元件可以提升整個項目的開發效率，能夠把頁面拆分為多個獨立的子產品，解決了效率低，難維護，複用性，等問題。

Vue的生命周期

   生命周期就是鈎子函數，主要是在什麼時候來調用這些函數，比如是在建立，挂載，更新，銷毀完成之後還是之前，初始化資料完成之前還是之後等

從開始建立、初始化資料、編譯模闆、挂載Dom→渲染、更新→渲染、解除安裝等一系列

過程，我們稱這是 Vue 的生命周期

beforeCreate : 資料聲明還沒被調用時使用

created : vue渲染完畢後，所有資料和方法初始化後調用

mounted : 挂載元素之後

updated : 如果對資料統一處理，在這裡寫上相應函數

beforeDestroy : 可以做一個确認停止事件的确認框

nextTick : 更新資料後立即操作dom

BeforeMount 挂載開始之前被調用

vue生命周期的作用是什麼？

答：它的生命周期中有多個事件鈎子，讓我們在控制整個Vue執行個體的過程時更容易形成好的邏輯。

第一次頁面加載會觸發哪幾個鈎子？

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鈎子

十二．jQuery的了解

 jQuery是一個輕量級的javascript架構，極大的簡化了js的程式設計。

1.首先jQuery提供了強大的元素選擇器。用于擷取html頁面中封裝了html元素的jQuery對象。像常見的選擇器有:基本選擇器，層次選擇器，過濾選擇器，表單選擇器。

2.第二點就是jQuery提供了對css樣式操作的支援，像對class屬性的增加删除切換操作。還有對單個樣式操作的支援的css方法，提供了一種簡潔統一的操作樣式的方法。

3.第三點就是jQuery出色的DOM操作的封裝，極大的簡化了javascript的對dom節點的增删改查操作，讓我們可以使用一種更加簡潔的方法來操作節點。

4.第四點就是jQuery還是一個為事件處理特點設計的架構，提供了靜态綁定事件和動态綁定事件，完善了事件的處理機制。

5.jQuery解決了大量浏覽器之間的相容性的問題。

6.jQuery極大的簡化ajax程式設計，提供了一種更加簡潔，統一的程式設計方式。

7.jQuery内置了一些簡單有用的内置動畫，像常見的slideDown/slideUp,hide/show,fadeIn/fadeOut等，還支援基于定位機制使用animate來自定義動畫效果。

十三：webpack和gulp的了解

Gulp 是一個任務管理工具，讓簡單的任務更清晰，讓複雜的任務易于掌控，對代碼進行建構的工具

webpack是一個前端子產品化方案，更側重子產品打包，webpack是一款子產品加載兼打包工具，它可以将js、jsx、coffee、樣式sass、less，圖檔等作為子產品來使用和處理。

十四：為什麼離開上一家公司

 1.與自己的規劃不符合了，需要重新調整自己

 2.自己嘗試新的挑戰

十五、什麼是 MVVM , mvp和 MVC 是什麼差別, 原理是什麼?

mvc的界面和邏輯關聯緊密，資料直接從資料庫讀取，必須通過Controller來承上啟下，通信都是單向的。mvvm的View 和 ViewModel可以互相通信，界面資料從viewmodel中擷取。

差別：mvc和mvvm都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響使用者體驗。和當 Model 頻繁發生變化，開發者需要主動更新到View 。

Mvc的實作視圖和模型的分離，避免了視圖和模型糅合在一起，當視圖改變的時候隻要業務邏輯沒變就不需要改變模型，缺點控制器不能直接更新視圖，視圖依然依賴模型的資料來顯示

Mvp是針對mvc缺點進行改進，mvp分為模型，視圖，展示器。Mvp用展示器代替了控制器，展示器直接更新視圖，是以mvp的展示器可以處理視圖的請求并傳送到模型又可以根據模型的變化更新視圖，實作了視圖和模型的完全分離

Mvvm是mvp的進一步發展，完全實作視圖和模型的分離。Mvvm的視圖模型代替了mvp的展示器，視圖模型和視圖實作雙向綁定，當視圖發生變化的時候視圖模型也會改變，視圖模型變化的時候視圖也發生改變

十六、MVC的了解

用一種業務邏輯,資料,界面顯示分離的方法組織代碼,将業務邏輯聚集到一個部件裡面.在改進和個性化定制界面及使用者互動的同時不需要重新編寫業務邏輯，這種開發模式為合理組織代碼提供了友善、降低了代碼間的耦合度、功能結構清晰可見

    M模型（Model）一般用來處理資料（讀取/設定），一般指操作資料庫。

V視圖（View）一般用來展示資料，比如通過HTML展示。

C控制器（Controller）一般用做連接配接模型和視圖的橋梁。

十七、 cookie、sessionStorage、loacalStroge的差別

 1.大小：

   cookie的大小不能超過4k；

   sessionStorage、localStorage存儲雖然也受限制，但可以到達5M或更大；

2.與伺服器互動

   cookie可以與伺服器互動；

   sessionstorage、localstorage不能與伺服器互動，僅将資料儲存在本地；

3.有效時間

   cookie設定的cookie過期時間之前一直有效、即使視窗或浏覽器關閉；

   sessionStorage資料在目前浏覽器視窗關閉後自動删除；

   localstorage存儲持久資料，浏覽器關閉後資料不會丢失除非主動删除資料；

4.安全性

  cookie的資料會被發送到伺服器端，而另外二者不會，是以相對更安全；

5.作用域

   cookie需要指定作用域，不能跨域，而另外兩個可以跨域調用；

6.網絡流量

     sessionstorage與localstorage不用再伺服器擷取資料，是以更節省流量、速度更快。  

css面試題

一．描述基于class的選擇器與基于id選擇器在性能上的差別。

答：基于class的選擇性的性能相對于基于id選擇器開銷很大，因為其需要周遊所有DOM元素。 

二、如何優化網頁加載速度

1.  減少css，js檔案數量及大小，壓縮css和js代碼

2.  圖檔預加載

3. 把css放置頂部。把js放置在底部

4. 減少http請求

5. 使用外部檔案js和css

6. 少用全局變量，緩存dom節點查找的結果

三、display:none和visibility:hidden的差別？

display:none  隐藏對應的元素，在文檔布局不占據空間

visibility:hidden  隐藏對應的元素，但是在文檔布局中仍保留原來的空間。

 四、CSS中 link 和@import 的差別是？

(1) link屬于HTML标簽，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

(3) import隻在IE5以上才能識别，而link是HTML标簽，無相容問題;

(4) link方式的樣式的權重 高于@import的權重.

五、介紹一下CSS的盒子模型？

（1）有兩種，IE 盒子模型、标準 W3C 盒子模型；IE的content部分包含了border和padding;

（2）盒模型： 内容(content)、填充(padding)、邊界(margin)、 邊框(border).

 六.解釋下浮動和它的工作原理

浮動元素不會占據文檔流

當浮動元素碰到包含它的元素的邊框或者其他浮動元素的邊框時會停留下來。

 七、. 前端頁面有哪三層構成，分别是什麼?作用是什麼?

 結構層 Html 表示層 CSS 行為層 js

   結構層：對網頁内容的語義含義做出了描述，

   表示層：如何顯示有關内容”的問題做出了回答。

 行為層：内容應該如何對事件做出反應

八、标簽上title與alt屬性的差別是什麼?

   Alt 當圖檔不顯示是   用文字代表。

   Title 為該屬性提供資訊

九：簡述一下src與href的差別

href 是指向網絡資源所在位置，建立和目前元素（錨點）或目前文檔（連結）之間的連結，用于超連結。

src是指向外部資源的位置，指向的内容将會嵌入到文檔中目前标簽所在位置；在請求src資源時會将其指向的資源下載下傳并應用到文檔内，例如js腳本，img圖檔和frame等元素。當浏覽器解析到該元素時，會暫停其他資源的下載下傳和處理，直到将該資源加載、編譯、執行完畢，圖檔和架構等元素也如此，類似于将所指向資源嵌入目前标簽内。這也是為什麼将js腳本放在底部而不是頭部。

十：對WEB标準以及W3C的了解與認識       

标簽閉合、标簽小寫、不亂嵌套、提高搜尋機器人搜尋幾率、使用外 鍊css和js腳本、結構行為表現的分離、檔案下載下傳與頁面速度更快、内容能被更多的使用者所通路、内容能被更廣泛的裝置所通路、更少的代碼群組件，容易維 護、改版友善，不需要變動頁面内容、提供列印版本而不需要複制内容、提高網站易用性；

十一：語義化的了解？

• HTML語義化就是讓頁面的内容結構化，便于對浏覽器、搜尋引擎解析；

• 在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；

• 搜尋引擎的爬蟲依賴于标記來确定上下文和各個關鍵字的權重，利于SEO。

• 使閱讀源代碼的人對網站更容易将網站分塊，便于閱讀維護了解。

十二：前端頁面有哪三層構成，分别是什麼？作用是什麼？

結構層、表示層、行為層。

網頁的結構層（structural layer）由HTML或XHTML之類的标記語言負責建立。

網頁的表示層（presentation layer）由CSS負責建立。 CSS對“如何顯示有關内容”的問題做出了回答。

網頁的行為層（behavior layer）負責回答“内容應該如何對事件做出反應

angular面試題

一。angular了解：

· 使用AngularJS建構應用時是以子產品化（Module）的方式組織的，即将整個應用劃分成若幹子產品.每一個子產品完成一個特定的子功能,所有的子產品按某種方式組織起來,成為一個整體,完成整個系統所要求的功能.采用子產品化的組織方式，可以最大程度的實作代碼的複用

二、jQuery、vue、angular的差別

· （1）angular是一個mvc架構,  采用model, controller以及view的方式去組織代碼, 會将一個html頁面分成若幹個子產品, 每個子產品都有自己的scope, service, directive, 各個子產品之間也可以進行通信, 但是整體結構上是比較清晰的, 就是說其代碼組織是子產品化的, angular的view可能僅僅是一個架構, , 對view的dom操作或者時間監聽都是在directive中實作的, 而且一般情況下很少直接去寫dom操作代碼, 隻要你監聽model, model發生變化後view也會發生變化, 就是雙向綁定機制, angularjs适用于單頁面開發

 （2）jQuery是使用選擇器（$）選取DOM對象，對其進行指派、取值、事件綁定等操作，

 （3）vue是一個漸進式的輕量級架構, 他核心隻關注視圖層, 是一個建構資料驅動的web界面,易于上手, 還便于與第三方庫或與既有項目整合,也能夠為複雜的單頁應用程式提供驅動，  vue的話是子產品化群組塊化，如果頁面要更改資料之類的，就隻在元件來修改就可以了，

三。Angular和jQuery的差別

       jQuery隻是一個類庫以DOM做為驅動（核心）， jquery是基于操作DOM, 适用于操作DOM比較多的項目, jquery是一個庫, 比較大,相容大部分浏覽器, 有豐富的插件, 可拓展性強, jquery不能向後相容, 使用插件時,可能會有沖突, 而AngularJS則一個架構（諸多類庫的集合）以資料和邏輯做為驅動（核心），包含模闆和雙向資料綁定, 路由, 子產品化, 服務, 過濾器, 依賴注入等所有功能

四。jQuery和vue的差別

    1.jQuery首先要擷取到dom對象，然後對dom對象進行進行值的修改等操作

2.Vue是首先把值和js對象進行綁定，然後修改js對象的值，Vue架構就會自動把dom的值就行更新。

3.可以簡單的了解為Vue幫我們做了dom操作，我們以後用Vue就需要修改對象的值和做好元素和對象的綁定，Vue這個架構就會自動幫我們做好dom的相關操作

4.這種dom元素跟随JS對象值的變化而變化叫做單向資料綁定，如果JS對象的值也跟随着dom元素的值的變化而變化就叫做雙向資料綁定

五。angularJS和vue.js的差別

    一angular是mvvm架構, 而vue是一個漸進式的架構, 相當于view層, 都有雙向資料綁定,  但是angular中的雙向資料綁定是基于髒檢查機制, vue的雙向資料綁定是基于  ES5的getter和setter來實作, 而angular是有自己實作一套模闆編譯規則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學習成本低, vue需要一個el對象進行執行個體化, 而angular是整個html頁面下的,單頁面應用, 而vue可以有過個vue執行個體

六。angularJS雙向資料綁定的原理？

監視函數 $watch隊列

當我們去做資料綁定時，ng架構會自動的給資料添加一個監聽watcher,對應有一個回調當資料變化時，更新視圖

如果知道資料發生了變化？

ng會周期性的執行一個函數來檢查模型資料是否發生了變化->$digest

什麼時候會執行$digest?

ngClick ngSrc常用的ng指令都會觸發$digest,也可以手工觸發$scope.$digest()

$scope.$apply();-->$rootScope.$digest()

七、Setinterval和$interval的差別？

 Setintercal 是js 提供的 不帶有自動輪訓功能，無法進行時刻改變dom資料

 隻能手動添加$apply()或者$digest();

$interval是angularJS提供的一中服務，自帶dom資料也循環

談談你對webpack的看法

一。WebPack 是一個子產品打包工具，你可以使用WebPack管理你的子產品依賴，并編繹輸出子產品們所需的靜态檔案。它能夠很好地管理、打包Web開發中所用到的HTML、JavaScript、CSS以及各種靜态檔案（圖檔、字型等），讓開發過程更加高效。對于不同類型的資源，webpack有對應的子產品加載器。webpack子產品打包器會分析子產品間的依賴關系，最後 生成了優化且合并後的靜态資源。

二。Gulp 和webpack的差別

gulp強調的是前端開發的工作流程，我們可以通過配置一系列的task，定義task處理的事務（例如檔案壓縮合并、雪碧圖、啟動server、版本控制等），然後定義執行順序，來讓gulp執行這些task，進而建構項目的整個前端開發流程。

webpack是一個前端子產品化方案，更側重子產品打包，我們可以把開發中的所有資源（圖檔、js檔案、css檔案等）都看成子產品，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生産環境部署的前端資源。

js面試題

一．描述垃圾回收器的功能。

答：垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的記憶體即可回收。

二．documen.write和innerHTML的差別？

答：document.write隻能重繪整個頁面，innerHTML可以重繪頁面的一部分

三．那些操作會造成記憶體洩漏？

答：

• 給DOM對象添加的屬性是一個對象的引用。

• DOM對象與JS對象互相引用。

• 給DOM對象用attachEvent綁定事件。

• 從外到内執行appendChild，這時即使調用removeChild也無法釋放。

• 反複重寫同一個屬性會造成記憶體大量占用。

四．一句話說明記憶體洩漏的定義。

答：記憶體洩漏指任何對象在您不再擁有或需要它之後仍然存在。

五．eval是做什麼的？

答：eval功能是把對應的字元串解析成JS代碼并運作；但不安全，非常耗性能。

六．null與undefined的差別？

答：Undefined類型隻有一個值，即undefined，當聲明的變量還未被初始化時，變量的預設值為undefined。Null類型也隻有一個值，即null，null用來表示尚未存在的對象，常用來表示函數企圖傳回一個不存在的對象。 

七．談談對this對象的了解。

答：this是js的一個關鍵字，随着函數使用場合不同，this的值會發生變化。但是有一個總原則，那就是this指的是調用函數的那個對象。

八．use strict是什麼意思？

答：表示代碼标志為“嚴格模式”，則其中運作的所有代碼都必然是嚴格模式下的。如果在文法檢測時發現文法問題，則整個代碼塊失效，并導緻一個文法異常。如果在運作期出現了違反嚴格模式的代碼，則抛出執行異常。 

九．簡述new操作符的功能。

答：

（1）建立一個空對象，使用this變量引用該對象，同時還繼承了該函數的原型

（2）屬性和方法被加入到this引用的對象中。

（3）新建立的對象由this所引用，并且最後隐式的傳回this。 

十．描述typeof關鍵字的功能。

答：typeof可用來判斷一個變量是否為空或是什麼類型的變量。typeof一般隻能傳回如下幾個結果：number、boolean、string、function、object、undefined。 

十一．描述instanceof關鍵字的功能。

答：instanceof可用來判斷一個變量是否為空或是什麼類型的變量。如果想判斷一個變量是否某個對象的執行個體建議使用instanceof關鍵字。

十二．簡述hasOwnProperty函數的功能。

答：hasOwnProperty函數是用來判斷一個對象是否有你給出名稱的屬性或對象。不過需要注意的是，此方法無法檢查該對象的原型鍊中是否具有該屬性，該屬性必須是對象本身的一個成員。 

十三．簡述一下isPrototypeOf函數的功能。

答：isPrototypeOf函數是用來判斷要檢查其原型鍊的對象是否存在于指定對象執行個體中，是則傳回true，否則傳回false。

十四．談談對JSON的了解。

答：JSON(JavaScript Object Notation)是一種輕量級的資料交換格式。其是基于JavaScript的一個子集，具有資料格式簡單，易于讀寫，占用空間小的特點。

十五．描述一下context的概念。

答：context就是限定查找的範圍，context必須是一個DOM元素，context底層還是用了.find()方法來實作的。

十六．描述一下.delegate()和.live()方法的差別。

答：delegate方法指定了委托對象，live方法委托給了jQuery的context，1.9版本以後用on方法代替了。

十七．描述一下.attr()和.prop()方法的差別。

答：.attr()方法是操作屬性節點，.prop()方法是操作擷取到的對應js對象的屬性。在遇到要擷取或設定checked、selected、readonly和disabled等屬性時，用prop方法顯然更好。.prop()方法更高效，因為.attr()方法要通路DOM。

十八。apply()與call()的差別？

功能一樣, 都是将目前函數作為指定對象的方法執行, 即函數中的this是指定對象

參數不一樣，apply傳遞的參數是this和一個數組，call傳入的參數是this和一串參數清單

十九.JavaScript 中 this 是如何工作的。

• 作為函數調用，this 指向window

• 外層函數對應的對象上，這是 JavaScript的缺陷，用that替換。

• 作為構造函數使用，this 綁定到新建立的對象。

• 作為對象方法使用，this 綁定到該對象。

• 使用apply或call調用 this 将會被顯式設定為函數調用的第一個參數。

二十、十次完整的HTTP事務是怎樣一個過程

域名解析 --> 發起TCP的3次握手 --> 建立TCP連接配接後發起http請求 --> 伺服器響應http請求，浏覽器得到html代碼 --> 浏覽器解析html代碼，并請求html代碼中的資源（如js、css、圖檔等） --> 浏覽器對頁面進行渲染呈現給使用者

二十一、HTML5的離線儲存？

• localStorage    長期存儲資料，浏覽器關閉後資料不丢失；

• sessionStorage  資料在浏覽器關閉後自動删除。

二十二、如何實作浏覽器内多個标簽頁之間的通信?

調用localstorge、cookies等本地存儲方式

二十三、線程與程序的差別？

一個程式至少有一個程序,一個程序至少有一個線程.

線程的劃分尺度小于程序，使得多線程程式的并發性高。 

另外，程序在執行過程中擁有獨立的記憶體單元，而多個線程共享記憶體，進而極大地提高了程式的運作效率。 

線程在執行過程中與程序還是有差別的。每個獨立的線程有一個程式運作的入口、順序執行序列和程式的出口。但是線程不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個線程執行控制。 

從邏輯角度來看，多線程的意義在于一個應用程式中，有多個執行部分可以同時執行。但作業系統并沒有将多個線程看做多個獨立的應用，來實作程序的排程和管理以及資源配置設定。這就是程序和線程的重要差別。

二十四、js的全局函數有哪些，js的内置對象有那些？分别各列舉5個

decodeURI() 解碼某個編碼的 URI。

decodeURIComponent() 解碼一個編碼的 URI 元件。

encodeURI() 把字元串編碼為 URI。

encodeURIComponent() 把字元串編碼為 URI 元件。

escape() 對字元串進行編碼。

eval() 計算 JavaScript 字元串，并把它作為腳本代碼來執行。

getClass() 傳回一個 JavaObject 的 JavaClass。

isFinite() 檢查某個值是否為有窮大的數。

isNaN() 檢查某個值是否是數字。

Number() 把對象的值轉換為數字。

parseFloat() 解析一個字元串并傳回一個浮點數。

parseInt() 解析一個字元串并傳回一個整數。

String() 把對象的值轉換為字元串。

unescape() 對由 escape() 編碼的字元串進行解碼。

二十五、哪些操作會造成記憶體洩漏？

記憶體洩漏指任何對象在您不再擁有或需要它之後仍然存在。

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的記憶體即可回收。

1. setTimeout 的第一個參數使用字元串而非函數的話，會引發記憶體洩漏。

2. 閉包

3. 控制台日志

4. 循環（在兩個對象彼此引用且彼此保留時，就會産生一個循環）

二十六、DOM操作——怎樣添加、移除、移動、複制、建立和查找節點。

（1）建立新節點

        createDocumentFragment()  //建立一個DOM片段

       createElement()   //建立一個具體的元素

        createTextNode()   //建立一個文本節點

（2）添加、移除、替換、插入

       appendChild()

        removeChild()

        replaceChild()

           insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

       getElementsByTagName() //通過标簽名稱

  getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)

  getElementById() //通過元素Id，唯一性

二十七：js的類型轉換，強制轉換和隐式轉換

顯示：toString()轉換為字元串

  parseInt()轉換為整數

parseFloat()轉換為浮點型資料

Number()如果轉換的内容中包含非法字元，結果為 NaN

強制：Boolean(value) - 把給定的值轉換成 Boolean 型；

Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；

String(value) - 把給定的值轉換成字元串；

 隐式：null,undefined,boolean,string,number,object。object是引用類型

二十八：簡述同步和異步的差別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個程序在執行某個請求的時候，若該請求需要一段時間才能傳回資訊，那麼這個程序将會一直等待下去，直到收到傳回資訊才繼續執行下去；

異步是指程序不需要一直等下去，而是繼續執行下面的操作，不管其他程序的狀态。當有消息傳回時系統會通知程序進行處理，這樣可以提高執行的效率。