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


比如:

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

性能优化 前端性能 渲染

ouzero 10 years, 10 months ago

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

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

Saber.L answered 10 years, 10 months ago

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

zhpzhp answered 10 years, 10 months ago

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

恢复正常了吗 answered 10 years, 10 months ago

两种方法其实都不好
无论是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 给用户一个滑动条
舍命陪基友 answered 10 years, 10 months ago

Your Answer