Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)
Vue首屏性能優(yōu)化組件
簡單實(shí)現(xiàn)一個(gè)Vue首屏性能優(yōu)化組件,現(xiàn)代化瀏覽器提供了很多新接口,在不考慮IE兼容性的情況下,這些接口可以很大程度上減少編寫代碼的工作量以及做一些性能優(yōu)化方面的事情,當(dāng)然為了考慮IE我們也可以在封裝組件的時(shí)候?yàn)槠涠档祝疚牡氖灼列阅軆?yōu)化組件主要是使用IntersectionObserver以及requestIdleCallback兩個(gè)接口。
描述
先考慮首屏場景,當(dāng)做一個(gè)主要為展示用的首屏?xí)r,通常會(huì)加載較多的資源例如圖片等,如果我們不想在用戶打開時(shí)就加載所有資源,而是希望用戶滾動(dòng)到相關(guān)位置時(shí)再加載組件,此時(shí)就可以選擇IntersectionObserver這個(gè)接口,當(dāng)然也可以使用onscroll事件去做一個(gè)監(jiān)聽,只不過這樣性能可能比較差一些。還有一些組件,我們希望他必須要加載,但是又不希望他在初始化頁面時(shí)同步加載,這樣我們可以使用異步的方式比如Promise和setTimeout等,但是如果想再降低這個(gè)組件加載的優(yōu)先級(jí),我們就可以考慮requestIdleCallback這個(gè)接口,相關(guān)代碼在https://github.com/WindrunnerMax/webpack-simple-environment的vue--first-screen-optimization分支。
IntersectionObserver
IntersectionObserver接口,從屬于Intersection Observer API,提供了一種異步觀察目標(biāo)元素與其祖先元素或頂級(jí)文檔視窗viewport交叉狀態(tài)的方法,祖先元素與視窗viewport被稱為根root,也就是說IntersectionObserver API,可以自動(dòng)觀察元素是否可見,由于可見visible的本質(zhì)是,目標(biāo)元素與視口產(chǎn)生一個(gè)交叉區(qū),所以這個(gè)API叫做交叉觀察器,兼容性https://caniuse.com/?search=IntersectionObserver。
const io = new IntersectionObserver(callback, option); // 開始觀察 io.observe(document.getElementById("example")); // 停止觀察 io.unobserve(element); // 關(guān)閉觀察器 io.disconnect();
- 參數(shù)callback,創(chuàng)建一個(gè)新的IntersectionObserver對(duì)象后,當(dāng)其監(jiān)聽到目標(biāo)元素的可見部分穿過了一個(gè)或多個(gè)閾thresholds時(shí),會(huì)執(zhí)行指定的回調(diào)函數(shù)。
- 參數(shù)option,IntersectionObserver構(gòu)造函數(shù)的第二個(gè)參數(shù)是一個(gè)配置對(duì)象,其可以設(shè)置以下屬性:
- threshold屬性決定了什么時(shí)候觸發(fā)回調(diào)函數(shù),它是一個(gè)數(shù)組,每個(gè)成員都是一個(gè)門檻值,默認(rèn)為[0],即交叉比例intersectionRatio達(dá)到0時(shí)觸發(fā)回調(diào)函數(shù),用戶可以自定義這個(gè)數(shù)組,比如[0, 0.25, 0.5, 0.75, 1]就表示當(dāng)目標(biāo)元素0%、25%、50%、75%、100%可見時(shí),會(huì)觸發(fā)回調(diào)函數(shù)。
- root屬性指定了目標(biāo)元素所在的容器節(jié)點(diǎn)即根元素,目標(biāo)元素不僅會(huì)隨著窗口滾動(dòng),還會(huì)在容器里面滾動(dòng),比如在iframe窗口里滾動(dòng),這樣就需要設(shè)置root屬性,注意,容器元素必須是目標(biāo)元素的祖先節(jié)點(diǎn)。
- rootMargin屬性定義根元素的margin,用來擴(kuò)展或縮小rootBounds這個(gè)矩形的大小,從而影響intersectionRect交叉區(qū)域的大小,它使用CSS的定義方法,比如10px 20px 30px 40px,表示top、right、bottom和left四個(gè)方向的值。
- 屬性IntersectionObserver.root只讀,所監(jiān)聽對(duì)象的具體祖先元素element,如果未傳入值或值為null,則默認(rèn)使用頂級(jí)文檔的視窗。
- 屬性IntersectionObserver.rootMargin只讀,計(jì)算交叉時(shí)添加到根root邊界盒bounding box的矩形偏移量,可以有效的縮小或擴(kuò)大根的判定范圍從而滿足計(jì)算需要,此屬性返回的值可能與調(diào)用構(gòu)造函數(shù)時(shí)指定的值不同,因此可能需要更改該值,以匹配內(nèi)部要求,所有的偏移量均可用像素pixel、px或百分比percentage、%來表達(dá),默認(rèn)值為0px 0px 0px 0px。
- 屬性IntersectionObserver.thresholds只讀,一個(gè)包含閾值的列表,按升序排列,列表中的每個(gè)閾值都是監(jiān)聽對(duì)象的交叉區(qū)域與邊界區(qū)域的比率,當(dāng)監(jiān)聽對(duì)象的任何閾值被越過時(shí),都會(huì)生成一個(gè)通知Notification,如果構(gòu)造器未傳入值,則默認(rèn)值為0。
- 方法IntersectionObserver.disconnect(),使IntersectionObserver對(duì)象停止監(jiān)聽工作。
- 方法IntersectionObserver.observe(),使IntersectionObserver開始監(jiān)聽一個(gè)目標(biāo)元素。
- 方法IntersectionObserver.takeRecords(),返回所有觀察目標(biāo)的IntersectionObserverEntry對(duì)象數(shù)組。
- 方法IntersectionObserver.unobserve(),使IntersectionObserver停止監(jiān)聽特定目標(biāo)元素。
此外當(dāng)執(zhí)行callback函數(shù)時(shí),會(huì)傳遞一個(gè)IntersectionObserverEntry對(duì)象參數(shù),其提供的信息如下。
- time:可見性發(fā)生變化的時(shí)間,是一個(gè)高精度時(shí)間戳,單位為毫秒。
- target:被觀察的目標(biāo)元素,是一個(gè)DOM節(jié)點(diǎn)對(duì)象。
- rootBounds:根元素的矩形區(qū)域的信息,是getBoundingClientRect方法的返回值,如果沒有根元素即直接相對(duì)于視口滾動(dòng),則返回null。
- boundingClientRect:目標(biāo)元素的矩形區(qū)域的信息。
- intersectionRect:目標(biāo)元素與視口或根元素的交叉區(qū)域的信息。
- intersectionRatio:目標(biāo)元素的可見比例,即intersectionRect占boundingClientRect的比例,完全可見時(shí)為1,完全不可見時(shí)小于等于0。
{ time: 3893.92, rootBounds: ClientRect { bottom: 920, height: 1024, left: 0, right: 1024, top: 0, width: 920 }, boundingClientRect: ClientRect { // ... }, intersectionRect: ClientRect { // ... }, intersectionRatio: 0.54, target: element }
requestIdleCallback
requestIdleCallback方法能夠接受一個(gè)函數(shù),這個(gè)函數(shù)將在瀏覽器空閑時(shí)期被調(diào)用,這使開發(fā)者能夠在主事件循環(huán)上執(zhí)行后臺(tái)和低優(yōu)先級(jí)工作,而不會(huì)影響延遲關(guān)鍵事件,如動(dòng)畫和輸入響應(yīng),函數(shù)一般會(huì)按先進(jìn)先調(diào)用的順序執(zhí)行,如果回調(diào)函數(shù)指定了執(zhí)行超時(shí)時(shí)間timeout,則有可能為了在超時(shí)前執(zhí)行函數(shù)而打亂執(zhí)行順序,兼容性https://caniuse.com/?search=requestIdleCallback。
const handle = window.requestIdleCallback(callback[, options]);
- requestIdleCallback方法返回一個(gè)ID,可以把它傳入window.cancelIdleCallback()方法來結(jié)束回調(diào)。
- 參數(shù)callback,一個(gè)在事件循環(huán)空閑時(shí)即將被調(diào)用的函數(shù)的引用,函數(shù)會(huì)接收到一個(gè)名為IdleDeadline的參數(shù),這個(gè)參數(shù)可以獲取當(dāng)前空閑時(shí)間以及回調(diào)是否在超時(shí)時(shí)間前已經(jīng)執(zhí)行的狀態(tài)。
- 參數(shù)options可選,包括可選的配置參數(shù),具有如下屬性:
- timeout: 如果指定了timeout,并且有一個(gè)正值,而回調(diào)在timeout毫秒過后還沒有被調(diào)用,那么回調(diào)任務(wù)將放入事件循環(huán)中排隊(duì),即使這樣做有可能對(duì)性能產(chǎn)生負(fù)面影響。
實(shí)現(xiàn)
實(shí)際上編寫組件主要是搞清楚如何使用這兩個(gè)主要的API就好,首先關(guān)注IntersectionObserver,因?yàn)榭紤]需要使用動(dòng)態(tài)組件<component />,那么我們向其傳值的時(shí)候就需要使用異步加載組件() => import("component")的形式。監(jiān)聽的時(shí)候,可以考慮加載完成之后即銷毀監(jiān)聽器,或者離開視覺區(qū)域后就將其銷毀等,這方面主要是策略問題。在頁面銷毀的時(shí)候就必須將Intersection Observer進(jìn)行disconnect,防止內(nèi)存泄漏。使用requestIdleCallback就比較簡單了,只需要將回調(diào)函數(shù)執(zhí)行即可,同樣也類似于Promise.resolve().then這種異步處理的情況。
這里是簡單的實(shí)現(xiàn)邏輯,通常observer的使用方案是先使用一個(gè)div等先進(jìn)行占位,然后在observer監(jiān)控其占位的容器,當(dāng)容器在視區(qū)時(shí)加載相關(guān)的組件,相關(guān)的代碼在https://github.com/WindrunnerMax/webpack-simple-environment的vue--first-screen-optimization分支,請(qǐng)盡量使用yarn進(jìn)行安裝,可以使用yarn.lock文件鎖住版本,避免依賴問題。使用npm run dev運(yùn)行之后可以在Console中看到這四個(gè)懶加載組件created創(chuàng)建的順序,其中A的observer懶加載是需要等其加載頁面渲染完成之后,判斷在可視區(qū),才進(jìn)行加載,首屏使能夠直接看到的,而D的懶加載則是需要將滾動(dòng)條滑動(dòng)到D的外部容器出現(xiàn)在視圖之后才會(huì)出現(xiàn),也就是說只要不滾動(dòng)到底部是不會(huì)加載D組件的,另外還可以通過component-params和component-events將attrs和listeners傳遞到懶加載的組件,類似于$attrs和$listeners,至此懶加載組件已簡單實(shí)現(xiàn)。
<!-- App.vue --> <template> <div> <section>1</section> <section> <div>2</div> <lazy-load :lazy-component="Example" type="observer" :component-params="{ content: 'Example A' }" :component-events="{ 'test-event': testEvent, }" ></lazy-load> </section> <section> <div>3</div> <lazy-load :lazy-component="Example" type="idle" :component-params="{ content: 'Example B' }" :component-events="{ 'test-event': testEvent, }" ></lazy-load> </section> <section> <div>4</div> <lazy-load :lazy-component="Example" type="lazy" :component-params="{ content: 'Example C' }" :component-events="{ 'test-event': testEvent, }" ></lazy-load> </section> <section> <div>5</div> <lazy-load :lazy-component="Example" type="observer" :component-params="{ content: 'Example D' }" :component-events="{ 'test-event': testEvent, }" ></lazy-load> </section> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import LazyLoad from "./components/lazy-load/lazy-load.vue"; @Component({ components: { LazyLoad }, }) export default class App extends Vue { protected Example = () => import("./components/example/example.vue"); protected testEvent(content: string) { console.log(content); } } </script> <style lang="scss"> @import "./common/styles.scss"; body { padding: 0; margin: 0; } section { margin: 20px 0; color: #fff; height: 500px; background: $color-blue; } </style> Copy <!-- lazy-load.vue --> <template> <div> <component :is="renderComponent" v-bind="componentParams" v-on="componentEvents" ></component> </div> </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class LazyLoad extends Vue { @Prop({ type: Function, required: true }) lazyComponent!: () => Vue; @Prop({ type: String, required: true }) type!: "observer" | "idle" | "lazy"; @Prop({ type: Object, default: () => ({}) }) componentParams!: Record<string, unknown>; @Prop({ type: Object, default: () => ({}) }) componentEvents!: Record<string, unknown>; protected observer: IntersectionObserver | null = null; protected renderComponent: (() => Vue) | null = null; protected mounted() { this.init(); } private init() { if (this.type === "observer") { // 存在`window.IntersectionObserver` if (window.IntersectionObserver) { this.observer = new IntersectionObserver(entries => { entries.forEach(item => { // `intersectionRatio`為目標(biāo)元素的可見比例,大于`0`代表可見 // 在這里也有實(shí)現(xiàn)策略問題 例如加載后不解除`observe`而在不可見時(shí)銷毀等 if (item.intersectionRatio > 0) { this.loadComponent(); // 加載完成后將其解除`observe` this.observer?.unobserve(item.target); } }); }); this.observer.observe(this.$el.parentElement || this.$el); } else { // 直接加載 this.loadComponent(); } } else if (this.type === "idle") { // 存在`requestIdleCallback` // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (window.requestIdleCallback) { requestIdleCallback(this.loadComponent, { timeout: 3 }); } else { // 直接加載 this.loadComponent(); } } else if (this.type === "lazy") { // 存在`Promise` if (window.Promise) { Promise.resolve().then(this.loadComponent); } else { // 降級(jí)使用`setTimeout` setTimeout(this.loadComponent); } } else { throw new Error(`type: "observer" | "idle" | "lazy"`); } } private loadComponent() { this.renderComponent = this.lazyComponent; this.$emit("loaded"); } protected destroyed() { this.observer && this.observer.disconnect(); } } </script>
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
到此這篇關(guān)于Vue首屏性能優(yōu)化組件知識(shí)點(diǎn)總結(jié)的文章就介紹到這了,更多相關(guān)Vue首屏性能優(yōu)化組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+axios+promise實(shí)際開發(fā)用法詳解
這篇文章主要介紹了vue+axios+promise實(shí)際開發(fā)用法詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10vue項(xiàng)目配置element-ui容易遇到的坑及解決
這篇文章主要介紹了vue項(xiàng)目配置element-ui容易遇到的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07el-table-column 內(nèi)容不自動(dòng)換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動(dòng)換行的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Vue中使用jsencrypt進(jìn)行RSA非對(duì)稱加密的操作方法
這篇文章主要介紹了Vue中使用jsencrypt進(jìn)行RSA非對(duì)稱加密,在這里需要注意要加密的數(shù)據(jù)必須是字符串,對(duì)Vue?RSA非對(duì)稱加密相關(guān)知識(shí)感興趣的朋友一起看看吧2022-04-04vue中使用 pako.js 解密 gzip加密字符串的方法
這篇文章主要介紹了vue項(xiàng)目中 使用 pako.js 解密 gzip加密字符串 的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06解決vant框架做H5時(shí)踩過的坑(下拉刷新、上拉加載等)
這篇文章主要介紹了解決vant框架做H5時(shí)踩過的坑(下拉刷新、上拉加載等),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11