弹出消息过多导致页面卡顿，如何优化？

Question

websock接收后端报文，前端在右下角显示一次性最多3个消息框，最近报文有点多，大概一秒能收到1-6个消息，一直收一直收。等待半小时，页面卡顿。（控制台没有死循环），DOM一直在刷新那三个消息框。
请问这种情况怎么优化页面卡顿的问题？（后端已经在修改报文的频发问题，前端应该也有一些预防的法子吧？）

Answer 1

如果是后端报文的话,能这么频繁的话,就合并发送, 不会让一秒发送这么多条消息到客户端,可以五秒到一秒内的消息合并内容到一条去发送到前端
如果能一直接收一个相同类型的消息, 就可能说明这个消息并不重要,这个提示一般来说是用来提示一些重要的消息,可以做一个表来展示这些数据而不是通过通知去展示这些数据, 或者提供一个日志列表去展示这些消息, 等用户需要的时候点击去查询这些消息.

Answer 2

队列基本操作，流量削峰

• 同一时间段只显示3个。你已做
• 设置队列最多有多少个。10个，如果超过了就丢弃。

---

Answer 3

• 接收消息后用队列存储（如果有优先级，按优先级排序）
• 展示时机，不要收到就展示，可以参考 react，在空闲时间去展示，requestidlecallback 时去展示消息

• 消息展示条数可以使用几种策略：

  • 展示 n 条，同时提供总数，链接到完整列表
  • 展示 n 条，看过之后，再从队列取出补上

Answer 4

检查一下DOM结构，保证最少重绘，然后接收消息和显示消息，定时刷新消息显示，比如5秒一次。

Answer 5

类似于懒加载
当数据条数多余一定数量时，设置settimeout
settimeout最小时间是4毫秒

可参考如下

const renderList = async () => {

const list = await getList()
console.log(list)
const total = list.length
const page = 0
const limit = 200
const totalPage = Math.ceil(total / limit)
const render = (page) => {
    if (page >= totalPage) return
    setTimeout(() => {
        for (let i = page * limit; i < page * limit + limit; i++) {
            const item = list[i]
            const div = document.createElement('div')
            div.className = 'sunshine'
            div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
            container.appendChild(div)
        }
        render(page + 1)
    }, 0)
}
render(page)

}

Answer 6

类似节流防抖设定一个最小弹框时间，时间内收到的消息合并到一个消息框里弹