優(yōu)化思路：
把webSocket接收到的數(shù)據(jù)用一個(gè)數(shù)組存起來(lái)，達(dá)到一定長(zhǎng)度再統(tǒng)一渲染，可根據(jù)推送數(shù)據(jù)的速度適當(dāng)調(diào)解數(shù)組長(zhǎng)度限制，如果一段時(shí)間內(nèi)改數(shù)組長(zhǎng)度打不要渲染條件，就用定時(shí)器之間渲染文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-768271.html
data() {
return {
tempDataWsList: [], // 存放臨時(shí)ws數(shù)據(jù)數(shù)組
list: [], // 頁(yè)面上的列表
listCopy: [], // 深拷貝的初始化列表數(shù)據(jù)，用于統(tǒng)一渲染
}
}
methods: {
...
// websocket接收數(shù)據(jù)的方法
onMessage(data) {
if (data.data) {
// 將Json字符串轉(zhuǎn)譯
const dataWs = JSON.parse(data.data);
// 將轉(zhuǎn)譯后的數(shù)據(jù)推入臨時(shí)ws數(shù)據(jù)數(shù)組中
this.tempDataWsList.push(dataWs);
// 有ws數(shù)據(jù)就關(guān)閉定時(shí)器
clearTimeout(this.wsTimeout);
// 做緩存渲染,將ws接收到的數(shù)據(jù)放到數(shù)組，滿(mǎn)10個(gè)就統(tǒng)一渲染
if (this.tempDataWsList.length == 10) {
this.handleList();
} else {
// 如果最后一個(gè)接收后1秒鐘內(nèi)不能滿(mǎn)足10個(gè)，則直接渲染
this.wsTimeout = setTimeout(() => {
this.handleList();
}, 1000);
}
}
},
// 操作數(shù)據(jù)渲染
handleList() {
// 循環(huán)臨時(shí)ws數(shù)據(jù)數(shù)組
this.tempDataWsList.forEach(temp => {
// 循環(huán)深拷貝的初始化列表數(shù)據(jù)
this.listCopy.forEach(item => {
// 循環(huán)判斷列表對(duì)應(yīng)ws數(shù)據(jù)id，修改深拷貝列表上的值
item.pointDetails.forEach(item1 => {
if (item1.id == temp.detailsId) {
item1.value = temp.realVal;
}
});
});
});
// 清空臨時(shí)ws數(shù)據(jù)數(shù)組
this.tempDataWsList = [];
// 將修改的列表數(shù)據(jù)賦值給頁(yè)面渲染
this.list = this.listCopy;
}
}
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-768271.html
到了這里，關(guān)于webSocket推送太快導(dǎo)致前端渲染卡頓問(wèn)題優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
