CN111381823A - Web端长列表渲染方法 - Google Patents

Web端长列表渲染方法 Download PDF

Info

Publication number
CN111381823A
CN111381823A CN202010166783.6A CN202010166783A CN111381823A CN 111381823 A CN111381823 A CN 111381823A CN 202010166783 A CN202010166783 A CN 202010166783A CN 111381823 A CN111381823 A CN 111381823A
Authority
CN
China
Prior art keywords
data
monitoring
page
node
padding
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.)
Granted
Application number
CN202010166783.6A
Other languages
English (en)
Other versions
CN111381823B (zh
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.)
Sichuan Changhong Electric Co Ltd
Original Assignee
Sichuan Changhong Electric 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 Sichuan Changhong Electric Co Ltd filed Critical Sichuan Changhong Electric Co Ltd
Priority to CN202010166783.6A priority Critical patent/CN111381823B/zh
Publication of CN111381823A publication Critical patent/CN111381823A/zh
Application granted granted Critical
Publication of CN111381823B publication Critical patent/CN111381823B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开了一种Web端长列表渲染方法，包括：页面布局：在根节点中设置固定长度列表；用户设定需要渲染的数据数组，视图的高度，和渲染数据所需的渲染函数，根据传入的数据数组的长度和渲染后的每条数据所占DOM节点的高度，计算出整个页面的高度；计算出所述固定长度列表中每页内容所需的数据的最少条数；在固定长度列表的前后分别添加首部监听节点和尾部监听节点，再使用Intersection Observer对象为首部监听节点和尾部监听节点添加监听事件，当首部监听元素监听事件被触发时开始进行下拉更新数据，相反的，当尾部监听元素监听事件被触发时开始进行上滑更新数据；本发明运用新的滚动监听方法和DOM操作算法去优化长列表加载卡顿的问题。

Description

