vue項(xiàng)目性能優(yōu)化
1>、利用v-if和v-show減少初始化渲染和切換渲染的性能開銷
2>、computed、watch、methods區(qū)分使用場(chǎng)景
3>、提前處理好數(shù)據(jù)解決v-if和v-for必須同級(jí)的問題
4>、給v-for循環(huán)項(xiàng)加上key提高diff計(jì)算速度
5>、提前過濾掉非必須數(shù)據(jù)，優(yōu)化data選項(xiàng)中的數(shù)據(jù)結(jié)構(gòu)
6>、避免在v-for循環(huán)中讀取data中數(shù)組類型的數(shù)據(jù)
7>、防抖和節(jié)流
8>、圖片大小優(yōu)化和懶加載
9>、組件庫的按需引入
10>、項(xiàng)目打包的優(yōu)化
1、什么是虛擬dom？
虛擬dom本質(zhì)上就是一個(gè)普通的JS對(duì)象，用于描述視圖的界面結(jié)構(gòu)在vue中，每個(gè)組件都有一個(gè)render函數(shù)，每個(gè)render函數(shù)都會(huì)返回一個(gè)虛擬dom樹，這也就意味著每個(gè)組件都對(duì)應(yīng)一棵虛擬DOM樹
2、為什么需要虛擬dom？
在vue中，渲染視圖會(huì)調(diào)用render函數(shù)，這種渲染不僅發(fā)生在組件創(chuàng)建時(shí)，同時(shí)發(fā)生在視圖依賴的數(shù)據(jù)更新時(shí)。如果在渲染時(shí)，直接使用真實(shí)DOM，由于真實(shí)DOM的創(chuàng)建、更新、插入等操作會(huì)帶來大量的性能損耗，從而就會(huì)極大的降低渲染效率。因此，vue在渲染時(shí)，使用虛擬dom來替代真實(shí)dom，主要為解決渲染效率的問題。
3、虛擬dom是如何轉(zhuǎn)換為真實(shí)dom的？
在一個(gè)組件實(shí)例首次被渲染時(shí)，它先生成虛擬dom樹，然后根據(jù)虛擬dom樹創(chuàng)建真實(shí)dom，并把真實(shí)dom掛載到頁面中合適的位置，此時(shí)，每個(gè)虛擬dom便會(huì)對(duì)應(yīng)一個(gè)真實(shí)的dom。如果一個(gè)組件受響應(yīng)式數(shù)據(jù)變化的影響，需要重新渲染時(shí)，它仍然會(huì)重新調(diào)用render函數(shù)，創(chuàng)建出一個(gè)新的虛擬dom樹，用新樹和舊樹對(duì)比，通過對(duì)比，vue會(huì)找到最小更新量，然后更新必要的虛擬dom節(jié)點(diǎn)，最后，這些更新過的虛擬節(jié)點(diǎn)，會(huì)去修改它們對(duì)應(yīng)的真實(shí)dom，這樣一來，就保證了對(duì)真實(shí)dom達(dá)到最小的改動(dòng)。
4、vue 中 key 值的作用？
所以一句話，**key的作用主要是為了高效的更新虛擬DOM**。另外vue中在使用相同標(biāo)簽名元素的過渡切換時(shí)，也會(huì)使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過渡效果。
5、computed 和 watch 區(qū)別？
computed 是計(jì)算屬性，依賴其他屬性計(jì)算值，并且 computed 的值有緩存，只有當(dāng)計(jì)算值變化才會(huì)返回內(nèi)容。watch 監(jiān)聽到值的變化就會(huì)執(zhí)行回調(diào)，在回調(diào)中可以進(jìn)行一些邏輯操作。
6、Math.ceil 和 Math.floor
Math.ceil() === 向上取整，函數(shù)返回一個(gè)大于或等于給定數(shù)字的最小整數(shù)。Math.floor() === 向下取整，函數(shù)返回一個(gè)小于或等于給定數(shù)字的最大整數(shù)。
7、一個(gè)列表，假設(shè)有 100000 個(gè)數(shù)據(jù)，這個(gè)該怎么辦？
我們需要思考的問題：該處理是否必須同步完成？數(shù)據(jù)是否必須按順序完成？解決辦法：（1）將數(shù)據(jù)分頁，利用分頁的原理，每次服務(wù)器端只返回一定數(shù)目的數(shù)據(jù)，瀏覽器每次只對(duì)一部分進(jìn)行加載。（2）使用懶加載的方法，每次加載一部分?jǐn)?shù)據(jù)，其余數(shù)據(jù)當(dāng)需要使用時(shí)再去加載。（3）使用數(shù)組分塊技術(shù)，基本思路是為要處理的項(xiàng)目創(chuàng)建一個(gè)隊(duì)列，然后設(shè)置定時(shí)器每過一段時(shí)間取出一部分?jǐn)?shù)據(jù)，然后再使用定時(shí)器取出下一個(gè)要處理的項(xiàng)目進(jìn)行處理，接著再設(shè)置另一個(gè)定時(shí)器。
8、圖片的懶加載和預(yù)加載
懶加載也叫延遲加載，指的是在長(zhǎng)網(wǎng)頁中延遲加載圖片的時(shí)機(jī)，當(dāng)用戶需要訪問時(shí)，再去加載，這樣可以提高網(wǎng)站的首屏加載速度，提升用戶的體驗(yàn)，并且可以減少服務(wù)器的壓力。它適用于圖片很多，頁面很長(zhǎng)的電商網(wǎng)站的場(chǎng)景。懶加載的實(shí)現(xiàn)原理是，將頁面上的圖片的 src 屬性設(shè)置為空字符串，將圖片的真實(shí)路徑保存在一個(gè)自定義屬性中，當(dāng)頁面滾動(dòng)的時(shí)候，進(jìn)行判斷，如果圖片進(jìn)入頁面可視區(qū)域內(nèi)，則從自定義屬性中取出真實(shí)路徑賦值給圖片的 src 屬性，以此來實(shí)現(xiàn)圖片的延遲加載。預(yù)加載指的是將所需的資源提前請(qǐng)求加載到本地，這樣后面在需要用到時(shí)就直接從緩存取資源。通過預(yù)加載能夠減少用戶的等待時(shí)間，提高用戶的體驗(yàn)。我了解的預(yù)加載的最常用的方式是使用 js 中的 image 對(duì)象，通過為 image 對(duì)象來設(shè)置 scr 屬性，來實(shí)現(xiàn)圖片的預(yù)加載。這兩種方式都是提高網(wǎng)頁性能的方式，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。
9、適配器模式是什么？
適配器用來解決兩個(gè)接口不兼容的情況，不需要改變已有的接口，通過包裝一層的方式實(shí)現(xiàn)兩個(gè)接口的正常協(xié)作。假如我們需要一種新的接口返回方式，但是老的接口由于在太多地方已經(jīng)使用了，不能隨意更改，這個(gè)時(shí)候就可以使用適配器模式。比如我們需要一種自定義的時(shí)間返回格式，但是我們又不能對(duì) js 時(shí)間格式化的接口進(jìn)行修改，這個(gè)時(shí)候就可以使用適配器模式。
10、觀察者模式和發(fā)布訂閱模式有什么不同？
發(fā)布訂閱模式其實(shí)屬于廣義上的觀察者模式在觀察者模式中，觀察者需要直接訂閱目標(biāo)事件。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)。而在發(fā)布訂閱模式中，發(fā)布者和訂閱者之間多了一個(gè)調(diào)度中心。調(diào)度中心一方面從發(fā)布者接收事件，另一方面向訂閱者發(fā)布事件，訂閱者需要在調(diào)度中心中訂閱事件。通過調(diào)度中心實(shí)現(xiàn)了發(fā)布者和訂閱者關(guān)系的解耦。使用發(fā)布訂閱者模式更利于我們代碼的可維護(hù)性。
11、vue-router 中的導(dǎo)航鉤子函數(shù)
（1）全局的鉤子函數(shù) beforeEach 和 afterEachbeforeEach 有三個(gè)參數(shù)，to 代表要進(jìn)入的路由對(duì)象，from 代表離開的路由對(duì)象。next 是一個(gè)必須要執(zhí)行的函數(shù)，如果不傳參數(shù)，那就執(zhí)行下一個(gè)鉤子函數(shù)，如果傳入 false，則終止跳轉(zhuǎn)，如果傳入一個(gè)路徑，則導(dǎo)航到對(duì)應(yīng)的路由，如果傳入 error ，則導(dǎo)航終止，error 傳入錯(cuò)誤的監(jiān)聽函數(shù)。
（2）單個(gè)路由獨(dú)享的鉤子函數(shù) beforeEnter，它是在路由配置上直接進(jìn)行定義的。
（3）組件內(nèi)的導(dǎo)航鉤子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它們是直接在路由組件內(nèi)部直接進(jìn)行定義的。
12、HTML5 和 HTML區(qū)別
html：沒有體現(xiàn)結(jié)構(gòu)語義化的標(biāo)簽，如：<div id="nav"></div>
html5：添加了許多具有語義化的標(biāo)簽，如：<article>、<aside>、<audio>、<bdi>
相對(duì)于HTML，HTML5中新增和修改了一些元素。
HTML無法處理不準(zhǔn)確的語法；HTML5能夠處理不準(zhǔn)確的語法。
HTML如果不使用Flash播放器支持，它不支持音頻和視頻。HTML5使用<audio>和<video>標(biāo)簽來支持音頻和視頻控制。
文檔聲明HTML5方便書寫，精簡(jiǎn)，有利于程序員快速的閱讀和開發(fā)。
