本系列文章是针对5+App的，与uni-app无关。uni-app不存在切换白屏问题

提升HTML5的性能体验系列文章目录导航：

• [提升HTML5的性能体验系列之一 避免切页白屏]
• 提升HTML5的性能体验系列之二 列表流畅滑动
• 提升HTML5的性能体验系列之三 流畅下拉刷新
• 提升HTML5的性能体验系列之四 使用原生UI（nativeUI）
• 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
• 提升HTML5的性能体验系列之六 降低内存占用

窗体切换白屏的现实问题

HTML5的性能比原生差很多，比如切页时白屏、列表滚动不流畅、下拉刷新和上拉翻页卡顿。
在低端Android手机上，很多原生App常用的功能和体验效果都很难使用HTML5技术模拟。
我们首先来看第一个问题，如何避免切页白屏。

浏览器的页面在切换时，由于其页面加载机制，在跳转到下一个页面时，先要请求联网、载入页面代码、构建dom、渲染，最后才显示出来。
在最终结果渲染完毕前，会出现几十毫秒甚至数秒的白屏。原生App是没有这个问题的。
虽然使用SPA单页应用模型，即ajax+div切换也可以避免白屏，但把所有页面写在一个SPA页面里，简单几个页面还行。但页面多了手机上也跑不起来，初始化非常慢，首页必然白屏，而且工程大了代码那个乱。。。被坑过的人自然知道。

解决窗体切换白屏的方案

标准HTML5无法解决，我们就使用扩展的手段。
HTML5+是一套增强HTML5的规范，它可以用JS调用几十万原生API。
想要解决切页白屏这个问题，需要使用plus.webview类来做MPA多页应用（不是SPA单页应用）。
plus.webview类是对原生的webview对象的js化封装，使用js可以操作webview。
解决白屏的原理是：把每个页面当作一个webview，但用js来控制它就像控制div一样。动画时通过原生的view动画飘webview进来而不是通过css动画飘div进来
同时webview之间相互独立，不会出现SPA下不同页面js和css冲突的问题。

通过操作webview来避免切页白屏，有几种常见的做法：

1、动画先飘不会白屏的原生title进来

既然webview加载慢，转场动画会白屏。原生view加载快，不会白屏。那么能不能使用原生view呢，或者至少动画时先飘一个原生view的title进来，也不会整屏白屏。
HBuilder7.2起，提供了plus.nativeObj.View，也就是原生的view对象（以下简称nview），可以使用js向原生的view直接写字、绘图（注意是原生view不是webview）。
从HBuilder8.8起，优化了nview和Webview的关系，为Webview引入了titleNView和subNView，是从属于Webview的原生界面。titileNView也称ntitle，进一步对title的原生化做了简化了操作，在plus.webview的style里，可以配置titleNView，如下示例：

plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});

这样创建webview时，会自带一个原生的title，文字、颜色、是否有返回箭头、分割线这些都可以设置，见http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles。还可以通过getTitleNView()方法得到一个nview对象，自由的向上面写字、绘图、处理点击响应。参考nview文档http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
如果只是简单修改，比如修改title文字，也可以通过重设TitleNView的style来实现：
plus.webview.currentWebview().setStyle({titleNView:{titleText:'new text'}})

在mui框架中，进一步简化封装了mui.openWindowWithTitle()方法，参考http://dev.dcloud.net.cn/mui/window/#openWindowWithTitle

上面title有了，中间空白处可以先转个plus.nativeUI.waiting的原生雪花或显示加载中，这样转场时就不会飘白屏了。
一般本地页面加载都很快，转场动画300毫秒结束时，页面也渲染出来了。

另外提供几个让HTML页面渲染快的方法

• 页面渲染尽量不用js做，想要渲染快，就直接写HTML和css渲染，js渲染的界面显示更慢。
• 少用padding、margin，尽量写简单的代码，让页面一次渲染到位，而不是反复触发重绘。
• 减少图片尺寸，不要使用背景图（最常见的性能问题均来自于此）

理解了titleNView，我们再来看subnview。
同理，subnview也是原生渲染的view，它可用于更大面积的原生渲染。
在流应用里的唯品会中，商品详情界面的加载速度那么快，就是因为使用了subnview。参考视频http://v.qq.com/x/page/k05051mc143.html。
一般业务有titleNView就够了，追求极致体验的业务可以使用subnview。
所谓追求极致，就是要求在100毫秒渲染，动画期间就要完成联网和渲染。即使原生应用，大部分业务也是在动画完成后才渲染界面的。
使用subnview要在页面里大量通过js构造界面，不太直观。HBuilder8.3.3起，新增了wap2app项目，其中引入了nview模板，新建一个nview文件，可以使用类vue的方式开发，参考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12757。后续会把nview模板引入到5+应用开发中。

