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服务器