Web端长列表渲染方法
技术领域
本发明涉及web技术领域，特别是一种Web端长列表渲染方法。
背景技术
在应用需要展示大量的数据时经常需要去渲染长列表，在不断的进行翻页与加载数据时，页面的内容会越来越多，页面在加载更多和更新时会逐渐出现卡顿现象，尤其是在web端网页，应用的性能比不上其他客户端，并且DOM的新建和更新也比较耗时，因此在页面上渲染出大量的DOM节点后，数据的加载和更新会变得十分卡顿，性能很差。而目前最常用的解决方案是数据懒加载和模拟虚拟列表加载，懒加载是每次加载一部分数据，这样开始时会很快速，页面十分流畅，但在不断的加载后页面越来越长，DOM节点也越来越多，这时页面就会卡顿，依然不适用于数据量大的应用，而且用户也无法通过滚动条了解已看的数据量和剩余的数据量，用户不知道还有多少数据需要查看。而对于模拟虚拟列表加载太过于依赖对滚动的监控，以往监控方式需要通过监听页面滚动的位置，再去计算首节点和尾节点的位置，然后判断是否需要更新页面数据，而同时DOM更新算法不够优化，依然需要新建DOM，而且更新当前页面数据时一旦出现卡顿，当前页面可能会出现闪烁、空白页面等情况，因此无论是滚动监控还是页面DOM的更新的算法都需要优化。
发明内容
为解决现有技术中存在的问题，本发明的目的是提供一种Web端长列表渲染方法，本发明运用新的滚动监听方法和DOM操作算法去优化长列表加载卡顿的问题。
为实现上述目的，本发明采用的技术方案是：一种Web端长列表渲染方法，包括以下步骤：
步骤1、页面布局：在根节点中设置固定长度列表，所述固定长度列表从上到下依次包括可视区域上方不可见内容beforeOffset，中间可视区域内容content，可视区域下方不可见内容afterOffse三页的内容；
步骤2、用户设定需要渲染的数据数组data，视图的高度viewHeight，和渲染数据所需的渲染函数，然后根据传入的数据数组data的长度data.length和渲染后的每条数据所占DOM节点的高度itemHeight，计算出整个页面的高度totalHeight，totalHeight＝data.length*itemHeight；
步骤3、计算出所述固定长度列表中每页内容所需的数据的最少条数pageLength，即用viewHeight/data.length的值使用进一法保留整数；
步骤4、在所述固定长度列表的前后分别添加首部监听节点和尾部监听节点，再使用Intersection Observer对象为首部监听节点和尾部监听节点添加监听事件，并在首尾添加空白不可见标记元素作为监听元素，首先在创建监听对象时传入callback回调函数与options配置选项，其中options配置选项主要包括root，rootMargin，root表示视窗节点，不传值表示浏览器窗口，rootMargin是对节点的延伸，再对上下margin设置固定高度，增加视图触发事件的区域范围，然后分别添加首尾监听函数到监听对象中，当首部监听元素监听事件被触发时开始进行下拉更新数据，相反的，当尾部监听元素监听事件被触发时开始进行上滑更新数据。
作为一种优选的实施方式，在步骤1中，所述固定长度列表中每页内容高度为最少数据渲染后的dom节点占满一页时的高度。
作为另一种优选的实施方式，在步骤2中，如果数组data的数据量不足三页，即data.length小于等于pageLength*3，则直接渲染出所有数据。
作为另一种优选的实施方式，在步骤4中，所述首部监听节点和尾部监听节点的高度均为0。
作为另一种优选的实施方式，在步骤1中进行页面布局是，还包括设定用于撑起上下根节点的padding-top与padding-bottom。
作为另一种优选的实施方式，在步骤4中，所述的下拉更新数据具体包括：当向下滚动首部空白标记元素即将进入可视范围触发监听事件时，将afterOffset中dom节点移出并更新为之前一页的数据，然后插入到首部标记元素与beforeOffset之间，成为新的beforeOffset内容，同时更改padding-top减少一页的高度，padding-bottom增加一页的高度，如果padding-top为0则停止首部元素的监听，如果padding-bottom大于0则启动尾部元素的监听；所述的上滑更新数据具体包括：当向上滚动尾部空白标记元素即将进入可视范围触发监听事件时，将beforeOffset中dom节点移除并更新为后一页的数据，如果剩余数据不足一页，则只渲染部分的数据，并将padding-bottom改为0，否则padding-bottom减少一页的高度，然后插入到尾部标记元素与afterOffset之间，成为新的afterOffset内容，然后设置padding-top增加一页的高度，如果padding-top大于0则启动首部元素的监听，如果padding-bottom等于0则停止尾部元素的监听。
作为另一种优选的实施方式，对数据data进行监听，具体包括：在对页面进行布局时，同时使用startIndex与endIndex标记固定长度列表对应的数组数据的渲染范围，在数据长度或内容变化时及时更新与重新初始化，根据之前标记的startIndex与endIndex，重新计算totalHeight，padding-top，padding-bottom，然后根据startIndex与endIndex中变化的数据项更新dom节点，因此整个页面也完成了更新。
下面对本发明作进一步的说明：
本发明利用Intersection Observer去监听一个固定长度列表的首尾空白不可见标记元素是否进入视窗。其中Intersection Observer接口(从属于IntersectionObserver API)提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。所以该API可以更好的监控某些元素是否进入特定视图范围，或者通过设置视图外边距判断元素是否即将进入视图之外多少范围内。相比以往的滚动监听或定时计算性能上提高了很多，而且使用更加方便，功能更加强大。其中固定长度列表包含可视区域上方不可见内容(beforeOffset)，中间可视区域内容(content)，可视区域下方不可见内容(afterOffse)三页的内容，每页内容高度为最少数据渲染后的dom节点占满一页时的高度。beforeOffset与afterOffset为了保证视图上下可持续滚动。同时使用startIndex与endIndex标记对应的数组数据的渲染范围。同时设定padding-top与padding-bottom撑起根节点，使父节点高度为所有数据渲染后的总高度，这样就会显示出滚动条，就能根据滚动条看出当前滚动的位置。
首先需要用户设定需要渲染的数据数组data，视图的高度viewHeight，和渲染数据所需的渲染函数也就是html模版。然后根据传入的数据数组data的长度和渲染后的每条数据所占DOM的高度itemHeight计算出整个页面的高度totalHeight。
再计算出每页所需的数据的最少条数pageLength，即用viewHeight/data.length的值使用进一法保留整数，保证用最少的数据渲染出的dom高度能占满父元素的视图。
如果data的数据量不足三页，即data.length小于等于pageLength*3，则直接渲染出所有数据。否则进行部分数据的操作。
然后渲染出三页的内容分别分别包含在beforeOffset、content、afterOffset三个节点中，然后将这三个dom节点保存到变量中以便后续对这些dom的操作。
然后在三个节点前后添加高度为0的监听节点，因为之后需要对展示数据的dom列表进行操作，改变顺序，因此没有固定的首尾节点，所以展示数据的dom节点不适合作为监听对象，也为了尽量少的去更改监听对象，所以使用高度为0的dom放在展示数据的dom上下两端，用于监听滚动位置的监听，而且不会对监听对象作出改变，无需不断的更改监听对象以适应页面的变化。此时有首部监听对象和尾部监听对象对应的两个监听事件，首部监听事件默认暂停，因为此时上面没有数据，也无法向上滚动，同时设置根节点的padding-top为0，尾部监听事件默认开启，需要设置padding-bottom为totalHeight-viewHeight*3，可以向下滚动。
然后使用Intersection Observer对象为首尾dom节点添加监听事件，首先在创建该监听对象时传入callback回调函数与options配置选项。其中options配置选项主要包括root，rootMargin，root表示视窗节点，不传值表示浏览器窗口。rootMargin与css中margin属性相同，是对节点对延伸，需要在对上下margin设置固定高度，增加视图触发事件的区域范围。然后分别添加首尾监听函数到监听对象中。当首部监听元素监听事件被触发时开始进行下拉更新数据。相反的，当尾部监听元素监听事件被触发时开始进行上滑更新数据。
以下是页面向上和向下时的数据更新操作：
1.当向下滚动首部空白标记元素即将进入可视范围触发监听事件时，将afterOffset中dom节点移出并更新为之前一页的数据，然后插入到首部标记元素与beforeOffset之间，成为新的beforeOffset内容，同时更改padding-top减少一页的高度，padding-bottom增加一页的高度，如果padding-top为0则停止首部元素的监听，如果padding-bottom大于0则启动尾部元素的监听。
2.当向上滚动尾部空白标记元素即将进入可视范围触发监听事件时，将beforeOffset中dom节点移除并更新为后一页的数据，如果剩余数据不足一页，则只渲染部分的数据，并将padding-bottom改为0，否则padding-bottom减少一页的高度，然后插入到尾部标记元素与afterOffset之间，成为新的afterOffset内容，然后设置padding-top增加一页的高度，如果padding-top大于0则启动首部元素的监听，如果padding-bottom等于0则停止尾部元素的监听。
以上为整个列表的监听与dom更新方案，但为了应对可变数据列表的实现，还需要对data数据进行监听，在数据长度或内容变化时及时更新与重新初始化，根据之前标记的startIndex与endIndex，重新计算totalHeight，padding-top，padding-bottom等值，然后根据startIndex与endIndex中变化的数据项更新dom节点，因此整个页面也完成了更新。
本发明的有益效果是：
本发明利用Intersection Observer方法去监听一个固定长度列表，通过计算去更新上下不可见区域的dom和上下padding大小，模拟页面数据的滚动加载与更新。由于利用监控API，减少了监控时的数据获取与计算，尽可能少的操作不可见区域的dom，因此消耗的资源更少，页面也会更流畅，不会出现闪烁现象。
附图说明
图1为本发明实施例中页面布局的结构图；
图2为本发明实施例中滚动监听循环图；
图3为本发明实施例中DOM更新流程图。
具体实施方式
下面结合附图对本发明的实施例进行详细说明。
实施例
本实施例可结合vue，react等框架使用，最佳方案为封装为一个组件使用。实现该组件创建一个根节点作为父节点包含其他所有内容，固定宽高由用户定义，高度也是可视区域的高度viewHeight，需要展示的数据保存在数组data中，渲染数据使用的渲染函数即html模版由用户定义。同时需要对dada进行监听，可以利用vue与react的数据监听功能，在data改变时重新初始化页面。其中data的长度需要足够长，至少渲染出三页的高度，否则不进行操作，全部一次性渲染。
该父节点包含五个子节点依次为首部监听节点，beforeOffset上方不可见区域内容，content可见区域内容，afterOffset下方不可见区域内容，尾部监听节点，同时设置padding-top，padding-bottom，同时使用startIndex与endIndex标记对应的数组数据的渲染范围，如图1所示。
其中中间三个区域的内容为高度大于一屏内容高度的数据，首先根据渲染函数渲染出的dom节点，获取dom节点高度itemHeight，然后计算出内容总高度totalHeight＝data.length*itemHeight，然后计算得出最少几条数据渲染出一页的内容，然后保存该数值为pageLength，即使用viewHeight/itemHeight，得出的结果用进一法取整。
如果pageLength*3大于data的长度，则直接渲染出所有的数据，不再进行监控与其他操作。
否则设置startIndex为0，endIndex为(startIndex+pageLength*3)，父节点初始padding-top为0，padding-bottom为(itemHeight*(data.length-3*pageLength))，父节点被padding撑起，会显示滚动条表示当前位置。.
然后，设置首部空白节点与尾部空白节点高度为0，并且使用IntersectionObserver对象监听他们的滚动，监听的root根节点为当前父元素，rootMargin左右为0，上下为viewHeight/3，滚动监听回调函数的流程如图2所示。当首部节点进入视图上方三分之一处时，触发下滑更新，当尾部节点进入视图下方三分之一处时触发上滑更新。初始时padding-top为0，暂停首部节点的监控，启用尾部节点的监控。
当滚动时触发dom更新流程如图3所示，具体实施如下：
定义下滑更新函数，当函数被触发时首先从父节点中移出afterOffset节点，然后更新数据为startIndex之前pageLength长度的数据，然后插入到首部监控节点与beforeOffset节点之间，然后设置padding-top减少pageLength*itemHeight的高度，padding-bottom增加pageLength*itemHeight的高度，最后分别更新startIndex＝startIndex-pageLength，endIndex＝endIndex-pageLength，beforeOffset、afterOffset、content分别指向之前的afterOffset、beforeOffset、content节点。如果padding-top为0则暂停首部节点的监控，如果padding-bottom>0则启用尾部节点的监控。
定义上滑更新函数，与下滑更新相反，当函数被触发时首先从父节点中移出beforeOffset节点，然后更新数据为endIndex之后pageLength长度的数据，如果剩余长度不足一页则有多少更新多少，并设置数据的更新根据更新数据的长度realLength来计算。然后插入到尾部监控节点与afterOffset节点之间，然后设置padding-top增加realLength*itemHeight的高度，padding-bottom减少realLength*itemHeight的高度，最后分别更新startIndex＝startIndex+pageLength，endIndex＝endIndex+realLength，beforeOffset、afterOffset、content分别指向之前的content、afterOffset、beforeOffset节点。如果padding-top>0则启用首部节点的监控，如果padding-bottom为0则暂停尾部节点的监控。
最后添加刷新函数，当data数据变化时重新初始化数据，如果长度变化，则根据新的长度重新计算totalHeight，padding-top，padding-bottom的值。然后依次判断索引startIndex与endIndex之间的数据是否改变，如果数据改变则依次更新对应的dom节点。
本实施例采用dom操作算法替换更新不可见区域的dom的方法，在只操作更少的dom不创建新dom节点的情况下更新页面，解决了长列表渲染时页面卡顿的问题；通过监控API只操作不可见区域的固定长度的dom，大量减少了数据加载和更新时的dom操作，因此页面加载更快，可见区域的dom不会被操作，因此页面不会出现闪烁白屏等问题，用户体验更良好。
以上所述实施例仅表达了本发明的具体实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。

