61,112
社区成员
发帖
与我相关
我的任务
分享Web前端实时刷新【卡顿】
前端绘制了表格，表格内的数据实时刷新。
目前用的Websocket，每秒推送2次，每次数据量大概在1MB，表格大概有400行4列，也就是有1600个数值需要每秒刷新2次。
服务端很好，完全无压力，但客户端浏览器很卡，求解。
而且我想实现的是1000行*4列的数据每秒刷新达10次，求有什么好的解决办法。
目前用的Websocket，每秒推送2次，每次数据量大概在1MB，表格大概有400行4列，也就是有1600个数值需要每秒刷新2次。
服务端很好，完全无压力，但客户端浏览器很卡，求解。
而且我想实现的是1000行*4列的数据每秒刷新达10次，求有什么好的解决办法。
...全文
请发表友善的回复…
发表回复
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发送一次，只不过前端渲染不出来。如何提高前端的渲染速率？使用什么框架会比较好？
