我在改一个git上的开源项目 filebrowser，后端用的go, 前端用的vue。filebrowser是个网页版文件管理器，运行速度非常快，非常好用，支持多平台，无需安装，尤其适合低端服务器使用。

顺晟科技：

大家还有啥好方法？能达到v-if那样完全不占内存就好了，可v-if 不符合条件。

现在有个问题。从目录页(listing)进入到preview页，开始浏览图片，然后返回目录页时每次都是回到目录页的头部。我想让它回到进入preview前的位置。一直没实现。想过的方法：

基本搞定了。最简单的办法还是把listing目录页一直显示，跳转到preview(文件浏览页)时也保持着listing页在底层。这样返回到listing时回到原来的位置最无痕，纹丝不动，非常非常迅速，比用v-if重新渲染快了太多了。要解决的问题是：listing目录页如果太长了，几千个图片(带缩略图)的列表，任何浏览器碰到了都会卡顿。filebrowser用了很多技术，显示速度已经极其流畅了。不过要把它保持在底层，会造成在上层的preview里切换和拖拽图片卡顿(放大缩小好像没影响)。因为和以前不一样的是，以前跳转到preview页时，listing页会销毁，完全不占内存了, preview页就非常流畅。现在跳转preview页后，listing页转到底层，并不销毁，还占着内存，所以上层preview也卡顿。目前找到的办法是：给listing页到底层时设置visibility属性为hiden。这样会极大的缩小内存占用。从网上查了查，用v-if会完全销毁，重新加载也回不去原来位置了(用keep alive重新加载也慢，会有明显的滚动到原来位置的过程)。用v-show（就是display:none）有一些效果，比不设强。用visibility:hidden好很多，非常不占内存。还有一种visibility:collapse更牛，目录页完全塌掉，占内存更小。测了一下貌似更流畅些？从preview页回到listing页时非常迅速，纹丝不动，好！！！有没有让底层listing更加不占内存的方法？据说把列表里的缩略图src形式改成 background形式会更不占内存？我测测。。还有说把列表页不在屏幕里的都放到缓存碎片里啥的？我愿意把它都放进去，那就完全不占内存了，反正在后台也不看它。不过还没搞明白。淘宝的app也有同样的问题，你浏览商品列表页，都是格装的图片，不停下拉不停浏览，碰到个感兴趣的，点进去，弹出商店的详情。按返回键，要回到你刚才浏览的位置啊。如果在vue里用v-if 和keep alive配合，那会从页首滚动起来，滚动到你刚才浏览的位置，那用户就疯掉了。它的优化办法是吧图片都当成背景，据说很省地方，然后干了些其他的优化。。。。不过淘宝app真不咋地，总卡死，把它放后台都拖慢手机速度。还有说把listing z-index设为1的。preview的z-index值越高，分配的内存越多？不知真假？

又把列表做成虚拟列表了，dom变得超小，速度超快。如果想返回原位置，必须得先把列表做成虚拟列表，不然进出都卡。

大家有兴趣，可以一起修改filebrowser啊。它前端的好多功能还不完善。比如手机滑动切换图片等等。可以一起练练手。但千万别给它改慢了。

搞定了。filebrowser自带一个setloading，加载后会全网页各组件都默认置顶。它的列表页还有懒加载。这两个都要通过监视路由：往返列表页和详情页时关掉和开启，不然保持不了原来位置。然后让列表页始终显示，不根据路由路径的类型而改变。如果打开了详情页，就让列表页在底层显示(正常做法都是这样)。由于列表页有可能非常长，保持在底层的话会造成在详情页里切换图片时卡顿(一点点)。所以切换时把列表页的item组件v-if掉，其他元素visibility: hidden，这样就不占太多内存了。不能把整个列表页v-if掉，不然就记不住原来的位置了。然后由于在详情页没用setloading加载，切换时会不跟手，原图片不消失，直到下一张图片出来，没有入场动画了，看起来有点慢。所以把图片元素写成，用图潘的src来使图片每次切换时都自动销毁旧图片，重新加载新图片，这样就有入场动画了。

还有什么更好的解决方案吗？又不影响性能，速度又快的？