一种构建支持大数据量高性能浏览器列表组件的方法.pdf

一种构建支持大数据量高性能浏览器列表组件的方法
    【技术领域】

    本方法涉及使用浏览器技术，具体地说是一种包括html标记，css，javascript等展现大数据量的高性能页面列表组件方法。

    背景技术

    随着网络的普及，越来越多的应用采用浏览器操作和展示数据，同时也会遇到展示大量列表数据的需求，比如需要在一个页面上展现一万条数据，这时浏览器渲染生成DOM结构的时候就会持续消耗很长的CPU时间，内存也会随之增大很多，甚至有些时候会造成浏览器的假死，给用户带来很差的用户体验。

    普通列表组件是将所有数据一次性动态生成DOM结构的，占用大量CPU时间和内存，但是用户所能看到的却只有固定高度内的内容，超过这个高度就需要拉动滚动条，才能看到下面的内容，因此用户没有看到的内容就渲染出来是一种浪费，而应该等到用户拉动滚动条时，才渲染展现出来。

    【发明内容】

    本发明的目的是提供一种可支持大数据量的高性能浏览器列表组件。

    本发明的目的是按以下方式实现的，步骤如下：

    首先根据每行的宽度和总条数计算出总高度，赋值给内DIV的高度和外DIV高度，将overflow设成hidden，这样就因为内DIV的高度而出来滚动条，但是渲染地条数只有外DIV的高度除以每行的高度，当滚动条滚动的时候，根据滚动的高度计算出偏移的条数，再经渲染后就是应该看到的浏览内容。

    根据行高和视线范围内的高度，暂时渲染所见DOM，再根据滚动条的滚动范围，渲染其余进入实现内的DOM。

    本发明的优异效果是，此方法可以有效提高用户体验，减少CPU占用时间，减少内存占有量，使大数据量在浏览器页面瞬间展示，无须等待，面对大数据量的展现需求时，可以快速展现，没有延迟或假死现象。

    【具体实施方式】

    首先根据每行的宽度和总条数计算出总高度，赋值给内DIV的高度，外DIV固定高度，overflow设成hidden，这样就因为内DIV的高度而出来滚动条，但是渲染的条数只有外DIV的高度除以每行的高度，当滚动条滚动的时候，根据滚动的高度计算出偏移的条数，再渲染应该看到的内容。