当前位置:首页 >> 计算机硬件及网络 >>

移动端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-专业响应式网站/微信小程序设计工具


赞助商链接
相关文章:
更多相关标签: