CN107368497A - 一种网页渲染方法及装置 - Google Patents

一种网页渲染方法及装置 Download PDF

Info

Publication number
CN107368497A
CN107368497A CN201610318589.9A CN201610318589A CN107368497A CN 107368497 A CN107368497 A CN 107368497A CN 201610318589 A CN201610318589 A CN 201610318589A CN 107368497 A CN107368497 A CN 107368497A
Authority
CN
China
Prior art keywords
analysis result
webpage
layout
css
tag element
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
CN201610318589.9A
Other languages
English (en)
Other versions
CN107368497B (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.)
ZTE Corp
Original Assignee
ZTE Corp
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 ZTE Corp filed Critical ZTE Corp
Priority to CN201610318589.9A priority Critical patent/CN107368497B/zh
Publication of CN107368497A publication Critical patent/CN107368497A/zh
Application granted granted Critical
Publication of CN107368497B publication Critical patent/CN107368497B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

本发明实施例提供了一种网页渲染方法及装置,所述方法包括:获取网页的主资源文件,解析所述主资源文件得到所述网页的CSS文件个数N,所述N为大于0的整数;在所述N大于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述i取值为1、……、N;根据当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;根据所述布局结果i,对所述网页进行绘制显示。

Description

一种网页渲染方法及装置
技术领域
本发明涉及计算机领域,尤其涉及一种网页渲染方法及装置。
背景技术
目前,浏览器对网页进行渲染的效果主要是依赖于网页自身的层叠样式表(Cascading Style Sheets,CSS),所述CSS用于提供网页的样式结构(例如输入框的位置和大小等)。大部分情况下,浏览器对网页进行渲染的过程如下:浏览器接收到网页主资源后,解析主资源得到需要继续加载的CSS文件的序列,并按照该序列依次加载这些CSS文件,浏览器每接收到一个CSS文件就对该CSS文件进行样式解析,然后按照解析结果进行布局处理,等所有CSS文件对应的接收、解析、布局过程结束后,浏览器才会根据最后的布局结果进行网页的绘制,并在浏览窗口显示出绘制完成的网页。
上述渲染过程中,浏览器要等所有CSS文件对应的接收、解析、布局过程结束后,才会根据最后的布局结果进行网页的绘制,如果CSS文件较多,浏览器接收完成所有的CSS就需要耗费较长的时间,且还要进行所有CSS文件的解析和对应的网页布局后才进行网页的绘制,这就会导致浏览器在加载网页时出现白屏并等待很长时间才出现网页画面的情况。
为了避免出现长时间的白屏现象,现有一种常见的优化方法是浏览器接收到网页主资源后,不等CSS文件的接收、解析、布局,而是直接根据主资源按照缺省样式对应的布局结果进行网页的绘制和显示,等完成所有的CSS文件解析后的样式布局后,再重新进行网页绘制和显示。
上述优化方法虽然可以避免出现长时间的白屏现象,但是,采用缺省样式对应的布局结果对网页进行绘制,容易出现布局混乱的网页,如网页上有乱码等。
发明内容
为解决现有存在的技术问题,本发明实施例提供一种网页渲染方法及装置,可以即避免长时间的白屏又避免布局混乱。
为达到上述目的,本发明实施例的技术方案是这样实现的:
一种网页渲染方法,所述方法包括:
获取网页的主资源文件,解析所述主资源文件得到所述网页的CSS文件个数N,所述N为大于0的整数;
在所述N大于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述i取值为1、……、N;
根据当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;
根据所述布局结果i,对所述网页进行绘制显示。
上述方案中,所述根据当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i,包括:
确定所述第i个解析结果对应的第i组标签元素;
在所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时,根据当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
上述方案中,所述方法还包括:
在所述第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时,存储所述第i个解析结果。
上述方案中,所述方法还包括:
在解析所述主资源文件时,还得到文档对象模型DOM树,所述DOM树中记录有对象对应的标签元素;
所述解析结果中包括样式对象;相应地,所述确定所述第i个解析结果对应的第i组标签元素,包括:
查找所述DOM树,确定所述第i个解析结果中的样式对象对应的标签元素。
上述方案中,所述方法还包括:
在所述N小于等于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果;
根据所述第1至N个解析结果进行布局处理,获取最终的布局结果;
根据所述最终的布局结果,对所述网页进行绘制显示。
一种网页渲染装置,所述装置包括:
获取模块,用于获取网页的主资源文件以及第i个CSS文件;
解析模块,用于解析所述获取模块获取的所述主资源文件得到所述网页的CSS文件个数N,并在所述获取模块获取到所述第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述N为大于0的整数,所述i取值为1、……、N;
处理模块,用于确定所述解析模块得到的所述N是否大于预设阈值;
布局模块,用于在所述处理模块确定所述N大于预设阈值时,根据所述解析模块当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;
绘制模块,用于根据所述布局模块获取的所述布局结果i,对所述网页进行绘制显示。
上述方案中,所述处理模块,还用于确定所述解析模块获取的所述第i个解析结果对应的第i组标签元素,并确定所述第i组标签元素中是否包括预设的大范围标签元素以及所述i是否等于所述N;
所述布局模块,具体用于在所述处理模块确定所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时,根据所述解析模块当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
上述方案中,所述装置还包括:存储模块,其中,
所述存储模块,用于在所述处理模块确定第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时,存储所述第i个解析结果。
上述方案中,所述解析结果中包括样式对象;
所述解析模块,还用于在解析所述主资源文件时,得到文档对象模型DOM树,所述DOM树中记录有对象对应的标签元素;
相应地,所述处理模块,用于查找所述DOM树,确定所述第i个解析结果中的样式对象对应的标签元素。
上述方案中,所述布局模块,还用于在所述处理模块确定所述N小于等于预设阈值时,根据所述第1至N个解析结果进行布局处理,获取最终的布局结果;
所述绘制模块,还用于根据所述布局模块获取的最终的布局结果,对所述网页进行绘制显示。
本发明实施例提供了一种网页渲染方法及装置,在获取网页的主资源文件后,解析所述主资源文件得到所述网页的CSS文件个数N,在所述N大于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述i取值为1、……、N;根据当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;根据所述布局结果i,对所述网页进行绘制显示;即在网页对应的CSS文件过多的情况下,终端上的渲染引擎不再等所有的CSS文件都完成解析,并按照解析结果进行布局处理后再进行绘制,而是每获取一个CSS文件解析出一个解析结果后,就根据当前已获取的所有解析结果进行布局处理,获取一个布局结果,并根据该布局结果,对网页进行绘制,在终端浏览器的浏览窗口显示绘制的网页,避免由于CSS文件过多出现的长时间白屏现象,并且,终端是根据该网页对应的部分CSS文件进行的网页绘制,不会出现布局混乱的现象。
附图说明
图1为本发明实施例1提供的一种网页渲染方法的流程示意图;
图2为本发明实施例2提供的一种网页渲染方法的流程示意图;
图3为本发明实施例3提供的一种网页渲染装置的结构框图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述。
实施例1
本发明实施例提供了一种网页渲染方法,如图2所示,本实施例方法的处理流程包括以下步骤:
步骤S101、获取网页的主资源文件,解析所述主资源文件得到所述网页的CSS文件个数N。
这里,用户在终端(如智能手机、电脑等)上进行一操作打开某网页时,终端响应用户的操作,获取该网页的标识,并将该网页的标识携带在资源请求中发送给服务器,服务器接收到该资源请求后,就会根据该网页的标识向终端返回该网页的主资源文件。
这里,终端获取到该网页的主资源文件后,会对所述主资源文件进行解析,从解析后的主资源文件中,终端能够获取到所述网页对应的CSS文件个数N,所述N为大于0的整数。
示例地,以当前大部分网页的主资源文件-超级文本标记语言(Hyper TextMarkup Language,HTML)文件为例,解析后的HTML文件的文件头中记录有CSS文件的信息如:<link rel=“stylesheet”type=“text/css”href=“http://xxx.css”/>,该文件头中记录有几项上述示例的信息,就表明其对应的网页中有几个CSS文件。
步骤S102、在所述N大于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果。
这里,所述预设阈值是经过大量的网页样本数据统计所得,当网页的CSS文件个数N大于所述预设阈值时,该网页在加载过程中会出现长时间白屏的现象。
这里,承接上述示例,终端从HTML文件的文件头中获取到CSS文件的信息中包括各CSS文件的ID,终端获取到各CSS文件的ID后,会将各CSS文件的ID发送给服务器,请求服务器返回这些CSS文件。服务器接收到各CSS文件的ID后,就会向终端返回这些ID对应的CSS文件,终端接收服务器返回的各CSS文件。
这里,终端每获取到一个CSS文件时,就解析该CSS文件,获取该CSS文件对应的解析结果,即所述i取值为1、……、N,终端获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述i取值为1、……、N。
步骤S103、根据当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
步骤S104、根据所述布局结果i,对所述网页进行绘制显示。
这里,由于网页对应的CSS文件个数N大于预设阈值,即网页外带的CSS文件过多,此时,终端不再等所有的CSS文件都完成解析,并按照解析结果进行布局处理后再进行绘制,而是每解析出一个解析结果,就根据当前已获取的所有解析结果进行布局处理,获取一个布局结果,并根据该布局结果,对网页进行绘制,并在终端浏览器的浏览窗口显示绘制的网页。
示例地,所述预设阈值可以是2,假设所述N为3,此时,终端获取到第i=1个CSS文件后,就直接执行步骤S102-步骤S104,进行网页绘制:终端解析所述第1个CSS文件获取第1个解析结果,根据当前已获取的第1个解析结果进行布局处理,获取布局结果1,并根据该布局结果1,对网页进行绘制。终端在获取到第i=2个CSS文件后,也执行步骤S102-步骤S104,根据已获取的两个CSS文件再次进行网页绘制;终端在获取到第i=3=N个CSS文件后,也执行步骤S102-步骤S104,根据已获取的三个CSS文件进行第三次的网页绘制。
这里,第一次和第二次绘制的网页采用的是该网页对应部分CSS文件进行的绘制,每次绘制后显示的网页是该网页部分已布局好的区域,故不会出现乱码等布局混乱的页面;第三次网页绘制采用的是该网页对应的全部3个CSS文件进行的绘制,此时绘制的网页为最终显示的全部网页。
本实施例中,在网页对应的CSS文件过多的情况下,终端不再等所有的CSS文件都完成解析,并按照解析结果进行布局处理后再进行绘制,而是每获取一个CSS文件解析出一个解析结果后,就根据当前已获取的所有解析结果进行布局处理,获取一个布局结果,并根据该布局结果,对网页进行绘制,在终端浏览器的浏览窗口显示绘制的网页,避免由于CSS文件过多出现的长时间白屏现象,并且,终端是根据该网页对应的部分CSS文件进行的网页绘制,不会出现布局混乱的现象。
实施例2
基于前述实施例,本发明实施例提供了一种网页渲染方法,如图2所示,本实施例方法的处理流程包括以下步骤:
步骤S201、终端获取网页的主资源文件,解析所述主资源文件得到所述网页的CSS文件个数N。
这里,所述N为大于0的整数。
步骤S202、终端判断所述N是否大于预设阈值。
这里,在所述N小于等于预设阈值时,进行步骤S203和S204;在所述N大于预设阈值时,进行步骤S203和步骤S205至208。
步骤S203、终端获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果。
这里,终端获取第i=1个CSS文件时,解析所述第i=1个CSS文件,获取第i=1个解析结果。
步骤S204、终端根据所述第1至N个解析结果进行布局处理,获取最终的布局结果。
这里,假设所述N为2,所述预设阈值为2,N等于2,则终端获取第i=1个CSS文件时,解析所述第i=1个CSS文件,获取第i=1个解析结果;获取所述第i=2个CSS文件时,解析所述第i=2个CSS文件,获取第i=2个解析结果;终端根据所述第1至2个解析结果即第1个解析结果和第2个解析结果进行布局处理,获取最终的布局结果。即在所述N小于等于预设阈值时,终端可以按照现有的方法在接收和解析完全部的CSS文件后,根据所有CSS文件的解析结果进行布局处理,获得最终的布局结果。
这里,由于所述网页的CSS文件个数小于等于预设阈值,即网页外带的CSS文件个数很少,终端接收并解析完全部的CSS文件后进行布局处理耗费时间较少,不会出现长时间的白屏现象。
步骤S205、终端确定所述第i个解析结果对应的第i组标签元素。
这里,终端在步骤S201解析所述主资源文件时,还得到文档对象模型(Document Object Model,DOM)树,所述DOM树中记录有对象对应的标签元素;终端在对所述CSS文件进行解析时,获取的解析结果记录有本CSS文件中的样式选择器,该样式选择器用于记录某特定样式的作用对象即样式对象,这样,终端查找所述DOM树,确定所述第i个解析结果中的样式对象对应的标签元素。
这里,假设所述N为3,所述预设阈值为2,N大于2,则终端获取第i=1个CSS文件时,解析所述第i=1个CSS文件,获取第i=1个解析结果,确定所述第i=1个解析结果对应的第i=1组标签元素。
步骤S206、终端判断是否满足所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N。
这里,预设的大范围标签元素指布局范围较大的容器类元素,如BODY、SECTION、HEADER、FOOTER等标签元素。
这里,若所述第i=1组标签元素中不包括预设的大范围标签元素且所述i=1不等于所述N,则进行步骤S207。若所述第i=1组标签元素中包括预设的大范围标签元素或所述i=1等于所述N,则进行步骤S208至S209。
步骤S207、终端存储所述第i个解析结果,等待终端获取所述下一个解析结果。
这里,若所述第i组标签元素中不包括预设的大范围标签元素且所述i=1不等于所述N,则终端存储所述第i=1个解析结果,由于所述i不等于N,即终端还未解析完该网页所有的CSS文件,故终端等待获取所述下一个解析结果,并不执行步骤S208进行网页布局。
步骤S208、终端根据当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
这里,所述第i=1组标签元素中包括预设的大范围标签元素,则根据当前已获取的第1个解析结果进行布局处理,获取布局结果1。
步骤S209、终端根据布局结果,对所述网页进行绘制显示。
这里,假设N=2,终端进行步骤S204获取最终的布局结果后,根据所述最终的布局结果对所述网页进行绘制显示。
或者,承接上述示例N=3,终端进行步骤S208,获取布局结果1后,根据所述布局结果1对所述网页进行绘制显示。
当然,在N=3的情况下,终端获取第i=2个CSS文件后,终端进行步骤S202获取第i=2个CSS文件对应的第i=2个解析结果,由于N=3大于预设阈值2,故终端进行步骤S205确定所述第i=2个解析结果对应的第i=2组标签元素,所述第i=2组标签元素中不包括预设的大范围标签元素且所述i=2不等于所述N=3,故终端进行步骤S207存储所述第i=2个解析结果。
终端获取第i=3个CSS文件后,终端进行步骤S202获取第i=3个CSS文件对应的第i=3个解析结果,由于N=3大于预设阈值2,故终端进行步骤S205确定所述第i=3个解析结果对应的第i=2组标签元素,所述第i=2组标签元素中不包括预设的大范围标签元素但所述i等于所述N,即所有CSS文件已解析完毕,故终端直接进行步骤S208根据当前已获取的第1至i=3个解析结果,即第1个解析结果、第2个解析结果和第3个解析结果进行布局处理,获取布局结果i=3。终端获取布局结果i=3后,根据所述布局结果i=3对所述网页进行绘制显示,此时显示的网页为最终的完整的网页;网页渲染流程结束。
本实施例中,在网页对应的CSS文件过多的情况下,终端不再等所有的CSS文件都完成解析,并按照解析结果进行布局处理后再进行绘制,而是每获取一个CSS文件解析出一个解析结果后,如果解析结果中包含有布局范围较大的标签元素,则终端就根据当前已获取的所有解析结果进行布局处理,获取一个布局结果,并根据该布局结果,对网页进行绘制,在终端浏览器的浏览窗口显示绘制的网页,避免由于CSS文件过多出现的长时间白屏现象,并且,终端是根据该网页对应的部分CSS文件进行的网页绘制,不会出现布局混乱的现象;另外,终端不用每接收到一个CSS文件就做布局处理和绘制操作,而是只在解析结果中包含有布局范围较大的标签元素时,才进行布局处理和绘制操作,减少了布局和绘制的次数,达到省电的目的。
实施例3
本发明实施例提供了一种网页渲染装置,如图3所示,所述装置包括获取模块301,解析模块302,处理模块303,布局模块304,绘制模块305,其中:
获取模块301,用于获取网页的主资源文件以及第i个CSS文件;
解析模块302,用于解析所述获取模块301获取的所述主资源文件得到所述网页的CSS文件个数N,并在所述获取模块301获取到所述第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述N为大于0的整数,所述i取值为1、……、N;
处理模块303,用于确定所述解析模块302得到的所述N是否大于预设阈值;
布局模块304,用于在所述处理模块303确定所述N大于预设阈值时,根据所述解析模块302当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;
绘制模块305,用于根据所述布局模块304获取的所述布局结果i,对所述网页进行绘制显示。
在本发明的其他实施例中,所述处理模块303,还用于确定所述解析模块302获取的所述第i个解析结果对应的第i组标签元素,并确定所述第i组标签元素中是否包括预设的大范围标签元素以及所述i是否等于所述N;
所述布局模块304,具体用于在所述处理模块303确定所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时,根据所述解析模块302当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
在本发明的其他实施例中,所述装置还包括:存储模块,其中,
所述存储模块,用于在所述处理模块303确定第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时,存储所述第i个解析结果。
在本发明的其他实施例中,所述解析结果中包括样式对象;
所述解析模块302,还用于在解析所述主资源文件时,得到文档对象模型DOM树,所述DOM树中记录有对象对应的标签元素;
相应地,所述处理模块303,用于查找所述DOM树,确定所述第i个解析结果中的样式对象对应的标签元素。
在本发明的其他实施例中,所述布局模块304,还用于在所述处理模块303确定所述N小于等于预设阈值时,根据所述第1至N个解析结果进行布局处理,获取最终的布局结果;
所述绘制模块305,还用于根据所述布局模块304获取的最终的布局结果,对所述网页进行绘制显示。
在实际应用中,所述获取模块301,解析模块302,处理模块303,布局模块304,绘制模块305可以由位于终端上的中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)或现场可编程门阵列(FPGA)等器件实现。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述,仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。

