社区
CSS
帖子详情
Web前端实时刷新【卡顿】
Bupt_beyond
2018-01-11 03:58:54
前端绘制了表格,表格内的数据实时刷新。
目前用的Websocket,每秒推送2次,每次数据量大概在1MB,表格大概有400行4列,也就是有1600个数值需要每秒刷新2次。
服务端很好,完全无压力,但客户端浏览器很卡,求解。
而且我想实现的是1000行*4列的数据每秒刷新达10次,求有什么好的解决办法。
...全文
1534
7
打赏
收藏
Web前端实时刷新【卡顿】
前端绘制了表格,表格内的数据实时刷新。 目前用的Websocket,每秒推送2次,每次数据量大概在1MB,表格大概有400行4列,也就是有1600个数值需要每秒刷新2次。 服务端很好,完全无压力,但客户端浏览器很卡,求解。 而且我想实现的是1000行*4列的数据每秒刷新达10次,求有什么好的解决办法。
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
7 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
weixin_41630943
2018-01-14
打赏
举报
回复
看大神的分析收到很多启发
Bupt_beyond
2018-01-13
打赏
举报
回复
试试楼上这种
林二棍子
2018-01-12
打赏
举报
回复
每秒需要刷新1600个数据2次,也就是一共3200次。 假定不重新组织DOM结构,只修改已有DOM里面的值,则至少需要: 1. 查找DOM节点3200次 2. 修改DOM节点内部的值3200次 3. 浏览器刷新显示3200次 一共是9600次计算,js是单线程,所以给每个操作的时间在0.1ms左右。我觉得不可行。 换个思路,每次都重写整个DOM。 初始化 $("container").hide(); var rows = []; rows.push('<table>'); 搞一个数组,把每行的html字符串写在数组里面,比如 var arr = [ "<tr><td>", "", "</td><td>", "", ... "</td></tr>" ] for循环每行数据设置值 arr[1] = "f1"; arr[3] = "f2"; ... 然后合并成一行html添加到数组: rows.push(arr.join('')); rows.push('</table>'); 循环结束,rows数组输出成html片段: var rowshtml = rows.join(''); 最后$("container").html(rowshtml).show(); 理论上比第一种思路快一点。但是一秒钟能不能刷新两次我没把握。
hookee
2018-01-12
打赏
举报
回复
一屏看不了这么多数据吧,考虑只刷新看到的那一屏的数据。
Bupt_beyond
2018-01-12
打赏
举报
回复
但这不是根本性解决方案哦,用户最终需求是一个页面4000个数值,1秒刷新2次。如何提高浏览器的性能? 是否因为前端代码优化力度不够导致卡顿?
天际的海浪
2018-01-11
打赏
举报
回复
浏览器创建和重新渲染dom元素需要时间,页面上dom元素太多,重新渲染肯定会卡。 要分页显示
Bupt_beyond
2018-01-11
打赏
举报
回复
补充下哈:服务端数据我做了缓存,服务端基本不存在发送数据的延迟,肯定是每隔0.5s发送一次,只不过前端渲染不出来。如何提高前端的渲染速率?使用什么框架会比较好?
一个快速和强大的
前端
下拉
刷新
一个快速和强大的
前端
下拉
刷新
web
前端
图形框架
web
前端
工作流图形组件,实现可视化流程配置。
前端
-CSS3动画
卡顿
性能优化解决方案.docx
前端
-CSS3动画
卡顿
性能优化解决方案.docx
web
前端
开发实例--锤子手机桌面代码
web
前端
开发实例--锤子手机桌面课件(代码)
关于页面局部
刷新
例程
关于页面局部
刷新
例程
CSS
61,129
社区成员
60,711
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章