前端面試答案2

雙向綁定原理：實現數據的雙向綁定，首先要對數據進行劫持監聽，因此咱們須要設置一個監聽器Observer，用來監聽全部屬性。若是屬性發上變化了，就須要告訴訂閱者Watcher看是否須要更新。由於訂閱者是有不少個，因此咱們須要有一個消息訂閱器Dep來專門收集這些訂閱者，而後在監聽器Observer和訂閱者Watcher之間進行統一管理的。

vue2與3的雙向綁定和實現的優缺點：1. 在Vue中，Object.defineProperty沒法監控到數組下標的變化，

2. Object.defineProperty只能劫持對象的屬性,所以咱們須要對每一個對象的每一個屬性進行遍歷。

而要取代它的Proxy有如下兩個優勢：

1. 能夠劫持整個對象，並返回一個新對象
2. 有13種劫持操做

Proxy 能夠理解成，在目標對象以前架設一層「攔截」，外界對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。

vue路由實現原理：：JS會感知到url的變化，經過這一點，能夠用js動態的將當前頁面的內容清除掉，而後將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是後端來作了，而是前端來作，判斷頁面究竟是顯示哪一個組件，清除不須要的，顯示須要的組件。這種過程就是單頁應用，每次跳轉的時候不須要再請求html文件了。

虛擬dom：

最原始的狀況下，框架一旦發現數據發生了變更就對整個頁面進行更新。這樣的作法效率低下，由於數據的變更而致使的頁面變更極可能只是局部的，直接對整個頁面進行更新形成了沒必要要的性能消耗。

因此人們很天然的就會想到將因數據變更而新生成的DOM結構與已經顯示出來的DOM結構進行比較，找出二者的不一樣處，再對這些不一樣進行從新渲染便可。有的放矢，從而提高性能。

而那個僅在內存中未顯示出來的DOM結構就是所謂的虛擬DOM，找出二者不一樣的算法就是Diff算法。

不過須要注意的是，虛擬DOM和Diff算法的出現是爲了解決由命令式編程轉變爲函數式編程、數據驅動後所帶來的性能問題的。換句話說，直接操做DOM的性能並不會低於虛擬DOM和Diff算法，甚至還會優於。

compare屬性：

• computed 會蒐集並記錄依賴。
• 依賴發生了變化纔會從新計算 computed ，因爲 computed 是有緩存的，因此當依賴變化以後，第一次訪問 computed 屬性的時候，纔會計算新的值。
• 只能蒐集到響應式屬性依賴，沒法蒐集到非響應式屬性依賴。
• 沒法蒐集到當前 vm 實例以外的屬性依賴

nextTick：兩個方法的做用都是在DOM更新循環結束以後執行延遲迴調。當咱們改變了數據的時候，DOM的渲染須要時間，然而咱們但願去操做DOM元素，就須要等待渲染完成後再去操做。就須要用到 nextTick，將等待DOM渲染完成後須要的操做放在回調函數裏。

父子組件傳值方式彙總：https://blog.csdn.net/lianwenxiu/article/details/87898688

 

瀏覽器緩存機制：

（a）瀏覽器斷定是否有緩存

（b）緩存是否過時

（b）過程執行完後，若是斷定爲未過時，則使用客戶端緩存。那麼就是屬於「強緩存」。

（c）跟服務器協商是否使用緩存

（d）協商緩存

vue優化方案：

對路由組件進行懶加載

v-if 和 v-show選擇調用

v-show和v-if的區別是：v-if是懶加載，當狀態爲true時纔會加載，而且爲false時不會佔用佈局空間；v-show是不管狀態是true或者是false，都會進行渲染，並對佈局佔據空間對於在項目中，須要頻繁調用，不須要權限的顯示隱藏，能夠選擇使用v-show，能夠減小系統的切換開銷。

爲item設置惟一key值，

在列表數據進行遍歷渲染時，須要爲每一項item設置惟一key值，方便vuejs內部機制精準找到該條列表數據。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。

細分vuejs組件

