- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
HTML5性能提升之一 避免切页白屏
窗体切换白屏的现实问题HTML5的性能比原生差很多,比如切页时白屏、列表滚动不流畅、下拉刷新和上拉翻页卡顿。在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟。我们首先来看第一个问题,如何避免切页白屏。浏览器的页面在切换时,由于其页面加载机制,在跳转到下一个页面时,先要请求联网、载入页面代码、构建dom、渲染,最后才显示出来。在最终结果渲染完毕前,会出现几十毫秒甚至数秒的白屏。原生App是没有这个问题的。虽然使用SPA单页应用模型,即ajax+div切换也可以避免白屏,但把所有页面写在一个SPA页面里,页面多了手机上也跑不起来,初始化非常慢,首页必然白屏,而且工程大了代码那个乱。。。被坑过的人自然知道。解决窗体切换白屏的4种方案标准HTML5无法解决,我们就使用扩展的手段。HTML5+是一套增强HTML5的规范,它可以用JS调用几十万原生API。想要解决切页白屏这个问题,需要使用plus.webview类来做MPA多页应用。plus.webview类是对原生的webview对象的js化封装,使用js可以操作webview。解决白屏的原理是:把每个页面当作一个webview,但用js来控制它就像控制div一样。因为webview可以隐式创建,后台载入内容,并且在载入完毕时有js事件通知,我们可以在新页面载入完成后再把它通过动画移入屏幕,从而避免白屏。同时webview之间相互独立,不会出现SPA下不同页面js和css冲突的问题。通过操作webview来避免切页白屏,有几种常见的做法:一种是称之为预载,即后台预载新页面的HTML文件及资源,使用时直接调出这个已经创建好的webview;另一种称之为现载,即点击前页的链接开始走waiting转圈,同时后台开始加载完整的新页面,加载完再用js控制显示到前台。还有一种称之为分开载入,随后会细讲。- 1、预加载所谓预载,即后台预载新页面的HTML文件及资源,使用时直接调出这个已经创建好的webview。Hello mui、csdn、36kr等项目源码,都使用了预载思路。以新闻类app为例,启动首先载入资讯列表list页面,然后后台创建了一个隐藏的webview,加载了一个内容模板content页面。在点击list页面的一个新闻item时,调用webview的窗体控制动画,把content页面侧滑进屏幕。但content页面仅仅是一个模板而没有数据,在content页面刚侧滑进屏幕时,在content页面有一个“加载中”的提示。紧接着content页面开始执行ajax请求,联网加载数据并显示出来。我们可以在list页面的item点击里,一边移动窗体,一边通知新页面执行ajax。webview间相互传递消息使用webview的evalJS方法。这种做法,相当于用户是在新的content页面来等待联网数据。示例代码如下:var webviewContent;document.addEventListener(plusready, function(){ //扩展的js对象在plusready后方可使用 webviewContent = plus.webview.create(content.html);});function clicklist (id) { //list点击item后的事件 webviewContent.show(slide-in-right,200);}在mui框架里,对这个过程进行了简化封装,使用preload参数来控制。参考:http://dcloudio.github.io/mui/javascript/#preload预加载,由于不显示出来,并不会过多增加资源占用。(同时显示在屏幕上的webview不要超过3个,隐藏在后台的webview不要超过20个)如果是list转到content,不同的item点击只是一个页面,完全可以使用预载。但如果页面不同且较多,后台预载太多webview会有点慢。这里的慢不是会造成手机慢,而是预载是耗时间的。Hello H5+这个示例使用了预加载技术,有一些网页在启动时就被预载了。点击到这些网页时,切换会非常快。之所以不预载所有的网页,不是内存不够,是时间不够。预载这些网页时手机CPU消耗比较高,此时如果滑动列表,会发现滑动不流畅。为了避免这个问题,Hello H5+的首页是延迟进入的,等待预载的几个页面都完成后才调用plus.navigator.closeSplashscreen()关闭启动封面图片。如果预载太多页面,等待全部预载结束后再进入首页,会导致App启动非常慢。- 2、现载所谓现载,就是用户点击时后台创建webview加载新页面完整内容,渲染后再显示到前台有时我们无法使用预载
文档评论(0)