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

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


赞助商链接
相关文章:
如何理解移动端H5尺寸适配问题
如何理解移动端H5尺寸适配问题_互联网_IT/计算机_专业资料。意派Epub360无需编程即可轻松制作专业微杂志,微信邀请函,H5小游戏等营销互动H5,并可直接微信发布。...
视频H5制作过程中常见的四个坑及解决措施
视频H5制作过程中常见的四个坑及解决措施_计算机软件...当然还有更多好的办法,大家可以多多尝试。另外,Epub...那么怎么解决视频卡顿不播放的尴尬呢, 所以还是建议...
移动端H5页面设计实战
移动端H5页面设计实战_互联网_IT/计算机_专业资料。移动端 H5 页面设计实战 目录为什么要设计 H5 页面 ...移动端 H5 页面设计实战 目录为什么要设计 H5 页面 ....
移动端H5页面的设计稿尺寸大小规范_图文
移动端 H5 页面的设计稿尺寸大小规范当我们在做手机端 H5 网页设计稿时(当然包含微信端的 H5 网页设计),如果没有做过类 似的移动端的设计,UI 设计师和前端...
浅谈H5页面以及动效
Part 2 动效篇 如今的消费者几乎手机不离身,手机移动端 H5 对公司宣传 的...信息含量多 解决思路: 对重点宣传信息加以突出让关键信息在最短的时 间内被...
移动端H5知识普及[系列] - CSS3媒体查询
移动端H5知识普及[系列] - CSS3媒体查询_计算机软件及应用_IT/计算机_专业资料...但是对于我们来说,我们可以通过检测媒体的特性 确定不同的媒体,从而执行相应处理...
iH5首度公开10个关于H5的绝密数据!
媒体行业生产的 H5 在文案和创意上更容易打动人,比 如国务院客户端、搜狐财经...第一期《移动页面用户行为报告》指出,中午 12 点和晚上 10 点是 H5 流量的高...
H5营销优劣势分析
这样一种传播方式 对于品牌来说传播成本并不高。 4...比如页面切换卡 顿、不流畅,多个音频时播放出错,...H5 在体验过程 PC 端体验流畅但在移动端体验 时易...
H5已经烂大街了?_图文
不,是你没有诚意 腾讯大数据在今年 3 月 24 日发布了《移动页面用户行为报告》,报告显示: H5 页面的分享率平均值为 3.93%,最高值为 22.39%;由 H5 页面...
H5项目的兼容性测试初探
影响微信端的H5项目的兼容性的因素分析,并根据分析...功能测试的主要测 试方法是:黑盒测试。根据测试用例...S7 Edge 等 2) 联发科:占据了移动处理器市场的中...
更多相关标签: