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

洋仔
  • 168
江苏

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

回复
阅读 1.6k
6 个回答

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

linong
  • 26.3k
北京

队列基本操作,流量削峰

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

image.png

  • 接收消息后用队列存储(如果有优先级,按优先级排序)
  • 展示时机,不要收到就展示,可以参考 react,在空闲时间去展示,requestidlecallback 时去展示消息
  • 消息展示条数可以使用几种策略:

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

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

尤雨溪的舔狗
  • 3
北京新手上路,请多包涵

类似于懒加载
当数据条数多余一定数量时,设置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)

}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