2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

小程序“无聊广场”游戏前端性能优化与踩坑攻略

javascript作者:猿2048志愿者

背景

一个交互不复杂,对刷新频率和动画效果要求不高的小游戏,不需要使用canvas主导的解决方案,使用dom操作一样可以完成。节省了cocos creater的学习成本,值得一试。本文主要针对小程序“无聊广场”的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对小程序中的动画音频等踩坑做出解决方案。

按钮与字体优化

雪碧图历史

在早期雪碧图盛行的年代,推崇切图大法好的时期,我们通常把按钮的选中与普通状态切图,但由于多张图片http请求消耗太大,故切在一张图用css sprite骚操作完成图标显示。

雪碧图优缺点

优点 缺点
减少服务器请求次数 无用空白占用内存
提高页面的加载速度 使CSS的编写变得困难
减少鼠标滑过的一些bug 拼图维护比较麻烦

字体图标时代

现如今使用工具将单一颜色的图标做成字体库,诸如font awesome 等优秀的图标库有很多。字体文件只需要考虑浏览器兼容问题,在颜色大小上都可以根据项目内容自定义,相比切图的局限性要优雅很多。

交互中有中文字体怎么破

通过压缩字库,提炼个别需要用到的按钮标题等,这样既解决了样式大小颜色自定义的问题,修改字操作也不用重新切图修改大小。(例如下图在“无聊广场中用到的字体”)

clipboard.png

在小程序中字体文件上传不了,怎么办

在开发小程序时,开发工具告诉你那个字体文件忽略没有上传。解决方案是转成base64硬编码到css文件中。

字体压缩工具

字蛛

clipboard.png

clipboard.png

压缩效果

clipboard.png

font-face就没有缺点了吗

优点 缺点
开发速度快 大量中文字不如单图
缩放不失真,颜色可自定义 不支持彩色细节的图案
内存占用小 复杂样式排版耗费人力

Dom优化-伪元素

clipboard.png

可以看到早在css2中就有伪元素了,然而学术尚浅的开发者只会div。上图列举了常用的伪元素。本文以:before,after为例带你优雅布局。

原来点也也可以这么写

clipboard.png
如上图中的游戏规则,左右各有1个黑点,布局的时候如何优雅的在前后画圆呢?用border-radius:50%当然可以。那用字符●也未尝不可。代码如图。

气泡样式也不难

clipboard.png
如上图的文字气泡,只需要一个45°旋转的正方形和一个圆角矩形拼接就可以了,代码就自己脑补一下。

难的来了,排行榜

clipboard.png

如图列表左侧有奖牌形状的图标,按常理切图也是可以的,但用css实现既可以控制颜色又可以放大不失真,一劳永逸。实现方式也很简单。

clipboard.png
通过上图可以看到,先类选择器写通用的灰色索引。再用before+after画出两个三角形。最后用nth-child选择对应的金银铜奖牌自定义,完美。

什么,你问我三角形怎么画?

用盒模型啊,给你张图自己体会。

clipboard.png

黑白栅格实现

clipboard.png

音频兼容问题

小程序兼容方案
SysModel=='iphone'?'aac':'ogg'

背景图大小问题

clipboard.png

在“无聊广场”小程序中,撸秃头的素材拼接在1张图上,在超过4k*4k后发现会出现跳帧,闪烁,背景消失等情况。
最终的解决方案是:压缩到4K*4K以下。

其他

小图片压成css不用放cdn服务器

本文来源于网络:查看 >
« 上一篇:纯原生组件化-模块化的探索
» 下一篇:【渗透】关于Javascript的函数声明和函数表达式
评论
点击刷新
评论
相关博文
×添加代码片段