HTML 提升HTML5的性能体验系列 列表流畅滑动

今天发现项目有一个页面滑动效果在iOS（iPhone6s&iPhoneSE）上十分顺畅，到安卓手机（三星新款手机，性能较高）上就很卡顿，百思不得其解。

请教了同学之后，找到这样一篇文章：提升HTML5的性能体验系列之二 列表流畅滑动

看了一下，意识到可能是因为div滑动而不是body滑动造成的卡顿。

检查了CSS文件

			body {
				background-color: #eaeaea;
				overflow: hidden;			
				}

发现我不小心将body滚动给关闭了，马上把overflow:hidden这行代码删掉。

检查了一下，发现滑动卡顿的情况没有了。

为了方便读者现将原文粘贴于下方，感谢作者分享。

App的顶部一般有titlebar，下面是list。
常见的一个需求是要在list滚动时，titlebar不动。
这个简单的需求，实现起来其实并不简单。

在普通web上的做法是使用div的滚动条，把list放到div里。
但是很不幸的是，div滚动条在Android4.4以下的手机上不可商用，如果dom复杂，不管多高端的Android手机，滚动效果也惨不忍睹。

还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部，当titlebar的右侧出现滚动条时，看起来非常怪异。
还有一个副作用是滚动太快时，titlebar的div会下来一下又弹上去。这是因为滚动时触发页面重绘，dom很复杂时重绘来不及，绝对定位的titlebar就会先下来后上去。

还有一种方法是使用自绘的滚动条，即不用浏览器的滚动条，自己画一个滚动条，iScroll等方案是采取这种思路。但模拟的始终是模拟的，和原生的滚动条效果还是差很多，在列表头和尾的拉动回弹的表现不佳，而且列表长了、内容复杂了，非常卡顿。

想要解决这个问题其实也不难，既然div的滚动条卡，而浏览器body的整体滚动条不卡，那就老老实实使用浏览器的body滚动。title区域有2种处理方式。
1. 原生title
HBuilder8.0起，支持了原生的navigationbar，创建webview对象时，在style参数里配置navigationbar就可以得到一个原生的title。
HTML页面的滚动部分会自动在这个原生title下面。
而这个原生title，又属于nativeObj.view，可以自由的在上面写字绘图，拥有良好的自定义性。
在HBuilder8.2中，navigationbar被进一步合并到subnview体系中，成为webview的titleNview。拥有比之前更好的动画性能。
配合nativeObj下面的原生imageslider，还可以实现沉浸式题图效果，题图开始通顶到状态栏上，在向下滚动后渐变消失，而title渐变出现，非常动感。
关于沉浸式，是另外的话题，此处不展开。有兴趣可参考http://ask.dcloud.net.cn/article/1150
而且在新窗体动画时，不管内容页面渲染多么慢，原生title在动画期间一定是渲染好的。
mui对这个效果进行了封装，使用mui.openWindowWithTitle即可打开一个带原生头的webview。
在Hello mui里nav bar中点“native title”，可看到效果和源码。
2. 基于div的通顶渐变title
很多界面顶部是图片，滚动后渐变出现title，这种设计就不怕滚动条通顶。
基于div一样可以实现题图开始通顶，在向下滚动后渐变消失，而title渐变出现。
在Hello mui里nav bar中点“透明渐变(div模式)”，可看到效果和源码。
（Hello mui中的示例没有沉浸式，实际是可沉浸的，即图片通到状态栏上，需要单独配置webview的沉浸式）
当然也不是所有的界面都可以这么设计，所以掌握方案1中的原生title是必须的。

已过期历史：在HBuilder8.0以前，官方曾推荐过双title式title。
即把屏幕切分成2个webview，把titlebar的HTML装载到一个webview里，list页面是另一个webview，list页面直接使用浏览器的滚动条而不是div滚动条，这样也可以得到一个流畅的列表滑动体验。
在mui框架里，通过mui的init里的subpage，可以通过配置而不是编码的方式更加简单的开发这种双webview界面。

关于滚动流畅度：

有人仍然使用div滚动然后抱怨滚动不流畅，注意检查自己的代码，一定要用body滚动而不是div滚动。
mui为了多端发布兼容和部分选择器项目滚动，是提供了div滚动的，尤其是在iOS上因为性能较高使用面更大，但这些都是可配置的，觉得不流畅时注意检查配置是不是变成div滚动了。
另外不管是mui提供的div滚动还是plus.webview的body滚动，都是可以设滚动加速度值的，可以根据自己的页面情况设置不同的加速度值。
关于滚动时虽然速度快，但掉帧，即不够平滑，一般是因为js监听了滚动或Android硬件加速未启用。具体在文档中心搜索硬件加速。