Cocos2d-JS项目之四:UI界面的优化

测试环境: iphone4、iOS6.1.2、chrome 37.2062.60,Cocos2d-js 3.6

我知道,iPhone4已经是要被淘汰的东西了~~这样才能测出效果嘛。PS:pc上浏览器看到的效果和手机浏览器看到的效果差距很大,不仅仅是帧率~~还有渲染的节点数!

首先,手机浏览器上性能还是比较,怎么说呢,相对pc来说或者相对本地app来说还是差一大截吧,没有任何逻辑处理,纯粹加一点UI,帧数就开始掉了。。。所以UI的数量要尽量的少。

其次,button是个很坑的东西。不知道是我的用法有误还是怎样,测试时,多几个button,居然可以使得帧率降低得厉害,在点击的时候时不时会监测到渲染的节点数量瞬间上升,帧率自然就低了。特别特别是在listview里有button的时候,一滑动,尼玛,渲染的节点数必然增大N多,我监测到得情况是:N= button的个数 * 27 。。。。

1、尽量少用widget控件。widget类继承了cc.node,但加上了事件处理,必然会慢一点,所以能用sprite就别用imageView。。。

2、尽量减少UI的数量,对于那些变化不多的UI,能用一张大图去完成就别用多张小图

3、少用button。。。如果策划没有用生命来强烈要求,那么就用一个sprite(没有交互需求)或者image(有交互需求)来代替吧。。。

4、别在listview控件里加上button。。。。

如下图,图A里有31个渲染节点,电池、钻石等都是一个独立的widget控件,还有很多layout、listview等用来划分模块进行布局的。如果拆分成图B和图C的话,图B就是一张PNG图片,里面包含了图A里那些不变的东西,会变化的如label、有交互的如右上角的button(换成image)等,放到图C,然后图B和图C合并起来,效果和图A一样的,但渲染节点只有10个,帧率也提高很多的,具体的可以亲自去测试一下。当然,这个例子只是大概划分了一下,但性能是有不少的提高的

时间: 2024-10-10 10:55:14

Cocos2d-JS项目之四:UI界面的优化的相关文章

(桌面虚拟化最佳实践--呼叫中心系统优化之四)瘦终端优化项目与其他优化项目

减少鼠标刷新频率(仅适用于RDP协议) 此优化用于解决桌面访问时鼠标漂移和延迟的问题,原理是将RDP客户端的最小发送间隔改小. 1)在瘦终端上启动注册表编辑器,然后找到以下注册表子项: HKEY_CURRENT_USER\SOFTWARE\Microsoft\Terminal Server Client 2)用鼠标右键单击Terminal Server Client,然后指向新建. 3)单击dword值,然后键入Min Send Interval.双击此条目,设置为10进制值10. 4)保存瘦终

优化UI界面会惹怒用户?你应该这么做

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 有时,优化网站或移动应用的界面会让用户感到崩溃.人们可能会对新的配色方案.元素的定位或其他类似的东西感到失望.显然,用户这样的反应并不是你所期望的界面优化. 即使是像Facebook.Instagram和Spotify这样的大型成功公司,也经常受到负面的反馈.例如,在2017年2月,Spotify更新了它的网页播放器,引入了新的布局.新的搜索功能和带艺术范的页面. 这一改变导致许多用户在社交媒体上

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

ASP.NET MVC搭建项目后台UI框架—1、后台主框架

目录 ASP.NET MVC搭建项目后台UI框架-1.后台主框架 ASP.NET MVC搭建项目后台UI框架-2.菜单特效 ASP.NET MVC搭建项目后台UI框架-3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架-4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架-5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架-6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架-7.统计报表 ASP

ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 ASP.NE

ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这个功能了,印象中曾经写过这个功能的文章,一下子找不到了,只好重新贴出来备忘.最近博客快2个月没更新了,因为这两个月一直在闭门写书. 引入js和css下载地址:http://download.csdn.net/detail/zouyujie1127/9550279 <link href="~/l

ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 上一节已经添加好了菜单特效,这一节,我们来添加面板的折叠和展开功能,效果图如下: 思路:我在Right视图中添加了一个div,在这个div中存放一张图片,通过对这张图片的点击,来控制Left视图的隐藏和显示.说白了,这里其实就是修改主框架Index视图中frameset的 cols属性. 开始操作 1.修改Ri

vue项目首屏加载优化实战

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页