Claims (7)

1.一种Web端长列表渲染方法，其特征在于，包括以下步骤：
步骤1、页面布局：在根节点中设置固定长度列表，所述固定长度列表从上到下依次包括可视区域上方不可见内容beforeOffset，中间可视区域内容content，可视区域下方不可见内容afterOffse三页的内容；
步骤2、用户设定需要渲染的数据数组data，视图的高度viewHeight，和渲染数据所需的渲染函数，然后根据传入的数据数组data的长度data.length和渲染后的每条数据所占DOM节点的高度itemHeight，计算出整个页面的高度totalHeight，totalHeight＝data.length*itemHeight；
步骤3、计算出所述固定长度列表中每页内容所需的数据的最少条数pageLength，即用viewHeight/data.length的值使用进一法保留整数；
步骤4、在所述固定长度列表的前后分别添加首部监听节点和尾部监听节点，再使用Intersection Observer对象为首部监听节点和尾部监听节点添加监听事件，并在首尾添加空白不可见标记元素作为监听元素，首先在创建监听对象时传入callback回调函数与options配置选项，其中options配置选项主要包括root，rootMargin，root表示视窗节点，不传值表示浏览器窗口，rootMargin是对节点的延伸，再对上下margin设置固定高度，增加视图触发事件的区域范围，然后分别添加首尾监听函数到监听对象中，当首部监听元素监听事件被触发时开始进行下拉更新数据，相反的，当尾部监听元素监听事件被触发时开始进行上滑更新数据。
2.根据权利要求1所述的Web端长列表渲染方法，其特征在于，在步骤1中，所述固定长度列表中每页内容高度为最少数据渲染后的dom节点占满一页时的高度。
3.根据权利要求1所述的Web端长列表渲染方法，其特征在于，在步骤2中，如果数组data的数据量不足三页，即data.length小于等于pageLength*3，则直接渲染出所有数据。
4.根据权利要求1所述的Web端长列表渲染方法，其特征在于，在步骤4中，所述首部监听节点和尾部监听节点的高度均为0。
5.根据权利要求1所述的Web端长列表渲染方法，其特征在于，在步骤1中进行页面布局是，还包括设定用于撑起上下根节点的padding-top与padding-bottom。
6.根据权利要求5所述的Web端长列表渲染方法，其特征在于，在步骤4中，所述的下拉更新数据具体包括：当向下滚动首部空白标记元素即将进入可视范围触发监听事件时，将afterOffset中dom节点移出并更新为之前一页的数据，然后插入到首部标记元素与beforeOffset之间，成为新的beforeOffset内容，同时更改padding-top减少一页的高度，padding-bottom增加一页的高度，如果padding-top为0则停止首部元素的监听，如果padding-bottom大于0则启动尾部元素的监听；所述的上滑更新数据具体包括：当向上滚动尾部空白标记元素即将进入可视范围触发监听事件时，将beforeOffset中dom节点移除并更新为后一页的数据，如果剩余数据不足一页，则只渲染部分的数据，并将padding-bottom改为0，否则padding-bottom减少一页的高度，然后插入到尾部标记元素与afterOffset之间，成为新的afterOffset内容，然后设置padding-top增加一页的高度，如果padding-top大于0则启动首部元素的监听，如果padding-bottom等于0则停止尾部元素的监听。
7.根据权利要求6所述的Web端长列表渲染方法，其特征在于，对数据data进行监听，具体包括：在对页面进行布局时，同时使用startIndex与endIndex标记固定长度列表对应的数组数据的渲染范围，在数据长度或内容变化时及时更新与重新初始化，根据之前标记的startIndex与endIndex，重新计算totalHeight，padding-top，padding-bottom，然后根据startIndex与endIndex中变化的数据项更新dom节点，因此整个页面也完成了更新。
CN202010166783.6A 2020-03-11 2020-03-11 Web端长列表渲染方法 Active CN111381823B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010166783.6A CN111381823B (zh) 2020-03-11 2020-03-11 Web端长列表渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010166783.6A CN111381823B (zh) 2020-03-11 2020-03-11 Web端长列表渲染方法

