前端底層知識體系構(gòu)建

?

前沿：樹醬君是個渣渣，梳理了下發(fā)現(xiàn)還是蠻多知識點(diǎn)不夠扎實(shí)，童鞋有機(jī)會也定期給自己做個復(fù)盤和回顧，梳理自己的知識體系。再加上前端娛樂圈變化多端，以至于我們既要加強(qiáng)對底層基礎(chǔ)知識的鞏固，查漏補(bǔ)缺，也要保持對新事物探索的好奇心。那樹醬我是如何構(gòu)建自己的知識體系呢？（特別算法是硬傷啊）? 該本章為上下兩章，本次分享是上章

?

1.Vue 知識體系

1.1 基礎(chǔ)原理

1.1.1 Vnode

?

Vnode也稱虛擬node節(jié)點(diǎn),是對真實(shí)元素的抽象。誕生的背景是因?yàn)榍岸嗽诤荛L一段時間通過直接操作Dom來達(dá)到修改視圖，隨著項(xiàng)目龐大，維護(hù)就變成一個問題。那換個角度想如果把真實(shí)Dom樹抽象成為一棵以JS語法構(gòu)建的抽象，然后通過修改抽象樹的結(jié)構(gòu)來轉(zhuǎn)換成真實(shí)的Dom來重新渲染到視圖。

?

• 如何生成虛擬節(jié)點(diǎn)？：createElement()深入實(shí)踐學(xué)習(xí)的，可閱讀樹醬之前寫的 從0到1開發(fā)動態(tài)表單^[1]
• Vnode如何檢測變化并更新視圖呢？diff算法

? 拓展閱讀：

• 關(guān)于渲染函數(shù)render^[2]
• VNode節(jié)點(diǎn)及Vuejs中VNode類的定義^[3]
• [ Vue實(shí)現(xiàn)的diff原理](https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E%B0 " Vue實(shí)現(xiàn)的diff原理").MarkDown)

1.1.2 nextTick

?

nextTick目的是將回調(diào)函數(shù)的調(diào)用延遲到下一次dom更新數(shù)據(jù)后，換句話說就是修改數(shù)據(jù)后并不會立即更新dom ，因?yàn)閐om的更新是異步的，無法通過同步代碼獲取，需要使用nextTick，在下一次事件循環(huán)中獲取（Vue中Dom的更新是異步的）

?

this.msg = "Hello world."? this.$nextTick(() => {    this.msg2 = this.$refs.msgDiv.innerHTML  })? this.msg3 = this.$refs.msgDiv.innerHTML

?拓展閱讀：

• Vue.js異步更新DOM策略及nextTick^[4]
• 你真的理解 $nextTick么^[5]

1.1.3 MVVM

?

MVVM全稱為：Model-View-View-Model，誕生背景是在傳統(tǒng)的MVC架構(gòu)中，缺少一個數(shù)據(jù)解析的角色，而M、V、C等都不應(yīng)該處理數(shù)據(jù)解析，于是專門為數(shù)據(jù)解析的就誕生了一個新的類：ViewModel，主要用于將Model和View關(guān)聯(lián)起來，數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)

?

?拓展閱讀：

• 廖雪峰：MVVM是什么？^[6]
• 50行代碼的MVVM，感受閉包的藝術(shù)^[7]

1.1.4 雙向綁定原理

?

上一節(jié)提到mvvm,本質(zhì)上就是vue數(shù)據(jù)雙向綁定，它是通過數(shù)據(jù)劫持結(jié)合設(shè)計(jì)模式中的發(fā)布者-訂閱者模式，主要包括以下步驟

?

• 1.將數(shù)據(jù)data變成可觀察：通過?Object.defineProperty()設(shè)置屬性的setter和getter來監(jiān)聽數(shù)據(jù)的變化，通過getter進(jìn)行依賴收集，而每個setter方法就是一個觀察者，關(guān)于更多的Object.defineProperty()實(shí)踐可以閱讀 樹醬的如何更好管理 Api 接口^[8]?中有提到 （ Vue3.0 使用Proxy替代）
• 2.添加訂閱者Watcher和添加消息訂閱器Dep（ 如果數(shù)據(jù)變化，通知所有訂閱者）
• 3.實(shí)現(xiàn)Compile

?拓展閱讀：

• Vue響應(yīng)式原理^[9]
• 基于 Proxy 的觀察者機(jī)制探索^[10]

1.1.5 Vue相關(guān)的API

?

Vue暴露一些常用的API，包括全局、生命周期、組合、實(shí)例property等API，可以查看vue官方所有API集合文檔^[11]

?

• 全局 API ：比如?Vue.use( plugin )用于全局引用插件, 具體使用可閱讀樹醬的
• 組合 API: 比如?project/inject?用于允許祖先組件向其所有子孫后代注入一個依賴
• 實(shí)例property API: 比如vm.$refs?獲取持有注冊過ref屬性的所有 DOM 元素和組件實(shí)例

?拓展閱讀：

• 聊聊 Vue 中 provide/inject 的應(yīng)用^[12]
• 你或許不知道Vue的這些小技巧^[13]

1.2 vuex 狀態(tài)管理

?

Vuex 是一個專為 Vue.js 應(yīng)用開發(fā)的狀態(tài)管理工具，采用集中式的存儲方法來記錄組件的狀態(tài)，用一個對象就包含了全部的應(yīng)用層級狀態(tài)，而每個應(yīng)用將僅僅包含一個 store 實(shí)例，但是可以用模塊化來管理區(qū)分

?

1.2.1 模塊化狀態(tài)化管理

?

由于vuex的單一狀態(tài)樹，會導(dǎo)致說隨著應(yīng)用龐大，應(yīng)用要管理狀態(tài)集合會很大，store 對象就會顯得臃腫，難以管理，那就需要用到Module區(qū)分，每個Module都擁有自己的 state、mutation、action、getter

?

?拓展閱讀：

• vue官方：vuex的Module管理^[14]

1.2.2 持久化管理

?

我們可以使用狀態(tài)持久化來實(shí)現(xiàn)緩存狀態(tài)，因?yàn)関uex的數(shù)據(jù)是存放在內(nèi)存中，當(dāng)我們刷新頁面的時候，內(nèi)存會被刪除，如果我們想持久化存儲一些數(shù)據(jù)，就需要依賴 ? ??localstorge或者vuex-persistedstate

?

• 手動利用HTML5的本地存儲（localstorge）
• 使用vuex-persistedstate插件

?拓展閱讀：

• Vuex持久化插件-解決刷新數(shù)據(jù)消失的問題^[15]

注意: 默認(rèn)情況下每次 commit 都會向 localstorage 寫入數(shù)據(jù)，localstorage 寫入是同步的，這樣對性能存在影響，應(yīng)該分場景盡量避免頻繁寫入持久化數(shù)據(jù)。

1.2.3 vuex 五種屬性

• state：vuex的基本數(shù)據(jù)，用來存儲變量

• getter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性

• mutation：提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。

• action：Action 提交的是 mutation，并且可以包含任意異步操作，但不能直接變更狀態(tài)

• modules：1.2.1 章節(jié)提到的vuex模塊化

1.3 vue-router

?

SPA應(yīng)用大多由前端路由來控制頁面的跳轉(zhuǎn)，通過url的切換，在不請求服務(wù)器的前提，更新頁面視圖，vue應(yīng)用離不開vue-router,涉及知識內(nèi)容包括以下幾點(diǎn)

?

• hash模式和history模式有什么不同？
• 路由攔截應(yīng)該怎么做？
• 路由如何實(shí)現(xiàn)模塊化管理？
• keep-alive如何對組件進(jìn)行緩存？

更多了解vue-router可以閱讀樹醬的??前端路由那些事^[16]

• vue 路由 按需 keep-alive^[17]

1.4 組件開發(fā)

?

Vue組件開發(fā)是為了通過從業(yè)務(wù)代碼中解耦出代碼復(fù)用率高的片段，抽出并封裝為高復(fù)用的組件、涉及知識內(nèi)容包括以下幾點(diǎn)

?

• Vue 組件的三個重要因是什么？props、事件 和 slots
• 組件間是如何通信的？
• Vue組件化之插槽slot如何使用？
• mixin 在組件中可以起到什么作用？
• Vue高階組件是什么？

1.4.1 組件間通信和傳值

?

Vue組件的通信可以是：子父關(guān)系，也可以是子祖關(guān)系、兄弟關(guān)系。不同的的關(guān)系也就意味方式不同，主要包括以下幾種方式：

?

• $parent與 $children
• $emit
• bus $eventBus
• provide與inject
• props 與 $refs

?拓展閱讀：

• Vue 組件間通信六種方式^[18]
• vue組件通信全揭秘(共7章)^[19]

1.4.2 Slot 插槽

?

來自Vue官方介紹：slot元素作為承載分發(fā)內(nèi)容的出口，簡單理解就是“占坑”，子組件預(yù)先把位置占好，然后根據(jù)業(yè)務(wù)場景需要，子組件在編寫相應(yīng)的信息

?

?拓展閱讀：

• 細(xì)談 vue - slot 篇^[20]

1.4.3 Mixin 混入

?

mixin提供了一種非常靈活的方式，可以用來分發(fā)Vue組件中的可復(fù)用功能，借助Mixin多個組件可以共享數(shù)據(jù)和方法。同時引入mixin的組件，mixin中的方法和屬性也就并入到該組件中，可以直接使用。鉤子函數(shù)也將會在兩個都被調(diào)用（Mixin中的鉤子會先執(zhí)行）

?

更多了解mixin實(shí)踐可以閱讀樹醬的??組件庫源碼中這些寫法你掌握了嗎？^[21]?中關(guān)于組件庫mixin的用法

1.4.4 高階組件

?

高階組件也稱為HOC，它被描述為一種在組件之間共享公共功能而不需要重復(fù)代碼的方法。作用在于增強(qiáng)組件的功能，簡單定義就是：你向一個方法傳入組件，然后返回一個新的組件，這就是一個HOC

?

?拓展閱讀：

• Vue 進(jìn)階必學(xué)之高階組件 HOC^[22]
• 探索Vue高階組件^[23]
• Vue HOC 高階組件 實(shí)踐^[24]

1.5 axios

?

應(yīng)用離不開請求庫，而vue技術(shù)棧中請求庫談及最多的，非axios莫屬，axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，涉及知識內(nèi)容包括以下幾點(diǎn)

?

• axios 如何做二次封裝（攔截器）？
• 如何結(jié)合axios做API管理 ？
• axios 如何取消請求？
• token過期如何在axios刷新？

關(guān)于前三者的學(xué)習(xí)可以閱讀樹醬的?如何更好管理 Api 接口^[25]

?拓展閱讀：

• 聊聊 Vue 中 axios 的封裝^[26]
• 封裝 axios 攔截器實(shí)現(xiàn)用戶無感刷新 access_token^[27]

1.6 vue-cli

?

vue-cli是vue官方的腳手架，可以使用Vue-cli來快速構(gòu)建項(xiàng)目，且對 Babel、TypeScript、ESLint、單元測試等提供了開箱即用的支持，簡化了部署、打包、代碼掃描、單元測試等流程，涉及知識內(nèi)容包括以下幾點(diǎn)

?

• 如何基于vue-cli部署項(xiàng)目？
• 如何配置vue.config.js 打包性能最佳應(yīng)用？
• 本地開發(fā)跨域如何解決？

1.6.1 vue-cli 部署項(xiàng)目

?

前端部署離不開幾個環(huán)境包括本地、mock、開發(fā)、測試、預(yù)生產(chǎn)、生產(chǎn)等等，需要根據(jù)不同環(huán)境定義不同的配置文件（管理api等），還需要定義好編譯腳本（packjson中的scripts），還需要注意publicpath的定義是否需要修改

?

更多了解可以閱讀樹醬的?基于 Vue-cli 3x的項(xiàng)目部署^[28]

?拓展閱讀：

• vue官方：環(huán)境變量和模式^[29]
• publicPath的配置^[30]

1.6.2 配置最佳打包

?

前端SPA應(yīng)用上線服務(wù)器本質(zhì)上是編譯好的靜態(tài)資源上傳，那編譯打包就是影響性能較大的因素，那么如何配置vue.config.js打包性能最佳，可以閱讀第4節(jié)的webpack配置插件，主要解決這幾個問題

?

• 針對請求數(shù)進(jìn)行優(yōu)化: (去除prefetch)
• 公用代碼提取，使用cdn加載: (config.externals)
• 配置代碼壓縮

?拓展閱讀：

• 我在項(xiàng)目中是這樣配置Vue的^[31]

1.6.3 本地開發(fā)devServer

?

本地開發(fā)中存在跨域問題？我們可以通過vue.config.js中devServer配置來做反響代理解決！如何做？看下面這篇

?

?拓展閱讀：

• vue.config.js中devServer配置^[32]

2.工程化知識體系

?

關(guān)于前端工程化，本質(zhì)上是通過規(guī)范和工具來提高前端應(yīng)用質(zhì)量，樹醬在之前曾梳理過，更多了解請閱讀 ? 前端工程化那些事^[33]，本文在原來文章的基礎(chǔ)上拓展和補(bǔ)充

?

2.1 Git

?

眾所周知，git不單單只是代碼管理工具，還可以做分支管理、commit message檢驗(yàn)、Pull Request等

?

?拓展閱讀：

• 一些Git規(guī)則和 Git 工作流^[34]

• 優(yōu)雅的提交你的 Git Commit Message^[35]

2.2 Npm

?

只會npm install? npm其實(shí)提供很多功能包括如下幾個常用的

?

• npm publish?：發(fā)包管理
• npm link?：用來在本地項(xiàng)目和本地npm模塊之間建立連接，可以在本地進(jìn)行模塊測試

?拓展閱讀：

• vue組件發(fā)布npm最佳實(shí)踐^[36]
• 13 個 npm 快速開發(fā)技巧^[37]

2.3 構(gòu)建工具

?

前端項(xiàng)目構(gòu)建工具很多包括Rollup、Webpack、Parcel，然而最近在Vue.js 3.0 Beta里，尤大大提到他在做的這個小工具 vite，關(guān)于vite是否能替代wepack？

?

• Webpack：適?于?型項(xiàng)目構(gòu)建：webpack目前生態(tài)最完善，應(yīng)用場景更多，社區(qū)人氣高，有強(qiáng)?的loader和插件?態(tài)
• Rollup：適?于工具庫的打包: 可以將各個模塊打包進(jìn)?個?件中，具備 Tree-shaking 來刪除??的代碼,降低代碼體積,但是不具備webpack強(qiáng)大的插件生態(tài)，定位更適用于聚焦于庫的打包
• Parcel：適?于試驗(yàn): 雖然無配置的優(yōu)勢，可以快速打包應(yīng)用，且打包效率，但是不具備Tree-shaking，導(dǎo)致輸出文件偏大

?拓展閱讀：

• Vite 原理淺析^[38]

2.4 CI/CD 和項(xiàng)目部署

?

自從有了DevOps，持續(xù)集成，持續(xù)交付（CI/CD）成了項(xiàng)目部署主流，前端SPA項(xiàng)目部署需要打包?應(yīng)用，我們可以結(jié)合 Jenkins + Docker + Nginx 來完成，如果是SSR應(yīng)用還需要用PM2來管理進(jìn)程

?

更多了解可以閱讀樹醬的?前端運(yùn)維部署那些事^[39]

?拓展閱讀：

關(guān)于DevOps和工程化系列 推薦?shanyue山月^[40]老哥的專欄文章

• 如何使用 docker 部署前端項(xiàng)目^[41]

• 前端部署的發(fā)展歷程^[42]

3 Node知識體系

?

樹醬之前梳理了兩篇關(guān)于node的面試官系列，感興趣的童鞋可以看看面試官問你關(guān)于node的那些事（基礎(chǔ)篇）^[43]?和 面試官問你關(guān)于node的那些事（進(jìn)階篇）^[44]。同時對于node平時工作業(yè)務(wù)場景少，樹醬的node體系也比較小，后期會調(diào)整補(bǔ)充，目前可能不太適合高階的童鞋。

?

?拓展閱讀：

• 有助于理解前端工具的 node 知識^[45]
• 一篇文章構(gòu)建你的 NodeJS 知識體系^[46]

4.性能優(yōu)化

4.1 性能指標(biāo)

?

性能指標(biāo)是用來通過獲取數(shù)據(jù)來衡量應(yīng)用的性能，并通過數(shù)據(jù)來體現(xiàn)出性能的好壞，常用的性能指標(biāo)有以下幾種

?

我們也可以通過lighthouse這個工具來測試下我們當(dāng)前的應(yīng)用

• FCP: 首次內(nèi)容繪制
• FMP:首次有效繪制
• TTI：首次可交互時間

下通過頁面一個手機(jī)頁面加載截圖來幫助我們理解性能指標(biāo)時間點(diǎn)所帶來的體驗(yàn)

?拓展閱讀：

• Lighthouse 測試內(nèi)幕^[47]
• [螞蟻金服如何把前端性能監(jiān)控做到極致?] (https://www.infoq.cn/article/Dxa8aM44oz*Lukk5Ufhy)
• 以用戶為中心的性能指標(biāo)【譯】^[48]

4.2 webpack

4.2.1 代碼分割

?

在業(yè)務(wù)場景中，項(xiàng)目中可能會引入很多第三方庫，這些庫可能跟業(yè)務(wù)無關(guān)且內(nèi)容也可能不變，如果都打包到一起，那么用戶通過瀏覽器想要瀏覽最新效果就必須重新執(zhí)行完新的文件，如果能把不變的代碼都單獨(dú)打成一個文件，且文件名每次都一樣。那么瀏覽器可以從緩存中讀取，而不是重新發(fā)起請求，或者將公共部分去重，那這個時候代碼分割就起了個重要的作用

?

webpack 使用?SplitChunksPlugin去重和分離 chunk，而在vue-cli 3中是在的vue.config.js中只要配置chainWebpack中的splitChunks即可，如下：

?拓展閱讀：

?

引用一句話：代碼分割的本質(zhì)，就是在**“源碼直接上線”「和」“打包為唯一的腳本main.bundle.js”**這兩種極端方案之間尋找一種更符合實(shí)際場景的中間狀態(tài)，用可接受的服務(wù)器性能壓力增加來換取更好的用戶體驗(yàn)。

?

• webpack官方：代碼分離^[49]

4.2.2 UglifyJs 壓縮

?

通過UglifyJSPlugin來對js文件進(jìn)行壓縮，以此減小js文件的大小，加速資源加載速度，但是一般在生產(chǎn)環(huán)節(jié)開啟，因?yàn)闀下藈ebpack原本的編譯速度

?

4.2.3 ?gizp ?壓縮

?

我們可以使用compression-webpack-plugin插件進(jìn)行壓縮，相當(dāng)于gzip的效果

?

我們在vue-cli 3下的vue.config.js中configureWebpack配置如下：

4.2.4 Tree-shaking

?

Tree-shaking也叫搖樹優(yōu)化，是webpack 2之后引入原本rollup特有的Tree-shaking。用來將無用代碼移除。而tree-shaking 是在 ES6 modules 的靜態(tài)特性基礎(chǔ)上才得以實(shí)現(xiàn)的，也就是說只有你使用到 ES6 module ?才能使用 tree-shaking

?

?拓展閱讀：

• 如何評價 Webpack 2 新引入的 Tree-shaking 代碼優(yōu)化技術(shù)？^[50]

4.2.5 webpack-bundle-analyzer

?

開發(fā)中，生產(chǎn)環(huán)節(jié)或者開發(fā)環(huán)境我們想對比下，分析報(bào)告進(jìn)行性能優(yōu)化對比，確定vue項(xiàng)目的性能是否得到完善，可以通過配置webpack-bundle-analyzer插件，他能以圖形化的方式展示bundle中所有的模塊的構(gòu)成的各自構(gòu)成的大小，執(zhí)行方式：npm run build --report

?

?拓展閱讀：

• vue-cli3配置webpack-bundle-analyzer插件^[51]

4.3 Nginx

?

Nginx對性能的優(yōu)化思考以下幾點(diǎn)：

?

• 如何在nginx配置gzip ？
• 如何通過設(shè)置expires 緩存來調(diào)優(yōu)？
• 如何在負(fù)載均衡做優(yōu)化性能？

關(guān)于Nginx 體系化學(xué)習(xí)可以閱讀樹醬的Nginx那些事^[52]

4.3.1 Gizp

?

開啟Nginx gzip，壓縮后,靜態(tài)資源的大小會大大的減少,從而可以節(jié)約大量的帶寬,提高傳輸效率,帶來更好的響應(yīng)和體驗(yàn)

?

4.3.2 靜態(tài)資源緩存設(shè)置

?

有些靜態(tài)資源更新頻率低或者不更新，我們可以通過設(shè)置expires來配置緩存時間，以此來達(dá)到優(yōu)化性能作用，那怎么配置呢？

?

假設(shè)我想通過web應(yīng)用的圖片緩存一周，那你可以在nginx中配置如下，配置完之后一周之內(nèi)的資源只會訪問瀏覽器的資源，而不是去請求Nginx

• ?前端緩存那些事^[53]

4.3.3 負(fù)載均衡

?

眾所周知，負(fù)載均衡器可以通過分配其他的服務(wù)器給用戶，來增加的網(wǎng)站的穩(wěn)定性和響應(yīng)速度，而且負(fù)載均衡器有四種常用方式，這里要提的是響應(yīng)時間來分配的模式，可以讓多臺服務(wù)器競爭，找出相應(yīng)最快的并返回內(nèi)容給用戶，配置如下

?

?拓展閱讀：

• Nginx在高并發(fā)下的性能優(yōu)化點(diǎn)！^[54]

4.4 其他

4.4.1 預(yù)請求prefetch

?

prefetch是link元素中的rel屬性值，通過定義該屬性，讓瀏覽器加載下一個頁面可能會使用到的資源。加速下一個頁面的加載速度，常用的應(yīng)用場景在SSR中，首頁的資源加載都使用preload，而非首頁的其他路由的資源，則用prefetch，那兩者又有啥區(qū)別呢？看下面

?

• preload?是通知瀏覽器，頁面必定需要的資源，但瀏覽器一定會加載這些資源
• prefetch?是通知瀏覽器，頁面可能需要的資源，但瀏覽器不一定會加載這些資源

?拓展閱讀：

那發(fā)現(xiàn)請求數(shù)增多，是因?yàn)槲覀冺撁骖A(yù)先渲染了其它組件，我不想要預(yù)加載，我應(yīng)該怎么處理？

?

可以在vue.config.js 中delete 掉 preload 與 prefetch

?

那dns-prefetch又是啥？跟prefetch一樣嗎？

?

假設(shè)現(xiàn)在我們訪問百度baidu.com，這個時候需要DNS把域名先轉(zhuǎn)化為對應(yīng)的 IP 地址，這過程非常耗時。可以通過DNS prefetch 分析這個頁面需要的資源所在的域名，在瀏覽器空閑時提前將這些域名轉(zhuǎn)化為 IP 地址，減少DNS的請求次數(shù)，進(jìn)行DNS預(yù)先獲取

?

4.4.2 defer 與 async

?

defer與async是配置script標(biāo)簽中的兩個屬性，使用場景是在不阻塞頁面dom文檔樹解析的基礎(chǔ)上，控制腳本的下載和執(zhí)行，那兩者有啥區(qū)別

?

• defer: 渲染完再執(zhí)行, 加載完成后需要等待頁面也加載完成才會執(zhí)行代碼
• async: 下載完就執(zhí)行, 加載完成后會自動執(zhí)行腳本

?拓展閱讀：

• ?前端JS-SDK那些事^[55]

4.4.3 SSR 與 Prerender

?

服務(wù)端渲染SSR和預(yù)渲染Prerender，可以解決白屏?xí)r間太長的問題，可以提升瀏覽器顯示頁面的速度，但是不推薦用預(yù)渲染，預(yù)渲染如果你項(xiàng)目中路由過多，比如你有1000篇文章需要預(yù)渲染，每次更新都要執(zhí)行一次，不現(xiàn)實(shí)

?

?拓展閱讀：

• CSR、SSR、Prerender 原理全解密^[56]
• Nuxt Vue SSR解決方案^[57]

4.4.4 防抖與節(jié)流

?

函數(shù)節(jié)流和函數(shù)防抖都是在限制被觸發(fā)函數(shù)的執(zhí)行次數(shù)，以解決函數(shù)觸發(fā)頻率過高導(dǎo)致瀏覽器響應(yīng)速度跟不上出現(xiàn)的卡頓、延遲現(xiàn)象。這也就是前端的性能優(yōu)化。

?

• 防抖 debounce：顧名思義就是防止抖動，適用場景：在短時間內(nèi)多次觸發(fā)同一實(shí)踐，限制只執(zhí)行一次。
• 節(jié)流 throttle：類似閥門管制一樣，閥門會定期開放，函數(shù)執(zhí)行一次之后，在一個時間段內(nèi)會失效關(guān)閉，過了時間則會重新激活開啟

?拓展閱讀：

• 什么是防抖和節(jié)流，他們的應(yīng)用場景有哪些^[58]

4.5 按需加載

?

根據(jù)視圖需要再加載，比如一個頁面圖片很多，如果加載完頁面全部加載圖片，會影響性能，讓圖片滾動到可視化區(qū)域再加載不香嗎？?再比如一個長列表數(shù)據(jù)很長，不限制的往下加載dom數(shù)據(jù)，每一次都是一次重繪，對性能影響很大，在頁面上創(chuàng)建一個容器作為可視區(qū)，在這個可視區(qū)內(nèi)展示長列表中的一部分，然后只在這個區(qū)域不香嗎？

?

4.5.1 vue-lazyload

?

關(guān)于vue-lazyload可以閱讀樹醬的聊聊前端的按需加載 - 圖片懶加載^[59]

?

4.5.2 組件動態(tài)加載

?

關(guān)于組件動態(tài)可以閱讀樹醬的聊聊前端的按需加載 - 組件的按需加載^[60]

?

4.5.3 虛擬列表

?

虛擬列表其實(shí)是按需顯示的一種實(shí)現(xiàn)，即只對可見區(qū)域進(jìn)行渲染，對非可見區(qū)域中的數(shù)據(jù)不渲染或部分渲染的技術(shù)，從而達(dá)到極高的渲染性能。

?