Claims (10)

1.一种网页渲染方法,其特征在于,所述方法包括:
获取网页的主资源文件,解析所述主资源文件得到所述网页的CSS文件个数N,所述N为大于0的整数;
在所述N大于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述i取值为1、……、N;
根据当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;
根据所述布局结果i,对所述网页进行绘制显示。
2.根据权利要求1所述的方法,其特征在于,所述根据当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i,包括:
确定所述第i个解析结果对应的第i组标签元素;
在所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时,根据当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
3.根据权利要求2所述的方法,其特征在于,所述方法还包括:
在所述第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时,存储所述第i个解析结果。
4.根据权利要求2所述的方法,其特征在于,所述方法还包括:
在解析所述主资源文件时,还得到文档对象模型DOM树,所述DOM树中记录有对象对应的标签元素;
所述解析结果中包括样式对象;相应地,所述确定所述第i个解析结果对应的第i组标签元素,包括:
查找所述DOM树,确定所述第i个解析结果中的样式对象对应的标签元素。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在所述N小于等于预设阈值的情况下,获取第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果;
根据所述第1至N个解析结果进行布局处理,获取最终的布局结果;
根据所述最终的布局结果,对所述网页进行绘制显示。
6.一种网页渲染装置,其特征在于,所述装置包括:
获取模块,用于获取网页的主资源文件以及第i个CSS文件;
解析模块,用于解析所述获取模块获取的所述主资源文件得到所述网页的CSS文件个数N,并在所述获取模块获取到所述第i个CSS文件时,解析所述第i个CSS文件,获取所述第i个CSS文件对应的第i个解析结果,所述N为大于0的整数,所述i取值为1、……、N;
处理模块,用于确定所述解析模块得到的所述N是否大于预设阈值;
布局模块,用于在所述处理模块确定所述N大于预设阈值时,根据所述解析模块当前已获取的第1到第i个解析结果进行布局处理,获取布局结果i;
绘制模块,用于根据所述布局模块获取的所述布局结果i,对所述网页进行绘制显示。
7.根据权利要求6所述的装置,其特征在于,
所述处理模块,还用于确定所述解析模块获取的所述第i个解析结果对应的第i组标签元素,并确定所述第i组标签元素中是否包括预设的大范围标签元素以及所述i是否等于所述N;
所述布局模块,具体用于在所述处理模块确定所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时,根据所述解析模块当前已获取的第1至i个解析结果进行布局处理,获取布局结果i。
8.根据权利要求7所述的装置,其特征在于,所述装置还包括:存储模块,其中,
所述存储模块,用于在所述处理模块确定第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时,存储所述第i个解析结果。
9.根据权利要求7所述的方法,其特征在于,所述解析结果中包括样式对象;
所述解析模块,还用于在解析所述主资源文件时,得到文档对象模型DOM树,所述DOM树中记录有对象对应的标签元素;
相应地,所述处理模块,用于查找所述DOM树,确定所述第i个解析结果中的样式对象对应的标签元素。
10.根据权利要求6所述的装置,其特征在于,
所述布局模块,还用于在所述处理模块确定所述N小于等于预设阈值时,根据所述第1至N个解析结果进行布局处理,获取最终的布局结果;
所述绘制模块,还用于根据所述布局模块获取的最终的布局结果,对所述网页进行绘制显示。
CN201610318589.9A 2016-05-12 2016-05-12 一种网页渲染方法及装置 Active CN107368497B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610318589.9A CN107368497B (zh) 2016-05-12 2016-05-12 一种网页渲染方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610318589.9A CN107368497B (zh) 2016-05-12 2016-05-12 一种网页渲染方法及装置

Publications (2)

Publication Number Publication Date
CN107368497A true CN107368497A (zh) 2017-11-21
CN107368497B CN107368497B (zh) 2022-09-13

Family

ID=60304109

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610318589.9A Active CN107368497B (zh) 2016-05-12 2016-05-12 一种网页渲染方法及装置

Country Status (1)

Country Link
CN (1) CN107368497B (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102915375A (zh) * 2012-11-08 2013-02-06 山东大学 一种基于布局分区的网页加载方法
CN103034736A (zh) * 2012-12-27 2013-04-10 深圳Tcl新技术有限公司 基于webkit内核的浏览器及其处理方法
CN104050190A (zh) * 2013-03-14 2014-09-17 腾讯科技(上海)有限公司 一种关系链数据处理的方法和系统、客户端
CN104731815A (zh) * 2013-12-23 2015-06-24 腾讯科技(深圳)有限公司 一种网页元素的绘制方法及装置
CN104850560A (zh) * 2014-02-18 2015-08-19 北京京东尚科信息技术有限公司 一种实时加载网页中业务数据的方法和系统
CN105528389A (zh) * 2015-11-09 2016-04-27 上海二三四五网络科技有限公司 一种基于手机浏览器内核的逻辑控制方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102915375A (zh) * 2012-11-08 2013-02-06 山东大学 一种基于布局分区的网页加载方法
CN103034736A (zh) * 2012-12-27 2013-04-10 深圳Tcl新技术有限公司 基于webkit内核的浏览器及其处理方法
CN104050190A (zh) * 2013-03-14 2014-09-17 腾讯科技(上海)有限公司 一种关系链数据处理的方法和系统、客户端
CN104731815A (zh) * 2013-12-23 2015-06-24 腾讯科技(深圳)有限公司 一种网页元素的绘制方法及装置
CN104850560A (zh) * 2014-02-18 2015-08-19 北京京东尚科信息技术有限公司 一种实时加载网页中业务数据的方法和系统
CN105528389A (zh) * 2015-11-09 2016-04-27 上海二三四五网络科技有限公司 一种基于手机浏览器内核的逻辑控制方法及装置

Also Published As

Publication number Publication date
CN107368497B (zh) 2022-09-13

Similar Documents

Publication Publication Date Title
CN109614569B (zh) 页面渲染方法、装置及智能终端
US9317622B1 (en) Methods and systems for fragmenting and recombining content structured language data content to reduce latency of processing and rendering operations
US9262401B2 (en) Method and system for providing representative phrase
US9639631B2 (en) Converting XML to JSON with configurable output
CN103577597B (zh) 基于当前浏览页面的关键词搜索系统
US10515142B2 (en) Method and apparatus for extracting webpage information
CN103577596B (zh) 基于当前浏览页面的关键词搜索方法及装置
CN103577595B (zh) 基于当前浏览页面的关键词推送方法及装置
CN105205080B (zh) 冗余文件清理方法、装置和系统
TWI592807B (zh) Method and device for web style address merge
CN107357817B (zh) 一种面向json的网页模块化设计及其异步加载方法
CN103412890A (zh) 一种网页加载方法和装置
CN104765760B (zh) 一种基于json格式的页面生成和显示方法
CN110941950B (zh) 接口文档的生成方法、装置、服务器及存储介质
CN108090069A (zh) 一种在浏览器中显示网页资源的方法和装置
CN109710771A (zh) 表格信息提取方法、装置和存储介质
CN105447198A (zh) 页面脚本便捷导入的方法及装置
CN109543128A (zh) 一种基于编程语言的前端框架项目实现方法及电子设备
CN105528369B (zh) 网页转码方法、装置以及服务器
US20120166412A1 (en) Super-clustering for efficient information extraction
CN105447072B (zh) 可配置的界面框架及利用该框架的搜索方法和系统
CN106033387B (zh) 测试flash内部控件的方法和装置
CN114791988A (zh) 一种基于浏览器的pdf文件解析方法、系统、存储介质
CN105404672B (zh) 网页数据存储和操作的系统及方法
CN107547944A (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
GR01 Patent grant
GR01 Patent grant