系列文章目录导航：

• 提升HTML5的性能体验系列之一 避免切页白屏
• 提升HTML5的性能体验系列之二 列表流畅滑动
• 提升HTML5的性能体验系列之三 流畅下拉刷新
• 提升HTML5的性能体验系列之四 使用原生UI（nativeUI）
• 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
• [提升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的运算。所以建议图片轮播尽量不自动播放。

使用沉浸式状态栏的同学在升级iOS11以后，发现之前的沉浸式状态栏没有了，变成了一个灰条，于是开始嚷嚷着让官方修改SDK。

在官方做出动作进行通用适配之前，大家也可以自己暂时解决一下：

• 使用离线打包的同学可以在工程内自行设置contentInsetAdjustmentBehavior为UIScrollViewContentInsetAdjustmentNever。
• 喜欢native.js的同学也可以直接修改webview对象的contentInsetAdjustmentBehavior属性。
• 而只会HTML的同学也可以利用一个新的viewport属性进行适配。

下面单独讲一下viewport属性的方式。
需设置viewport-fit为cover。

具体代码如下如下：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,viewport-fit=cover">

切记，还要在css里使用constant(safe-area-inset-top)来避开iPhone X的留海，大家可以参考此文章：https://ayogo.com/blog/ios11-viewport/

备份自己的东西，有兴趣的自己下载看看内容也可以，仅仅是练习下observer的简单实现

就缺打包了 wap2app真是太好用了 为工程师点赞 国庆中秋愉快！

有很多时候，程序运行过程中停止，不知道哪一行出了问题，得自己一行一行验证查找，可否增加程序最后运行到哪一行的提示？这样可以节省不少的工作量，使用起来也更加方便。

新版本HBuilder8.3.0进行如下调整

硬件加速

调整为所有设备默认开启硬件加速（之前在Android5设备上默认不开启硬件加速）
开启硬件加速后可能会在部分Android5设备上出现页面滚动花屏的问题，这时应该避免在页面中减少使用高分辨率图片。
如果确实需要使用高分辨率图片也可以自定义配置关闭硬件加速，参考Android硬件加速详解。

窗口动画截屏加速

为了确保窗口动画流畅度，避免窗口闪屏，HTML5+运行环境会自动进行截屏优化。

pop-in/pop-out动画

Android5.0及以上：默认不使用截屏加速
Android5.0以下：如果Webview中存在subNView则pop-in动画默认不使用截图加速，pop-out动画默认使用截图加速；如果Webview中不存在subNView则默认不使用截图加速
使用截屏加速可能会引起动画延迟响应（截屏操作耗时），因此调整默认保证pop-in动画流畅， pop-out动画避免闪屏。
（之前版本在所有设备上默认都使用截屏加速）

slide-*动画

默认不使用截图加速
此种情况下如果碰到页面分块渲染，应该避免在页面中使用高分辨率图片，或者关闭硬件加速，或者使用subNView来优化页面。
（之前版本在Android5.0及以下设备上窗口关闭时使用截图加速）

fade-in/fade-out动画

默认使用截图加速
（与之前版本默认值一致）

如果希望修改默认值，可以通过Webview窗口显示/隐藏/关闭方法的WebviewExtraOptions参数的acceleration属性修改默认值。

/*

• 手动取消当前视图键盘焦点，参考iOS原生功能实现
  */
  function removeBodyFocus() {
  var focusElement = document.getElementsByTagName("body")[0];
  if(focusElement.classList.contains("mui-focusin")) {
  focusElement.classList.remove("mui-focusin");
  focusElement.parentNode.replaceChild(focusElement, document.getElementsByTagName("body")[0]);
  }
  }

经查验和升级到最新版Mac系统有关（目前只有10.13的系统会有此问题）

解决方法如下：
1.找到HBuilder安装目录，【右键】-【显示包内容】

2. 将附件中的文件patch.zip解压到Contents目录下，覆盖掉原来的Info.plist文件。
3. 重启

如果没有解决，请加QQ：824810885咨询。

参考：https://www.eclipse.org/org/press-release/20170925criticalbug.php

最近开发了一款APP，有一个页码是我的二维码功能。需要用户打开二维码页面的时候自动点亮屏幕。返回到其他页面时恢复原始亮度。因为我的APP属于工具性质。 并不需要很多其他的地图位置信息等等的权限。于是我在权限设置的时候做了精简。如下图所示

结果问题来了，调试的时候好好的。能够完美适应功能需求，一云打包就悲剧了。点开我的二维码APP立马闪退。我以为是云打包的问题。 下载SDK离线打包。去掉AndroidManifest.xml中不需要的模块及权限后问题依旧。 后来经过仔细分析发现有一个权限android.permission.WRITE_SETTINGS官方配置在了地图模块之下。所以在云打包的时候如果你不选择地图模块同时去掉了模块的相关权限之后这个负责读写系统设置项的权限就不会被打包进APP从而导致应用崩溃。

解决方法：
第一种：把地图模块添加进打包。
第二种：如果没有地图模块的需求可在右侧的Android权限设置中把android.permission.WRITE_SETTINGS权限勾选上即可

如题

1. html中的video加上：playsinline
   <video playsinline></video>
   2.JS中写上这么一句话
   plus.ios.currentWebview().plusSetAttribute('allowsInlineMediaPlayback',true)

在做mui项目的时候遇到h5支付一个比较奇葩的问题，在跳转页面的时候需要构造头部referer
,不够构造头部就会一直提示商家参数错误，所以这里给大家分享一下如何构造头部referer
如下所示代码
var fp = new Fingerprint2();
fp.get(function(result) {
//alert(payurl);
mui.openWindow({
url:payurl,
id: 'payurl',
styles:{
additionalHttpHeaders: {
referer:""
}
},
waiting: {
autoShow: true, //自动显示等待框，默认为true
title: '正在加载支付页面......', //等待对话框上显示的提示内容
},

            });   

        });  

注意 其中referer 设置是比较有讲究的 需要设置成在申请h5支付的时候的域名才可成功

HBuilder 8.8.5发布，重磅新品wap2app上线，支持云端打包，原生nview加持，体验快到震惊!

手机wap站，能不能快速转换成app，并且达到app的功能体验？
这个问题已经提出好久好久了。
好久到，现在大多数人已经不对这个问题抱有希望了。

但，如果真能做到呢？

wap2app，是DCloud公司的重磅新产品。
它是一个开发框架，更接近mui，底层封装了HTML5Plus的各种能力。

也就是从现在起，DCloud给开发者提供了2种开发模式：

1. 从头开发，使用mui框架，开发一次，app和wap站都有了；
2. 已有wap站，则使用wap2app框架，把wap站强化为app。

wap2app这个项目DCloud其实已经开发数年，在HBuilder alpha版中也早已存在。
经历过很多项目实践、打磨，现在我们终于把它正式推出。

真实效果到底怎么样？我们来看段视频。
看看基于wap2app转换的应用，和原生应用相比到底有多大体验差别。

• 实验环境说明：
  手机设备相同（华为荣耀8青春版，2016年上市，千元机代表）、网络环境相同、使用前均清理了内存，原生应用使用最新版。

• 实验视频：唯品会、大众点评流应用与原生应用对比

• 实验结论：
  新页面渲染速度和原生不相上下，在300毫秒的动画期间即可渲染，而且动画平顺。

为什么加载这么快呢？因为wap2app封装了5+引擎里的原生渲染能力和原生动画能力。
在新页面加载时，是由plus.nativeObj.view来渲染的页面。

那么强化一个wap站要多久呢？
嗯，中等规模的wap站大约4天左右。
这里有详细的开发文档：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244，快来试试吧。
与DCloud的所有开发者产品一样，这也是一个纯免费的工具。

产业发展的车轮一直在滚滚向前，无人能阻挡。
或许，你又见证了一次重大改变。

附，HBuilder 8.8.4的release note

IDE

• 【重要】新增wap2app项目类型，将现有M站快速发布成App的增强方案。[详情>>>]http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/1244)
• 【重要】新增调试Android/iOS设备应用的功能（无需翻墙！！！运行时会自动切换右上角webview调试视图）
• 【重要】真机运行添加自定义基座运行，使用方法同真机运行。教程参考：https://ask.dcloud.net.cn/article/12723
• 优化设置默认编辑器的体验（可直接右键【打开方式】-【选择默认编辑器...】）
• 修复创建web项目时在某些机器上输入项目名称会卡的问题
• 修复html标签带“-”号时的高亮问题
• 新建移动App时，增加原生tab选项卡项目模板，教程参考：http://ask.dcloud.net.cn/article/12602
• 新建HTML页面时，支持选择单webview模式下拉刷新页面组模板
• 新建HTML页面时，支持选择列表到详情最佳实践页面组模板

App

• 新增原生View控件绘制富文本内容（richtext）及文本编辑框（input）
• 新增Webview窗口的titleNView支持设置初始化绘制内容（WebviewTitleNViewStyles.tags）
• 新增Webview窗口支持控制是否可选择页面文本内容，即是否弹出系统复制粘贴菜单（WebviewStyles.userSelect）
• 新增确认对话框（plus.nativeUI.confirm）支持设置垂直方向对齐方式（ConfirmOptions.verticalAlign）
• 新增自动消失提示框（plus.nativeUI.toast）支持显示富文本内容（richtext）
• 新增图片保存到相册后返回路径，在图片选择时可设置为默认选择此图片
• Android平台调整硬件加速和截屏策略。详情
• Android平台更新第三方SDK：个推（2.10.3.5），新浪微博（4.1）
• Android平台新增预载网络页面代码但不渲染的功能（plus.webview.prefetchURL/plus.webview.prefetchURLs）
• Android平台修复横竖屏切换可能导致获取屏幕宽度（plus.screen.resolutionWidth）不对的问题
• Android平台修复Webview窗口快速拖拽（drag）操作可能导致页面显示白屏的问题
• Android平台修复图片轮播控件控件（ImageSlider）显示两张图时循环控制逻辑错误的问题
• Android平台修复操作图片选择控件后缓存到应用私有目录可能导致应用空间占用过大的问题
• Android平台修复在7.0上调用拍照或录像时可能出现异常的问题
• Android平台修复下载模块可能出现下载失败的问题
• iOS平台修复使用原生混淆可能会概率出现启动白屏的问题
• iOS平台修复调用plus.nativeUI.confirm后再调用plus.nativeUI.alert可能导致回调函数无法触发的问题
• iOS平台修复原生View控件以dock方式添加到Webview窗口隐藏后显示显示不正确的问题
• 新增Map地图控件对象支持关闭（close）操作
• Android平台修复压缩图片在部分设备上可能出现崩溃的问题
• Android平台修复百度地图在部分设备上可能无法正常显示标点图片的问题
• iOS平台修复应用中存在侧滑菜单通过wgt升级更新后重启应用侧滑菜单显示不正常的问题

MUI

• 修复picker选择器控件的潜在bug，issues #348
• 修复Hello MUI在iOS平台无法跳转appstore进行评分的bug
• 解决DIV模式的时间选择器，点击遮罩或取消按钮，反复关闭/显示，重复创建picker控件的bug
• 优化subNView模式的底部选项卡实现

wap2app

• 【重要】wap2app产品发布，支持将现有M站快速发布成App,参考教程
• 开源plusShare，快速分享到微信消息、朋友圈及更多系统分享，参考教程