延伸：既然有nview，那是不是可以使用nview做完整界面，废除webview？类似react native那样。
DCloud一直遵循的是HTML5+的规范和理念，即不推翻HTML，而是在HTML做的不好的地方强化补足。
即使在动画期间大量使用了subnview，但滚动后的完整的页面仍然应该是HTML的。
这样的解决方案即能满足用户体验要求，又能兼容好HTML5，是更好的解决方案。

早些年mui曾推荐使用过head和body分开载入的方案，此方案已废弃，由这里描述的原生title方案替代。

2、预加载html

既然HTML渲染慢，是否可以后台预加载，需要使用时直接动画进来？
当然是可以的。所谓预载，即后台预载新页面的HTML文件及资源，使用时直接调出这个已经创建好的webview。
尤其是从一个列表页面反复打开详情页面，仅仅是其中的数据不同，此时应该预载和复用详情Webview。
在Hello mui里有一个列表到详情的最佳实践示例，就是使用了这个思路，强烈建议大家在列表到详情时研究使用这个示例。文章参考http://ask.dcloud.net.cn/article/12575

只要服务器返回数据不拖后退，一样可以实现100毫秒渲染，动画期间完成联网和渲染。

预加载，由于不显示出来，并不会过多增加资源占用。（同时显示在屏幕上的webview不要超过3个，隐藏在后台的webview不要超过10个）
如果是list转到content，不同的item点击只是一个页面，完全可以使用预载。
但如果页面不同且较多，此时不建议预载太多Webview。后台预载太多webview需要耗很长，会抢cpu，此时用户如果在前台显示的Webview里操作比如滚动列表，会感觉到卡。

mui框架的窗体函数封装

mui框架为了简化窗体管理的工作，把一些常用的窗体模型做了简化封装。
但对于复杂的窗体切换，仍需开发者搞明白上面提到的窗体切换原理。
mui的init方法，通过参数封装了preload，这样就可以方便的预载webview。
mui的openWindow方法，封装了显示waiting，载入新页面，处理动画，关闭waiting等工作。
mui的openWindowWithTitle()方法，封装了原生title。
mui的back样式控制，自动封装了窗体的隐藏和关闭。
这些方法具体参考mui的js API。

启动后首页的白屏

首页是没有预加载的概念的。
首页的控制基本都在manifest里进行。
有2个与启动白屏有关的manifest设置。
1.launchwebview
在launchwebview里可以配置首页的titlenview，以及使用subnview制作tab。
这样顶部和底部实际上是由原生引擎渲染的，可以迅速显示。
参考文章：基于subnview模式的原生tab

1. splashscreen
   启动封面的图片如何关闭是在manifest里配置的。
   默认是在首页的webview的loaded事件发生后关闭。但又提供了若干选项。
   不管你的首页是白屏了还是觉得进入太慢了，都可以控制。
   在工程下manifest.json里找到plus、splashscreen节点，这里有event选项，可以配置是在哪个事件时close splash，默认是loaded，也可以配成titileUpdate、rendering、rendered。
   默认配置loaded事件是偏保守的，避免有的开发者首页代码写的不高效，导致白屏。
   如果你的首页代码效率高、渲染快，则推荐配置成titileUpdate事件。

还有一种手动控制splash关闭的技巧，如果splashscreen节点下的autoclose设置为false，即手动，可以在首页代码里写js控制封面图片的消失时机。
此时在首页合适的位置，比如说联网结束或业务上的其他时间点，调用js关闭封面图片，plus.navigator.closeSplashscreen();
但不管什么方法，5+引擎的splash显示时间不会超过6秒，如果6秒内开发者仍不能做到首页渲染，那么用户会看到白屏。

关于如何优化启动速度，可以参考这篇文章http://ask.dcloud.net.cn/article/571

5+动画详解

这篇文章详细描述了5+提供的各种原生动画的特点及优化技巧，是必读文章http://ask.dcloud.net.cn/article/225

Android5的动画花屏、分块渲染解决方案

如果你遇到了相关问题，可以参考http://ask.dcloud.net.cn/article/12837

后记

不管使用哪种方法，都要注意一点，手机App的HTML页面必须本身性能足够高。
这是老生常谈的问题，但现实中还是大量App因为这个问题而导致性能体验出问题。
编写干净整洁、一次渲染的页面非常重要。
现在太多开发者在研究模式、框架，让页面渲染要经历二次、甚至四五次重绘才能完成。在短短几百毫秒的动画期间，这么干要不让页面卡、要不让渲染慢。
dom层级简单点，不要嵌套太多。
减少css二次渲染，就是少用复杂的选择器，少用padding、margin这些会二次修正页面的css。
如果追求极致的话，那jquery、zepto这些框架也不要使用，手机上都是webkit引擎，直接写document的api操作dom即没有兼容问题又没有效率问题。

2018年8月，DCloud推出了uni-app，这个产品自动优化了预载、原生组件，如果你无法把HTML5+的app优化的足够好，不如直接使用uni-app。无需优化天然达到微信小程序水准。

在CSS中设置
{{{
input {
-webkit-user-select: auto !important;
}
}}}

HBuilder有很多文件编辑器。
右键点击文件-打开方式，可以看到所有编辑器。
很多不常用的文件后缀名其实都可以通过HTML编辑器打开。

PHP的语法高亮需要安装PHP插件。
在工具-插件安装中，可以安装Aptana PHP插件。
如果确定安装了php插件，那么在工具-选项，搜索文件关联，在里面配置php文件和PHP Editor的关联。
也可以在项目管理器里对文件点右键，打开方式，里面选PHP Editor。

有时插件会因为网络问题安装失败，本地找不到PHP Editor，此时需要重新安装php插件。
如果遇到插件安装界面里显示php插件已安装，但打开方式仍然没有PHP Editor，请先卸载php插件，重启后重新安装。

HBuilder自带的web服务器只能解析html、js、css。
如果想解析php，需要自己安装php服务器，比如Apache。
安装好后，在HBuilder的工具-选项-web服务器中点新建外部web服务器，配置地址和参数，保存后重启HBuilder。
然后点运行或边改边看即可。

目前只有php支持外部web服务器，其他语言不能配外部web服务器。

无法变成eclipse插件。
HBuilder里面有4种编程语言，除了java，还有c、HTML、ruby。单纯的java满足不了我们的需求。
另外HBuilder的核心定位就是做最好的HTML5编辑器，而非最好的所有编辑器。
倒是如果大家愿意的话，可以给HBuilder装其他语言的插件。

如果装过其他eclipse插件，其升级服务器可能连不上而导致报错。
此时在工具-插件安装-手动安装eclipse插件-可用软件站点，取消其他插件的升级地址。
重新点击帮助-检查新版本即可。

===更新===
推荐在官网下载HBuilderX，这些问题都不存在了。

===历史内容===
HBuilder定位是极客用起来超爽的IDE，它的功能比文本编辑器更多，资源消耗也更多，但HBuilder可保证主流配置电脑流畅使用。
我们先说下HBuilder比文本编辑器慢的几个原因：

1. HBuilder毕竟是IDE，功能比文本编辑器多，执行也自然会相对慢。
2. HBuilder还自带了可调试控制台的浏览器，ide+浏览器都在这里，内存占用肯定也少不了。
3. 插件有问题导致卡
   HBuilder的三方eclipse插件，如aptana的php、ftp插件，我们未对其做优化，有开发者反应性能不足。虽然这些插件都是开源的，但我们暂时没有精力完善他们，如果开发者基于这些开源项目做了改进或找到了更好的三方插件，请推荐给我们，我们会替换现有插件。
4. HBuilder遇到某些情况的bug造成卡
   经过一年多的完善，目前这种情况已经比较少见了。如果大家遇到某些情况下敲代码卡，请一定反馈给我们。

不过在大多数情况下，机器性能好的话，HBuilder会让开发者感觉到难以在别处寻觅到的爽快。
我想好的开发者是宁愿把硬件配置调高，用更智能的工具做开发的。
我们的开发者中有一些创业团队，集体配置SSD高配电脑使用HBuilder开发，这种创业团队的效率极高。

然后讨论下如何让HBuilder更快的技巧，或者使用中避免不卡的注意事项。

1. 如果有固态硬盘，把HBuilder和工程代码都放到SSD固态盘上。现在的电脑配置，cpu和内存都不是问题，往往的瓶颈是硬盘上；
2. 同时打开的项目不要太多，把不用的项目点右键关闭，这样HBuilder就不扫描这些项目了，后台资源会释放不少
3. 编辑大文档时慎用自动语法验证器，语法验证过程较易引发卡顿，可以在工具-选项-HBuilder-语法验证器设置里关闭，或者选择手动验证语法。
4. 编辑大文档时，最好关闭大纲的实时同步功能。大文档的大纲结构会很多，每次移动光标实时计算大纲的位置会有点慢。可以在需要定位时再点一下同步。大纲实时同步在大纲视图的右上角的下拉菜单里。
5. 清理无用的js框架和素材库。Js框架文件都比较大且结构复杂，素材库文件可能很多，扫描这些文件比较费时。不用的文件就移出项目。另如果不在意这些文件的扫描提示，也可以把文件移除扫描清单，这样就会更流畅点。对不用的文件或目录点右键-构建-移除构建目录。
6. windows search index和dropxbox等工具也会监控磁盘，当项目文件目录被他们监控时，磁盘IO会比较高。在新建项目时会卡。
7. 刚导入一个大工程时，或语法库升级时，会触发索引构建，此时cpu会比较高，并行做其他操作就会卡顿，但构建完毕后会恢复正常。
8. 不用边看边改时，不要最小化那个浏览器，直接关掉它(ctrl+shift+p)。不然你改其他页面时，那个浏览器始终在运行，万一临时写的js有死循环，那HBuilder就挂掉了。而且HBuilder是相当于同时开了ide和浏览器，浏览器也是吃资源的。可能总体内存看着占了不少，但比较某些工具+浏览器合起来占的内存，其实也不多。
9. 有些杀毒软件在监控HBuilder的exe和dll等文件，导致HBuilder卡顿，此时请把HBuilder的目录设成杀毒软件的白名单，禁止杀毒软件扫描。

简单说下IDE和文本编辑器的区别：
IDE有AST语法树，是专用于某种语言的优化开发工具，它能认识这种语言。
而文本编辑器是通用的，没有为特定的语言做优化，语法提示也是乱提示。
比如var a = document.getElementById("a1");。
在a后敲点出它的方法属性时，HBuilder要扫描a到底是什么，超链接？canvas？输入框？然后才会给予用户最准确的提示。
这种计算都需要在按下键盘的很短时间内完成，文本编辑器没有这些功能，它不会认识a，不管什么都提示一样的内容，所以提示速度更快。
而在所有的语言的AST构建中，js这种动态语言是最复杂的。一个function，可能根据参数不同返回多种类型，这样的function后面再点时，HBuilder都会分析function里的代码以确定返回类型。
AST不止用于语法提示，转到定义、重构变量都离不开它，这些功能也是文本编辑器缺失的。
所以在HBuilder里alt+左键转到定义非常好用，而文本编辑器就做不到了。

更新：HBuilderX已支持秒启动，推荐在官网下载HBuilderX。

HBuilder一般启动时6秒左右可以进入。
HBuilder还是属于IDE而不是文本编辑器，速度比文本编辑器慢是肯定的。
这两者最大的区别就是是否有AST语法树和WEB语法解析引擎，就是说HBuilder知道你写的是什么，按下点知道该出什么，写的对不对。
包括重构变量命名和转到定义，这些都是因为有语法树和解析引擎。
算是一种取舍吧，启动时慢几秒，但启动后写代码快的可不是差几秒了。

另外HBuilder和文本编辑器，像是机关枪和瑞士军刀的区别。
如果是临时改小文件，确实犯不着把机关枪搬出来，文本编辑器更敏捷。
但如果真的开发项目，尤其是HTML5 App项目，还是要用专业工具，整体效率更高。

可以参考如下优化HBuilder的启动速度：

1. 把HBuilder的目录放在杀毒软件和防火墙软件的白名单里。有些杀毒软件非常影响HBuilder启动。
   HBuilder在每次发版前均会先通过360的软件检测才发版，所以不用担心HBuilder的安全性问题。
2. 硬盘IO也是重要影响，如果有固态硬盘，把HBuilder和工程代码都放到固态盘上；如果是普通硬盘，优化下4K对齐。
3. 同时打开的项目不要太多，把不用的项目点右键关闭，这样HBuilder就不扫描这些项目了，后台资源会释放不少。
4. HBuilder的Windows版有一个系统服务可以优化HBuilder的文件存储，除非你对启动速度感到满意，否则请不要禁用这个服务。

复制和剪切折叠的代码，选择时需要多选择一个换行符。然后再复制。
如果不多选这个回车，HBuilder会认为你只是想复制或剪切折叠区的第一行。

依次点击工具-选项-HBuilder-Web服务器-内建服务器
可修改内建服务器的IP地址为127.0.0.1或本机网卡IP
内建服务器不可以运行PHP
需要重启HBuilder才生效

WEB项目不可以手机预览页面。只有移动APP才可以。
确定项目是移动APP后,确保移动设备插好数据线并连接到电脑。
如果是iOS设备,请确保电脑安装有itunes,如果是Android,请确定手机驱动已经安装。
此时在HBuilder下方的状态栏也会提示手机已连接
然后点运行,选择对应的设备即可。
如果你只是想预览web项目，那么在菜单工具->高级选项->HBuilder->web服务器->内建服务器里，选择一个内网ip，比如192.xxx，然后手机通过wifi连入这台机器，即可预览。