DCloud_heavensoft
DCloud_heavensoft
  • 发布:2017-10-07 18:21
  • 更新:2017-10-07 18:21
  • 阅读:18147

降低内存占用

分类:HTML5+

系列文章目录导航:

手机硬件资源有限,不能像pc开发那样随意吃内存,这对开发者有更高的要求。
内存占用过高,会引发闪退、渲染花屏、分块渲染。

降低App的内存占用,有如下策略:

1.图片处理

图片是已知问题中最高概率发生的问题,也是解决起来最简单有效的问题。
很多开发者抱怨使用5+做的app容易闪退或花屏,100个这样的抱怨,其中99个是因为图片太大。

  • 1.1 减少图片体积
    把HTML里的图片裁剪到几十K,有必要的话,可以点击小图再新开一个页面展现大图。
    唯品会也是一个图片很多的应用,但其流应用非常流畅。因为同一个商品,唯品会制作了有很多不同尺寸的图,而不是只有一张高清大图到处用。
    尤其在图片列表界面,一定要使用缩略图。
    不管是开发者自己制作的图,还是UGC的图,都应该在服务器侧自动处理尺寸并放置到cdn上。
  • 1.2 不要使用背景大图
    有些app里设了很大的背景图,此时非常影响渲染,请不要设大背景图。
  • 1.3 避免在一个Webview里显示过多高清图
    如果要显示清晰高清图,尽量设计成不在同一屏幕并显多张高清大图。 比如点击小图新开一个Webview或nview看大图。
  • 1.4 使用原生图片渲染控件
    业务上确实需要非常多的高清图显示,那么改用plus.nativeObj下的imageslider,或自行创建多个nview来渲染图片。这比Webview里的图片渲染要省内存。

2.同屏不要显示多个webview

5+引擎有Webview的出入栈管理机制,不显示的Webview其实不会占用太多内存,包括预载但不显示的Webview。
但如果屏幕上同时显示多个Webview,那是很占渲染资源的。
过去DCloud官方曾推广多Webview解决方案,同一屏幕上通过Webview嵌套来解决body区滚动流畅、下拉刷新、底部tab等一系列问题。
在nview强大起来后,DCloud官方已经改为通过nview解决上述问题,替换同屏多Webview方案。
通过titleNView,解决区域滚动、下拉刷新等问题,并且降低内存占用,具体参考[http://www.html5plus.org/doc/zh_cn/webview.html]。
通过subnview,解决底部tab问题,并且subnview的可以大幅提升渲染速度。具体参考此文实现原生tab:http://ask.dcloud.net.cn/article/12602
另有一处使用多Webview的场景是webview侧滑菜单,这个场景我们推荐改为div方式的侧滑菜单。Hello mui里也有示例。

3.webview的出入栈控制

5+App运行时,每个Webview都在内存里,比如进入首页、列表页、最后停留在详情页,此时3个Webview都在内存里。
但为了节省内存,此时首页是会出栈的,这个出栈,不是销毁了这个Webview,还是释放了其占用的渲染资源。但其dom环境仍然存在,也依然可以执行js。
但此时如果直接从详情页跳转到首页,在低端机上有可能看到会白一下,因为首页在重新渲染。
如果从详情页back到列表页,那么详情页完全close,并且首页入栈。
也就是5+引擎的逻辑是,保留最近的2个Webview在栈内,其他Webview全部出栈,释放渲染资源。
在某些情况下,开发者可能需要手动控制出栈逻辑,可以使用这个apihttp://www.html5plus.org/doc/zh_cn/webview.html,这里搜render来控制,设为always就不会自动出栈。
但一定也要注意,栈内的Webview太多,App的内存占用还是下不了,仍然可能花屏。
那么反之,如果你的app占用内存过高,则需要检查下你是不是手动把太多Webview放入栈内了。

4.HTML、JS、CSS代码处理

减少dom复杂度,很多开发者的代码里div反复单层嵌套,毫无意义并且增加dom解析和渲染的压力;
减少重型js框架的依赖,angular、jq能不用就不用;
减少css代码,尽可能的少写css,不要写互相覆盖的无效css,不要使用复杂的css计算模型;
css里少用百分比方式的定位和宽高计算,少用padding、margin。有的开发者的界面元素刚显示时在这个位置,过一会儿抖动一下往下移动了几个像素,就是因为margin、padding生效晚导致二次渲染。
尽可能写简单朴素的代码,让Webview一次性渲染好页面。
特别强调下计时器的使用:
计时器是一个一直在吃cpu的东西,能不用就尽量别用。用完后及时销毁。
常见的计时器是图片轮播,比如首页有一个图片自动轮播,此时即使用户往下滚动到看不到轮播图,或者点开二级页,这个计时器仍然在驱动js和dom的运算。所以建议图片轮播尽量不自动播放。

12 关注 分享
Trust wen如故i 洛上千栀 4***@qq.com sharper 田云 8***@qq.com 点Chris Float 1***@qq.com 1***@163.com 2***@qq.com

要回复文章请先登录注册