当前位置:首页 > 网站建设 > 正文内容

html5app各种机型显示(html5api)

网站建设4周前 (05-22)170

今天长沙网站建设公司善微科技要告诉大家的知识是html5app与app的差距。

1、动画

动画有很多种,比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择:css3动画、java动画、原生动画。

css3动画非常的消耗性能,如果某一个元素用到css3动画可能还看不出来,但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架调用底层的动画,但不管怎么样等于在原来的代码上包上了一层,性能还是不可避免的受到影响。

比如在一个新页面的载入上,如果调用底层动画要考虑的问题有两个,一个是本身资源页面的渲染问题,另一个是远程数据的获取。即便是这些动画能够很快的响应,但大量的css页面会导致渲染卡顿,滑入时可能会有白屏/机器卡顿的现象。为了解决这些性能问题又必须要用到预加载或模拟动画。即便是这样,滑入滑出的动画在低端的安卓机器上还是有很多问题,如果获取服务端数据处理的方式不合适,卡顿白屏的现象会更严重。具体看下面的数据获取方式。

2、获取服务端数据

首先要接受的是,这里的数据获取都是在资源页面上异步完成的,因为只有这样才能让这些资源页面完成预加载或者渲染。但是异步拿到的数据在填入页面中时可能会涉及DOM操作,众所周知,DOM操作非常消耗性能,如果页面小还好,页面稍大数据稍微复杂一点,频繁的DOM操作会导致明显的闪白。而且最重要的一点是,如果页面加载进来之后数据更新的速度太慢,也会让页面模板等待很长时间,对用户体验又不友好,总不能每次打开都像浏览器一样等待刷新是吧。

html5app各种机型显示(html5api)

这个问题如果没有得到解决,H5APP是很难承担大规模数据的页面,在它们之中频繁切换更是难上加难,那么肯定有人也会想到用MVVM的方式,其实我也写过一些基于MVVM的H5APP,相对来说它们获取数据和更新数据的方式更敏捷更科学,但写的过程中又要注意很多H5独有的问题,这些问题在下面的页面切换里来讲。

3、页面切换

上面我们看到了几种不错的实现方式,比如预加载和模拟动画,甚至有批量的预加载,批量的截图模拟动画等等,虽然看起来很友好解决了不少问题,但事实上如果页面足够多就会引发另一个问题——页面的生存周期。

试想一下,如果引导页或者主页面缓存了5个子页面的资源,在跳转到响应的子页面时又会缓存这些子页面的下级页面资源,如此反复肯定会占据大量内存使APP的体验下降。那么怎么知道那些页面是需要的,最多缓存多少页面,什么时候结束哪些页面的生存周期呢?在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答,因此在页面较多内容较多的APP中可能会因这些资源分配的问题降低性能。

这时候我们回过头来再看看MVVM的数据加载问题,实际上不管哪个MVVM框架,写过的人都知道管理这种新型的前端代码最重要的问题是内存的问题,你既要保证代码写的足够优雅没有任何内存泄露问题,也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放,这对全局有没有什么影响,在多个请求时也要合理的分配资源,甚至是复用这些父级页面传过来的缓存资源等等。较小的APP可能并不会有这些问题,如果你想用纯H5来开发大型APP,这很可能会浪费你很多时间——而且结果还不会让你满意。

4、Android/iOS的区别

很多人都说纯H5APP一次编写就能编译Android/iOS两种不同的APP,大大降低了成本。实际上这个观点本身就是值得怀疑的,如果你写过这类APP就能明白我在说什么,它们既不省事,又存在很多BUG,调试时尤其繁琐。举一个很简单的例子,Android和iOS在返回上一页的处理方式上就有明显的区别,iOS的顶部bar在全屏下怎样处理,Android机器出现smart bar怎样处理页面的布局,调用底层硬件时怎样区分不同的场景等等,你需要写一个又一个机型和系统的判断,然后分别在Android和iOS下调试,最后你却发现这并没有卵用,累的要死却什么没学到,只有一堆不知道什么时候会过时的经验。

现在做H5混合APP开发的人很多,但是纯H5却很年轻,很多问题都没有很好的解决,这几个是我在做这些APP时考虑最多的问题。当然大家也不必担心,随着ES6的推行,硬件发展越来越快,纯H5APP未必没有一席之地。最后说一个很少人注意到的H5优势,大家大谈H5APP时都是快速开发、低成本、多平台等等,但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。正是这些复杂多变的CSS样式消耗了性能,但是它带来了排版的多样性,能够细致到每一个字宽行高和风格的像素级处理,才是H5的优异之处。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/115806.html

分享给朋友:

“html5app各种机型显示(html5api)” 的相关文章

武汉网站优化(武汉网站搜索优化)

武汉网站优化(武汉网站搜索优化)

今天给各位分享武汉网站优化的知识,其中也会对武汉网站搜索优化进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、武汉网站优化外包有哪些内容? 2、武汉seo搜索引擎优化方法有哪些? 3、武汉网站优化中如何判断关键词优化? 4、武汉seo哪家好 5...

福州网站优化(福州网站优化服务)

福州网站优化(福州网站优化服务)

本篇文章给大家谈谈福州网站优化,以及福州网站优化服务对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、福州网站推广网站内链的SEO优化技巧有哪些? 2、福州网站优化推广公司哪个好?公司从没在互联网推广过 3、福州网站seo优化 4、如何优化并推广? 福州网站关键...

酒店水单模板word免费(酒店住宿水单模板word免费)

酒店水单模板word免费(酒店住宿水单模板word免费)

今天给各位分享酒店水单模板word免费的知识,其中也会对酒店住宿水单模板word免费进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、谁有饭店用的流水账模板,我主要是买菜和日常支出记录,以及酒店收支明细模板 2、可修改 酒店水单模板 3、宾馆水单怎么打...

设计意图万能模板(语文设计意图万能模板)

设计意图万能模板(语文设计意图万能模板)

本篇文章给大家谈谈设计意图万能模板,以及语文设计意图万能模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、设计思路模板都有哪些? 2、幼儿园数学教案设计意图怎么写 3、设计思路万能模板是什么? 4、设计思路怎么写?万能模板内容是什么? 5、设计思路万能模...

电动车宣传单页图片(电动车宣传车图片)

电动车宣传单页图片(电动车宣传车图片)

本篇文章给大家谈谈电动车宣传单页图片,以及电动车宣传车图片对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、怎样看雅迪电动车型号 2、车库可以居住吗? 3、上海建设电瓶车是几线 4、“儿童电动平衡车”真的适合儿童吗? 5、你还记得吗,2006-2009年的那...

情感语录文案素材视频(视频情感语录素材模板)

情感语录文案素材视频(视频情感语录素材模板)

本篇文章给大家谈谈情感语录文案素材视频,以及视频情感语录素材模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、情感语录最近很火的文案素材(情感文案段子100篇) 2、情感文案视频怎么添字幕(从视频提取字幕文案) 3、情感类的视频素材要去哪里找? 4、视频文字...