在項目開發過程之中，初版本把全部的組件的佈局寫在一個組件中，當數據變動時，因爲組件代碼比較龐大，vuejs的數據驅動視圖更新比較慢，形成渲染比較慢。形成比較差的體驗效果。因此把組件細分，好比一個組件，能夠把整個組件細分紅輪播組件、列表組件、分頁組件等。

減小watch的數據

當組件某個數據變動後須要對應的state進行變動，就須要對另外的組件進行state進行變動。可使用watch監聽相應的數據變動並綁定事件。當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，因此減小watch的數據。其它不一樣的組件的state雙向綁定，能夠採用事件中央總線或者vuex進行數據的變動操做。

內容類系統的圖片資源按需加載

對於內容類系統的圖片按需加載，若是出現圖片加載比較多，能夠先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件，滾動到可視區域先再對數據進行加載顯示，減小系統加載的數據。

SR(服務端渲染)

若是項目比較大，首屏不管怎麼作優化，都出現閃屏或者一陣黑屏的狀況。能夠考慮使用SSR(服務端渲染)，vuejs官方文檔提供next.js很好的服務端解決方案，可是侷限性就是目前僅支持Koa、express等Nodejs的後臺框架，須要webpack支持。目前本身瞭解的就是後端支持方面，vuejs的後端渲染支持php，其它的不太清楚。

 

vue渲染大量數據時處理：

1. 異步渲染組件：由於組件渲染太多，影響頁面的渲染時間，全部能夠延遲組件渲染，能夠考慮v-if處理

2. 可使用虛擬滾動的組件：參考使用這個插件

vue首屏優化：

一、壓縮代碼

不管是否爲單頁應用，代碼的壓縮都是要作的。 
對於vue-cli生成的項目，在Webpack配置文件中使用了UglifyJsPlugin進行代碼的壓縮：

二、框架和插件按需加載

對於項目中用到的一些UI框架，好比 Onsen UI 、Mint UI 等等。若是咱們只使用框架的部分組件，那麼能夠不要引入整個框架，按需引入用到的組件

三、框架和插件從cdn中引入

在開發過程當中，咱們其實不會要去更改這些第三方庫，因此能夠把它們放到cdn中，不參與打包。 
在 index.html 中使用cdn引入

四、路由懶加載

 

路由懶加載也就是 把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件。 
結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。

、

重繪與重排

1>重排(Reflow)：當渲染樹的一部分必須更新而且節點的尺寸發生了變化，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造渲染樹。

2>重繪(Repaint)：是在一個元素的外觀被改變所觸發的瀏覽器行爲，瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀。好比改變某個元素的背景色、文字顏色、邊框顏色等等

3>引起重排

1.添加、刪除可見的dom

2.元素的位置改變

3.元素的尺寸改變(外邊距、內邊距、邊框厚度、寬高、等幾何屬性)

4.頁面渲染初始化

5.瀏覽器窗口尺寸改變

6.獲取某些屬性。當獲取一些屬性時，瀏覽器爲取得正確的值也會觸發重排,它會致使隊列刷新，這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。因此，在屢次使用這些值時應進行緩存。

4>優化：

瀏覽器本身的優化：

瀏覽器會維護1個隊列，把全部會引發重排，重繪的操做放入這個隊列，等隊列中的操做到必定數量或者到了必定時間間隔，瀏覽器就會flush隊列，進行一批處理，這樣屢次重排，重繪變成一次重排重繪

減小 reflow/repaint：
（1）不要一條一條地修改 DOM 的樣式。能夠先定義好 css 的 class，而後修改 DOM 的 className。

（2）不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量。（3）爲動畫的 HTML 元件使用 fixed 或 absoult 的 position，那麼修改他們的 CSS 是不會 reflow 的。（4）千萬不要使用 table 佈局。由於可能很小的一個小改動會形成整個 table 的從新佈局。(table及其內部元素除外，它可能須要屢次計算才能肯定好其在渲染樹中節點的屬性，一般要花3倍於同等元素的時間。這也是爲何咱們要避免使用table作佈局的一個緣由。)