移动端H5卡顿的解决方法

随着HTML5的发展，诸如快闪、3D、全景、交互视频等酷炫的效果都开始逐渐应用在在移动端H5中，这也导致在H5制作过程中，许多刚入门的H5小白，甚至多数老鸟都会碰到H5卡死、闪退、打不开的情况。

据悉H5的加载时间超过5秒，就会有74%的用户离开页面。而卡顿、闪退等问题，极大可能导致用户体验不佳，最终流失。一般来说，一支H5的大小最好控制在10m以内。当然，这是为了适配绝大多数手机而言的，如果里面有嵌入本地视频的话，则可以提升到20m以上。所以除了核心的策划与创意，如何优化一支H5，使页面与交互更加流畅，给用户创造更良好的用户体验，对于H5项目的成功来说是至关重要滴。

1、压缩图片

在制作H5之前，切记切记要把各种素材压缩一遍。先来说一下图片，图片的格式非常多，包括JPG、JPEG、PNG、GIF等，这些都可以上传到意派Epub360里进行编辑，一般来说背景图不超过500k，其他图片50-100k左右。

JPG/JPEG：可选用大尺寸&大有损压缩比的文件，这样去除了图片中的部分信息和色彩，从而得到更小的图片文件。

PNG：多彩图片的话可用PNG-24格式，低彩图片的话推荐PNG-8格式，最大限度保证图片质量（p.s.留白部分必须裁掉先！）

GIF：在微信H5中毕竟消耗资源，一般都用序列帧加以替代。

2、压缩音频

目前意派Epub360可上传MP3格式的音频文件，WMA、WAV格式直接转成MP3即可，背景音乐一般500k左右，其他音频音效50k左右。通常一支H5的停留时间不会太长，所以背景音乐的时长可以尽量压缩在1分钟之内，有些上传了2-3m音乐的派友可以切掉一半了...

另外，关于音量大小之类的，可以提前用专业的音频软件（如Au）调整完毕，再进行上传。

3、压缩视频

目前意派Epub360可上传H.264的MP4格式的视频文件，其他格式直接转成MP4即可，上传视频并没有限制，但是一般都不应超过20m。关于本地视频这部分，更详细说明可参考相关文档《本地视频制作规范》

p.s.关于压缩工具，推荐专门用来压缩图片的tinypng；压缩音视频的格式工厂，绝对的万能工具；最后就是adobe全家桶什么滴专业设计工具，不用说，派友们都早就已经下好了吧！

4、巧用预先加载

如果H5作品里素材实在太大，无法把当前页面的图片素材一次加载到位、这样就容易碰到卡顿缺图或者图片没有加载完整的情况，给用户带来不甚满意的体验。

在意派Epub360里，可以采用预加载页面的触发动作，在合适的时机，对后续页面的素材预先加载，确保H5播放的体验完整性。

5、尽量少的页面

页面数量也需要合理控制住，一般都在10-20页左右。小编也曾碰到过有个别派友直接做了哗哗地100页电子杂志，移动端基本是没可能打得开这个H5...

意派Epub360-专业H5设计工具

意派Coolsite360-专业响应式网站/微信小程序设计工具