display:none 和 remove dom 哪个更影响性能

Question

比如：

在向上滚动屏幕的时候，将可视界面下的item节点remove掉或者display:none, 用哪种方式更合适？

Answer 1

两种方法其实都不好
无论是remove 还是display:none 都会导致界面高度变化，尤其是想上滚动的时候，界面缩短的赶脚实在欠揍。

在主要影响性能方面，
无论是PC端还是手机端，100个dom跟200个dom性能没有多大差别的。
但是在手机端，100个图片跟200个图片绝对有性能差别。

避免太多的图片即可或者
下面比较复杂的方案类似于http://ionicframework.com/docs/api/directive/collectionRepeat/

1. 如果界面可以放10个items
2. 用户向上滑动屏幕的时候，顶部第一个item 删除，底部插入新item
3. 用户向上滑动屏幕的时候，底部第一个item 删除，顶部部插入原来的item
4. 不要用原生的scrollbar了，自己编写一个scrollbar 给用户一个滑动条

Answer 2

这个主要看你还会不会在加回来啊，不加回来可以remove掉，还要再显示 肯定是display的方式更好

Answer 3

题主是要做无限长度的列表？正好昨天也在看。
手机淘宝的搜索列表页就是个无限列表(其实也不是无限的。最多100页)，手机淘宝的做法ul里面有若干个div，一个div中有若干个li，一个li就是一个item，当超出一定的可视范围时，移除掉div中的内容，同时给div设置固定高度。
Airbnb在2012年开源了一个js的无限列表库Infinity.js。和手机淘宝不同的就是不支持滚动到指定位置。

Answer 4

这个涉及到重排和重绘的问题，这都是比较耗费性能的。当然可以根据需求来(取舍)优化一些。列举一些：

1.尽量在最末尾的位置改变元素。
2.dom不要嵌套太深
3.不要使用太多table