CN112287258A - 页面渲染方法、装置、设备和存储介质 - Google Patents
页面渲染方法、装置、设备和存储介质 Download PDFInfo
- Publication number
- CN112287258A CN112287258A CN202011027738.9A CN202011027738A CN112287258A CN 112287258 A CN112287258 A CN 112287258A CN 202011027738 A CN202011027738 A CN 202011027738A CN 112287258 A CN112287258 A CN 112287258A
- Authority
- CN
- China
- Prior art keywords
- page
- rendered
- target page
- display area
- content display
- 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
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 64
- 238000000034 method Methods 0.000 title claims abstract description 41
- 230000001960 triggered effect Effects 0.000 claims description 17
- 230000004044 response Effects 0.000 claims description 10
- 238000005096 rolling process Methods 0.000 claims description 10
- 230000000694 effects Effects 0.000 abstract description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例提供一种页面渲染方法、装置、设备和存储介质,该方法包括:终端设备先确定目标页面中滚动条的滚动位置,再根据此滚动位置确定待渲染元素。由于页面中内容显示区域的尺寸有限,因此,此待渲染元素是目标页面中的部分元素。并且待渲染元素的尺寸与目标页面中内容显示区域的尺寸匹配。最终,对目标页面中的部分元素即待渲染元素进行渲染,以使其显示在内容显示区域上。上述方法中,一方面,终端设备渲染的只是目标页面中的部分元素,减小终端设备的渲染压力,保证页面正常显示。另一方面,由于待渲染元素的尺寸与页面的内容显示区域的尺寸是匹配的,因此,即使渲染的是数量是较少的待渲染元素,也不会对用户浏览页面产生影响。
Description
技术领域
本发明涉及计算机领域,尤其涉及一种页面渲染方法、装置、设备和存储介质。
背景技术
浏览器是用户使用互联网时经常使用到的一个应用程序。用户使用浏览器打开页面的过程通常是:响应于用户触发的打开操作,浏览器从服务器获取页面对应的元素,渲染并展示获取到的元素。
而在实际应用中,当页面中的元素过多时,往往会出现页面显示缓慢,甚至是页面显示失败的情况。因此,如何保证页面的正常显示就成为一个亟待解决的问题。
发明内容
有鉴于此,本发明实施例提供一种页面渲染方法、装置、设备和存储介质,用以保证页面的正常显示。
第一方面,本发明实施例提供一种页面渲染方法,包括:
确定目标页面中滚动条的滚动位置;
根据所述滚动位置确定待渲染元素,所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配;
渲染所述待渲染元素至所述内容显示区域上。
第二方面,本发明实施例提供一种页面渲染装置,包括:
位置确定模块,用于确定目标页面中滚动条的滚动位置;
元素确定模块,用于根据所述滚动位置确定待渲染元素,所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配;
渲染模块,用于渲染所述待渲染元素至所述内容显示区域上。
第三方面,本发明实施例提供一种电子设备,包括处理器和存储器,所述存储器用于存储一条或多条计算机指令,其中,所述一条或多条计算机指令被所述处理器执行时实现上述第一方面中的页面渲染方法。该电子设备还可以包括通信接口,用于与其他设备或通信网络通信。
第四方面,本发明实施例提供了一种非暂时性机器可读存储介质,所述非暂时性机器可读存储介质上存储有可执行代码,当所述可执行代码被电子设备的处理器执行时,使所述处理器至少可以实现如第一方面所述的页面渲染方法。
本发明实施例提供的页面渲染方法,终端设备先确定目标页面中滚动条的滚动位置,此滚动位置反映的是用户对目标页面的阅读进度,再根据此滚动位置确定待渲染元素。由于页面中内容显示区域的尺寸有限,因此,此待渲染元素是显示于页面中内容显示区域中的、目标页面中的部分元素,而不是全部元素。并且待渲染元素的尺寸与目标页面中内容显示区域的尺寸匹配。最终,对目标页面中的部分元素即待渲染元素进行渲染,以使其显示在内容显示区域上。
上述方法中,一方面,终端设备渲染的只是目标页面中的部分元素,从而大大减小终端设备的渲染压力,保证页面正常显示,避免页面崩溃。另一方面,由于待渲染元素的尺寸与页面的内容显示区域的尺寸是匹配的,因此,即使渲染的是数量是较少的待渲染元素,也不会对用户浏览页面产生影响。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种标页面渲染方法的流程图;
图2为本发明实施例提供的页面与内容显示区域之间位置关系的示意图;
图3为图1所示实施例中步骤103的一种可选实施方式的流程图;
图4为使用本发明实施例提供的页面渲染方法进行页面渲染的示意图;
图5为本发明实施例提供的页面渲染装置的结构示意图;
图6为与图5所示实施例提供的页面渲染装置对应的电子设备的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义,“多种”一般包含至少两种,但是不排除包含至少一种的情况。
应当理解,本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
取决于语境,如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于识别”。类似地,取决于语境,短语“如果确定”或“如果识别(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当识别(陈述的条件或事件)时”或“响应于识别(陈述的条件或事件)”。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的商品或者系统不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。
下面以网站内某页面的显示场景为例,对本发明实施例提供的页面渲染方法的现实意义进行示例性说明:
在网站包含的众多页面中,会存在一些元素较多的页面。其中,页面中的元素可以包括页面元素,比如页面中的多张图片,多段文字、视频或者行列数较多的一张表格等等。页面中的元素还可以包括为页面元素设置的至少一个属性元素。属性元素比如可以是页面元素的格式,字体,以及显示特效等等。在实际中,页面中的每个元素都可以认为是一个dom节点。
对于元素较多的页面,若一次性渲染页面中的全部元素,一方面,会使得终端设备的渲染压力较大,导致页面显示缓慢甚至显示失败。另一方面,由于页面中内容显示区域的尺寸是有限的,即使将页面中的元素全部渲染完成,也只有其中的部分元素可以显示在内容显示区域内,因此,上述这种一次性渲染全部元素的方式,终端设备会渲染很多并不能显示的元素,造成终端设备处理资源的浪费,这显然不是一种合理渲染的方式。
为了避免上述问题,则可以使用本发明提供的方法来实现页面渲染。
基于上述背景,下面结合附图对本发明的一些实施方式作详细说明。在各实施例之间不冲突的情况下,下述的实施例及实施例中的特征可以相互组合。另外,下述各方法实施例中的步骤时序仅为一种举例,而非严格限定。
图1为本发明实施例提供的一种页面渲染方法的流程图,本发明实施例提供的该页面渲染方法可以由渲染设备来执行。可以理解的是,该渲染设备可以实现为软件、或者软件和硬件的组合。本实施例以及下述各实施例中的渲染设备具体来说可以是安装有浏览器应用程序的终端设备。如图1所示,该方法包括如下步骤:
S101,确定目标页面中滚动条的滚动位置。
从时序上来说,一种情况,用户可以对终端设备中安装的浏览器触发开启操作,再进一步触发目标页面的打开操作。此时,目标页面处于打开阶段,目标页面中还未有任何页面元素显示给用户,用户也未对目标页面触发滑动操作。终端设备可以默认滚动条的滚动位置为初始位置。
容易理解的,由于目标页面中内容显示区域的尺寸有限,因此,目标页面中的全部元素无法一次性全部显示出来,最常见的方式就是借助滚动条来分步展示页面中的元素。其中,目标页面与其中的内容显示区域之间的位置关系可以如图2所示。
在目标页面打开后,可以认为目标页面已经由开启阶段变为浏览阶段。在目标页面的滚动条处于初始位置,且此时内容显示区域中的内容用户已经浏览完毕后,另一种情况,用户还可以进一步对目标页面触发滑动操作。终端设备可以实时监听用户是否对触发了滑动操作以及触发的滑动操作的次数。由于用户每触发一次滑动操作,滚动条都会运动预设距离,页面也会沿某一方向滑动预设距离。因此,通过统计滑动操作的次数可以确定出目标页面中滚动条运动的距离,从而得到经过滑动操作后,目标页面中滚动条的滚动位置。
其中,上述的目标页面可以是网站中的任一页面。对于目标页面中元素的具体内容可以参见上述描述中的相关内容。
S102,根据滚动位置确定待渲染元素,待渲染元素的尺寸与目标页面中内容显示区域的尺寸匹配。
一种可选地方式,终端设备响应于用户触发的页面打开操作后,可以通过向服务器发送请求的方式,来得到服务器反馈的对应关系,此对应关系也即是目标页面中各元素与滚动位置之间的对应关系。进一步的,终端设备可以根据此对应关系确定与滚动位置对应的元素,也即是待渲染元素。另一种可选地方式,终端设备可以将滚动位置发送至服务器,以由服务器根据对应关系确定待渲染元素,并将待渲染元素反馈给终端设备。
其中,根据上述描述可知,目标页面中可以包括图片、视频、文字或者表格,并且表格中任意单元格的内容也可以是文字或者图片等等。实际应用中,待渲染元素可以是图片、视频、文字,也可以是表格中任一单元格中的内容。并且确定出的待渲染元素的尺寸与内容显示区域的尺寸匹配。可选地,这种尺寸匹配,可以是二者的高度相同或者宽度相同。
以待渲染元素为表格为例说明,内容显示区域可以显示10行表格,则待渲染元素可以是10行表格的内容,也即是待渲染元素的高度等于内容显示区域的高度。或者是内容显示区域可以显示5列表格,则待渲染元素可以是5列表格的内容,也即是待渲染元素的宽度等于内容显示区域的宽度。
对于元素与滚动位置之间的对应关系,可选地,服务器可以根据元素的尺寸以及页面显示区域的尺寸预先建立。
以元素和内容显示区域的高度为例具体说明:可以先计算目标页面全部元素的高度总和,再计算高度总和与内容显示区域的高度的商值为P,则可以认为把包含全部元素的目标页面划分P段,也即是滚动条具有P个滚动位置。
接着,可以再根据目标页面中内容显示区域的高度,对目标页面中包含的全部元素进行分组,且一个分组也对应于一个滚动位置。经过上述处理,即可建立起每个滚动位置与对应分组内的至少一个元素之间的对应关系。页面中全部的元素可以划分为P组,每一组中元素的高度总和可以与内容显示区域的高度相同。
需要说明的有,上述对应关系实际上为滚动位置与元素的标识信息之间的对应关系,则利用上述对应关系确定出是与滚动位置对应的待渲染元素的标识信息。因此,在确定出待渲染元素的标识信息后,还可以请求服务器将待渲染元素的具体数据发送至终端设备。
类似地,当元素和内容显示区域的尺寸为宽度时,也可以根据各元素的宽度与内容显示区域的宽度之间的关系,采用上述方法建立对应关系。
S103,渲染待渲染元素至内容显示区域上。
终端设备可以直接将待渲染元素渲染至目标页面中的内容显示区域上。
本实施例中,终端设备先确定目标页面中滚动条的滚动位置,再根据此滚动位置确定待渲染元素。由于页面中内容显示区域的尺寸有限,因此,此待渲染元素是显示于页面中内容显示区域中的、目标页面中的部分元素。并且待渲染元素的尺寸与目标页面中内容显示区域的尺寸匹配。最终,对目标页面中的部分元素即待渲染元素进行渲染,以使其显示在内容显示区域上。
上述方法中,一方面,终端设备渲染的只是目标页面中的部分元素,从而大大减小终端设备的渲染压力,保证页面正常显示,避免页面崩溃。另一方面,由于待渲染元素的尺寸与页面的内容显示区域的尺寸是匹配的,因此,即使渲染的是数量是较少的待渲染元素,也不会对用户浏览页面产生影响。
在实际应用中,容易理解的,目标页面中的多个元素之间可以在内容上存在关联,比如多段文字,它们在语义上是关联的,则对于多个元素的展示顺序是有要求的。因此,目标页面中各元素需要按照一定的顺序以及位置关系来渲染并显示的,这样才不会出现页面中内容错乱的情况。
为了实现上述效果,如图3所示,可以采用以下方式对待渲染元素进行渲染,也即是上述实施例中步骤103的一种可选地实施方式,该方式可以包括如下步骤:
S1031,响应于用户触发的页面打开操作,获取目标页面的页面样式文档以及目标页面中各元素之间的位置关系。
S1032,根据元素之间的位置关系确定待渲染元素之间的位置关系。
S1033,按照页面样式文档以及待渲染元素之间的位置关系,缓存并渲染待渲染元素至内容显示区域上。
用户在触发页面打开操作后,除了目标页面中各元素与滚动位置之间的对应关系,终端设备响应于此操作,并通过发送请求的方式,还可以向服务器请求此目标页面的页面样式文档以及目标页面中各元素之间的位置关系。
其中,页面样式文档具体可以为html文档,此文档可以认为是目标页面的页面模板,其中比如记录可以有页面中搜索栏、滚动条的位置,还可以记录有页面中各元素的位置。
经过上述步骤102确定出待渲染元素后,则可以按照目标页面中各元素之间的位置关系,进一步确定出待渲染元素之间的位置关系。最终,终端设备可以按照页面样式文档以及待渲染元素之间的位置关系对待渲染元素进行渲染,这样就不会出现页面中内容错乱的情况。可选地,渲染完成的元素可以缓存在终端设备本地。
但在实际中,随着用户不断触发滑动操作,渲染完成的元素也越多,若每次都将渲染完成的元素缓存至终端设备,则本地缓存的数据增多,会影响终端设备的运行速度。因此,另一种可选地方式,终端设备可以实时监听用户是否触发了滑动操作。若用户触发了滑动操作,并且渲染完成的待渲染元素已经移除内容显示区域,则终端设备可以删除已经渲染完成的待渲染元素。按照上述方式,终端设备中的缓存数据可以根据滑动操作的触发实时更新,终端设备本地缓存数据的数据量较为稳定,不会出现缓存大量数据的情况,以保证终端设备的正常运行。
在实际中,页面中可以设置多个滑动条以供用户触发上下滑动操作或者左右滑动操作。则结合图2理解,可选地,终端设备可以响应于用户触发的上下滑动操作,确定目标页面中第一滚动条的第一滚动位置。
此种情况下,终端设备确定出的待渲染元素和目标页面中的内容显示区域在高度是匹配的。可选地,高度匹配可以是二者的高度相同,与图1所示实施例中的描述相同。可选地,高度匹配也可以是:待渲染元素的高度高于内容显示区域的高度。比如内容显示区域可以显示10行表格的内容,则待渲染元素可以是12行表格的内容。
可选地,终端设备可以响应于用户触发的左右滑动操作,确定目标页面中第二滚动条的第二滚动位置。
此种情况下,终端设备确定出的待渲染元素和目标页面中的内容显示区域在宽度是匹配的。可选地,宽度匹配可以是二者的宽度相同,与图1所示实施例中的描述相同。可选地,宽度匹配也可以是:待渲染元素的宽度高于内容显示区域的高度。比如内容显示区域可以显示5列表格的内容,则待渲染元素可以是6列表格的内容。
当用户触发滑动操作,以使目标页面中滚动条的滚动位置发生变化时,目标页面中显示的元素也会发生变化。而上述待渲染元素的尺寸略大于内容显示区域的尺寸的方式,可以使页面元素的变化显示更加顺畅。
在实际应用中,当用户单独触发了上下滑动操作或者左右滑动操作,则可以按照上述方式确定出第一滚动条的第一滚动位置或者第二滚动条的第二滚动位置。
另外,用户还可以同时触发上下滑动操作和左右滑动操作。此时,可以根据服务器中存储的目标页面中各元素与第一滚动条的不同滚动位置之间的对应关系,确定与第一滚动位置对应的第一待渲染元素。再根据目标页面中各中元素与第二滚动条的不同滚动位置之间的对应关系,确定与第二滚动位置对应的第二待渲染元素。第一待渲染元素和第二待渲染元素的交集也即是需要渲染至内容显示区域上的元素。
为便于理解,结合页面渲染场景对以上提供的页面渲染方法的具体实现过程进行示例性说明,以下过程可以结合图4理解。
假设网站中的页面A中包括一15*5的表格,表格中每个单元格中的内容都可以认为是页面A的元素。并且页面A的内容显示区域内只能显示表格中5行的内容。则响应于用户对页面A触发的打开操作,此时,页面A的滚动条位于初始位置,并且用户也未触发滑动操作。终端设备可以根据滚动条所处的初始位置确定待渲染元素为表格中第1~5行中的全部内容,并且待渲染元素的高度与内容显示区域的高度是相同的。此时,页面A中显示的内容可以如图4中的(a)所示,并且第1~5行中的全部内容可以缓存于终端设备本地。
接着,用户在看完表格中前5行的内容后,可以触发向下滚动操作,从而使滚动条由初始位置滚动到滚动位置M。终端设备可以根据页面A中各元素与滚动条的滚动位置之间的对应关系,确定与此滚动位置M对应的元素,即表格中第6~10行中的全部内容。待渲染元素的高度仍与内容显示区域的高度相同。终端设备可以对表格中第6~10行的内容进行渲染,此时,页面A中显示的内容可以如图4中的(b)所示。表格中第6~10行的内容可以替换之前的第1~5行中的内容,缓存于终端设备本地。
类似的,用户还可以进一步触发向下滚动操作,从而使滚动条由滚动位置M滚动到滚动位置N。终端设备可以根据页面A中各元素与滚动条的滚动位置之间的对应关系,确定与此滚动位置N对应的元素,即表格中第11~15行中的全部内容。终端设备可以将对表格中第11~15行的内容进行渲染,此时,页面A中显示的内容可以如图4中的(c)所示。表格中第11~15行的内容可以替换之前缓存的第6~10行中的内容。
可见,一方面,上述这种分步渲染数据的方式能够减小终端设备的渲染压力,保证页面的正常显示,避免页面崩溃。另一方面,由于终端设备本地缓存的数据是被实时替换、更新的,从而使得终端设备本地缓存数据的数据量较为稳定,不会出现缓存大量数据的情况,以保证终端设备的正常运行。
以下将详细描述本发明的一个或多个实施例的页面渲染装置。本领域技术人员可以理解,这些页面渲染装置均可使用市售的硬件组件通过本方案所教导的步骤进行配置来构成。
图5为本发明实施例提供的页面渲染装置的结构示意图,如图5所示,该装置包括:
位置确定模块11,用于确定目标页面中滚动条的滚动位置。
元素确定模块12,用于根据所述滚动位置确定待渲染元素,所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配。
渲染模块13,用于渲染所述待渲染元素至所述内容显示区域上。
其中,所述目标页面中包含表格;所述待渲染元素包括所述表格中的至少一个单元格。
可选地,所述元素确定模块12具体用于:响应于用户触发的页面打开操作,获取所述目标页面中各元素与滚动位置之间的对应关系,所述对应关系根据所述目标页面中各元素的尺寸建立;以及根据所述对应关系确定所述待渲染元素。
可选地,所述渲染模块13具体用于:响应于所述页面打开操作,获取所述目标页面的页面样式文档以及所述目标页面中各元素之间的位置关系;
根据所述元素之间的位置关系确定所述待渲染元素之间的位置关系;
按照所述页面样式文档以及所述待渲染元素之间的位置关系,渲染所述待渲染元素至所述内容显示区域上。
可选地,所述位置确定模块11具体用于:响应于用户对所述目标页面触发的上下滑动操作,确定所述目标页面中第一滚动条的第一滚动位置。
其中,所述待渲染元素的高度大于或等于所述内容显示区域的高度。
可选地,所述位置确定模块11具体用于:响应于用户对所述目标页面触发的左右滑动操作,确定所述目标页面中第二滚动条的第二滚动位置。
其中,所述待渲染元素的宽度大于或等于所述内容显示区域的宽度。
可选地,所述装置还包括:删除模块14,用于响应于用户对所述目标页面触发的滑动操作,删除移出所述内容显示区域的所述待渲染元素。
图5所示装置可以执行图1至图4所示实施例的方法,本实施例未详细描述的部分,可参考对图1至图4所示实施例的相关说明。该技术方案的执行过程和技术效果参见图1至图4所示实施例中的描述,在此不再赘述。
以上描述了页面渲染装置的内部功能和结构,在一个可能的设计中,页面渲染装置的结构可实现为一电子设备,如图6所示,该电子设备可以包括:处理器21和存储器22。其中,所述存储器22用于存储支持该电子设备执行上述图1至图4所示实施例中提供的页面渲染方法的程序,所述处理器21被配置为用于执行所述存储器22中存储的程序。
所述程序包括一条或多条计算机指令,其中,所述一条或多条计算机指令被所述处理器21执行时能够实现如下步骤:
确定目标页面中滚动条的滚动位置;
根据所述滚动位置确定待渲染元素,所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配;
渲染所述待渲染元素至所述内容显示区域上。
可选地,所述处理器21还用于执行前述图1至图4所示实施例中的全部或部分步骤。
其中,所述电子设备的结构中还可以包括通信接口23,用于该电子设备与其他设备或通信网络通信。
另外,本发明实施例提供了一种计算机存储介质,用于储存上述电子设备所用的计算机软件指令,其包含用于执行上述图1至图4所示方法实施例中页面渲染方法所涉及的程序。
最后应说明的是:以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种页面渲染方法,其特征在于,包括:
确定目标页面中滚动条的滚动位置;
根据所述滚动位置确定待渲染元素,所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配;
渲染所述待渲染元素至所述内容显示区域上。
2.根据权利要求1所述的方法,其特征在于,所述根据所述滚动位置确定待渲染元素,包括:
响应于用户触发的页面打开操作,获取所述目标页面中各元素与滚动位置之间的对应关系,所述对应关系根据所述目标页面中各元素的尺寸建立;
根据所述对应关系确定所述待渲染元素。
3.根据权利要求2所述的方法,其特征在于,所述渲染所述待渲染元素至所述内容显示区域上,包括:
响应于所述页面打开操作,获取所述目标页面的页面样式文档以及所述目标页面中各元素之间的位置关系;
根据所述元素之间的位置关系确定所述待渲染元素之间的位置关系;
按照所述页面样式文档以及所述待渲染元素之间的位置关系,渲染所述待渲染元素至所述内容显示区域上。
4.根据权利要求1所述的方法,其特征在于,所述确定目标页面中滚动条的滚动位置,包括:
响应于用户对所述目标页面触发的上下滑动操作,确定所述目标页面中第一滚动条的第一滚动位置;
所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配,包括:
所述待渲染元素的高度大于或等于所述内容显示区域的高度。
5.根据权利要求1所述的方法,其特征在于,所述确定目标页面中滚动条的滚动位置,包括:
响应于用户对所述目标页面触发的左右滑动操作,确定所述目标页面中第二滚动条的第二滚动位置;
所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配,包括:
所述待渲染元素的宽度大于或等于所述内容显示区域的宽度。
6.根据权利要求1所述的方法,其特征在于,所述渲染所述待渲染元素至所述内容显示区域上之后,所述方法还包括:
响应于用户对所述目标页面触发的滑动操作,删除移出所述内容显示区域的所述待渲染元素。
7.根据权利要求1至6中任一项所述的方法,其特征在于,所述目标页面中包含表格;所述待渲染元素包括所述表格中的至少一个单元格。
8.一种页面渲染装置,其特征在于,包括:
位置确定模块,用于确定目标页面中滚动条的滚动位置;
元素确定模块,用于根据所述滚动位置确定待渲染元素,所述待渲染元素的尺寸与所述目标页面中内容显示区域的尺寸匹配;
渲染模块,用于渲染所述待渲染元素至所述内容显示区域上。
9.一种电子设备,其特征在于,包括:存储器、处理器;其中,所述存储器上存储有可执行代码,当所述可执行代码被所述处理器执行时,使所述处理器执行如权利要求1至7中任一项所述的页面渲染方法。
10.一种非暂时性机器可读存储介质,其特征在于,所述非暂时性机器可读存储介质上存储有可执行代码,当所述可执行代码被电子设备的处理器执行时,使所述处理器执行如权利要求1至7中任一项所述的页面渲染方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011027738.9A CN112287258A (zh) | 2020-09-25 | 2020-09-25 | 页面渲染方法、装置、设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011027738.9A CN112287258A (zh) | 2020-09-25 | 2020-09-25 | 页面渲染方法、装置、设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112287258A true CN112287258A (zh) | 2021-01-29 |
Family
ID=74421414
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011027738.9A Pending CN112287258A (zh) | 2020-09-25 | 2020-09-25 | 页面渲染方法、装置、设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112287258A (zh) |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112926000A (zh) * | 2021-02-26 | 2021-06-08 | 北京百度网讯科技有限公司 | 显示区域渲染方法、装置、设备、可读存储介质及产品 |
CN113238755A (zh) * | 2021-06-08 | 2021-08-10 | 北京明略昭辉科技有限公司 | 一种web页面模块的显示处理方法、系统、介质及设备 |
CN113343144A (zh) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | 数据的显示方法、装置及设备 |
CN113467869A (zh) * | 2021-06-22 | 2021-10-01 | 中科曙光国际信息产业有限公司 | 数据渲染方法、装置、计算机设备和存储介质 |
CN114330230A (zh) * | 2021-11-17 | 2022-04-12 | 芯华章科技股份有限公司 | 显示逻辑系统设计的文档的方法及相关设备 |
CN114491364A (zh) * | 2022-01-17 | 2022-05-13 | 广州市玄武无线科技股份有限公司 | 一种基于状态管理的高性能表单的实现方法及系统 |
CN115438282A (zh) * | 2022-09-05 | 2022-12-06 | 恒生电子股份有限公司 | 页面中元素的定位方法及装置 |
CN116451671A (zh) * | 2023-06-16 | 2023-07-18 | 上海森亿医疗科技有限公司 | 文档格式数据加载渲染方法、终端、介质及web编辑器 |
WO2023197729A1 (zh) * | 2022-04-14 | 2023-10-19 | 腾讯科技(深圳)有限公司 | 对象渲染方法、装置、电子设备及存储介质 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2010077057A2 (ko) * | 2008-12-31 | 2010-07-08 | Kim Chang-Mo | 검색 결과 문서에서 검색어 시작 부분으로 위치 이동하는 검색 시스템 및 그 검색 방법 |
CN103164401A (zh) * | 2011-12-08 | 2013-06-19 | 航天信息软件技术有限公司 | 页面表格显示方法 |
CN105701106A (zh) * | 2014-11-27 | 2016-06-22 | 广州市动景计算机科技有限公司 | 网页更新方法及装置 |
CN110929197A (zh) * | 2019-11-27 | 2020-03-27 | 杭州安恒信息技术股份有限公司 | 一种网页图片的预览加载方法和装置 |
CN111382388A (zh) * | 2020-03-19 | 2020-07-07 | 中国银行股份有限公司 | 一种利用css进行底部元素吸底控制的方法及系统 |
-
2020
- 2020-09-25 CN CN202011027738.9A patent/CN112287258A/zh active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2010077057A2 (ko) * | 2008-12-31 | 2010-07-08 | Kim Chang-Mo | 검색 결과 문서에서 검색어 시작 부분으로 위치 이동하는 검색 시스템 및 그 검색 방법 |
CN103164401A (zh) * | 2011-12-08 | 2013-06-19 | 航天信息软件技术有限公司 | 页面表格显示方法 |
CN105701106A (zh) * | 2014-11-27 | 2016-06-22 | 广州市动景计算机科技有限公司 | 网页更新方法及装置 |
CN110929197A (zh) * | 2019-11-27 | 2020-03-27 | 杭州安恒信息技术股份有限公司 | 一种网页图片的预览加载方法和装置 |
CN111382388A (zh) * | 2020-03-19 | 2020-07-07 | 中国银行股份有限公司 | 一种利用css进行底部元素吸底控制的方法及系统 |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112926000A (zh) * | 2021-02-26 | 2021-06-08 | 北京百度网讯科技有限公司 | 显示区域渲染方法、装置、设备、可读存储介质及产品 |
CN113343144A (zh) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | 数据的显示方法、装置及设备 |
CN113238755A (zh) * | 2021-06-08 | 2021-08-10 | 北京明略昭辉科技有限公司 | 一种web页面模块的显示处理方法、系统、介质及设备 |
CN113467869A (zh) * | 2021-06-22 | 2021-10-01 | 中科曙光国际信息产业有限公司 | 数据渲染方法、装置、计算机设备和存储介质 |
CN114330230A (zh) * | 2021-11-17 | 2022-04-12 | 芯华章科技股份有限公司 | 显示逻辑系统设计的文档的方法及相关设备 |
CN114491364A (zh) * | 2022-01-17 | 2022-05-13 | 广州市玄武无线科技股份有限公司 | 一种基于状态管理的高性能表单的实现方法及系统 |
WO2023197729A1 (zh) * | 2022-04-14 | 2023-10-19 | 腾讯科技(深圳)有限公司 | 对象渲染方法、装置、电子设备及存储介质 |
CN115438282A (zh) * | 2022-09-05 | 2022-12-06 | 恒生电子股份有限公司 | 页面中元素的定位方法及装置 |
CN115438282B (zh) * | 2022-09-05 | 2024-01-23 | 恒生电子股份有限公司 | 页面中元素的定位方法及装置 |
CN116451671A (zh) * | 2023-06-16 | 2023-07-18 | 上海森亿医疗科技有限公司 | 文档格式数据加载渲染方法、终端、介质及web编辑器 |
CN116451671B (zh) * | 2023-06-16 | 2023-11-07 | 上海森亿医疗科技有限公司 | 文档格式数据加载渲染方法、终端、介质及web编辑器 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112287258A (zh) | 页面渲染方法、装置、设备和存储介质 | |
US9501581B2 (en) | Method and apparatus for webpage reading based on mobile terminal | |
US6720981B1 (en) | Method, system and program product for animated web page construction and display | |
US8887085B1 (en) | Dynamic content navigation | |
US7469388B1 (en) | Direction-based system and method of generating commands | |
US10366147B2 (en) | Techniques for programmatic magnification of visible content elements of markup language documents | |
NL2007909C2 (en) | Method and apparatus of scrolling a document displayed in a browser window. | |
US8395643B2 (en) | Motion-based data review and zoom | |
US20080301555A1 (en) | System and method for providing animated browser thumbnails | |
WO2006051415A2 (en) | Determining a main content area of a page | |
US20090313574A1 (en) | Mobile document viewer | |
WO2015078159A1 (zh) | 网页显示方法及装置 | |
US20130275878A1 (en) | Method, device, server, and mobile terminal for browsing web pages | |
JP5976825B2 (ja) | ウェブ文書の高速ウェブスクロールを支援するユーザ端末装置及びスクロール方法 | |
CN114579912A (zh) | 页面布局方法、装置、设备及介质 | |
CN104598467B (zh) | 一种网页图片的显示方法及装置 | |
CN113434138B (zh) | 信息显示方法、装置和电子设备 | |
CN111428167B (zh) | 一种页面显示方法和装置 | |
CN113378084A (zh) | 页面展示方法和装置、电子设备以及计算机可读存储介质 | |
JP6832584B2 (ja) | 情報処理装置およびコンピュータプログラム | |
CN113392353A (zh) | 网站页面的加载方法、装置、电子设备及存储介质 | |
JP4219159B2 (ja) | 情報表示方法及び装置 | |
CN115438282B (zh) | 页面中元素的定位方法及装置 | |
JP2014164736A (ja) | ウェブページ閲覧装置及びプログラム | |
CN115357170A (zh) | 信息获取方法、装置、电子设备、存储介质及程序产品 |
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 | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210129 |