CN103970770B - 一种网页优化处理方法、装置及客户端 - Google Patents
一种网页优化处理方法、装置及客户端 Download PDFInfo
- Publication number
- CN103970770B CN103970770B CN201310034271.4A CN201310034271A CN103970770B CN 103970770 B CN103970770 B CN 103970770B CN 201310034271 A CN201310034271 A CN 201310034271A CN 103970770 B CN103970770 B CN 103970770B
- Authority
- CN
- China
- Prior art keywords
- page data
- webpage
- display
- row
- window
- 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.)
- Active
Links
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
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
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)
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例提供一种网页优化处理方法、装置及客户端,其中的方法可包括:加载网页的页面数据,将所述页面数据转换为元素节点;将所述元素节点添加至窗口的展示列中进行显示;根据所述展示列的显示高度,确定所述网页的新的页面数据的显示位置;检测到对所述网页的新的页面数据的触发操作时,加载所述网页的新的页面数据并在所述确定的显示位置显示所述网页的新的页面数据。本发明可对网页的显示过程进行优化处理,提升网页的显示效果,减少内存占用,提升装置性能。
Description
技术领域
本发明涉及一种互联网技术领域,尤其涉及一种网页优化处理方法、装置及客户端。
背景技术
传统的网页展示过程中,网页的页面数据通常按列展示。请参见图1a,为现有的网页显示的一个示意图;客户端从服务器获取网页的页面数据和该页面数据的显示顺序;将该页面数据转换为元素节点,如图1a所示,9个页面数据可转换为9个元素节点,从元素节点1至元素节点9;按照该页面数据的显示顺序依次将对应的元素节点按列显示,如图1a所示,窗口中包含3个展示列,则将9个元素节点依次逐行添加至展示列中进行显示。请参见图1b,为现有的网页显示的另一个示意图;当需要在窗口中显示该网页的新的页面数据时,例如:用户滚动窗口中的垂直滚动条,或者用户点击窗口中的翻页按键,则需要在窗口中显示该网页的新的页面数据;此时,获取新的页面数据并转换为新的元素节点,如图1b所示,3个新的页面数据对应3个新的元素节点,从元素节点10 至元素节点12,按照该新的页面数据的显示顺序依次将元素节点10至元素节点 12添加至各展示列中进行显示。上述可知,现有的网页显示过程直接按照页面数据的显示顺序进行依次显示,并不对窗口中的具体展现情况进行分析,由于每个展示列中显示的元素节点的高度参差不齐,使得窗口中显示的网页中存在较多的空白区域,如图1a和图1b所示,影响了网页的显示效果,同时由于空白面积的增大造成网页渲染占用的内存增大,降低了装置的性能。
发明内容
本发明实施例提供一种网页优化处理方法、装置及客户端,可对网页的显示过程进行优化处理,提升网页的显示效果,减少内存占用,提升装置性能。
本发明第一方面提供一种网页优化处理方法,可包括:
加载网页的页面数据,将所述页面数据转换为元素节点;
将所述元素节点添加至窗口的展示列中进行显示;
根据所述展示列的显示高度,确定所述网页的新的页面数据的显示位置;
检测到对所述网页的新的页面数据的触发操作时,加载所述网页的新的页面数据并在所述确定的显示位置显示所述网页的新的页面数据。
本发明第二方面提供一种网页优化处理装置,可包括:
加载模块,用于加载网页的页面数据,将所述页面数据转换为元素节点;
显示模块,用于将所述元素节点添加至窗口的展示列中进行显示;
位置确定模块,用于根据所述展示列的显示高度,确定所述网页的新的页面数据的显示位置;
触发模块,用于在检测到对所述网页的新的页面数据的触发操作时,触发所述加载模块加载所述网页的新的页面数据,并由所述显示模块在所述确定的显示位置显示所述网页的新的页面数据。
本发明第三方面提供一种客户端,可包括上述第二方面提供的网页优化处理装置。
实施本发明实施例,具有如下有益效果:
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1a为现有的网页显示的一个示意图;
图1b为现有的网页显示的另一个示意图;
图2为本发明实施例提供的一种网页优化处理方法的流程图;
图3为本发明实施例提供的另一种网页优化处理方法的流程图;
图4a为本发明实施例提供的网页显示的一个示意图;
图4b为本发明实施例提供的网页显示的另一个示意图;
图5为本发明实施例提供的一种网页优化处理装置的结构示意图;
图6为本发明实施例提供的另一种网页优化处理装置的结构示意图;
图7为本发明实施例提供的加载模块的结构示意图;
图8为本发明实施例提供的显示模块的一个实施例的结构示意图;
图9为本发明实施例提供的显示模块的另一个实施例的结构示意图;
图10为本发明实施例提供的位置确定模块的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本发明实施例中,客户端可以包括但不限于:PC(Personal Computer,个人计算机)、手机、智能手机、平板电脑、笔记本电脑等终端设备。网页优化处理装置可以为浏览器或包含浏览器的应用。
下面将结合附图2-附图4,对本发明实施例提供的网页优化处理方法进行详细介绍。
请参见图2,为本发明实施例提供的一种网页优化处理方法的流程图;该方法可包括以下步骤S101-步骤S104。
S101,加载网页的页面数据,将所述页面数据转换为元素节点;
其中,网页的页面数据通常指网页的HTML(Hypertext Markup Language,超文本标记语言)源代码,从服务器获得网页的页面数据之后,若要对该网页进行展示,需要加载该网页的页面数据,并解析该网页的页面数据生成网页显示所需的元素节点。具体实现中,本步骤可加载网页的页面数据,将所述页面数据转换为DOM(Document Object Model,文档对象模型)元素节点。
S102,将所述元素节点添加至窗口的展示列中进行显示;
其中,网页的页面数据通常按列展示,用于展示页面数据的列可称为展示列,将网页的页面数据转换形成的元素节点添加至窗口的展示列中进行显示,即实现了在窗口中显示所述网页。
S103,根据所述展示列的显示高度,确定所述网页的新的页面数据的显示位置;
其中,展示列的显示高度为该展示列中所有元素节点的高度之和。由于每个元素节点的高度可能存在差异,因此窗口中每个展示列的显示高度也可能存在差异,展示列的显示高度差会使得网页中存在空白区域,现有技术中由于并未考虑展示列的显示高度,则当需要显示所述网页的新的页面数据时,这些空白区域则影响网页的显示效果。本发明实施例中,为了保证网页的显示效果,本步骤考虑了窗口的展示列的显示高度,即考虑了展示列中各个元素节点的高度差异的情况,基于所述展示列的显示高度,确定所述网页的新的页面数据的显示位置,可保证当需要显示所述网页的新的页面数据时,窗口中每个展示列的显示高度相对一致,减少网页中的空白区域,提升网页的显示效果。
S104,检测到对所述网页的新的页面数据的触发操作时,加载所述网页的新的页面数据并在所述确定的显示位置显示所述网页的新的页面数据。
其中,所述触发操作可以包括:滚动窗口中的垂直滚动条的操作,或者对窗口中的翻页按键的点击操作,等等。当需要对所述网页的新的页面数据进行显示时,加载所述网页的新的页面数据,将所述网页的新的页面数据转换为新的元素节点,在所述确定的显示位置添加所述新的元素节点,以显示所述网页的新的页面数据。
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
请参见图3,为本发明实施例提供的另一种网页优化处理方法的流程图;该方法可包括以下步骤S201-步骤S213。
S201,检测到网页请求时,根据所述网页请求携带的URL(Uniform ResourceLocator,统一资源定位符)地址,从服务器获取所请求网页的页面数据和所述页面数据的显示顺序。
其中,用户欲浏览网页时,可发起网页请求,例如:用户点击网页的URL 地址链接发起网页请求,或者用户在网页地址栏中输入URL地址发起网页请求。本步骤中,在检测到网页请求时,首先对该网页请求携带的URL地址进行域名解析,获得所请求网页的IP(Internet Protocol,网协)地址;基于该IP地址向服务器发起网页请求,接收服务器返回的所请求网页的页面数据和所述页面数据的显示顺序。
S202,按照获取的所述网页的页面数据的显示顺序,从获取的所述页面数据中选择预设数量的页面数据;
其中,预设数量可根据实际需要进行设定,设定过程中可考虑网页优化处理装置的性能、网页渲染能力、渲染计算量、窗口的展示列的数量及网页显示效果等因素,优选地,可设定预设数量为2n-1,其中n为正整数且n为窗口中展示列的数量。本实施例中,将预设数量优选设定为2n-1,可使得在对该2n-1 个页面数据进行加载和显示时,对2n-1个页面数据进行分批渲染、计算和处理,既能保证网页的优化显示效果,使得窗口中每个展示列的显示高度相对保持一致,又在一定程度上减少渲染计算量,保证了网页优化处理装置的性能。
S203,加载所述预设数量的页面数据,将所述预设数量的页面数据转换为预设数量的元素节点;
其中,网页的页面数据通常指网页的HTML源代码,从服务器获得网页的页面数据之后,若要对该网页进行展示,需要加载该网页的页面数据,并解析该网页的页面数据生成网页显示所需的元素节点。在选择了需要加载的预设数量的页面数据之后,本步骤可加载选择的所述预设数量的页面数据,将所述预设数量的页面数据转换为预设数量的DOM元素节点。
S204,根据窗口的宽度信息和预设的展示列的宽度信息,确定所述窗口中展示列的数量;
考虑到用户对网页的浏览习惯,通常地,在窗口采用展示列显示网页的页面数据时,所有展示列的宽度之和应当不大于窗口的宽度,以使得用户无需使用水平滚动条对网页进行浏览。具体地,可预设每个展示列的宽度信息,根据窗口的宽度信息和预设的每个展示列的宽度信息,确定所述窗口中的展示列的数量;例如:假设窗口的宽度信息为46cm,每个展示列的宽度信息均为15cm,则可确定所述窗口中展示列的数量优选为3,即采用3个展示列显示网页的页面数据。
S205,按照所述预设数量的页面数据的显示顺序,依次将所述预设数量的元素节点添加至所述窗口的每个展示列中进行显示;
服务器在返回网页的页面数据时,同时指示所述页面数据的显示顺序,本步骤按照所述预设数量的页面数据的显示顺序,依次将所述预设数量的元素节点添加至所述窗口中的每个展示列中进行显示。请一并参见图4a,为本发明实施例提供的网页显示的一个示意图;如图4a所示,所述窗口中有3个展示列(图中未标号),则n=3;所述预设数量为2n-1=2*3-1=5,该5个页面数据的显示顺序为从页面数据1至页面数据5依次显示,本步骤的处理过程为:依次将页面数据1对应的元素节点1添加至展示列一中,将页面数据2对应的元素节点2 添加至展示列二中,将页面数据3对应的元素节点3添加至展示列三中,再将页面数据4对应的元素节点4添加至展示列一中,再将页面数据5对应的元素节点5添加至展示列二中。需要说明的是,本步骤依次将所述预设数量的元素节点逐行添加至所述窗口的每个展示列中进行显示,此处理过程具体可参见现有技术中浏览器对元素节点的渲染过程。
S206,获取所述窗口中每个元素节点的高度;
当元素节点被添加至窗口中的展示列进行显示后,网页优化处理装置则可获取每个元素节点的高度,其中,每个元素节点的高度即为每个元素节点在所述窗口中所占的显示高度。
S207,根据所述窗口的每个展示列中的所有元素节点的高度,计算每个展示列的显示高度;
其中,每个展示列的显示高度为每个展示列中所有元素节点的高度的总和,例如:展示列一中包含元素节点1和元素节点4,则展示列一的显示高度为元素节点1的高度与元素节点4的高度之和为展示列一的显示高度。
S208,将显示高度最小的展示列确定为所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据的显示位置。
在计算得到窗口中每个展示列的显示高度之后,比较每个展示列的显示高度,从中选择显示高度最小的展示列;例如:假设所述窗口中有3个展示列,展示列一的显示高度为50cm,展示列二的显示高度为40cm,展示列三的显示高度为45cm,则从3个展示列中选择展示列二,将选择的展示列二确定为所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据的显示位置,即当需要显示所述网页的新的页面数据时,从展示列二逐行添加所述新的页面数据对应的元素节点进行显示。
S209,检测到对所述网页的新的页面数据的触发操作时,加载所述网页的新的页面数据,将所述新的页面数据转换为新的元素节点;
其中,所述触发操作可以包括:滚动窗口中的垂直滚动条的操作,或者对窗口中的翻页按键的点击操作,等等。例如:用户滚动窗口中的垂直滚动条拉取网页的新的页面数据时,如果垂直滚动条的位置到达显示高度最小的展示列的底部,即所述显示高度最小的展示列中最晚添加的元素节点的底部已显示于所述窗口中,则需要显示所述网页的新的页面数据。本步骤中,则重新按照获取的所述网页的页面数据的显示顺序,从获取的所述页面数据中选择预设数量的新的页面数据;加载所述预设数量的新的页面数据,将所述预设数量的新的页面数据转换为预设数量的新的元素节点。本步骤的加载过程可参见步骤S202- 步骤S203中的相关描述,在此不赘述。
S210,将所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据对应的所述新的元素节点添加至所述窗口中显示高度最小的展示列中进行显示;
S211,按照所述网页的新的页面数据的显示顺序,依次将其他的所述新的元素节点添加至所述窗口的每个展示列中进行显示。
可采用上述例子详细说明步骤S210-步骤S211的具体实现。请一并参见图 4b,为本发明实施例提供的网页显示的另一个示意图;所述窗口中有3个展示列(图中未标号),则n=3;所述窗口中展示列二的显示高度最小。所述预设数量为2n-1=2*3-1=5,该5个新的页面数据的显示顺序为从页面数据6至页面数据10依次显示,步骤S210的处理过程为:将显示顺序位于首位的页面数据6 对应的元素节点6添加至展示列二中;步骤S210的处理过程为:依次将页面数据7对应的元素节点7添加至展示列三中,将页面数据8对应的元素节点8添加至展示列一中,再将页面数据9对应的元素节点9添加至展示列二中,再将页面数据10对应的元素节点10添加至展示列三中。由于考虑了窗口的展示列的显示高度,即考虑了展示列中各个元素节点的高度差异的情况,具体地基于显示高度最小的展示列确定新的页面数据的显示位置,从而有效地减少由于展示列的显示高度差产生的页面空白区域,可保证当需要显示所述网页的新的页面数据时,窗口中每个展示列的显示高度相对一致,提升网页的显示效果。
S212,存储所述窗口中每个元素节点的高度,以及存储所述窗口中每个展示列的显示高度;
本步骤中,对所述窗口中每个元素节点的高度,以及所述窗口中每个展示列的显示高度的存储,可避免在网页优化处理过程中执行重复的渲染计算,减少渲染计算量,保证了网页优化处理装置的性能。
S213,当所述窗口的任一个展示列中的元素节点发生变化时,更新存储的所述展示列的显示高度。
其中,展示列中的元素节点发生变化可以为:删除展示列中的元素节点、向展示列中添加元素节点以及修改展示列中的元素节点。窗口中的任一个展示列的元素节点发生变化时,可能导致该展示列的显示高度发生变化,本步骤则及时更新存储的所述展示列的显示高度,以保证网页优化处理过程的准确性,保证网页的优化效果。
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
下面将结合附图5-附图10,对本发明实施例提供的网页优化处理装置进行详细介绍。需要说明的是,下述的装置可以应用于上述方法中。
请参见图5,为本发明实施例提供的一种网页优化处理装置的结构示意图;该装置可包括:加载模块101、显示模块102、位置确定模块103和触发模块104。
加载模块101,用于加载网页的页面数据,将所述页面数据转换为元素节点;
其中,网页的页面数据通常指网页的HTML源代码,从服务器获得网页的页面数据之后,若要对该网页进行展示,需要加载该网页的页面数据,并解析该网页的页面数据生成网页显示所需的元素节点。具体实现中,所述加载模块 101可加载网页的页面数据,将所述页面数据转换为DOM元素节点。
显示模块102,用于将所述元素节点添加至窗口的展示列中进行显示;
其中,网页的页面数据通常按列展示,用于展示页面数据的列可称为展示列,将网页的页面数据转换形成的元素节点添加至窗口的展示列中进行显示,即实现了在窗口中显示所述网页。
位置确定模块103,用于根据所述展示列的显示高度,确定所述网页的新的页面数据的显示位置;
其中,展示列的显示高度为该展示列中所有元素节点的高度之和。由于每个元素节点的高度可能存在差异,因此窗口中每个展示列的显示高度也可能存在差异,展示列的显示高度差会使得网页中存在空白区域,现有技术中由于并未考虑展示列的显示高度,则当需要显示所述网页的新的页面数据时,这些空白区域则影响网页的显示效果。本发明实施例中,为了保证网页的显示效果,所述位置确定模块103考虑了窗口的展示列的显示高度,即考虑了展示列中各个元素节点的高度差异的情况,基于所述展示列的显示高度,确定所述网页的新的页面数据的显示位置,可保证当需要显示所述网页的新的页面数据时,窗口中每个展示列的显示高度相对一致,减少网页中的空白区域,提升网页的显示效果。
触发模块104,用于在检测到对所述网页的新的页面数据的触发操作时,触发所述加载模块加载所述网页的新的页面数据,并由所述显示模块在所述确定的显示位置显示所述网页的新的页面数据。
其中,所述触发操作可以包括:滚动窗口中的垂直滚动条的操作,或者对窗口中的翻页按键的点击操作,等等。当需要对所述网页的新的页面数据进行显示时,加载所述网页的新的页面数据,将所述网页的新的页面数据转换为新的元素节点,在所述确定的显示位置添加所述新的元素节点,以显示所述网页的新的页面数据。
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
请参见图6,为本发明实施例提供的另一种网页优化处理装置的结构示意图;该装置可包括:加载模块101、显示模块102、位置确定模块103、触发模块104、获取模块105、存储模块106和更新模块107。其中,加载模块101、显示模块 102、位置确定模块103和触发模块104的结构可参见图5所示实施例的相关描述,在此不赘述。
获取模块105,用于在检测到网页请求时,根据所述网页请求携带的URL 地址,从服务器获取所请求网页的页面数据和所述页面数据的显示顺序。
其中,用户欲浏览网页时,可发起网页请求,例如:用户点击网页的URL 地址链接发起网页请求,或者用户在网页地址栏中输入URL地址发起网页请求。所述获取模块105在检测到网页请求时,首先对该网页请求携带的URL地址进行域名解析,获得所请求网页的IP地址;基于该IP地址向服务器发起网页请求,接收服务器返回的所请求网页的页面数据和所述页面数据的显示顺序。
存储模块106,存储所述窗口中每个元素节点的高度,以及存储所述窗口中每个展示列的显示高度;
所述存储模块106对所述窗口中每个元素节点的高度,以及所述窗口中每个展示列的显示高度的存储,可避免在网页优化处理过程中执行重复的渲染计算,减少渲染计算量,保证了网页优化处理装置的性能。
更新模块107,用于当所述窗口的任一个展示列中的元素节点发生变化时,更新存储的所述展示列的显示高度。
其中,展示列中的元素节点发生变化可以为:删除展示列中的元素节点、向展示列中添加元素节点以及修改展示列中的元素节点。窗口中的任一个展示列的元素节点发生变化时,可能导致该展示列的显示高度发生变化,所述更新模块107及时更新存储的所述展示列的显示高度,以保证网页优化处理过程的准确性,保证网页的优化效果。
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
下面将对本发明实施例提供的网页优化处理装置中的各模块进行详细介绍。
请参见图7,为本发明实施例提供的加载模块的结构示意图;该加载模块 101可包括:选择单元1101和加载单元1102。
选择单元1101,用于按照获取的所述网页的页面数据的显示顺序,从获取的所述页面数据中选择预设数量的页面数据;
其中,预设数量可根据实际需要进行设定,设定过程中可考虑网页优化处理装置的性能、网页渲染能力、渲染计算量、窗口的展示列的数量及网页显示效果等因素,优选地,可设定预设数量为2n-1,其中n为正整数且n为窗口中展示列的数量。本实施例中,将预设数量优选设定为2n-1,可使得在对该2n-1 个页面数据进行加载和显示时,对2n-1个页面数据进行分批渲染、计算和处理,既能保证网页的优化显示效果,使得窗口中每个展示列的显示高度相对保持一致,又在一定程度上减少渲染计算量,保证了网页优化处理装置的性能。
加载单元1102,用于加载所述预设数量的页面数据,将所述预设数量的页面数据转换为预设数量的元素节点。
其中,网页的页面数据通常指网页的HTML源代码,从服务器获得网页的页面数据之后,若要对该网页进行展示,需要加载该网页的页面数据,并解析该网页的页面数据生成网页显示所需的元素节点。在选择了需要加载的预设数量的页面数据之后,加载单元1102可加载选择的所述预设数量的页面数据,将所述预设数量的页面数据转换为预设数量的DOM元素节点。
请参见图8,为本发明实施例提供的显示模块的一个实施例的结构示意图;显示模块102 可包括:展示列确定单元1201和第一显示处理单元1202。
展示列确定单元1201,用于根据窗口的宽度信息和预设的展示列的宽度信息,确定所述窗口中展示列的数量;
考虑到用户对网页的浏览习惯,通常地,在窗口采用展示列显示网页的页面数据时,所有展示列的宽度之和应当不大于窗口的宽度,以使得用户无需使用水平滚动条对网页进行浏览。具体地,可预设每个展示列的宽度信息,根据窗口的宽度信息和预设的每个展示列的宽度信息,确定所述窗口中的展示列的数量。
第一显示处理单元1202,用于按照所述预设数量的页面数据的显示顺序,依次将所述预设数量的元素节点添加至所述窗口的每个展示列中进行显示。
服务器在返回网页的页面数据时,同时指示所述页面数据的显示顺序,所述第一显示处理单元1202按照所述预设数量的页面数据的显示顺序,依次将所述预设数量的元素节点添加至所述窗口中的每个展示列中进行显示。
请参见图9,为本发明实施例提供的显示模块的另一个实施例的结构示意图;该显示模块102可包括:展示列确定单元1201、第一显示处理单元1202和第二显示处理单元1203。其中,展示列确定单元1201和第一显示处理单元1202的结构可参见图8所示实施例的相关描述,在此不赘述。
第二显示处理单元1203,用于将所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据对应的所述新的元素节点添加至所述窗口中显示高度最小的展示列中进行显示,以及按照所述网页的新的页面数据的显示顺序,依次将其他的所述新的元素节点添加至所述窗口的每个展示列中进行显示。
需要说明的是,所述第二显示处理单元1203在进行显示处理之前,所述加载模块先根据所述触发模块的触发加载所述网页的新的页面数据,将所述新的页面数据转换为新的元素节点。
请参见图10,为本发明实施例提供的位置确定模块的结构示意图;该位置确定模块103可包括:高度获取单元1301、计算单元1302和位置确定单元1303。
高度获取单元1301,用于获取所述窗口中每个元素节点的高度;
当元素节点被添加至窗口中的展示列进行显示后,网页优化处理装置则可获取每个元素节点的高度,其中,每个元素节点的高度即为每个元素节点在所述窗口中所占的显示高度。
计算单元1302,用于根据所述窗口的每个展示列中的所有元素节点的高度,计算每个展示列的显示高度;其中,每个展示列的显示高度为每个展示列中所有元素节点的高度的总和。
位置确定单元1303,用于将显示高度最小的展示列确定为所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据的显示位置。
需要说明的是,本发明实施例提供的网页优化处理装置的结构和功能可参见上述方法实施例中的方法具体实现,该具体实现过程可参见上述方法实施例的相关描述,在此不赘述。
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
本发明实施例还公开了一种客户端,该客户端包含网页优化处理装置,该网页优化处理装置的结构可参见图5-图10所示实施例的相关描述,在此不赘述。需要说明的是,该客户端可以应用于上述方法中。
本发明实施例中,加载网页的页面数据并转换为元素节点,在窗口中采用展示列按列显示所述元素节点,根据展示列的显示高度确定网页的新的页面数据的显示位置,在确定的显示位置显示网页的新的页面数据;由于考虑了展示列的显示高度,即考虑了展示列中显示的元素节点的高度参差不齐的情况,基于展示列的显示高度确定新的页面数据的显示位置,可保证每个展示列的显示高度相对一致,减少网页中的空白区域,实现了对网页的显示过程的优化处理,提升了网页的显示效果,减少了内存占用,提升了装置性能。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory, ROM)或随机存储记忆体(Random AccessMemory,RAM)等。
以上所揭露的仅为本发明较佳实施例而已,当然不能以此来限定本发明之权利范围,因此依本发明权利要求所作的等同变化,仍属本发明所涵盖的范围。
Claims (13)
1.一种网页优化处理方法,其特征在于,包括:
加载网页的页面数据,将所述页面数据转换为元素节点;
将所述元素节点添加至窗口的展示列中进行显示;
获取所述窗口中每个元素节点的高度;
根据所述窗口的每个展示列中的所有元素节点的高度,计算每个展示列的显示高度;
将显示高度最小的展示列确定为所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据的显示位置;
检测到对所述网页的新的页面数据的触发操作时,加载所述网页的新的页面数据并在所述确定的显示位置显示所述网页的新的页面数据。
2.如权利要求1所述的方法,其特征在于,所述加载网页的页面数据,将所述页面数据转换为元素节点之前,还包括:
检测到网页请求时,根据所述网页请求携带的统一资源定位符URL地址,从服务器获取所请求网页的页面数据和所述页面数据的显示顺序。
3.如权利要求2所述的方法,其特征在于,所述加载网页的页面数据,将所述页面数据转换为元素节点,包括:
按照获取的所述网页的页面数据的显示顺序,从获取的所述页面数据中选择预设数量的页面数据;
加载所述预设数量的页面数据,将所述预设数量的页面数据转换为预设数量的元素节点。
4.如权利要求3所述的方法,其特征在于,所述将所述元素节点添加至窗口的展示列中进行显示,包括:
根据窗口的宽度信息和预设的展示列的宽度信息,确定所述窗口中展示列的数量;
按照所述预设数量的页面数据的显示顺序,依次将所述预设数量的元素节点添加至所述窗口的每个展示列中进行显示。
5.如权利要求1所述的方法,其特征在于,所述加载所述网页的新的页面数据并在所述确定的显示位置显示所述网页的新的页面数据,包括:
加载所述网页的新的页面数据,将所述新的页面数据转换为新的元素节点;
将所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据对应的所述新的元素节点添加至所述窗口中显示高度最小的展示列中进行显示;
按照所述网页的新的页面数据的显示顺序,依次将其他的所述新的元素节点添加至所述窗口的每个展示列中进行显示。
6.如权利要求1-5任一项所述的方法,其特征在于,还包括:
存储所述窗口中每个元素节点的高度,以及存储所述窗口中每个展示列的显示高度;
当所述窗口的任一个展示列中的元素节点发生变化时,更新存储的所述展示列的显示高度。
7.一种网页优化处理装置,其特征在于,包括:
加载模块,用于加载网页的页面数据,将所述页面数据转换为元素节点;
显示模块,用于将所述元素节点添加至窗口的展示列中进行显示;
位置确定模块,用于根据所述展示列的显示高度,确定所述网页的新的页面数据的显示位置;
触发模块,用于在检测到对所述网页的新的页面数据的触发操作时,触发所述加载模块加载所述网页的新的页面数据,并由所述显示模块在所述确定的显示位置显示所述网页的新的页面数据;
所述位置确定模块包括:
高度获取单元,用于获取所述窗口中每个元素节点的高度;
计算单元,用于根据所述窗口的每个展示列中的所有元素节点的高度,计算每个展示列的显示高度;
位置确定单元,用于将显示高度最小的展示列确定为所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据的显示位置。
8.如权利要求7所述的装置,其特征在于,还包括:
获取模块,用于在检测到网页请求时,根据所述网页请求携带的URL地址,从服务器获取所请求网页的页面数据和所述页面数据的显示顺序。
9.如权利要求8所 述的装置,其特征在于,所述加载模块包括:
选择单元,用于按照获取的所述网页的页面数据的显示顺序,从获取的所述页面数据中选择预设数量的页面数据;
加载单元,用于加载所述预设数量的页面数据,将所述预设数量的页面数据转换为预设数量的元素节点。
10.如权利要求9所述的装置,其特征在于,所述显示模块包括:
展示列确定单元,用于根据窗口的宽度信息和预设的展示列的宽度信息,确定所述窗口中展示列的数量;
第一显示处理单元,用于按照所述预设数量的页面数据的显示顺序,依次将所述预设数量的元素节点添加至所述窗口的每个展示列中进行显示。
11.如权利要求7所述的装置,其特征在于:
所述加载模块,还用于根据所述触发模块的触发加载所述网页的新的页面数据,将所述新的页面数据转换为新的元素节点;
所述显示模块还包括:
第二显示处理单元,用于将所述网页的新的页面数据中显示顺序位于首位的所述新的页面数据对应的所述新的元素节点添加至所述窗口中显示高度最小的展示列中进行显示,以及按照所述网页的新的页面数据的显示顺序,依次将其他的所述新的元素节点添加至所述窗口的每个展示列中进行显示。
12.如权利要求7-11任一项所述的装置,其特征在于,还包括:
存储模块,存储所述窗口中每个元素节点的高度,以及存储所述窗口中每个展示列的显示高度;
更新模块,用于当所述窗口的任一个展示列中的元素节点发生变化时,更新存储的所述展示列的显示高度。
13.一种客户端,其特征在于,包括如权利要求7-11任一项所述的网页优化处理装置。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310034271.4A CN103970770B (zh) | 2013-01-29 | 2013-01-29 | 一种网页优化处理方法、装置及客户端 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201310034271.4A CN103970770B (zh) | 2013-01-29 | 2013-01-29 | 一种网页优化处理方法、装置及客户端 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN103970770A CN103970770A (zh) | 2014-08-06 |
CN103970770B true CN103970770B (zh) | 2018-10-09 |
Family
ID=51240282
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201310034271.4A Active CN103970770B (zh) | 2013-01-29 | 2013-01-29 | 一种网页优化处理方法、装置及客户端 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN103970770B (zh) |
Families Citing this family (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105512141B (zh) * | 2014-09-26 | 2020-03-03 | 腾讯科技(深圳)有限公司 | 数据加载方法和装置 |
CN104965656A (zh) * | 2015-06-19 | 2015-10-07 | 努比亚技术有限公司 | 页面显示方法及装置 |
CN104965914A (zh) * | 2015-07-06 | 2015-10-07 | 无锡天脉聚源传媒科技有限公司 | 一种页面显示方法及装置 |
CN106126517B (zh) * | 2016-05-31 | 2021-08-31 | 云深互联(北京)科技有限公司 | 将pc端应用页面转换为移动端应用页面的方法及装置 |
CN106202315A (zh) * | 2016-06-30 | 2016-12-07 | 北京奇虎科技有限公司 | 数据处理的方法及装置 |
CN107066524B (zh) * | 2017-02-20 | 2020-01-07 | 平安科技(深圳)有限公司 | 产品项的显示方法和装置 |
CN107133340A (zh) * | 2017-05-18 | 2017-09-05 | 杭州迪普科技股份有限公司 | 一种web页面多行文本框内的信息显示方法和装置 |
CN107220351B (zh) * | 2017-05-31 | 2020-09-29 | 北京京东尚科信息技术有限公司 | 页面留白宽度计算方法、装置、存储介质和电子设备 |
CN107885799A (zh) * | 2017-10-30 | 2018-04-06 | 维沃移动通信有限公司 | 网页信息显示方法及装置 |
CN107844577A (zh) * | 2017-11-08 | 2018-03-27 | 国电南瑞科技股份有限公司 | 一种提升gis图元绘制效率的方法 |
CN108280119A (zh) * | 2017-11-29 | 2018-07-13 | 广州市动景计算机科技有限公司 | 页面生成方法、装置及用户终端 |
CN108804514A (zh) * | 2018-04-25 | 2018-11-13 | 网宿科技股份有限公司 | 一种网页加载方法、服务器和网页加载系统 |
CN110275657A (zh) * | 2019-05-21 | 2019-09-24 | 杭州国文科技有限公司 | 页面显示方法和终端设备 |
CN111723318B (zh) * | 2020-06-09 | 2023-09-01 | 百度在线网络技术(北京)有限公司 | 页面数据处理方法、装置、设备和存储介质 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101261642A (zh) * | 2008-04-10 | 2008-09-10 | 深圳市迅雷网络技术有限公司 | 一种调整互联网页面布局的方法及装置 |
CN101388037A (zh) * | 2008-10-27 | 2009-03-18 | 阿里巴巴集团控股有限公司 | 一种页面布局的方法和装置 |
CN101894168A (zh) * | 2010-06-30 | 2010-11-24 | 优视科技有限公司 | 移动终端网页页面的排版显示方法及系统 |
CN102073650A (zh) * | 2009-11-25 | 2011-05-25 | 阿里巴巴集团控股有限公司 | 一种网页自适应调节的方法和设备 |
CN102117290A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网页中页面元素的方法及系统 |
CN102368193A (zh) * | 2011-08-26 | 2012-03-07 | 百度在线网络技术(北京)有限公司 | 一种用于提供浏览页面的方法与设备 |
CN102375851A (zh) * | 2010-08-23 | 2012-03-14 | 中国移动通信有限公司 | 一种显示页面的方法及设备 |
CN102866993A (zh) * | 2011-07-04 | 2013-01-09 | 联想(北京)有限公司 | 页面数据加载方法、及电子设备 |
-
2013
- 2013-01-29 CN CN201310034271.4A patent/CN103970770B/zh active Active
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101261642A (zh) * | 2008-04-10 | 2008-09-10 | 深圳市迅雷网络技术有限公司 | 一种调整互联网页面布局的方法及装置 |
CN101388037A (zh) * | 2008-10-27 | 2009-03-18 | 阿里巴巴集团控股有限公司 | 一种页面布局的方法和装置 |
CN102073650A (zh) * | 2009-11-25 | 2011-05-25 | 阿里巴巴集团控股有限公司 | 一种网页自适应调节的方法和设备 |
CN102117290A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网页中页面元素的方法及系统 |
CN101894168A (zh) * | 2010-06-30 | 2010-11-24 | 优视科技有限公司 | 移动终端网页页面的排版显示方法及系统 |
CN102375851A (zh) * | 2010-08-23 | 2012-03-14 | 中国移动通信有限公司 | 一种显示页面的方法及设备 |
CN102866993A (zh) * | 2011-07-04 | 2013-01-09 | 联想(北京)有限公司 | 页面数据加载方法、及电子设备 |
CN102368193A (zh) * | 2011-08-26 | 2012-03-07 | 百度在线网络技术(北京)有限公司 | 一种用于提供浏览页面的方法与设备 |
Also Published As
Publication number | Publication date |
---|---|
CN103970770A (zh) | 2014-08-06 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103970770B (zh) | 一种网页优化处理方法、装置及客户端 | |
CN103605739B (zh) | 热力图的显示方法及装置 | |
JP5826266B2 (ja) | ウェブページのネストしたフラグメントキャッシングを処理する方法および装置 | |
AU2011101576A4 (en) | Method and systems for generating and displaying a preview image of a content area | |
JP5536846B2 (ja) | ウェブページの表示方法およびシステム | |
EP2724251B1 (en) | Methods for making ajax web applications bookmarkable and crawlable and devices thereof | |
US20100057847A1 (en) | Method, Device, and system for acquiring a web page | |
CN102884526B (zh) | 在应用窗口中显示项目 | |
CN110209966B (zh) | 一种网页刷新方法、网页系统及电子设备 | |
KR20140012664A (ko) | 웹페이지 재배치 방법 | |
CN112667330B (zh) | 一种页面显示方法及计算机设备 | |
CN104978358B (zh) | 桌面展示网页片段的方法及截取网页片段至桌面展示系统 | |
CN103347089A (zh) | 一种对网站动态资源和静态资源分离加速的方法及装置 | |
CN103618773B (zh) | 热力图的显示方法、装置及系统 | |
CN101751444A (zh) | 网页内容定制系统及方法 | |
CN104423991A (zh) | 在移动终端加载网页、提供网页数据的方法及装置 | |
CN105528369B (zh) | 网页转码方法、装置以及服务器 | |
CN106649299B (zh) | 一种网页区块懒加载的方法和装置 | |
CN111079048B (zh) | 一种页面加载方法及装置 | |
CN104283920A (zh) | 一种网络应用路由的方法、服务器、终端和系统 | |
CN111339456A (zh) | 预加载方法和装置 | |
CN107688650B (zh) | 一种web页面生成方法和装置 | |
CN109255089B (zh) | 基于Html的节点数据处理方法以及系统 | |
CN116521629A (zh) | 文件可视化方法、装置及设备 | |
US9794369B2 (en) | Active web page consolidator |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |