我遇到了我無法解決的問題。我的頁面上的總阻塞時間很長（2 秒以上）。我嘗試異步加載每個 vue 組件，但沒關系，仍然是 2 秒 tbt。我真的不明白什么會導致如此高的 tbt 以及我能做些什么，因為它只是一個沒有太多底層邏輯的簡單頁面（https://i.stack.imgur.com/o7LSk.png）（只是21 張簡單的卡片）。
我已經洗掉了我能做的一切，壓縮了代碼，只留下了最必要的東西。仍然沒有解決問題。有什么辦法可以讓它降到 100-200 毫秒？根據您的經驗，什么會導致這樣的問題？
我有大量的組件（卡片、按鈕、延遲加載圖片、評級），所以最終頁面上會有大約 100-300 個組件。但我看不出有任何洗掉它的可能性，因為這會破壞整潔的結構
uj5u.com熱心網友回復：
我發現在這種情況下修復高總阻塞時間的唯一方法是使用交叉點觀察器并僅在它進入螢屏時加載它。我認為同樣的作業可以做一些虛擬滾動插件。
<template>
<div class="grid">
<div class="grid__item" v-for="item in items" :data-id="item.id">
<Item v-if="itemsInScreen[item.id]" :item="item" />
</div>
</div>
</template>
<script>
export default {
name: 'Grid',
props: {
items: {required: true}
},
data() {
return {
itemsInScreen: {}
}
},
methods: {
initObserver() {
const callback = entries => {
entries.forEach(entry => {
if(entry.isIntersecting) this.$set(this.itemsInScreen, entry.target.dataset.id, true);
});
};
const options = {
rootMargin: "20px 20px 20px 20px"
};
const observer = new IntersectionObserver(callback, options);
const itemEls = this.$el.querySelectorAll('.grid__item');
itemEls.forEach(itemEl => observer.observe(itemEl));
}
},
mounted() {
this.initObserver();
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321733.html
標籤：javascript Vue.js 异步 优化
上一篇：飛鏢中的異步