CN101777069A - 一种构建支持大数据量高性能浏览器列表组件的方法 - Google Patents

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

Info

Publication number
CN101777069A
CN101777069A CN201010011311A CN201010011311A CN101777069A CN 101777069 A CN101777069 A CN 101777069A CN 201010011311 A CN201010011311 A CN 201010011311A CN 201010011311 A CN201010011311 A CN 201010011311A CN 101777069 A CN101777069 A CN 101777069A
Authority
CN
China
Prior art keywords
height
div
scroll bar
row
data volume
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201010011311A
Other languages
English (en)
Inventor
王登武
高传集
曹祥茂
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Software Co Ltd
Original Assignee
Langchao Qilu Software Industry Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Langchao Qilu Software Industry Co Ltd filed Critical Langchao Qilu Software Industry Co Ltd
Priority to CN201010011311A priority Critical patent/CN101777069A/zh
Publication of CN101777069A publication Critical patent/CN101777069A/zh
Pending legal-status Critical Current

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种构建支持大数据量高性能浏览器列表组件的方法，步骤如下：首先根据每行的宽度和总条数计算出总高度，赋值给内DIV的高度和外DIV高度，将overflow设成hidden，这样就因为内DIV的高度而出来滚动条，但是渲染的条数只有外DIV的高度除以每行的高度，当滚动条滚动的时候，根据滚动的高度计算出偏移的条数，再经渲染后就是应该看到的浏览内容。此组件可以渲染大数据量数据，有效提高用户体验，减少浏览器占用CPU时间，减少内存使用量，只展现视线内的数据，根据滚动条的滚动再渲染其余进入视线内的数据。

Description

一种构建支持大数据量高性能浏览器列表组件的方法
技术领域
本方法涉及使用浏览器技术，具体地说是一种包括html标记，css，javascript等展现大数据量的高性能页面列表组件方法。
背景技术
随着网络的普及，越来越多的应用采用浏览器操作和展示数据，同时也会遇到展示大量列表数据的需求，比如需要在一个页面上展现一万条数据，这时浏览器渲染生成DOM结构的时候就会持续消耗很长的CPU时间，内存也会随之增大很多，甚至有些时候会造成浏览器的假死，给用户带来很差的用户体验。
普通列表组件是将所有数据一次性动态生成DOM结构的，占用大量CPU时间和内存，但是用户所能看到的却只有固定高度内的内容，超过这个高度就需要拉动滚动条，才能看到下面的内容，因此用户没有看到的内容就渲染出来是一种浪费，而应该等到用户拉动滚动条时，才渲染展现出来。
发明内容
本发明的目的是提供一种可支持大数据量的高性能浏览器列表组件。
本发明的目的是按以下方式实现的，步骤如下：
首先根据每行的宽度和总条数计算出总高度，赋值给内DIV的高度和外DIV高度，将overflow设成hidden，这样就因为内DIV的高度而出来滚动条，但是渲染的条数只有外DIV的高度除以每行的高度，当滚动条滚动的时候，根据滚动的高度计算出偏移的条数，再经渲染后就是应该看到的浏览内容。
根据行高和视线范围内的高度，暂时渲染所见DOM，再根据滚动条的滚动范围，渲染其余进入实现内的DOM。
本发明的优异效果是，此方法可以有效提高用户体验，减少CPU占用时间，减少内存占有量，使大数据量在浏览器页面瞬间展示，无须等待，面对大数据量的展现需求时，可以快速展现，没有延迟或假死现象。
具体实施方式
首先根据每行的宽度和总条数计算出总高度，赋值给内DIV的高度，外DIV固定高度，overflow设成hidden，这样就因为内DIV的高度而出来滚动条，但是渲染的条数只有外DIV的高度除以每行的高度，当滚动条滚动的时候，根据滚动的高度计算出偏移的条数，再渲染应该看到的内容。

Claims (2)

1.一种构建支持大数据量高性能浏览器列表组件的方法，其特征在于，步骤如下：首先根据每行的宽度和总条数计算出总高度，赋值给内DIV的高度和外DIV高度，将overflow设成hidden，这样就因为内DIV的高度而出来滚动条，但是渲染的条数只有外DIV的高度除以每行的高度，当滚动条滚动的时候，根据滚动的高度计算出偏移的条数，再经渲染后就是应该看到的浏览内容。
2.根据权利要求1所述的方法，其特征在于，根据行高和视线范围内的高度，暂时渲染所见DOM，再根据滚动条的滚动范围，渲染其余进入实现内的DOM。
CN201010011311A 2010-01-04 2010-01-04 一种构建支持大数据量高性能浏览器列表组件的方法 Pending CN101777069A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201010011311A CN101777069A (zh) 2010-01-04 2010-01-04 一种构建支持大数据量高性能浏览器列表组件的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201010011311A CN101777069A (zh) 2010-01-04 2010-01-04 一种构建支持大数据量高性能浏览器列表组件的方法

Publications (1)

Publication Number Publication Date
CN101777069A true CN101777069A (zh) 2010-07-14

Family

ID=42513530

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201010011311A Pending CN101777069A (zh) 2010-01-04 2010-01-04 一种构建支持大数据量高性能浏览器列表组件的方法

Country Status (1)

