html js 大量数据优化

当页面渲染太多标签时，会出现卡顿的，典型就是相似table数据太多时，很是卡顿。若是选择分页，不必讨论，这儿只讨论采用滚动的状况。解决思路很简单，就是页面不展现出来的元素，从页面上删除掉，最难点在于滚动条的处理，这儿分享一些细节思路，以上下滚动为例。

上下滚动表格

1. 每一行固定高度，一次性获取全部数据。
2. 每一行不固定高度，一次性获取全部数据。
3. 每一行不固定高度，分批获取数据。

首先，布局以下：

当只显示可视区的内容时，overflow的标签须要删除掉，可是删除了以后，滚动条会变化，甚至消失，所以可添加padding-top和padding-bottom，以此模拟内容高度。

第一类，全部数据都能根据计算得到，须要一个scrollTop对应的显示数据的对照表，当滚动条位置变化时，去对照表种查看须要显示的数据，以此来渲染。固然不是每一个scrollTop都去生成对照表，只须要某个范围生成就好了，好比：[{2000：显示数据}, {5000: 显示数据}]（表示分别表示 0-2000，2000-5000显示的数据） 去对比第一个大于scrollTop的数据，获取其值，就是须要显示的数据。

* 这儿须要注意的是，显示数据必须有重复，且重复能占满屏幕以上，避免出现空白

第二类，就很差计算了，好比某一格里面内容太多，会令整行高度增长。可采用隐藏标签（opacity:0），循环渲染每一行，拿到那一行的高度。此种方式简单，也容易实现，不过计算渲染数据时，保证屏幕不出现空白的计算会复杂一点。隐藏标签渲染时，使用分批渲染，好比每次渲染10行，使用 requestAnimationFrame，setTimeout或者promise处理一下，不至于卡死。

第三类，只知道当前数据是多少，没法计算总高度。能够采起与第二种相似的方式，使用隐藏标签计算出每一行的高度，最终计算出获得数据的总高度。当滚动条滚到某个值时，触发后续数据获取。同样的方式，从新计算出总高度。

全部方法都有个前提，就是每一行数据渲染是同步的，有些状况是先渲染出框，等获取数据后填充框。这种相似table的布局，会很是麻烦，须要设置一个回调函数，等全部数据渲染完成后再获取高度。

其余优化，若是是vue，可使用Object.freeze() 冻结只须要显示的数据。