Publications (2)

Publication Number Publication Date
CN111381823A true CN111381823A (zh) 2020-07-07
CN111381823B CN111381823B (zh) 2022-02-18

Family

ID=71219931

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010166783.6A Active CN111381823B (zh) 2020-03-11 2020-03-11 Web端长列表渲染方法

Country Status (1)

Country Link
CN (1) CN111381823B (zh)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112068834A (zh) * 2020-09-03 2020-12-11 杭州天宽科技有限公司 基于js的数据渲染方法及装置
CN112612457A (zh) * 2020-12-28 2021-04-06 中科院计算技术研究所大数据研究院 一种javascript高性能渲染大量数据的方法
CN113343144A (zh) * 2021-05-31 2021-09-03 北京达佳互联信息技术有限公司 数据的显示方法、装置及设备
CN113360802A (zh) * 2021-04-25 2021-09-07 杭州玖欣物联科技有限公司 一种Web前端主流框架三维操作避免卡顿的方法
CN113434138A (zh) * 2021-06-23 2021-09-24 网易（杭州）网络有限公司 信息显示方法、装置和电子设备
CN113535294A (zh) * 2021-06-08 2021-10-22 摩尔元数（厦门）科技有限公司 一种h5列表的渲染加速方法、装置、设备和介质
CN113672320A (zh) * 2021-07-19 2021-11-19 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN114356327A (zh) * 2021-12-29 2022-04-15 上海万物新生环保科技集团有限公司 React可视区域渲染方法及设备
CN115098006A (zh) * 2022-06-28 2022-09-23 徐工汉云技术股份有限公司 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160035007A1 (en) * 2014-07-30 2016-02-04 Kobo Inc. Using a user wishlist to automate the acquisition and rendering of a content item
CN107182209A (zh) * 2016-02-23 2017-09-19 谷歌公司 检测数字内容可见性
CN110134308A (zh) * 2019-05-17 2019-08-16 深圳前海微众银行股份有限公司 数据展示方法、装置、设备及计算机可读存储介质
CN110244993A (zh) * 2018-12-25 2019-09-17 蔚来汽车有限公司 前端页面加载方法、装置、控制器及介质
CN110457043A (zh) * 2019-07-23 2019-11-15 上海易点时空网络有限公司 基于React的页面处理方法以及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160035007A1 (en) * 2014-07-30 2016-02-04 Kobo Inc. Using a user wishlist to automate the acquisition and rendering of a content item
CN107182209A (zh) * 2016-02-23 2017-09-19 谷歌公司 检测数字内容可见性
CN110244993A (zh) * 2018-12-25 2019-09-17 蔚来汽车有限公司 前端页面加载方法、装置、控制器及介质
CN110134308A (zh) * 2019-05-17 2019-08-16 深圳前海微众银行股份有限公司 数据展示方法、装置、设备及计算机可读存储介质
CN110457043A (zh) * 2019-07-23 2019-11-15 上海易点时空网络有限公司 基于React的页面处理方法以及装置

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
HEATHER WEAVER: "Master the Intersection Observer API - Single Page Navigation (Part 1)", 《HTTPS://WWW.HWEAVER.COM/INTERSECTION-OBSERVER-SINGLE-PAGE-NAVIGATION/》 *
MARKUS HADWIGER等: "SparseLeap: Efficient Empty Space Skipping for Large-Scale Volume Rendering", 《IEEE TRANSACTIONS ON VISUALIZATION AND COMPUTER GRAPHICS》 *
云中桥: "「前端进阶」高性能渲染十万条数据(虚拟列表)", 《HTTPS://JUEJIN.CN/POST/6844903982742110216》 *
云音乐前端技术团队: "一个简洁、有趣的无限下拉方案", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/94919543》 *
段跃润: "基于HTML5的移动电商系统前端的设计与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 *

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112068834A (zh) * 2020-09-03 2020-12-11 杭州天宽科技有限公司 基于js的数据渲染方法及装置
CN112612457A (zh) * 2020-12-28 2021-04-06 中科院计算技术研究所大数据研究院 一种javascript高性能渲染大量数据的方法
CN113360802A (zh) * 2021-04-25 2021-09-07 杭州玖欣物联科技有限公司 一种Web前端主流框架三维操作避免卡顿的方法
CN113360802B (zh) * 2021-04-25 2022-05-17 杭州玖欣物联科技有限公司 一种Web前端主流框架三维操作避免卡顿的方法
CN113343144A (zh) * 2021-05-31 2021-09-03 北京达佳互联信息技术有限公司 数据的显示方法、装置及设备
CN113535294A (zh) * 2021-06-08 2021-10-22 摩尔元数（厦门）科技有限公司 一种h5列表的渲染加速方法、装置、设备和介质
CN113434138A (zh) * 2021-06-23 2021-09-24 网易（杭州）网络有限公司 信息显示方法、装置和电子设备
CN113672320A (zh) * 2021-07-19 2021-11-19 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN113672320B (zh) * 2021-07-19 2023-11-17 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN114356327A (zh) * 2021-12-29 2022-04-15 上海万物新生环保科技集团有限公司 React可视区域渲染方法及设备
CN114356327B (zh) * 2021-12-29 2024-05-17 上海万物新生环保科技集团有限公司 React可视区域渲染方法及设备
CN115098006A (zh) * 2022-06-28 2022-09-23 徐工汉云技术股份有限公司 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置

