社区
CSS
帖子详情
Web前端实时刷新【卡顿】
Bupt_beyond
2018-01-11 03:58:54
前端绘制了表格,表格内的数据实时刷新。
目前用的Websocket,每秒推送2次,每次数据量大概在1MB,表格大概有400行4列,也就是有1600个数值需要每秒刷新2次。
服务端很好,完全无压力,但客户端浏览器很卡,求解。
而且我想实现的是1000行*4列的数据每秒刷新达10次,求有什么好的解决办法。
...全文
1471
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),回弹动画使用原生动画
Java学习指南20 JavaFX高级
一、课程简介这是『Java学习指南系列』的第20篇教程 ,是Java开发的高级课程,介绍JavaFX的高级技术。JavaFX教程分为两篇:JavaFX入门篇,JavaFX高级篇。本篇课程的主要以实例为主,穿插必要的理论章节。以实际工程运用为背景,演示各种应用级技术的实现方式。二、主要内容 本篇配备充分的实例,包含以下内容:* 界面线程与工作线程的基本原理* 定时任务* 小任务,即一次性的短任务* 进度条定制* 对话框定制* 滚动窗口ScrollPane的使用* 弹出式窗口 Popup的使用方法* 拖放技术 Drag And Drop的使用方法* 本地程序调用* 与网站后台的交互方法三、课程体系〖Java学习指南系列〗:包含入门与进阶语法,Swing桌面开发,安卓开发,JavaFX开发,网络通信Socket,数据结构与算法等课程。〖网站开发系列〗:包含网页基础、网站入门、数据库、网站中级、FreeMarker、网站高级、项目应用、MyBatis、Redis等课程。
全端电子商务的毕业设计
项目启动 创建 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 其实不止优化了“网
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章