将超出屏幕一定部分的列表内的组件进行不渲染的处理（也就是用wx:if卸载掉组件），当到达渲染临界点时再开始渲染；保证每次少量的数据展示。 经过一系列的实践，上面的方案有些问题，其中最麻烦的就是，需要对外传递一个当前index，然后控制前后数据展示；这里对于每个用到skeleto…

思路：计算出每一项的图片的高度+固定内容高度得出项的总高，瀑布流的两列为两个list，哪个list的高度更低，就把当前项push进去，统计两个list的高度。 获取到数据后将其单独存放在一个hiddenImgs数组中使其添加到dom而不显示，待图片加载完后会自动触发onImag…

waterfall是一款响应式无限动态加载图片瀑布流特效jQuery插件。 waterfall瀑布流特效使用ajax调用来动态加载图片，达到无限加载的效果。 使用这个瀑布流插件需要引入jQuery.min.js和jquery.waterfall.js文件。 该瀑布流特效的HTM…

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue …

昨天上午接了一个电话面试，聊着聊着接说到了性能优化，然后面试官问到了长列表。其实之前做过的都只是简单的分页处理，但面试官问的肯定不是这个咯，他关心的是虚拟列表，大概以前粗略看过这个效果的实现源码，虽然我自己没实现过但有一些自己的想法，于是blablabla......，可能碍于…