<template> <img :src="imgSrc" ref="observe" width="100%" height="100%" /> </template> <script> import { urlToBuffer } from "@/utils/utils";//传入图片链接发起get请求返回加密数据，返回解密的图片地址 export default { name: "", props: { imgSrc: { require: true, type: String, }, }, data() { return { observer: null, }; }, components: {}, created() { this.observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // 如果图片进入了可视区域，下载并解密图片 this.fetchAndDecryptImage(entry.target); entry.target.src = require("@/assets/img/yes_bg.svg"); // 解密后取消观察 this.observer.unobserve(entry.target); } }); }); // this.$nextTick(() => { this.observer.observe(this.$refs.observe); }); }, updated() {}, mounted() {}, methods: { fetchAndDecryptImage(img) { // 获取图片的加密数据 urlToBuffer(img.src) .then((src) => { img.src = src; }) .catch((error) => { img.src = "@/assets/img/yes_bg.svg"; }); }, }, computed: {}, watch: {}, }; </script> <style scoped> </style>优化列队发起get请求

对于这段代码，我注意到它使用了IntersectionObserver来观察图片是否进入了可视区域，并且在图片进入可视区域后发起get请求并解密图片。如果要优化这个过程，可以考虑以下两个方面：

1. 减少重复请求

在当前的代码中，每当一个图片进入可视区域时，都会发起一次get请求来获取加密数据并解密图片。这可能会导致重复请求，浪费带宽和时间。为了减少这种情况的发生，可以考虑缓存已经解密的图片，以便后续使用。

2. 批量请求

另一个优化点是批量请求。当前代码中，每当一个图片进入可视区域时，都会发起一次get请求，这可能会导致请求并发过大，从而影响网页性能。为了避免这种情况，可以考虑将所有图片的请求合并成一个，以便同时发起请求并批量解密图片。

综上所述，可以通过缓存解密图片和批量请求来优化列队发起get请求的过程，提高网页性能。

相关问题

<template> <img :src="imgSrc" ref="observe" width="100%" height="100%" style=" object-fit:contain;" /> </template> <script> import { urlToBuffer } from "@/utils/utils"; export default { name: "", props: { imgSrc: { require: true, type: String, }, }, data() { return { observer: null, }; }, components: {}, created() { this.observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // 如果图片进入了可视区域，下载并解密图片 this.fetchAndDecryptImage(entry.target); entry.target.src = require("@/assets/img/yes_bg.svg"); // 解密后取消观察 this.observer.unobserve(entry.target); } }); }); // this.$nextTick(() => { this.observer.observe(this.$refs.observe); }); }, updated() {}, mounted() {}, methods: { fetchAndDecryptImage(img) { // 获取图片的加密数据 urlToBuffer(img.src) .then((src) => { img.src = src; }) .catch((error) => { img.src = "@/assets/img/yes_bg.svg"; }); }, }, computed: {}, watch: {}, }; </script> <style scoped> </style>在这个代码基础上优化排队下载图片，只有上一个图片加载完再发起下一个图片请求

可以使用 Promise 和 async/await 来实现图片的串行加载。具体实现如下：

1. 在 data 中添加一个队列数组 queue，用于存放需要加载的图片链接。

2. 在 mounted 钩子函数中调用序列加载方法。

3. 在序列加载方法中循环遍历队列数组，依次加载图片。每个图片加载完成后再加载下一个图片。

4. 在 fetchAndDecryptImage 函数中返回一个 Promise 对象，并在函数内部 resolve 解密后的图片链接。

修改后的代码如下：

<template>
<img
:src="imgSrc"
ref="observe"
width="100%"
height="100%"
style="object-fit: contain;"
/>
</template>

<script>
import { urlToBuffer } from "@/utils/utils";

export default {
name: "",
props: {
imgSrc: { require: true, type: String },
},
data() {
return {
observer: null,
queue: [], // 存放需要加载的图片链接
};
},
components: {},
created() {},
updated() {},
mounted() {
this.queue.push(this.imgSrc); // 将第一张图片加入队列
this.loadImagesInSequence(); // 调用序列加载方法
},
methods: {
async loadImagesInSequence() {
for (let i = 0; i < this.queue.length; i++) {
await this.fetchAndDecryptImage(this.queue[i]);
}
},
fetchAndDecryptImage(src) {
return new Promise((resolve, reject) => {
urlToBuffer(src)
.then((buffer) => {
const decryptedSrc = this.decrypt(buffer);
this.$refs.observe.src = decryptedSrc;
this.queue.shift(); // 加载完成后从队列中移除该图片链接
resolve();
})
.catch((error) => {
console.error(error);
this.$refs.observe.src = "@/assets/img/yes_bg.svg";
this.queue.shift();
resolve();
});
});
},
decrypt(buffer) {
// 解密函数
// ...
return decryptedSrc;
},
},
};
</script>

<style scoped></style>

<template> <img v-lazy="imageUrl" ref="observe" width="100%" height="100%" /> </template> <script> import { urlToBuffer } from "@/utils/utils"; export default { name: "", props: { imgSrc: { require: true, type: String, }, }, data() { return { observer: null, imageUrl: "", }; }, components: {}, created() { this.observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // 如果图片进入了可视区域，下载并解密图片 this.fetchAndDecryptImage(this.imgSrc); entry.target.src = require("@/assets/img/yes_bg.svg"); // 解密后取消观察 this.observer.unobserve(entry.target); } }); }); // this.$nextTick(() => { this.observer.observe(this.$refs.observe); }); }, updated() {}, mounted() {}, methods: { fetchAndDecryptImage(url) { // 获取图片的加密数据 urlToBuffer(url) .then((src) => { this.imageUrl = src; }) .catch((error) => { this.imageUrl= "@/assets/img/yes_bg.svg"; }); }, }, computed: {}, watch: {}, }; </script> <style scoped> </style>在这段代码基础上新增不在可视范围停止加载

可以在created生命周期中添加一个判断条件，如果图片已经离开可视区域，则停止加载图片。具体的实现可以在IntersectionObserver的回调函数中添加一个判断条件，如果图片已经离开可视区域，则取消观察。修改后的代码如下所示：

<template>
<img v-lazy="imageUrl" ref="observe" width="100%" height="100%" />
</template>

<script>
import { urlToBuffer } from "@/utils/utils";

export default {
name: "",
props: {
imgSrc: {
require: true,
type: String,
},
},
data() {
return {
observer: null,
imageUrl: "",
};
},
components: {},
created() {
this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 如果图片进入了可视区域，下载并解密图片
this.fetchAndDecryptImage(this.imgSrc);
entry.target.src = require("@/assets/img/yes_bg.svg");
// 解密后取消观察
this.observer.unobserve(entry.target);
} else if (entry.intersectionRatio <= 0) {
// 如果图片已经离开可视区域，则取消观察
this.observer.unobserve(entry.target);
}
});
});

this.observer.observe(this.$refs.observe);
},
updated() {},
mounted() {},
methods: {
fetchAndDecryptImage(url) {
// 获取图片的加密数据
urlToBuffer(url)
.then((src) => {
this.imageUrl = src;
})
.catch((error) => {
this.imageUrl= "@/assets/img/yes_bg.svg";
});
},
},
computed: {},
watch: {},
};
</script>

<style scoped>
</style>