前端小白的第一个H5项目——福大助手年度总结报告（2020）背后的故事

• 本次项目作为福大助手所承接的首个H5项目，当我这个B届的新手接手时，深感责任重大。这个项目必须完成，但又似乎难以做到，原因在于我之前从未参与过Vue相关的开发工作，仅在学习过程中制作了一个类似去哪儿网的界面。

以下需要反思的问题：

卡顿
安卓端存在卡顿现象，而iOS端表现良好。在查询过程中发现CSS3动画在iOS和安卓系统上的优化存在差异，iOS优化效果更佳。因此查阅了如何优化CSS3动画的方法。首先需要启用硬件加速，并使用CSS3属性-webkit-backface-visibility: hidden；其次要避免动画对页面布局产生影响，因此推荐使用以下几种变化方式：

* 透明度（opacity）
* X、Y、Z轴平移（translate X, Y, Z）
* X、Y、Z轴旋转（rotate X,Y,Z）
* 缩放（scale）

然而问题并未得到解决，仍然存在严重的卡顿现象。经过一两天的排查后发现，并非由CSS3动画导致的卡顿问题。由于之前认为图片过大只会造成预加载或显示延迟，并不会引发卡顿现象，结果却出乎意料地成为关键因素。果断压缩了图片文件后，问题迎刃而解。

预加载
此前并未接触过此类需求，在以往开发中主要针对PC端网页进行设计，网络速度较快且加载迅速。但在移动端由于网络速度较慢，严重影响用户体验。因此提出