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

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

在普通web上的做法是使用div的滚动条，把list放到div里。
但是很不幸的是，div滚动条在Android4.4以下的手机上非常非常卡，滚动完全无法商用。

还有一种做法是把titlebar使用fix来固顶。
但此时手机浏览器的滚动条会通到顶部，当titlebar的右侧出现滚动条时，看起来非常怪异。
还有一个副作用是滚动太快时，titlebar的div会下来一下又弹上去。

有人说使用iframe，但是手机上的iframe的坑很多，有些手机的iframe里只能运行部分js，不能执行plus api，这个坑填不起。

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

想要解决这个问题其实也不难，既然div的滚动条卡，而浏览器body的整体滚动条不卡，那就把屏幕切分成2个webview，把titlebar的HTML装载到一个webview里，list页面是另一个webview，list页面直接使用浏览器的滚动条而不是div滚动条，这样就可以得到一个流畅的列表滑动体验。
滑动感觉和原生一模一样，在列表头尾的拉动回弹也和原生一模一样。
双webview布局有并排、覆盖、嵌套几种做法：
- 1、嵌套：在main页面里create一个list页面，append为main的子页面，摆好位置。
嵌套是比较常用的，因为嵌套后的2个webview成为一个整体，这个页面需要左滑移出屏幕时，只需要操作父页面的动画，子页面会自动根据移动。而使用非嵌套方案，要单独操作每个webview的移动动画，不容易控制同步。
- 2、覆盖和并排一般情况下用不到。

以下为嵌套的示例代码。在main页面里create一个listcontend页面，盖在main的上面，摆好位置。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script type="text/javascript" charset="utf-8">

document.addEventListener("plusready",plusready,false);

function plusready () {

    var pwListcontent = plus.webview.getWebviewById("listcontent");

    if (pwListcontent) {

        console.log("该webview已经存在，不重复创建");

    }

    else{

        pwListcontent = plus.webview.create("listcontent.html","listcontent",{top:"44px",bottom:"0px"}) //创建名为listcontent的webview

        plus.webview.currentWebview().append(pwListcontent)

    }

}

        </script>

    </head>

    <body>

        <div style="text-align: center;">位于上面的webview里的title</div>

        <hr />

        <br /><br /><br /><br />

        <div id="divloading" style="text-align: center;">正在加载...</div>

    </body>

</html>

在mui框架里，通过mui的init里的subpage，可以通过配置而不是编码的方式更加简单的开发这种双webview界面。
参考：http://dev.dcloud.net.cn/mui/window/#subpage

关于滚动流畅度：

有人仍然使用div滚动然后抱怨滚动不流畅，这个就没仔细看我们的文档了。一定要用body滚动而不是div滚动。
mui为了多端发布兼容和部分选择器项目滚动，是提供了div滚动的，尤其是在iOS上因为性能较高使用面更大，但这些都是可配置的，觉得不流畅时注意检查配置是不是变成div滚动了。
另外不管是mui提供的div滚动还是plus.webview的body滚动，都是可以设滚动加速度值的，可以根据自己的页面情况设置不同的加速度值。

关于dock

如果没有底部选项卡，只是标题条+内容区，此时有种高级性能调优方法就是把标题的webview dock在顶部（webview的style里有dock配置），减少主webview的高度，这样能减少内存消耗。

关于nativeobj.view

HBuilder7.2以后的5+runtime新增了plus.nativeobj.view，这是一个原生的view控件，可以贴图写字，支持点击事件，还可以在图上继续贴图。开发者也可以用原生view来做title，性能也会高于双webview。但原生view的定制复杂度要高于HTML，这其中需要平衡考虑。

关于nav_transparent

其实滚动条通顶问题通过变通的ui交互方式在某种情况下也可以不是问题。
HBuilder7.2以后的Hello mui样例里补充了一种透明渐变nav bar导航栏，效果动感，且可用于解决单webview滚动条通顶而双webview耗费内存的问题。
它依然采用单webview，但默认是没有title的，是在背景banner图片上放一个透明返回按钮，此时可以最大化利用手机屏幕，给用户更多图形表达，当界面向下滚动时，title条又渐变出现，不影响整体界面美观和返回交互操作。此时滚动条通顶变成一个合理的效果，不需要为了解决不通顶后制作2个webview了。具体参考Hello mui下的nav bar下的渐变标题栏示例。