Country Link
CN (1) CN101777069A (zh)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101770519A (zh) * 2010-03-03 2010-07-07 深圳市戴维尼科技有限公司 一种浏览器数据加载方法
CN102073502A (zh) * 2011-01-11 2011-05-25 百度在线网络技术（北京）有限公司 一种利用web原生布局进行页面渲染的方法及装置
CN103399866A (zh) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 一种网络页面的渲染方法、装置及设备
CN105160020A (zh) * 2015-09-29 2015-12-16 北京京东尚科信息技术有限公司 网页渲染的方法
CN106294523A (zh) * 2015-06-24 2017-01-04 华平智慧信息技术（深圳）有限公司 一种基于有限列表项显示大数据项的list控件及方法
CN107908793A (zh) * 2017-12-13 2018-04-13 上海携程商务有限公司 网页弹窗的方法及系统
CN108959206A (zh) * 2018-07-02 2018-12-07 浪潮软件股份有限公司 一种优化Vue前端表格组件渲染性能的方法及系统
CN109992702A (zh) * 2019-03-20 2019-07-09 北京奇安信科技有限公司 数据可视化方法、装置和电子设备
CN110609729A (zh) * 2019-09-26 2019-12-24 浪潮软件股份有限公司 一种基于cmspweb的页面监听滚动渲染方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070150829A1 (en) * 2005-12-22 2007-06-28 Xerox Corporation System and method for dynamic zoom to view documents on small displays
US20070282693A1 (en) * 2006-05-23 2007-12-06 Stb Enterprises, Inc. Method for dynamically building documents based on observed internet activity
CN101317176A (zh) * 2005-11-29 2008-12-03 泰普有限公司 利用后台处理在移动设备浏览器上显示搜索结果
CN101432731A (zh) * 2006-03-06 2009-05-13 泰普有限公司 打包的移动搜索结果

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101317176A (zh) * 2005-11-29 2008-12-03 泰普有限公司 利用后台处理在移动设备浏览器上显示搜索结果
US20070150829A1 (en) * 2005-12-22 2007-06-28 Xerox Corporation System and method for dynamic zoom to view documents on small displays
CN101432731A (zh) * 2006-03-06 2009-05-13 泰普有限公司 打包的移动搜索结果
US20070282693A1 (en) * 2006-05-23 2007-12-06 Stb Enterprises, Inc. Method for dynamically building documents based on observed internet activity

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101770519A (zh) * 2010-03-03 2010-07-07 深圳市戴维尼科技有限公司 一种浏览器数据加载方法
CN102073502A (zh) * 2011-01-11 2011-05-25 百度在线网络技术（北京）有限公司 一种利用web原生布局进行页面渲染的方法及装置
CN102073502B (zh) * 2011-01-11 2013-02-20 百度在线网络技术（北京）有限公司 一种利用web原生布局进行页面渲染的方法及装置
CN103399866A (zh) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 一种网络页面的渲染方法、装置及设备
CN106294523A (zh) * 2015-06-24 2017-01-04 华平智慧信息技术（深圳）有限公司 一种基于有限列表项显示大数据项的list控件及方法
CN105160020A (zh) * 2015-09-29 2015-12-16 北京京东尚科信息技术有限公司 网页渲染的方法
CN105160020B (zh) * 2015-09-29 2019-01-22 北京京东尚科信息技术有限公司 网页渲染的方法
CN107908793A (zh) * 2017-12-13 2018-04-13 上海携程商务有限公司 网页弹窗的方法及系统
CN108959206A (zh) * 2018-07-02 2018-12-07 浪潮软件股份有限公司 一种优化Vue前端表格组件渲染性能的方法及系统
CN109992702A (zh) * 2019-03-20 2019-07-09 北京奇安信科技有限公司 数据可视化方法、装置和电子设备
CN109992702B (zh) * 2019-03-20 2021-05-18 奇安信科技集团股份有限公司 数据可视化方法、装置和电子设备
CN110609729A (zh) * 2019-09-26 2019-12-24 浪潮软件股份有限公司 一种基于cmspweb的页面监听滚动渲染方法

Similar Documents

Publication Publication Date Title
CN101777069A (zh) 一种构建支持大数据量高性能浏览器列表组件的方法
CN103970894B (zh) 自适应调整的界面流式布局显示的方法和系统
WO2010148270A3 (en) Persistent media playback
WO2013170198A3 (en) System and method for determining related digital identities
KR20140012664A (ko) 웹페이지 재배치 방법
WO2008118857A3 (en) Virtual advertisement store
WO2009036339A3 (en) Placement attribute targeting
WO2012145558A3 (en) Methods and systems for distributing content over a network
WO2008057301A3 (en) Slot machine game with user selectable themes
JP2014501013A5 (zh)
WO2010117748A3 (en) Apparatus and methods for rendering a page
WO2009079243A3 (en) Advanced advertisements
TW200802777A (en) X-shaped semiconductor capacitor structure
CN105160020A (zh) 网页渲染的方法
WO2011107050A3 (zh) 一种触摸屏上网页的调整方法和显示终端
MX363929B (es) Preexpansión de un objeto en una aplicación a la medida.
WO2014091257A3 (en) Web page variation
JP2012133663A5 (zh)
CN106557575A (zh) 一种分行显示多列数据的表格展示方法及其装置
CN104091609A (zh) 音乐播放器的歌词预览方法和装置
CN102622386A (zh) 一种播放网页音乐的方法和系统
CN104740873A (zh) 游戏中的图像渲染方法
WO2013186203A3 (en) Taste modifiers
WO2010109506A3 (en) Self-bearing furniture module and method of manufacture
CN208126309U (zh) 一种计算机显卡固定支架

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C02 Deemed withdrawal of patent application after publication (patent law 2001)
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20100714