也谈部分渲染

前言

我们经常会遇到这样的场景，要渲染成千上万个列表。如果你真的去这么做的话，你会发现浏览器滚动起来会非常吃力，所以，我们需要在这方面去做优化，来提升用户体验。大家不妨想一下，我们在列表极少的情况下滚动，性能非常好，那么我们的方向就是让列表变少。当然，市面上有许多做性能优化的案列，本文章旨在如何实现一个简单的性能优化方法，不做深入探讨，同时也欢迎大家能提出一些宝贵的意见。

起步

列表变少 => 可视区渲染，因为用户只能看到可见范围内，那么可见范围外的，用户根本看不见，那么我们可以在这方面下手。当然，做这一方面首先要确定的是每一行都是固定相同高度，或者明确知道每一行高度，这篇文章只会讲解每行均为固定相同高度。

开始

• 第一步，我们需要获取屏幕高度和列表高度，然后根据屏幕高度与列表高度相除，并向上取整，这个时候，我们就可以知道当前屏幕最大可以显示 maxRows 行数据，然后，我们从数组中取出前 maxRows 行数据渲染出来。

• 第二步，监听用户滚动，每当用户滚动的时候，我们要获取 scrollTop，然后用 scrollTop 与 maxRows 向下取整，获取到从 startShowRows 行开始渲染的行

• 第三步，根据 maxRows 与 startShowRows，我们可以获得每一次用户看见的列表是多少行到多少行

问题

根据前面所述步骤，总感觉有些问题，什么问题呢？大家不妨想想，首屏我们只渲染了可见区域的列表，那滚动条是不是就没了，你怎么加滚动事件呢，尴尬。但是办法总是有的，我们可以模拟一个滚动条啊。

关键代码如下:

<style>
.container{
    width: 200px;
    height: 200px;
    overflow: auto;
}
.list{
    width: 100%;
    height: 10px;
    margin-top: 200px;
    margin-bottom: 200px;
}
</style>

<div class="container">
    <div class="list"></div>
</div>

结尾

通过上面的剖析，一个简单的部分渲染的应用就实现了。