Also Published As

Publication number Publication date
CN111381823B (zh) 2022-02-18

Similar Documents

Publication Publication Date Title
CN111381823B (zh) Web端长列表渲染方法
CN104808984B (zh) 显示界面刷新方法及装置
US6825859B1 (en) System and method for processing content changes of on-screen items
CN107807764B (zh) 一种页面展示方法及客户端
US10339209B2 (en) Webpage display method and device
EP2973416A2 (en) Staged animation of charts for data updates
CN108197153B (zh) 基于滚动条定位的快速渲染表格数据的方法
CN107544952B (zh) 报表生成方法、装置、存储介质和计算机设备
CN111651700B (zh) 消息展示方法、装置、电子设备及存储介质
CN101131401A (zh) 一种数字示波器及其显示方法
CN114510190A (zh) 一种前端页面渲染方法、装置、设备及存储介质
CN105657301A (zh) 显示图像的方法及装置
CN106648642A (zh) Ios客户端中幻灯视图的无限滚动翻页方法及系统
CN105843493B (zh) 一种首页幻灯展示及操作方法及装置
CN103914204A (zh) 一种用于视图显示和切换的方法和装置
CN109299449A (zh) 表格处理方法、装置、电子设备及可读存储介质
CN113434138B (zh) 信息显示方法、装置和电子设备
CN106874387A (zh) 一种自适应html滚屏展示实时信息的方法
JPH08500916A (ja) 長残光性表示回路およびその方法
CN106708495B (zh) 一种基于移动终端的页面显示方法及装置
CN105719604B (zh) 改善显示面板的面板自动更新画面闪烁的方法及其控制电路
US20110316877A1 (en) Display area control apparatus, display area control method, and integrated circuit
CN111222302A (zh) 网页渲染的控制方法、控制装置以及计算机可读介质
CN107479807B (zh) 一种iop平台表格列的显示隐藏方法
JP4755813B2 (ja) クライアント端末

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant