一、Vue回應式原理

首先回答對回應式的個理解，提出核心點是通過Object.defineProperty， Vue 在初始化資料時，會傳入一個data物件，內部會默認的對data物件進行遍歷，使用 Object.defineProperty 重新定義所有屬性，當頁面取到對應屬性時，會進行依賴收集（收集當前組件的watcher） 如果屬性發生變化會通 知相關依賴進行更新操作，

二、proxy資料代理是什么

可以理解為在物件之前設定一個“攔截”，當該物件被訪問的時候，都必須經過這層攔截，意味著可以在這層攔截中進行各種操作，比如你可以在這層攔截中對原物件進行處理，回傳你想回傳的資料結構，

ES6 原生提供 Proxy 建構式，MDN上的解釋為：Proxy 物件用于定義基本操作的自定義行為（如屬性查找，賦值，列舉，函式呼叫等）

三、計算屬性和watch的區別

computed

一個資料屬性在它所依賴的屬性發生變化時，也要發生變化，這種情況下，我們最好使用計算屬性，computed是帶快取的，只有其參考的回應式屬性（屬性系結）發生改變時才會重新計算(如果參考的屬性沒有改變，則呼叫上一次快取值)

watch

watch適合處理的場景是，偵聽一個數的變化，當該資料變化，來處理其他與之相關資料的變化（該資料影響別的多個資料）==當資料發生變化時，執行異步操作或較大開銷操作的情況，

watch沒有快取直接執行

四、VueX的應用場景

多個視圖依賴于同一狀態

來自不同視圖的行為需要改變同一個狀態

多個組件嵌套層級較多，用$emit傳遞過于繁瑣

state：存放公共資料的地方
getter：獲取公共資料的地方
mutations：唯一修改state的方法，修改程序是同步的
action：異步處理，通過分發操作觸發mutation 提交
module：將store模塊分割，減少代碼臃腫

五、v-for為啥要加Key

key的作用主要是為了高效的更新虛擬DOM！！！

當v-for進行資料渲染串列時，如果資料量龐大，我們對串列進行增刪改時就會重新渲染串列，這樣會影響性能！

如果我們加上key那么串列修改是就會根據之前的key值判斷是否更新資料，如果需要則更新資料，如果不需要就復用之前的資料

六、虛擬DOM和真實

的DOM的區別

1、虛擬DOM不會進行排版與重繪操作

2、虛擬DOM就是把真實DOM轉換為Javascript代碼

3、虛擬DOM進行頻繁修改，然后一次性比較并修改真實DOM中需要改的部分（注意！），最后并在真實DOM中進行排版與重繪，減少過多DOM節點排版與重繪損耗

真實DOM頻繁排版與重繪的效率是相當低的

4、虛擬DOM有效降低大面積（真實DOM節點）的重繪與排版，因為最終與真實DOM比較差異，可以只渲染區域

• 4.1 步驟一：用JS物件模擬DOM樹
• 4.2 步驟二：比較兩棵虛擬DOM樹的差異
• 4.3 步驟三：把差異應用到真正的DOM樹上

七、基本資料型別和參考資料型別的區別

1. 基本資料型別的存盤

以 堆疊 的形式存盤, 保存與賦值指向資料本身, 用type of 來判斷型別,存盤空間固定.

2. 參考型別 Object

以 堆 的形式存盤, 它是存放在堆中的物件，其變數是存放在堆疊中的一個指標（即堆記憶體的參考地址），其指標指向堆記憶體, 用instance of 來判斷型別 , 存盤空間不固定

八、深拷貝與淺拷貝

淺拷貝：

Object.assign()

var obj1 = {a: 1, b: 2} var obj2 = Object.assign({}, obj1)

解構賦值

var obj1 = {a: 1, b: 2} var obj2 = {…obj1}

淺拷貝是參考了物件的值時其實是參考了其地址，并非堆物件的值，當改變值時，其物件的值也會發生改變

深拷貝：

利用json.stringify

深拷貝則是在堆記憶體中開辟了新的地址，用來存放拷貝的物件

**九、**基本資料型別賦值和參考資料型別賦值的區別

1、基本資料型別保存與賦值指向資料本身

2、參考型別是存放在堆中的物件，其變數是存放在堆疊中的指標（即堆內的參考地址），其指標指向堆記憶體

十、為什么是js是單執行緒的

JavaScript作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM，這決定了它只能是單執行緒，否則會帶來很復雜的同步問題，

如果JavaScript同時有兩個執行緒，一個執行緒在某個DOM節點上添加內容，另一個執行緒洗掉了這個節點，這時瀏覽器應該以哪個執行緒為準？

十一、小程式的生命周期

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WrX3u704-1618302980171)(C:\Users\Administrator\Desktop\面試\2.jpg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ShafAljG-1618302980175)(C:\Users\Administrator\Desktop\面試\3.jpg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dLh7lDse-1618302980182)(C:\Users\Administrator\Desktop\面試\4.jpg)]

十二、jsonp的實作原理

jsonp本質就是我們的函式的定義和函式的呼叫，

script本身屬于一個一次性標簽，所以需要動態去創建script

請求一次就需要創建一次script 通過src動態引入我們的函式呼叫

函式呼叫的引數，將資料傳遞過來，當然如果說我們前端在使用的時候，我們只需要去定義函式，通過函式中的引數就可以將資料獲取過來

JSONP是一種非正式傳輸協議，該協議的一個要點就是允許用戶傳遞一個callback引數給服務器端，然后服務端回傳資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定制自己的函式來自動處理回傳資料了

十三、本地存盤 localStorage sessionStorage cookie session

localStorage/sessionStorage H5中新增加的API，基于這個API可以把一些資料快取到客戶端本地

特性	cookie	session	localStorage	sessionStorage
資料宣告周期	一般由服務器成成，可以設定過期時間	一般由服務器成成，可以設定過期時間	除非被清理,否則一直存在	頁面關閉就清理
資料儲存大小	4K	根據服務器大小決定	5M	5M
與服務端通信	每次都會攜帶在header中，服務器檢查cookie，辨認用戶狀態	請求時攜帶在header中	不參與	不參與

