请问：移动端页面过长引起的滑动卡顿现象，都有何种解决方案或思路？

Question

如题：移动端页面过长，DOM过多，导致滑动页面时会出现卡顿现象，混动不流畅，体验比较差，请问各位有无解决方案或者思路？

Answer 1

1. 建议chrome profile分析一下，依据经验来看，如果是单纯的长页面应该不至于在滚动的时候出现卡顿，看一下是否页面内元素有未处理的touchmove事件冒泡给了documentbody，导致页面滑动时频繁触发事件；

2. 还有一种可能是移动端页面上大量应用一些伪元素来模拟原生效果，比如0.5px的线条，如果布局不合理很有可能在页面滚动时造成大面积paint，gpu ram瞬间飙涨，fps极速下降。

3. 超长页面节约内存的办法，在滚动的时候，将不在当前屏幕内的节点直接回收掉，可以做上中下三屏缓存（具体可以参考一下淘宝m站点的做法，首次只加载10个items，当离开屏幕区域的items超过30个时（印象中大概是如此的），将离开的这些items直接戳上一个回收标记，只要戳上这个标记的item就可以被安全地回收掉。）

Answer 2

首先可以精简dom的层级,一个img能定位的就别外面再套一层div,一个a能做到的就别在里面再写p,这样做了一般在ios就不会很卡了
如果还是卡的话可以试试滚动到下面的时候js去hide掉顶层的数据,滚动回去的时候再show出来

Answer 3

我觉得页面过长不是主因，题主八成用了视差滚动之类的东西，导致页面滚动的时候总是回流。试着把特效都关掉再看看卡不卡

Answer 4

常见思路：html5的性能跟不上的时候就用原生控件。

Answer 5

<img src="http://p3.pstatp.com/large/19...