社区
CSS
帖子详情
Web前端实时刷新【卡顿】
Bupt_beyond
2018-01-11 03:58:54
前端绘制了表格,表格内的数据实时刷新。
目前用的Websocket,每秒推送2次,每次数据量大概在1MB,表格大概有400行4列,也就是有1600个数值需要每秒刷新2次。
服务端很好,完全无压力,但客户端浏览器很卡,求解。
而且我想实现的是1000行*4列的数据每秒刷新达10次,求有什么好的解决办法。
...全文
1475
7
打赏
收藏
Web前端实时刷新【卡顿】
前端绘制了表格,表格内的数据实时刷新。 目前用的Websocket,每秒推送2次,每次数据量大概在1MB,表格大概有400行4列,也就是有1600个数值需要每秒刷新2次。 服务端很好,完全无压力,但客户端浏览器很卡,求解。 而且我想实现的是1000行*4列的数据每秒刷新达10次,求有什么好的解决办法。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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
端的UI框架BlendUI.zip
BlendUI 是百度公司的一个
Web
前端
UI 框架。BlendUI 能让
Web
app的体验和交互与Native媲美。 具体而言,里面包括了两项关键能力: 多
Web
view控制能力。让一个
Web
app拆到多个
web
view中运行,并能用Javascript来调度。搞定了业务无解的难题:页面过大导致
卡顿
,页面切换不流畅, Native组件嵌入能力。能将Native控件嵌入
Web
view中,这样就能让页面中那些性能较差的部分用Native来实现,以最大化地提高体验和交互。 与此同时,开发者看到的是
Web
API,不仅能快速上手,更由于BlendUI为普通浏览器完成了降级和替代方案,一套代码能同时在BlendUI环境和浏览器中同时运行。 最后再简单说说BlendUI的背景和目标。 在
web
app和Native app之间,有一条无法逾越的鸿沟:体验和性能的差距。轻应用是
web
app的延伸,同样存在此问题。为弥补这条鸿沟,我们要有一套方案,能让开发者使用
web
API,做出体验和性能与原生应用差距不大的应用。 经过一番调研,我们发现几个重要的现实问题,这些问题导致了
web
app和native app之间的体验差距。
web
app缺少淡入淡出动画、转场动画、滑动动画,或者因此引起的不流畅,以及某些组件的弹力体验与原生有差距等。 浮动元素的处理。顶部、右侧、底部的固定位置的元素可能会有抖动,或者弹出菜单无法点按页面其他位置关闭,点按不流畅等。 输入框的问题。包括输入法无法正常展开收起,框内部滚动问题。 本地缓存能力。包括已浏览的图片本地缓存,静态资源缓存出现脏数据等问题。 DOM变化后的渲染抖动。包括无限下拉时的渲染抖动,无
刷新
翻页的闪烁 此外,vision mobile的调研数据显示,开发者之所以不选用html5的前三大原因是: 性能问题:45.7% 硬件接口有限:37.3% 难以集成原生组件:29.2% 因此,轻组件的首要目标是:弥补轻应用的体验劣势,包括页面间、页面内的转场动画,浮动元素处理,一些对性能要求较高的组件原生化等。 我们将面对的用户主要是高级
web
开发者。因此,库需要有足够的扩展性和灵活性,同时API必须是
web
化的。 标签:BlendUI CSS框架
基于SpringBoot+bootstrap的电商网站
java学习 - 最接近原生APP体验的高性能
前端
框架 - 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征; MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K - 原生UI 鉴于之前的很多
前端
框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件 - 流畅体验 下拉
刷新
为实现下拉
刷新
功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上, DIV动画经常出现
卡顿
现象(特别是图文列表的情况); mui通过双
web
view解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div, 而是一个完整的
web
view(子
web
view),回弹动画使用原生动画
全端电子商务的毕业设计
项目启动 创建 letao 数据库,导入docs下的sql文件 启动 npm start,在项目根目录执行 移动端 Mui介绍 bootstrap 也是一个ui框架 响应式的ui框架 兼容不同终端 可以适配pc端 也可以适配 移动端 Mui 是一个ui框架 针对移动端开发的ui框架 只能适配移动端(流式布局) 特点 最接近原生APP体验的高性能
前端
框架 轻量 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征; MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 原生UI 鉴于之前的很多
前端
框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标 MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件 流畅体验 下拉
刷新
为实现下拉
刷新
功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上, DIV动画经常出现
卡顿
现象(特别是图文列表的情况); mui通过双
web
view解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div, 而是一个完整的
web
前端
监控和页面
卡顿
上一篇文章结尾提到了一个对图片至关重要的点:采样、量化和编解码。 图像的显示需要GPU和CPU两者配合,CPU主要负责视图的创建,布局的计算和视图的绘制,然后进行图片的解码,将生成的位图交给GPU,GPU进行渲染,并将渲染的结果交到帧缓冲区,待下一个VSync 信号到来的时候视频控制器从帧缓冲区取出数据,经过转换,显示到屏幕上。 如果在规定的16.7ms内,CPU和GPU的合作未完成,没有生成新的渲染数据到帧缓冲区中,那么就会出现
卡顿
或者掉帧的情况。 一般我们常说的“精灵图”Sprite 其实不止优化了“网
如何写H5/
web
前端
工程简历中的项目经验
如何写H5/
web
前端
工程简历中的项目经验
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章