存放位置	當前瀏覽器的cookie中	存放在服務端	當前瀏覽器本地存盤	當前瀏覽器本地存盤
是否安全	不安全	安全	不安全	不安全
實際用途	記錄登錄時間，購物車收藏	存盤賬號密碼設定key	用來統計頁面訪問次數	記錄當前進入用戶的隱私資料，在關閉瀏覽器時洗掉

十四、token 和session 分別是什么有什么區別

什么是Session機制？

Session是存盤在服務器端的，當瀏覽器第一次請求Web服務器，服務器會產生一個Session存放在服務器里（可持久化到資料庫中），然后通過回應頭的方式將SessionID回傳給瀏覽器寫入到Cookie中，瀏覽器下次請求就會將SessiondID以Cookie形式傳遞給服務器端，服務器端獲取SessionID后再去尋找對應的Session，如果找到了則代表用戶不是第一次訪問，也就記住了用戶，

但需要注意的是，若服務器做了負載均衡，用戶的下一次請求可能會被定向到其它服務器節點，若那臺節點上沒有用戶的Session資訊，就會導致會話驗證失敗，所以Session默認機制下是不適合分布式部署的，

Token的出現是為了解決Session的弊端

Token我們一般稱為令牌，一般通過MD5、SHA演算法將密鑰、公鑰、時間戳等元素加密產生的加密字串，

瀏覽器訪問Web服務器后認證成功后生成Token并回傳給客戶端，客戶端瀏覽器后續的請求都會把這個Token帶到服務器端去驗證，以此判定請求是否合法，

Session與Token的異同

Session和Token機制原理上差不多，都是用戶身份驗證的一種識別手段，它們都有過期時間的限制，但兩者又有一些不同的地方，

1、Session是存放在服務器端的，可以保存在：記憶體、資料庫、NoSQL中，它采用空間換時間的策略來進行身份識別，若Session沒有持久化落地存盤，一旦服務器重啟，Session資料會丟失，

2、Token是放在客戶端存盤的，采用了時間換空間策略，它也是無狀態的，所以在分布式環境中應用廣泛，

3.SSESION：銀行排號

2、TOKEN ：我發給你一張加密的身份證，以后你只要出示這張卡片，我就知道你一定是自己人，

十五、清除浮動8種方法

1、父級div定義 height

2、結尾處加空div標簽 設定CSS樣式為 clear:both

3、父級div定義 偽類:after 和 zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}

4、父級div定義 overflow:hidden

5、父級div定義 overflow:auto

6、 父級div 也一起浮動

7、父級div 設定dispaly：table

8，結尾處加br標簽 設定CSS樣式為 clear:both

十六、瀏覽器內核

1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；

2、Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核；

3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；

4、Safari瀏覽器內核：Webkit內核；

5、Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核；

6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；

7、搜狗、遨游、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；

8、百度瀏覽器、世界之窗內核：IE內核；

9、2345瀏覽器內核：以前是IE內核，現在也是IE+Chrome雙內核；

十七、居中盒子的8種方法

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GhSOJdp2-1618302980188)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\d4c475bb15db42e1ad131bcb22ef9582\aelftksuqmcc.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wplEIFyt-1618302980206)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\6a318166e7834afa95c586143a8c9e2f\615201064(1)].png)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nXsVpDQM-1618302980208)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\b5454bee92e740f5a842a7f6ba0fc03e\suvork5cyii=.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SQXL00Cl-1618302980213)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\9f73c82813b847bfa320287938f63c17\aelftksuqmcc.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LZDO5ghz-1618302980216)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\1cf272cfc66e42a58a12f5ff56142838\615201108(1)].png)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DE4bKKQB-1618302980218)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\8815a114419a45e38f7d1903457ea51f\615201118(1)].png)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xuH9GIE6-1618302980220)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\66edc50b9d944dd2ac97ecc3df445814\615201131(1)].png)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-whgolbHb-1618302980221)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\a317550712454820be8bbfa66656e919\1615201155.png)]

十八、BFC是什么？能解決什么問題？

BFC是的子元素布局是不受外界的影響的

1、float的值不是none，

2、position的值不是static或者relative，

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

1.避免外邊距折疊

2.避免文字環繞

3.浮動元素不會亂跑，（包含浮動元素）

十九、Ajax狀態碼

0: (未初始化)還沒有呼叫send()方法，

1: (載入)已經呼叫send()方法，正在派發請求，

2: (載入完成)send()已經執行完成，已經接收到全部的回應內容，

3: (互動)正在決議回應內容，

4: (完成)回應內容已經決議完成，用戶可以呼叫，

二十、let，const，var

let

let有塊級作用域{}，外界無權修改 不能宣告同名變數 let沒有宣告提前 定義值可以修改

const

const有塊級作用域{}，為常量，一單賦值，無法修改 const宣告物件無法修改鍵名，但可以修改值 const賦值不能為空 不能宣告同名變數 const沒有宣告提前

var

var只在函式內部function有塊級作用域 有宣告提前 可以修改值 能夠重復定于

二一、es5和es6中的作用域分別是什么？

塊級作用域

只要是有花括號的就是塊級作用域

function if for {}

二二、函式作用域有哪些

全域作用域

定義的變數或者方法所有的地方都可以使用到，釋放的周期，是需要等到瀏覽器關閉以后才會釋放，

區域作用域

只能是當前函式中能夠使用到，而且只要呼叫完成以后就會釋放 性能高

閉包

子函式能夠使用父函式的區域變數，直到你去釋放，釋放方法就是return或者是 函式為null

二三、關于this

函式中：window

方法中：當前方法屬于誰就是誰

事件：當前發生事件的元素

定時器：window

new：空白構造物件本身

二四、window.onload DOMContentLoaded document.onreadstatechange 執行時機

window.onload

頁面中所有的資源加載完成，圖片，音頻，視頻

DOMContentLoaded

在頁面檔案加載決議完畢之后馬上執行，而不會等待圖片檔案和子框架頁面的加載

onreadstatechange 監聽頁面狀態

DOMContentLoaded>onloadstatechange>window.onload

二五、defer和async script中

defer和async是script標簽的兩個屬性，用于在不阻塞頁面檔案決議的前提下（也就是非正常行內script腳本的情況下），控制腳本的下載和執行，

script

因為script是同步的所以再HTML加載時會下載和執行script檔案 這樣會阻塞HTML檔案決議

defer

defer會在HTML元素加載時進行下載，但會在HTML元素加載完之后，DOMContentLoaded 事件觸發之前進行執行script腳本，

async

async會在HTML元素加載時進行下載，單會在HTML元素未加載完成時就進行決議script檔案

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FM0WCARJ-1618302980224)(C:\Users\Administrator\AppData\Local\YNote\data\weixinobU7VjmEaQQ55iDsoOd6jwhS8D64\da5cd5fd5fdc42b691def691d8265a8c\defer和async.jpg)]

藍色線代表網路讀取（下載JS檔案），紅色線代表執行時間（執行JS檔案），這倆都是針對腳本的；綠色線代表 HTML 決議，

defer要注意

1、只適合行內腳本（也就是script沒有scr屬性）

2、如果宣告了多個defer腳本那么就會按順序下載和執行

3、defer會在DOMContentLoaded和onLoad事件之前執行

async要注意

1、只適合行內腳本（也就是script沒有scr屬性）

2、如果宣告了多個async也是異步下載與執行的沒有先后順序

3、anync在onLoad前執行，但不不能保證與DOMContentLoaded執行的先后順序

二六、宏任務和微任務 event loop

• 執行一個宏任務（堆疊中沒有就從事件佇列中獲取）
• 執行程序中如果遇到微任務，就將它添加到微任務的任務佇列中
• 宏任務執行完畢后，立即執行當前微任務佇列中的所有微任務（依次執行）
• 當前宏任務執行完畢，開始檢查渲染，然后GUI執行緒接管渲染
• 渲染完畢后，JS執行緒繼續接管，開始下一個宏任務（從事件佇列中獲取）

二七、堆和堆疊

1. 基本資料型別的存盤

以 堆疊 的形式存盤, 保存與賦值指向資料本身, 用type of 來判斷型別,存盤空間固定.

2. 參考型別 Object

以 堆 的形式存盤, 它是存放在堆中的物件，其變數是存放在堆疊中的一個指標（即堆記憶體的參考地址），其指標指向堆記憶體, 用instance of 來判斷型別 , 存盤空間不固定

二八、狀態碼

200 ok

304快取的檔案還可以繼續使用，重定向

403 服務器已經理解請求，但是拒絕執行它

404 請求頁面不存在

414請求的URI 長度超過了服務器能夠解釋的長度

500 服務器內部錯誤

502 服務器掛了

二九、Ajax實作程序

var aDiv=document.querySelector(‘div’) var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest() }else{ xhr=new ActiveXObject() } xhr.onreadystatechange=function(){ if(xhr.readyState4&&xhr.status200){ aDiv.innerHTML=xhr.responseText } } xhr.open(‘get’,’./app.json’) xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); xhr.send()

三十、寫出常用的陣列變異方法(至少7個)

pop()
shift()
push()
unshift()
sort()
reverse()
splice()

三一、同步和異步的與原理

同步：一個一個執行 例：過獨木橋、排隊買東西

異步：同時執行多個 例：電腦 一邊聽歌一邊敲代碼，網購

三二、get請求和post請求

get：

1、通過地址欄傳遞、

2、傳輸量小 32k

3、不安全

4、分享和收藏 有快取、

post請求：

1、傳輸量大

2、相對安全

3、body傳遞send

三三、跨域的解決辦法

1、 通過jsonp跨域

2、 跨域資源共享（CORS）

3、 nodejs中間件代理跨域

4、 ajax設定datatype：jsonp實作代理

5、使用vue-cli中在vue.config.js中配置proxy

三四.簡述MVVM和MVC

MVC 是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計創建 Web 應用程式的模式：

Model（模型）表示應用程式核心（如資料庫），

View（視圖）顯示效果（HTML頁面），

Controller（控制器）處理輸入（業務邏輯），

MVC 模式同時提供了對 HTML、CSS 和 JavaScript 的完全控制，

Model（模型）是應用程式中用于處理應用程式資料邏輯的部分，

通常模型物件負責在資料庫中存取資料，

View（視圖）是應用程式中處理資料顯示的部分，

通常視圖是依據模型資料創建的，

Controller（控制器）是應用程式中處理用戶互動的部分，

通常控制器負責從視圖讀取資料，控制用戶輸入，并向模型發送資料，

而MVVM是Model-View-ViewModel的簡寫，它本質上就是MVC 的改進版，MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開，

- Model(模型) 處理業務邏輯的操作

- View(視圖) 用于渲染資料的頁面

- VModel (view-model簡稱vm)負責視圖和資料的雙向資料系結

三五.Vue中雙向資料系結是如何實作的

實作原理大致是，通過Object.defineProperty()方法來劫持Vue資料的屬性，一旦監聽到資料變化，則更新資料關聯的虛擬DOM樹，當然在模版編譯的時候，為指令v-model系結input事件，當輸入的內容發生改變時，同步更新data中系結的資料

三六.v-cloak有什么作用

防止頁面加載時出現閃爍問題！

三七.請舉例說明系結事件傳參的方法

如果事件直接系結函式名稱，沒有傳參,那么默認會傳遞事件物件event作為事件函式的第一個引數

如果事件系結函式呼叫，那么事件物件必須作為最后一個引數顯示傳遞，并且事件物件的名稱必須是$event

三八.單頁面應用和多頁面應用區別及優缺點

單頁面簡稱(SPA),原理:利用js感知到url的變化,可以通過js動態的將當前的頁面內容清除掉,接著將下一個頁面的內容掛載到當前的頁面上,頁面每次切換跳轉時,并不需要做html請求,這樣就節省了很多http發送延遲,切換速度更快.

優點:加載速度快,內容的改變不需要重新加載整個頁面,對服務器壓力小

前后端分離,視覺效果好

缺點:頁面初次加載比較慢,頁面復雜提高很多

多頁面:一個應用多個頁面,頁面跳轉時整個頁面都重繪,每次都請求一個新的頁面

優點:SEO效果好

缺點:頁面切換慢,每次切換頁面需要選擇性的重新加載公共資源

三九、強快取和協商快取

強快取

respone header 的cache-control，常見的設定是max-age public private no-cache no-store等

一般設定：cahe-control:max-age=31536000,public,immutable

max-age表示快取的時間是31536000秒（1年），public表示可以被瀏覽器和代理服務器快取，當用戶重繪頁面時不管過沒過期像服務器再次發送請求，這是相當于又走了協商快取，設定immutable，就算用戶重繪頁面也不會進行請求

回傳200

協商快取

設定response header中的：

etag: ‘5c20abbd-e2e8’ last-modified: Mon, 24 Dec 2018 09:49:49 GMT

etag是個hash值當用戶每次請求時會攜帶，如果發生變化則快取新的資料

回傳304

總結：像服務器發送請求快取的程序就是協商快取

四十、長鏈接，短連接，長介面，短介面

短連接

連接->傳輸資料->關閉連接

HTTP是無狀態的，瀏覽器和服務器每進行一次HTTP操作，就建立一次連接，但任務結束就中斷連接，

也可以這樣說：短連接是指SOCKET連接后發送后接收完資料后馬上斷開連接，

長連接

連接->傳輸資料->保持連接 -> 傳輸資料-> ，，， ->關閉連接，

長連接指建立SOCKET連接后不管是否使用都保持連接，但安全性較差，

四十一、improt引入css和link引入css的區別

加載順序

link引入的css在加載頁面時同時加載，而@import中的css要在頁面加載完畢后加載

從屬關系

link是HTML提供的標簽

@import是css的語法規則，只能加載在style標簽內和css檔案中

兼容性

@import是css2.1時提出的，只能用于IE5+，而link不受兼容影響

DOM可控性

link支持js控制DOM改變樣式，而@import不支持

四十二、防抖與節流

在前端開發的程序中，我們經常會需要系結一些持續觸發的事件，如 resize、scroll、mousemove 等等，但有些時候我們并不希望在事件持續觸發的程序中那么頻繁地去執行函式，

防抖（debounce）

所謂防抖，就是指觸發事件后在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間，

節流（throttle）

**所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函式，**節流會稀釋函式的執行頻率，

對于節流，一般有兩種方式可以實作，分別是時間戳版和定時器版，

四十三、回流和重繪

回流必將引起重繪，而重繪不一定會引起回流，

重繪

比如：只有顏色改變的時候就只會發生重繪而不會引起回流

回流

比如：添加或者洗掉可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

當頁面布局和幾何屬性改變時就需要回流

四十四、原型鏈

1、實體化物件的__proto__指向是目前建構式的prototype

2、建構式prototype的__proto__指向的是object的prototype

3、object.prototype的__proto__指向null

四十五、ES5的繼承，call，apply

一、 原型鏈繼承

缺點：不能傳參--不能將建構式中的引數傳到父建構式中
優點：可以繼承父函式原型物件的成員
語法：
	子函式.prototype=new 父函式

**二、**借用建構式繼承

優點：可以傳參
	缺點：不能繼承父建構式原型物件的成員
	語法：
		父建構式.call（this）
 function Person(name,age){
        this.name=name
        this.age=age
    }
    Person.prototype.fn=function(){
        console.log('hhh')
    }
    function Woker(name,age,job){
        // 將Person的this指向轉為Woker
        Person.call(this,name,age)
        this.job=job
    }
    let w1=new Woker('小王',18,'搬磚')
    let p1=new Person('小王',18,)
    console.log(w1)
    console.log(p1)

**三、**組合繼承（混合繼承）

優點：子函式的實體化物件可以繼承父函式原型物件的成員，可以傳參
  function Person(name,age){
        this.name=name
        this.age=age
    }
    Person.prototype.fn=function(){
        console.log('hhh')
    }
    function Woker(name,age,job){
        //改變this指向 繼承Person的屬性
        Person.apply(this,arguments)
        this.job=job
    }
    Woker.prototype=Person.prototype
    // 使用原型鏈繼承繼承了方法
    let w1 =new Woker('小王',18,'搬磚')
    let p1 =new Person('小王',18)
    console.log(w1,p1)

**四、**拷貝式繼承

function Person(name,age){
       this.name=name
       this.age=age
   }
   Person.prototype.fn=function(){
       console.log('hhh')
   }
   function Woker(name,age,job){
       Person.apply(this,arguments)
       this.job=job
   }
   let obj =Person.prototype
   // 遍歷Person中的方法
   for(var key in obj){
       //通過for in 添加到Woker的原型中
       Woker.prototype[key]=obj[key]
   }
   let w1=new Woker('小王',18,'搬磚')
   let p1=new Person('小王',18)
   console.log(w1)
   console.log(p1)

五、寄生式繼承

function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.fn = function () {
        console.log('hhh')
    }
    function Woker(name, age, job) {
        //改變this指向 繼承Person的屬性
        Person.apply(this, arguments)
        this.job = job
    }
    Woker.prototype=new Person()
    Woker.prototype.constructor=Woker
    //將woker的建構式指向回woker
    let w1=new Woker('小王',18,'搬磚')
    let p1=new Person('小王',18)
    console.log(w1)
    console.log(p1)

四十六、ES6新增特性

const 與 let 變數

模板字串

解構賦值

promise

物件屬性和方法的簡寫

陣列新增方法

淺拷貝的assgin方法

四十七、js分為哪三部分

1、ECMAScript(JavaScript語法 )

2、DOM 頁面檔案物件模型

3、BOM 瀏覽器物件模型

四十八、jq的鏈式呼叫

jq的方法都是掛在原型的，那么如果我們每次在內部方法回傳this，也就是回傳實體物件，那么我們就可以繼續呼叫原型上的方法了，這樣的就節省代碼量，提高代碼的效率，代碼看起來更優雅，

四十九、什么是事件流，事件流的分類

頁面觸發一個事件時，會按照一定的順序來回應事件，事件的回應程序為事件流

就我個人理解就是網頁對點擊事件的排序順序就是事件流

1、冒泡型的事件流（任何一款瀏覽器都支持）

從明確事件源到不明確的事件源依次向上回應，

2、捕獲型的事件流（從IE8及以下版本支持）

從不確定事件源到確定事件源依次向下回應，

五十、瀏覽器前綴

-ms- ie瀏覽器

-moz- 火狐瀏覽器

-o- opera瀏覽器

-webkit- Chrome safari

五十一、keep-alive

//當我們訪問別的組件時，其他的組件會被銷毀 //我們需要用keep-alive 保證 組件不被銷毀會被快取 語法： //如果想讓其中一個組件不被銷毀需要在keep-alive中額外添加屬性 include=‘name名’ //只有匹配的組件會被快取 exclude=‘name名’ //匹配的組件不會被快取

五十二、輸入一串url發生了什么事

1. DNS決議
2. TCP連接
3. 發送HTTP請求
4. 服務器處理請求并回傳HTTP報文
5. 瀏覽器決議渲染頁面
6. 連接結束

**五十三、**js23種模式

總體來說設計模式分為三大類：

創建型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式，

結構型模式，共七種：配接器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式，

行為型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模式、解釋器模式，

五十四、做過那些前端優化

1、節流、防抖

2、重繪、回流

3、對代碼進行壓縮，洗掉不必要的空格

4、圖片的懶加載

5、js是阻塞的 合理的使用defer和async

五十五、前端常見攻擊方法

A: XSS

惡意攻擊者往Web頁面里插入Script代碼

B: CSRF

(1) 用戶在a站前端發起請求

(2) a站后端確認身份，登錄成功，cookie中存在用戶的身份認證資訊

(3) 用戶未退出網站a之前，在同一瀏覽器中打開一個TAB頁訪問第3方站點b

(4) b站前端帶著a站的cookie資訊向a站后端發起請求，請求成功

C: SQL注入

在撰寫代碼時，沒有對用戶輸入的資料進行合法性判斷，使得程式出現安全隱患，黑客可以把SQL命令插入Web表單提交或輸入域名或頁面請求的查詢字串，根據回傳的結果，來獲得他想要的資料，這就是SQL Injection，即SQL注入，

五十六、雙飛翼布局

雙飛翼布局是把朱列嵌套在一個父級塊中利用主列的左、右外邊距進行布局調整的

五十七、圣杯布局

圣杯布局是利用父容器的左、右內邊距+兩個從列相對定位

五十八、怎么設定事件捕獲

addEventListener 的第三個引數設定為true 則將事件冒泡轉為事件捕獲

五十九、http和https的區別

1、HTTPS 協議需要到 CA （Certificate Authority，證書頒發機構）申請證書，一般免費證書較少，因而需要一定費用，(以前的網易官網是http，而網易郵箱是 https ，)

2、HTTP 是超文本傳輸協議，資訊是明文傳輸，HTTPS 則是具有安全性的 SSL 加密傳輸協議，

3、HTTP 和 HTTPS 使用的是完全不同的連接方式，用的埠也不一樣，前者是80，后者是443，

4、HTTP 的連接很簡單，是無狀態的，HTTPS 協議是由 SSL+HTTP 協議構建的可進行加密傳輸、身份認證的網路協議，比 HTTP 協議安全，(無狀態的意思是其資料包的發送、傳輸和接收都是相互獨立的，無連接的意思是指通信雙方都不長久的維持對方的任何資訊，)

六十、前端工程化有哪些

模塊化

模塊化只是在檔案層面上，對代碼或資源的拆分；

組件化

而組件化是在設計層面上，對UI（用戶界面）的拆分，

規范化

• 目錄結構的制定
• 編碼規范
• 前后端介面規范
• 檔案規范
• 組件管理
• Git分支管理
• Commit描述規范
• 定期CodeReview
• 視覺圖示規范

自動化

自動化測驗

持續集成

自動化構建

自動化部署

六十一、git常用指令

git branch 查看本地所有分支
git status 查看當前狀態 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看本地所有分支
git commit -am "init" 提交并且加注釋 
git remote add origin git@192.168.1.119:ndshow
git push origin master 將檔案給推到服務器上 
git remote show origin 顯示遠程庫origin里的資源 
git push origin master:develop
git push origin master:hb-dev 將本地庫與服務器上的庫進行關聯 
git checkout --track origin/dev 切換到遠程dev分支
git branch -D master develop 洗掉本地庫develop
git checkout -b dev 建立一個新的本地分支dev
git merge origin/dev 將分支dev與當前分支進行合并
git checkout dev 切換到本地dev分支
git remote show 查看遠程庫
git add .
git rm 檔案名(包括路徑) 從git中洗掉指定檔案
git clone git://github.com/schacon/grit.git 從服務器上將代碼給拉下來
git config --list 看所有用戶
git ls-files 看已經被提交的
git rm [file name] 洗掉一個檔案
git commit -a 提交當前repos的所有的改變
git add [file name] 添加一個檔案到git index
git commit -v 當你用－v引數的時候可以看commit的差異
git commit -m "This is the message describing the commit" 添加commit資訊
git commit -a -a是代表add，把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暫存的更新
git rm a.a 移除檔案(從暫存區和作業區中洗掉)
git rm --cached a.a 移除檔案(只從暫存區中洗掉)
git commit -m "remove" 移除檔案(從Git中洗掉)
git rm -f a.a 強行移除修改后檔案(從暫存區和作業區中洗掉)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 將檔案給push到一個臨時空間中
git stash pop 將檔案從臨時空間pop下來
---------------------------------------------------------
git remote add origin git@github.com:username/Hello-World.git
git push origin master 將本地專案給提交到服務器中
-----------------------------------------------------------
git pull 本地與服務器端同步
-----------------------------------------------------------------
git push (遠程倉庫名) (分支名) 將本地分支推送到服務器上去，
git push origin serverfix:awesomebranch
------------------------------------------------------------------
git fetch 相當于是從遠程獲取最新版本到本地，不會自動merge
git commit -a -m "log_message" (-a是提交所有改動，-m是加入log資訊) 本地修改同步至服務器端 ：
git branch branch_0.1 master 從主分支master創建branch_0.1分支
git branch -m branch_0.1 branch_1.0 將branch_0.1重命名為branch_1.0
git checkout branch_1.0/master 切換到branch_1.0/master分支
du -hs

-----------------------------------------------------------
mkdir WebApp
cd WebApp
git init
touch README
git add README
git commit -m 'first commit'
git remote add origin git@github.com:daixu/WebApp.git
git push -u origin master

六十二、promise解決了什么問題

• 同步的方式寫異步的代碼，用來解決回呼地獄問題，
• 此外，promise物件提供統一的介面，使得控制異步操作更加容易

六十三、vue中的diff演算法

用 JavaScript 物件結構表示 DOM 樹的結構；然后用這個樹構建一個真正的 DOM 樹，插到文 檔當中

當狀態變更的時候，重新構造一棵新的物件樹，然后用新的樹和舊的樹進行比較(diff)，記錄兩棵樹差異

把第二棵樹所記錄的差異應用到第一棵樹所構建的真正的DOM樹上(patch)，視圖就更新了

diff整體策略為：深度優先，同層比較

1、比較只會在同層級進行, 不會跨層級比較

2、比較的程序中，回圈從兩邊向中間收攏

新節點有孩子

清空老節點文本

創建孩子并追加

老節點有孩子，洗掉即可

老節點存在文本，清空

雙方都是文本節點，跟新文本

六十四、commit常用型別

feat:: 型別為 feat 的提交表示在代碼庫中新增了一個功能（這和語意化版本中的 MINOR 相對應），

fix:：型別為 fix 的 提交表示在代碼庫中修復了一個 bug （這和語意化版本中的 PATCH 相對應），

docs:: 只是更改檔案，

style:: 不影響代碼含義的變化（空白、格式化、缺少分號等），

refactor:: 代碼重構，既不修復錯誤也不添加功能，

perf:: 改進性能的代碼更改，

test:: 添加確實測驗或更正現有的測驗，

build:: 影響構建系統或外部依賴關系的更改（示例范圍：gulp、broccoli、NPM），

ci:: 更改持續集成檔案和腳本（示例范圍：Travis、Circle、BrowserStack、SauceLabs），

chore:: 其他不修改src或test檔案，

revert:: commit 回退，

六十五、什么是高階函式

一、函式的引數是一個函式

二、函式回傳一個函式

六十六、原生APP和混合APP的判斷方法

六十七、NPM更改源 查詢源

npm config set registry https://registry.npm.taobao.org

npm config get registry

npm install -g cnpm --registry=https://registry.npm.taobao.org

六十八.自定義過濾器的語法是什么?

filter(‘過濾器名’,function(val){return 回傳的值})

六十九、為什么使用繼承

1、減少無用的多次重復代碼

2、使用戶體驗更高、加載更快

七十、IIFE是什么？

中文名：自執行函式

(function(形參){ alert(‘哈哈’) })(實參)

作用？

1、隱藏實作

2、不會污染外部（全域）命名空間

3、用它來撰寫js模塊

七十一、js引擎如何管理記憶體

記憶體生命周期

1、開辟小塊記憶體，獲得試用權限

2、存盤資料，進行操作（可以反復操作）

3、釋放小記憶體空間

釋放記憶體***

區域變數：函式執行完自動釋放

物件：生成物件后，變數不會消失，需要垃圾回識訓制清除！

七十二、全域執行背景關系是什么？

1. 發生在在執行全域代碼前，將window作為全域執行背景關系
2. 對全域變數進行預處理

2.1.將var定義的變數賦值給window，并且值為underfined

2.2.將function宣告全域函式賦值給window(值為fun)

2.3.將this指向window

1. 開始執行全域代碼

七十三、函式執行背景關系是什么？

在函式呼叫之前，創建對應的函式的執行背景關系的環境 對區域執行背景關系環境進行預處理 函式呼叫時入堆疊 呼叫結束出堆疊

七十四、執行背景關系堆疊

1.在全域代碼之前，js引擎會創建一個堆疊來存盤管理當前所有執行背景關系的物件

2.當全域執行背景關系(window)確定后，會將其添加到堆疊中（壓堆疊）

3.當函式執行背景關系創建后，將其添加到堆疊中（壓堆疊）

4.在當前的函式執行完之后，會將其創建的背景關系物件移除堆疊

5.當所有的代碼執行完之后，堆疊中將只剩下window

七十五、vue前端路由實作的原理是什么？

前端路由是基于hash值的變化進行實作的

核心是依靠一個事件，即監聽hash值變化的事件

七十六、請簡述嵌套路由概念

當我們進行路由的時候顯示的組件中的內容還有子級路由的鏈接以及內容，

七十七、什么是動態路由?

可以在一個路由中設定多段“路徑引數”，對應的值都會設定到$route.params中

七十八、簡述4種獲取的動態路由引數的方式?

通過$route.params來獲取路徑引數

通過props[‘引數變數名’]來接收引數

將props設定為物件，那么就直接將物件的資料傳遞給組件進行使用，組件用props[‘引數變數名’]

如果想要獲取傳遞的引數值還想要獲取傳遞的物件資料，那么props應該設定為函式形式

七十九、寫出命名路由基本語法

<router-link :to="{name:'xxx',params:{id:32}}">鏈接文字</router-link>
	script:
		news={
			template:""
		}
		var router=new VueRouter({
			routes:[
				{name:"xxx",path:"/news/:id",component:news}
			]
		})

八十、請詳細說明vue的導航方式有幾種

1. 宣告式導航：通過點擊鏈接的方式實作的導航
<router-link to="/user">User1</router-link>
2. 編程式導航：呼叫js的api方法實作導航，如js代碼： 
this.$router.push( { name:'user' } )

八十一、請寫出7種編程式導航的實作

 this.$router.push("hash地址");
	this.$router.push("/login");
	this.$router.push({ name:'user' , params: {id:123} });
	this.$router.push({ path:"/login" });
	this.$router.push({ path:"/login",query:{username:"jack"} });
	this.$router.go( n ); //n為數字，參考history.go
	this.$router.go( -1 );

八十二、簡述promise靜態方法all()和race()的區別

陣列中只有有一個promise實體被reject那么最終promise觸發catch，只有陣列中全部promise實體的resolve才觸發then，并且要帶上iterable中全部promise

八十三、漸進式框架的理解

漸進式框架，主張問題較少，也就是弱主張，沒有那多的硬性要求，例如angular必須使用它的模塊機制，依賴注入，，，，react的函式式編程理念，vue就是沒有啥主張，可以在原有系統上面，引入vue核心庫直接就可以根據自己需要再去逐漸增加功能，（如，組件系統、路由、狀態機等）

八十四、請寫出你知道的事件修飾符（至少5種）

.stop .prevent .self vue.config.keyCodes .keyup .keydown

八十五、自定義指令有什么用?自定全域指令的語法及如何作用

\- 內置指令不能滿足我們特殊的需求 - Vue允許我們自定義指令 Vue.directive('指令名',{        inserted:function(el){                    }    }) Vue.directive('指令名',{        bind:function(el,binding){                    }    })

八十六、簡述注冊區域自定義指令方法

directives:{ 指令名:{     inserted:function(el){ 	}     } } directives:{ 指令名:{     bind:function(el,binding){ 	}     } }

八十七、過濾器有什么用?

- Vue.js允許自定義過濾器，可被用于一些常見的文本格式化，

- 過濾器可以用在兩個地方：雙花括號插值和v-bind運算式，

- 過濾器應該被添加在JavaScript運算式的尾部，由“管道”符號指示

八十八、vue生命周期概念及作用

Vue的生命周期：Vue實體從創建到銷毀的程序 ,

生命周期作用：生命周期中有多個事件鉤子，讓我們在控制整個Vue實體的程序時更容易形成好的邏輯

八十九、VueX重繪頁面資料丟失怎么解決

1、localStorage: localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的資料也不會消失，localStorage除非主動洗掉資料，否則資料永遠不會消失，

2、sessionStorage:sessionStorage的生命周期是在僅在當前會話下有效，sessionStorage引入了一個“瀏覽器視窗”的概念，sessionStorage是在同源的視窗中始終存在的資料，只要這個瀏覽器視窗沒有關閉，即使重繪頁面或者進入同源另一個頁面，資料依然存在，但是sessionStorage在關閉了瀏覽器視窗后就會被銷毀，同時獨立的打開同一個視窗同一個頁面，sessionStorage也是不一樣的，

3、cookie:cookie生命期為只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉， 存放資料大小為4K左右,有個數限制（各瀏覽器不同），一般不能超過20個，缺點是不能儲存大資料且不易讀取，

九十、導航守衛中的處于當前活躍狀態

• to: Route: 即將要進入的目標 路由物件
• from: Route: 當前導航正要離開的路由

九十一、靜態路由和動態路由的區別

靜態路由是啟動應用的時候把所有路由模塊都加載進來

動態路由是當你訪問到這個頁面，才把對應的組件加載

九十二、OSI七層模型

開放式系統互聯通信參考模型（英語：Open System Interconnection Reference Model，縮寫為 OSI），簡稱為OSI模型（OSI model），一種概念模型，由國際標準化組織提出，一個試圖使各種計算機在世界范圍內互連為網路的標準框架，定義于ISO/IEC 7498-1，

1、物理層

在OSI參考模型中，物理層（Physical Layer）是參考模型的最低層，物理層的作用是實作相鄰計算機節點之間位元流的透明傳送，盡可能屏蔽掉具體傳輸介質和物理設備的差異，“透明傳送位元流”表示經實際電路傳送后的位元流沒有發生變化，對傳送的位元流來說，這個電路好像是看不見的，

2、資料鏈路層

資料鏈路層（Data Link Layer）是OSI模型的第二層，負責建立和管理節點間的鏈路，該層的主要功能是：通過各種控制協議，將有差錯的物理信道變為無差錯的、能可靠傳輸資料幀的資料鏈路，在計算機網路中由于各種干擾的存在，物理鏈路是不可靠的，因此，這一層的主要功能是在物理層提供的位元流的基礎上，通過差錯控制、流量控制方法，使有差錯的物理線路變為無差錯的資料鏈路，即提供可靠的通過物理介質傳輸資料的方法，資料鏈路層的具體作業是接收來自物理層的位流形式的資料，并封裝成幀，傳送到上一層；同樣，也將來自上層的資料幀，拆裝為位流形式的資料轉發到物理層；并且，還負責處理接收端發回的確認幀的資訊，以便提供可靠的資料傳輸，

3、網路層

網路層（Network Layer）是OSI模型的第三層，它是OSI參考模型中最復雜的一層，它在下兩層的基礎上向資源子網提供服務，其主要任務是：通過路由選擇演算法，為報文或分組通過通信子網選擇最適當的路徑，具體地說，資料鏈路層的資料在這一層被轉換為資料包，然后通過路徑選擇、分段組合、順 序、進/出路由等控制，將資訊從一個網路設備傳送到另一個網路設備，一般地，資料鏈路層是解決同一網路內節點之間的通信，而網路層主要解決不同子網間的通信，例如在廣域網之間通信時，必然會遇到路由（即兩節點間可能有多條路徑）選擇問題，

4、傳輸層

傳輸層（Transport Layer）是OSI模型的第4層，因此該層是通信子網和資源子網的介面和橋梁，起到承上啟下的作用，該層的主要任務是：向用戶提供可靠的端到端的差錯和流量控制，保證報文的正確傳輸，傳輸層的作用是向高層屏蔽下層資料通信的細節，即向用戶透明地傳送報文，該層常見的協議：TCP/IP中的TCP協議和UDP協議，傳輸層提供會話層和網路層之間的傳輸服務，這種服務從會話層獲得資料，并在必要時，對資料進行分割，然后，傳輸層將資料傳遞到網路層，并確保資料能正確無誤地傳送到網路層，因此，傳輸層負責提供兩節點之間資料的可靠傳送，當兩節點的聯系確定之后，傳輸層則負責監督作業，綜上，傳輸層的主要功能如下：監控服務質量，

5、會話層

會話層（Session Layer）是OSI模型的第5層，是用戶應用程式和網路之間的介面，主要任務是：向兩個物體的表示層提供建立和使用連接的方法，將不同物體之間的表示層 的連接稱為會話，因此會話層的任務就是組織和協調兩個會話行程之間的通信，并對資料交換進行管理， 用戶可以按照半雙工、單工和全雙工的方式建立會話，當建立會話時，用戶必須提供他們想要連接的遠程地址，而這些地址與MAC（介質訪問控制子層）地址或網路層的邏輯地址不同，它們是為用戶專門設計的，更便于用戶記憶，

6、表示層

表示層（Presentation Layer）是OSI模型的第六層，它對來自應用層的命令和資料進行解釋，對各種語法賦予相應的含義，并按照一定的格式傳送給會話層，其主要功能是“處理用戶資訊的表示問題，如編碼、資料格式轉換和加密解密”等，

7、應用層

應用層（Application Layer）是OSI參考模型的最高層，它是計算機用戶，以及各種應用程式和網路之間的介面，其功能是直接向用戶提供服務，完成用戶希望在網路上完成的各種作業，它在其他6層作業的基礎上，負責完成網路中應用程式與網路操作系統之間的聯系，建立與結束使用者之間的聯系，并完成網路用戶提出的各種網路服務及 應用所需的監督、管理和服務等各種協議，此外，該層還負責協調各個應用程式間的作業，

九十三、tcp/ip5層模型

一、物理層

物理層（Physical Layer）也稱為一層，這一層的處理單位是位元（bit），它的主要功能是完成相鄰節點之間位元（bit）的傳輸，

二、資料鏈路層

資料鏈路層（Data Link Layer）也稱二層，這一層的處理單位是幀（Frame），資料鏈路層的主要功能是：負責對物理層資料添加物理地址資訊和必要的控制資訊等，形成幀，并在傳輸路上進行無差錯的傳送，

資料鏈路層尋址采用的是物理地址，在常見的以太網中指的是MAC地址，MAC地址是固化在網卡上面的，全球唯一的，用48位二進制數標識，

【重要概念】

硬體物理地址（MAC）地址：MAC地址是固化（燒錄）在網卡里的，也叫硬體地址，是由48位(6位元組，一個位元組=8位)二進制的數字組成，

如：44-4A-53-54-00-00（16進制表示），48位二進制數轉換為十六進制時是每4位轉換成一個16十六進制字符的，所以48/4=12個十六進制字符，同時8位二進制數代表一個位元組，這樣我們看到的MAC地址正好是六段，

也就是說，在網路底層的物理傳輸程序中，是通過物理地址來識別主機的，它一般也是全球唯一的，

三、網路層

網路層（Network Layer）也稱三層，這一層的處理單位是包（Packet），這里的地址稱邏輯地址，即IP地址，三層可以建立網路連接和為上層提供服務，

四、傳輸層

傳輸層（Transport Layer）也稱四層，這一層的處理單位是報文段（Segment，TCP時使用）/用戶資料報（User Datagram，UDP時使用），傳輸層在源節點和目的節點的兩個行程物體之間提供端到端的資料傳輸，

五、應用層

應用層包括所有的高層協議，應用層不僅直接和應用程式介面而且提供常見的網路應用服務，

應用的概念和協議發展得很快，使用面又很廣泛，這給應用功能的標準化帶來了復雜性和困難性，比起其它層來說，應用層需要的標準最多，但也是最不成熟的一層，但隨著應用層的發展，各種特定應用服務的增多，應用服務的標準化開展了許多研究作業，

九十四、html頭部都有哪些組成meta

九十五、父組件與子組件的生命周期怎么執行順序

**加載渲染程序**

父beforeCreate-->父created-->父beforeMount-->子beforeCreate-->子created--> 子beforeMount-->子mounted-->父mounted

**子組件更新程序**

父beforeUpdate-->子beforeUpdate-->子update-->父updated

**父組件更新程序**

父beforeUpdate-->父updated

**銷毀程序**

父beforeDestroy-->子beforeDestroy-->子destroyed-->父destroyed

九十六、flash和js通過什么類如何互動?

Flash提供了ExternalInterface介面與JavaScript通信，ExternalInterface有兩個方法，call和addCallback：

ExternalInterface.addCallback("在js里可呼叫的flash方法名",flash內方法) //在flash中通過這個方法公開 在js中可呼叫的flash內的方法;
ExternalInterface.call("js方法",傳給js的引數) //在flash里呼叫js里的方法

九十七、HTML的Doctype和嚴格模式與混雜模式的描述

九十八、CSS Sprites

九十九、bom物件中的history

length 回傳瀏覽器歷史串列中的URL數量， 

back() 加載 history串列中的前一個URL， 

forward() 加載  history  串列中的下一個URL， 

go()  加載history串列中的某個具體頁面，

一零零、阻止默認事件和冒泡

阻止默認事件： 
e.preventDefault() 
e.returnValue = false  (IE) 
阻止冒泡： 
e.stopPropagation() 
e.cancelBubble = true (IE)

一零一、正則運算式

一零二、逗號運算式

在for回圈中如果寫入兩個條件運算式 i<10,j<6 那么只有后者的判斷有效

一零三、重構理解

不影響之前功能的情況下 對網站進行優化 并進行拓展

js  css可讀性增強 

一零四、MVVM,MVC

MVVM的概念最早是沒有的，是從后端借鑒過來的MVC

M資料

V 頁面

C業務邏輯

最早的出發點在V頁面中然后從C中去拿資料，然后M把資料回傳給V

因為所有的邏輯都寫在C中所以：

C比較龐大不便于維護和操作

耦合度太高  修改V 會牽動M和C

MVVM 解決MVC問題

M資料

V頁面

VM組件  業務邏輯提取到組件

耦合度不高

A、IT公司人員配比

業務中臺40人開發團隊配置

1、架構師：1名

2、開發經理：1名

3、開發主管：1名

4、前端開發：7名

5、后端開發：14名

6、DBA：2名

7、測驗人員：4名

8、UI人員：3名

9、BA業務顧問：5名

一、面試問題回答寫的過于簡單沒有具體的實作的步驟，

二、在面試的時候一定要看著面試官，通過面部表情就可以知道是否面試成功，或失敗，

三、回答面試題的時候一定要自信，很可定的告訴面試官這個東西是如何實作的，

四、著裝問題，