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

qpal 发布于2019-08-22 18:26 / 2791人阅读

摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。

背景

一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用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服务器

GPU云服务器云服务器前端性能优化前端开发性能优化多端小程序购买攻略小程序前端工程师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95857.html

mdwiki开发之路二资源与踩坑记录

摘要：侧边栏选用提到的。将改成来访问的形式组织代码出现循环的问题往往意味着代码的布局有问题，可以合并或者分离竞争资源。分离的话就是把需要的资源提取到一个第三方文件去。总之就是将循环变成单向。对于周期性任务缺一不可。其他任务可仅运行。 1、bootstrap代码片段：如果你没有艺术细胞，偷懒的方法就是到这上面去找，比如登录框界面等。侧边栏选用：http://www.designerslib....

molyzzx 2019-07-25 11:10 评论0 收藏0
mdwiki开发之路二资源与踩坑记录

摘要：侧边栏选用提到的。将改成来访问的形式组织代码出现循环的问题往往意味着代码的布局有问题，可以合并或者分离竞争资源。分离的话就是把需要的资源提取到一个第三方文件去。总之就是将循环变成单向。对于周期性任务缺一不可。其他任务可仅运行。 1、bootstrap代码片段：如果你没有艺术细胞，偷懒的方法就是到这上面去找，比如登录框界面等。侧边栏选用：http://www.designerslib....

linkFly 2019-08-22 10:47 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

chengjianhua 2019-08-29 12:35 评论0 收藏0