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

背景

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

按钮与字体优化

雪碧图历史

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

雪碧图优缺点

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

字体图标时代

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

交互中有中文字体怎么破

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

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

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

字体压缩工具

字蛛

压缩效果

font-face就没有缺点了吗

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

Dom优化-伪元素

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

原来点也也可以这么写

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

气泡样式也不难

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

难的来了，排行榜

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

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

什么，你问我三角形怎么画？

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

黑白栅格实现

音频兼容问题

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

背景图大小问题

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

其他

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