CN114065088A - 网页解析方法、系统、设备及计算机可读存储介质 - Google Patents
网页解析方法、系统、设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN114065088A CN114065088A CN202111261572.1A CN202111261572A CN114065088A CN 114065088 A CN114065088 A CN 114065088A CN 202111261572 A CN202111261572 A CN 202111261572A CN 114065088 A CN114065088 A CN 114065088A
- Authority
- CN
- China
- Prior art keywords
- target
- webpage
- bytecode
- server
- web page
- 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
- 238000000034 method Methods 0.000 title claims abstract description 84
- 238000004458 analytical method Methods 0.000 claims abstract description 32
- 238000012545 processing Methods 0.000 claims description 4
- 238000009877 rendering Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 abstract description 21
- 230000004304 visual acuity Effects 0.000 abstract 1
- 238000004891 communication Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000006872 improvement Effects 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 238000010561 standard procedure Methods 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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/901—Indexing; Data structures therefor; Storage structures
- G06F16/9027—Trees
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/43—Checking; Contextual analysis
- G06F8/436—Semantic checking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Computational Linguistics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种网页解析方法、系统、设备及计算机可读存储介质,所述方法包括:获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。上述方法通过将本地浏览器加载网页时最为耗时的网页脚本代码解析操作搬移到服务器上,利用服务器的高性能特性,在网页脚本代码在通过服务器传输本地浏览器过程之前就对其进行解析,使得本地浏览器能够直接从服务器上接收到已解析的代码并直接执行,而无需再对其进行解析。由于服务器的解析能力势必强于本地浏览器,从而大大优化了网页的打开速度。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种网页解析方法、系统、设备及计算机可读存储介质。
背景技术
随着数字通信技术的快速发展,数字电视应用也越来越广泛。目前的海外数字电视应用,例如HBBTV(Hybrid Broadcast/Broadband TV)、FVP(FreeView Play)等,基本都是以网页方式,通过浏览器解析应用页面对应的Javascript代码以呈现出来。而随着5G时代来临,网速已经不再是影响网页开发速度的瓶颈。通过Google devtools工具发现,在目前网页打开过程中,最耗时的就是浏览器将JavaScript解析成字节码的环节,若是需要打开一个复杂的应用,在此环节上的耗时可以达到4秒左右。上述情况反映出海外数字电视的应用页面打开耗时较长的问题。
发明内容
本发明的主要目的在于提供一种网页解析方法、系统、设备及计算机可读存储介质,旨在解决海外数字电视的应用页面打开耗时较长的技术问题。
为实现上述目的,本发明第一方面提供一种网页解析方法,所述网页解析方法应用于服务器,所述网页解析方法包括:
获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。
可选地,所述解析所述目标脚本代码得到目标字节码的步骤包括:
基于所述服务器中安插的脚本解析器,将所述目标脚本代码进行语义及语法解析,输出抽象语法树;
利用所述脚本解析器中的解释器将所述抽象语法树转换为所述目标字节码。
可选地,所述将所述目标字节码发送至本地浏览器的步骤包括:
将所述目标字节码基于所述本地浏览器中预设的字节码接收接口发送至本地浏览器。
可选地,所述获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码的步骤之后,还包括:
将所述目标字节码进行备份处理。
为实现上述目的,本发明第二方面还提供一种网页解析方法,所述网页解析方法应用于本地浏览器,所述网页解析方法包括:
获取目标网页的主资源,并将所述主资源解析成DOM树;
接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
基于所述CSSOM树绘制显示所述目标网页。
可选地,所述接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树的步骤包括:
接收由所述服务器发送的目标字节码以及所述目标网页对应的层叠样式表;
执行所述目标字节码,并基于所述层叠样式表对所述DOM树添加样式,生成所述CSSOM树。
可选地,所述基于所述CSSOM树绘制显示所述目标网页的步骤包括:
从所述CSSOM树的根节点开始遍历所述CSSOM树中的每一可见节点,将每一所述可见节点进行布局并绘制,以显示所述目标网页。
此外,为实现上述目的,本发明第三方面还提供一种网页解析系统,所述网页解析系统包括服务器和本地浏览器,所述网页解析系统执行以下操作:
所述本地浏览器获取目标网页的主资源,并将所述主资源解析成DOM树;
所述服务器获取所述目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
所述服务器将所述目标字节码发送至所述本地浏览器;
所述本地浏览器接收并执行由所述服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
所述本地浏览器基于所述CSSOM树绘制显示所述目标网页。
此外,为实现上述目的,本发明第四方面还提供一种网页解析装置,所述网页解析装置设于服务器,所述网页解析装置包括:
脚本代码解析模块,用于获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
目标代码发送模块,用于将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。
可选地,所述脚本代码解析模块包括:
语法解析单元,用于基于所述服务器中安插的脚本解析器,将所述目标脚本代码进行语义及语法解析,输出抽象语法树;
代码转换单元,用于利用所述脚本解析器中的解释器将所述抽象语法树转换为所述目标字节码。
可选地,所述目标代码发送模块包括:
接口发送单元,用于将所述目标字节码基于所述本地浏览器中预设的字节码接收接口发送至本地浏览器。
可选地,所述网页解析装置还包括:
代码备份模块,用于将所述目标字节码进行备份处理。
此外,为实现上述目的,本发明第五方面还提供一种网页解析装置,所述网页解析装置设于本地浏览器,所述网页解析装置包括:
网页资源解析模块,用于获取目标网页的主资源,并将所述主资源解析成DOM树;
目标代码执行模块,用于接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
目标网页显示模块,用于基于所述CSSOM树绘制显示所述目标网页。
可选地,所述目标代码执行模块包括:
网页信息接收单元,用于接收由所述服务器发送的目标字节码以及所述目标网页对应的层叠样式表;
网页样式添加单元,用于执行所述目标字节码,并基于所述层叠样式表对所述DOM树添加样式,生成所述CSSOM树。
可选地,所述目标网页显示模块包括:
目标网页绘制单元,用于从所述CSSOM树的根节点开始遍历所述CSSOM树中的每一可见节点,将每一所述可见节点进行布局并绘制,以显示所述目标网页。
此外,为实现上述目的,本发明第六方面还提供一种计算机设备,所述计算机设备包括:服务器和/或本地浏览器,所述计算机设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序,所述程序被所述处理器执行时实现如上述第一方面任一所述的网页解析方法的步骤,或者所述程序被所述处理器执行时实现如上述第二方面任一所述的网页解析方法的步骤。
此外,为实现上述目的,本发明第七方面还提供一种计算机可读存储介质,所述计算机可读存储介质上存储有程序,所述程序被处理器执行时实现如上述第一方面任一所述的网页解析方法的步骤,或者所述程序被所述处理器执行时实现如上述第二方面任一所述的网页解析方法的步骤。
本发明提供一种网页解析方法、系统、设备及计算机可读存储介质。所述网页解析方法通过将本地浏览器加载网页时最为耗时的网页脚本代码解析操作搬移到服务器上,利用服务器的高性能特性,在网页脚本代码在通过服务器传输本地浏览器过程之前就对其进行解析,使得本地浏览器能够直接从服务器上接收到已解析的代码并直接执行,而无需再对其进行解析。由于服务器的解析能力势必强于本地浏览器,因此能够优化网页打开速度,从而解决了海外数字电视的应用页面打开耗时较长的技术问题。另外,通过上述方法,字节码相对于原始的脚本代码而言其数据量大小也会相应减少,因此能够降低网络开销。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的网页解析设备结构示意图;
图2为本发明网页解析方法第一实施例的流程示意图;
图3为本发明网页解析方法第二实施例中的改进前后服务器与本地浏览器上的网页解析流程示意图;
图4为本发明网页解析方法第三实施例的流程示意图;
图5为本发明网页解析方法第四实施例中的网页加载流程图;
图6为本发明网页解析装置(设于服务器)的功能模块示意图;
图7为本发明网页解析装置(设于本地浏览器)的功能模块示意图。
本发明目的的实现、功能特点及优点将结合实施例,参照附图做进一步说明。
具体实施方式
应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
如图1所示,图1是本发明实施例方案涉及的硬件运行环境的网页解析设备结构示意图。
如图1所示,该网页解析设备可以包括:处理器1001,例如CPU,通信总线1002,用户接口1003,网络接口1004,存储器1005。其中,通信总线1002用于实现这些组件之间的连接通信。可选的用户接口1003可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器,也可以是稳定的存储器(non-volatile memory)。存储器1005可选的还可以是独立于前述处理器1001的存储设备。
本领域技术人员可以理解,图1中示出的网页解析设备结构并不构成对网页解析设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
如图1所示,作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及网页解析程序。
在图1所示的网页解析设备中,网络接口1004主要用于连接后台服务器,与后台服务器进行数据通信;用户接口1003主要用于连接客户端(用户端),与客户端进行数据通信;而处理器1001可以用于调用存储器1005中存储的网页解析程序,并执行本发明实施例提供的网页解析方法。
基于上述硬件结构,提出本发明网页解析方法的各个实施例。
随着数字通信技术的快速发展,数字电视应用也越来越广泛。目前的海外数字电视应用,例如HBBTV(Hybrid Broadcast/Broadband TV)、FVP(FreeView Play)等,基本都是以网页方式,通过浏览器解析应用页面对应的Javascript代码以呈现出来。而随着5G时代来临,网速已经不再是影响网页开发速度的瓶颈。通过Google devtools工具发现,在目前网页打开过程中,最耗时的就是浏览器将JavaScript解析成字节码的环节,若是需要打开一个复杂的应用,在此环节上的耗时可以达到4秒左右。上述情况反映出海外数字电视的应用页面打开耗时较长的问题。
为解决上述技术问题,本发明提供一种网页解析方法,即通过将本地浏览器加载网页时最为耗时的网页脚本代码解析操作搬移到服务器上,利用服务器的高性能特性,在网页脚本代码在通过服务器传输本地浏览器过程之前就对其进行解析,使得本地浏览器能够直接从服务器上接收到已解析的代码并直接执行,而无需再对其进行解析。由于服务器的解析能力势必强于本地浏览器,因此能够优化网页打开速度,从而解决了海外数字电视的应用页面打开耗时较长的技术问题。另外,通过上述方法,字节码相对于原始的脚本代码而言其数据量大小也会相应减少,因此能够降低网络开销。
参照图2,图2为网页解析方法第一实施例的流程示意图。
本发明第一实施例提供一种网页解析方法,所述网页解析方法应用于服务器,所述网页解析方法包括:
步骤S10,获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
在本实施例中,目标网页指的是服务器的当前网页解析任务中需要对其脚本代码进行解析的网页。例如在海外数字电视应用场景中,目标网页即指的是海外数字电视应用的应用页面。同一网页解析任务中的目标网页即可为一个也可为多个,本实施例不作具体限制。目标脚本代码指的是上述目标网页所对应的脚本代码。例如在海外数字电视应用场景中,应用页面所对应的脚本代码即为JavaScript源代码。目标字节码指的是对上述目标脚本代码进行解析之后所得到的字节码。字节码指的是是一种包含执行程序,由一序列op代码/数据对组成的二进制文件。
传统的服务器只是一个存储数据以及带有更新机制的数据库,本地浏览器从服务器获取到网页的脚本代码后,必须经过复杂的解析,将其转换成机器识别字节码才可以运行。而目前本地浏览器的解析能力完全跟随硬件性能而决定的。而本申请中的服务器则具备脚本源代码解析功能。
服务器在接收到脚本代码获取指令时,基于该指令确定目标脚本代码的获取路径,然后根据此获取路径获取到目标网页的目标脚本代码。然后服务器利用自身的高性能对目标脚本代码进行快速解析,得到由目标脚本代码解析之后的目标字节码。
步骤S20,将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。
在本实施例中,本地浏览器指的是需要对目标网页进行加载显示的浏览器。
服务器在运用自身解析功能将目标脚本代码解析成目标字节码后,将目标字节码传输给本地浏览器。本地浏览器在接收到服务器发送的目标字节码时,即可直接执行该目标字节码以进行目标页面的加载流程,而不需要再对其进行解析操作。
作为另一实施方式,服务器还可在解析出目标字节码后,再进一步将目标字节码编译为机器可直接识别的目标机器码,以将目标机器码直接传输给本地浏览器,本地浏览器在接收到目标机器码后,即可直接识别并执行目标机器码,以对目标网页进行加载并显示在屏幕上以供用户浏览。
在本实施例中,通过获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。通过上述方式,本发明通过将本地浏览器加载网页时最为耗时的网页脚本代码解析操作搬移到服务器上,利用服务器的高性能特性,在网页脚本代码在通过服务器传输本地浏览器过程之前就对其进行解析,使得本地浏览器能够直接从服务器上接收到已解析的代码并直接执行,而无需再对其进行解析。由于服务器的解析能力势必强于本地浏览器,因此能够优化网页打开速度,从而解决了海外数字电视的应用页面打开耗时较长的技术问题。另外,通过上述方法,字节码相对于原始的脚本代码而言其数据量大小也会相应减少,因此能够降低网络开销。
进一步地,基于上述图2所示的第一实施例,提出本发明网页解析方法的第二实施例,在本实施例中,所述解析所述目标脚本代码得到目标字节码的步骤包括:
基于所述服务器中安插的脚本解析器,将所述目标脚本代码进行语义及语法解析,输出抽象语法树;
利用所述脚本解析器中的解释器将所述抽象语法树转换为所述目标字节码。
在本实施例中,以下均以脚本代码为JavaScript代码为例进行说明。
为了打破本地浏览器解析功能有限的瓶颈,本申请可通过在服务器安插一个JavaScript解析器(例如目前市面上广泛使用的Android平台上的V8引擎和IOS平台上的JavaScriptCore),从而赋予服务器对于JavaScript源代码的解析功能。
如图3所示,图3为改进前后服务器与本地浏览器上的网页解析流程示意图。左边为现有的在服务器与本地浏览器上的解析方式示意图,上方的云型框代表服务器,下方的矩形框代表本地浏览器;右边为本申请改进后的在服务器与本地浏览器上的解析方式示意图,同样的,上方的云型框代表服务器,下方的矩形框代表本地浏览器。在现有的解析方式中,服务器将线上的JavaScript源代码(即图中的JavaScript online)未经解析处理直接传输给本地浏览器,浏览器下载JavaScript源代码(JavaScript local)后,在本地对其进行解析(parse),得到对应的字节码(Byte code)。而本申请中改进后的解析方式中,服务器在获取到avaScript online后,并未直接传输给本地浏览器,而是先对其进行解析,得到解析结果(即图中的Byte code online),然后将解析后的Byte code online传输给本地浏览器,本地浏览器对其进行下载后即可得到Byte code local。
服务器在获取到目标网页的JavaScript源代码后,利用预置的JavaScript解析器对其进行解析。在JavaScript解析器为V8引擎时,解析流程如下:首先将JavaScript源代码进行语义及语法的解析(语义分析是编译过程的一个逻辑阶段,语义分析的任务是对结构上正确的源程序进行上下文有关性质的审查,进行类型审查,语义分析是审查源程序有无语义错误,为代码生成阶段收集类型信息;语法分析是编译过程的一个逻辑阶段,语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语,如“程序”,“语句”,“表达式”等等,语法分析程序判断源程序在结构上是否正确,源程序的结构由上下文无关文法描述)。解析后即可输出相应的AST抽象语法树。然后AST抽象语法树通过Ignition解释器生成目标字节码。另外,在V8引擎中,目标字节码还可进一步通过Turbofan优化编译器生成机器能够直接识别的目标机器码。
进一步地,所述将所述目标字节码发送至本地浏览器的步骤包括:
将所述目标字节码基于所述本地浏览器中预设的字节码接收接口发送至本地浏览器。
在本实施例中,为了将解析功能搬移至服务器,除了需要在服务器中安插JavaScript解析器之外,针对本地浏览器还需要提供能够直接接收字节码的接口,从而使得本地服务器在获取到服务器发送的JavaScript字节码之后不需要再去做解析,而是能够直接运行。
进一步地,步骤S10之后,还包括:
将所述目标字节码进行备份处理。
在本实施例中,服务器在解析出目标字节码后,还可以将其进行备份,后续若是需要向本地浏览器传输相同的目标网页对应的字节码时,只需要直接调用备份,从而免去了重复的解析操作。
本实施例进一步通过在服务器安插一个JavaScript解析器,使得能够利用服务器的高性能,将JavaScript在服务器上就转换为字节码;针对本地浏览器提供直接接收字节码的接口,使得本地浏览器获取到的JavaScript字节码不需要再去做解析,可以直接运行,不仅能让本地浏览器减少解析时间,而且字节码相对于原始JavaScript大小也会相应减少,从而降低网络开销;通过对字节码在服务器上备份,使得再次传输相同的字节码时可直接调用备份而无需重复进行解析。
此外,参照图4,图4为网页解析方法第三实施例的流程示意图。本发明第三实施例提供一种网页解析方法,所述网页解析方法应用于本地浏览器,所述网页解析方法包括:
步骤S100,获取目标网页的主资源,并将所述主资源解析成DOM树;
在本实施例中,本地浏览器不对网页的脚本源代码进行解析操作,而是直接接收由服务器解析后的字节码,且本地浏览器中预设有直接接收字节码的接口。目标网页指的是目标网页指的是本地浏览器当前需要对其进行显示的网页。资源指的是目标网页的相关数据资源。关于文档对象模型(DOM,Document Object Model)树,HTML DOM定义了访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。
本地浏览器在接收到用户发送的目标网页访问请求时,基于该请求确定目标网页,然后获取目标网页的主资源,将其解析成DOM树。
步骤S200,接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
步骤S300,基于所述CSSOM树绘制显示所述目标网页。
在本实施例中,服务器指的是向本地浏览器直接提供由脚本源代码解析后的字节码的服务器,该服务器中安插有相应的解析器,能够直接对网页的脚本源代码进行解析。目标字节码指的是对目标网页的目标脚本代码进行解析之后所得到的字节码。字节码指的是是一种包含执行程序,由一序列op代码/数据对组成的二进制文件。关于(CSSOM,CSSObject Model)树,CSSOM指的是CSS对象模型,描述了所有CSS选择器的映射以及每个选择器的相关属性。
本地浏览器基于预设接口接收由服务器发送的目标字节码,并从服务器中获取目标网页所对应的层叠样式表,然后直接执行目标字节码。本地浏览器基于层叠样式表对DOM树添加样式,生成并在目标字节码的执行过程中不断更新CSSOM树。本地浏览器最后从CSSOM树的根节点开始遍历CSSOM树中的每一可见节点,将每一所述可见节点进行布局并绘制,以在屏幕上显示出目标网页。
在本实施例中,通过获取目标网页的主资源,并将所述主资源解析成DOM树;接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;基于所述CSSOM树绘制显示所述目标网页。通过上述方式,本发明通过将本地浏览器加载网页时最为耗时的网页脚本代码解析操作搬移到服务器上,利用服务器的高性能特性,在网页脚本代码在通过服务器传输本地浏览器过程之前就对其进行解析,使得本地浏览器能够直接从服务器上接收到已解析的代码并直接执行,进行其他有关页面加载的操作直至渲染显示出目标网页,而无需再对其进行解析。由于服务器的解析能力势必强于本地浏览器,因此能够优化网页打开速度,从而解决了海外数字电视的应用页面打开耗时较长的技术问题。
进一步地,基于上述图3所示的第三实施例,提出本发明网页解析方法的第四实施例。在本实施例中,步骤S200包括:
接收由所述服务器发送的目标字节码以及所述目标网页对应的层叠样式表;
执行所述目标字节码,并基于所述层叠样式表对所述DOM树添加样式,生成所述CSSOM树。
进一步地,步骤S300包括:
从所述CSSOM树的根节点开始遍历所述CSSOM树中的每一可见节点,将每一所述可见节点进行布局并绘制,以显示所述目标网页。
在本实施例中,如图5所示,图5为本地浏览器上的网页加载流程图。
第一步,Page模块。首先本地浏览器需要获取目标到目标网页的主资源;
第二步,DOM模块。本地浏览器将目标网页的主资源解析成DOM树;
第三步,CSSOM模块。本地浏览器下载由服务器解析后发送的目标网页的JavaScript字节码,以及目标网页的层叠样式表(CSS,Cascading Style Sheets),然后执行JavaScript字节码和CSS,以在执行的过程中对DOM树条件CSS样式,并不断更新DOM树和CSSOM树。
第四步,Render Tree模块。本地浏览器从CSSDOM树的根节点开始,遍历每一可见的节点,计算样式以生成渲染树Render Tree;
第五步,Layout模块。本地浏览器将每个可见节点根据样式布局到相应的位置;
第六步,Paint模块。本地浏览器绘制每个可见节点,以渲染显示出目标网页。
另外,图中的JavaScript模块部分所涉及的是在服务器上将JavaScript源代码转换为机器识别的字节码的过程。
本实施例进一步通过将本地浏览器加载网页时最为耗时的网页脚本代码解析操作搬移到服务器上,利用服务器的高性能特性,在网页脚本代码在通过服务器传输本地浏览器过程之前就对其进行解析,使得本地浏览器能够直接从服务器上接收到已解析的代码并直接执行,然后只需进行页面的样式层次构建以及节点渲染操作,从而大大减少了本地浏览器上的页面加载时间。
本发明还提供一种网页解析系统,所述网页解析系统包括服务器和本地浏览器,所述网页解析系统执行以下操作:
所述本地浏览器获取目标网页的主资源,并将所述主资源解析成DOM树;
所述服务器获取所述目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
所述服务器将所述目标字节码发送至所述本地浏览器;
所述本地浏览器接收并执行由所述服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
所述本地浏览器基于所述CSSOM树绘制显示所述目标网页。
如图6所示,本发明还提供一种网页解析装置,所述网页解析装置设于服务器,所述网页解析装置包括:
脚本代码解析模块S10,用于获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
目标代码发送模块S20,用于将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。
如图7所示,本发明还提供一种网页解析装置,所述网页解析装置设于本地浏览器,所述网页解析装置包括:
网页资源解析模块S100,用于获取目标网页的主资源,并将所述主资源解析成DOM树;
目标代码执行模块S200,用于接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
目标网页显示模块S300,用于基于所述CSSOM树绘制显示所述目标网页。
本发明还提供一种计算机设备(如网页解析设备)。
所述计算机设备可以包括:服务器和/或本地浏览器,所述计算机设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序(如网页解析程序),其中所述程序被所述处理器执行时,实现如上任一所述的网页解析方法的步骤。
其中,所述程序被执行时所实现的方法可参照本发明网页解析方法的各个实施例,此处不再赘述。
本发明还提供一种计算机可读存储介质。
本发明计算机可读存储介质上存储有程序(如网页解析程序),所述程序被处理器执行时实现如上所述的网页解析方法的步骤。
其中,所述程序被执行时所实现的方法可参照本发明网页解析方法各个实施例,此处不再赘述。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台网页解析设备执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种网页解析方法,其特征在于,所述网页解析方法应用于服务器,所述网页解析方法包括:
获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
将所述目标字节码发送至本地浏览器,以供所述本地浏览器执行所述目标字节码以打开所述目标网页。
2.如权利要求1所述网页解析方法,其特征在于,所述解析所述目标脚本代码得到目标字节码的步骤包括:
基于所述服务器中安插的脚本解析器,将所述目标脚本代码进行语义及语法解析,输出抽象语法树;
利用所述脚本解析器中的解释器将所述抽象语法树转换为所述目标字节码。
3.如权利要求1所述网页解析方法,其特征在于,所述将所述目标字节码发送至本地浏览器的步骤包括:
将所述目标字节码基于所述本地浏览器中预设的字节码接收接口发送至本地浏览器。
4.如权利要求1-3中任一项所述网页解析方法,其特征在于,所述获取目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码的步骤之后,还包括:
将所述目标字节码进行备份处理。
5.一种网页解析方法,其特征在于,所述网页解析方法应用于本地浏览器,所述网页解析方法包括:
获取目标网页的主资源,并将所述主资源解析成DOM树;
接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
基于所述CSSOM树绘制显示所述目标网页。
6.如权利要求5所述网页解析方法,其特征在于,所述接收并执行由服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树的步骤包括:
接收由所述服务器发送的目标字节码以及所述目标网页对应的层叠样式表;
执行所述目标字节码,并基于所述层叠样式表对所述DOM树添加样式,生成所述CSSOM树。
7.如权利要求5所述网页解析方法,其特征在于,所述基于所述CSSOM树绘制显示所述目标网页的步骤包括:
从所述CSSOM树的根节点开始遍历所述CSSOM树中的每一可见节点,将每一所述可见节点进行布局并绘制,以显示所述目标网页。
8.一种网页解析系统,其特征在于,所述网页解析系统包括服务器和本地浏览器,所述网页解析系统执行以下操作:
所述本地浏览器获取目标网页的主资源,并将所述主资源解析成DOM树;
所述服务器获取所述目标网页的目标脚本代码,解析所述目标脚本代码得到目标字节码;
所述服务器将所述目标字节码发送至所述本地浏览器;
所述本地浏览器接收并执行由所述服务器发送的所述目标网页的目标字节码,以基于所述目标字节码和所述DOM树生成CSSOM树;
所述本地浏览器基于所述CSSOM树绘制显示所述目标网页。
9.一种计算机设备,其特征在于,所述计算机设备包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序,所述程序被所述处理器执行时实现如权利要求1至4中任一项所述网页解析方法的步骤,或者所述程序被所述处理器执行时实现如权利要求4至7中任一项所述网页解析方法的步骤。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有程序,所述程序被处理器执行时实现如权利要求1至4中任一项所述网页解析方法的步骤,或者所述程序被所述处理器执行时实现如权利要求4至7中任一项所述网页解析方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111261572.1A CN114065088A (zh) | 2021-10-27 | 2021-10-27 | 网页解析方法、系统、设备及计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111261572.1A CN114065088A (zh) | 2021-10-27 | 2021-10-27 | 网页解析方法、系统、设备及计算机可读存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114065088A true CN114065088A (zh) | 2022-02-18 |
Family
ID=80235683
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111261572.1A Pending CN114065088A (zh) | 2021-10-27 | 2021-10-27 | 网页解析方法、系统、设备及计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114065088A (zh) |
-
2021
- 2021-10-27 CN CN202111261572.1A patent/CN114065088A/zh active Pending
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110990731B (zh) | 一种静态网页的渲染方法、装置、设备及计算机存储介质 | |
US8775926B2 (en) | Stylesheet conversion engine | |
US10776567B2 (en) | Method for compiling page data, method, device and storage medium for page rendering | |
CN109522018B (zh) | 页面处理方法、装置及存储介质 | |
US8694960B2 (en) | Computer-implemented method, system and computer program product for displaying a user interface component | |
US9805009B2 (en) | Method and device for cascading style sheet (CSS) selector matching | |
US20130159839A1 (en) | Semantic compression of cascading style sheets | |
EP3143497B1 (en) | Interactive viewer of intermediate representations of client side code | |
US20090204883A1 (en) | Method, Program and System for the Dynamic, Template-Based Generation of Internet Pages | |
US20090313613A1 (en) | Methods and Apparatus for Automatic Translation of a Computer Program Language Code | |
US20010018697A1 (en) | Structured document processing system and structured document processing method | |
CN109144567B (zh) | 跨平台的网页渲染方法、装置、服务器及存储介质 | |
KR101787527B1 (ko) | 다중 플랫폼 위에서 실행되는 클라이언트 애플리케이션 개발용 프레임워크를 지원하기 위한 장치 및 이를 사용한 방법 | |
CN111831384A (zh) | 语言切换方法和装置、设备及存储介质 | |
CN112799663A (zh) | 页面显示方法、装置、计算机可读存储介质及电子设备 | |
CN111507074B (zh) | 数据处理方法及装置、处理器、电子设备及存储介质 | |
CN115599386A (zh) | 代码生成方法、装置、设备及存储介质 | |
CN111459537A (zh) | 冗余代码去除方法、装置、设备与计算机可读存储介质 | |
CN113836469A (zh) | 网站前端开发方法和设备 | |
CN112632425A (zh) | 一种离线资源文件的生成方法、装置、设备及存储介质 | |
KR101092019B1 (ko) | 모바일 웹 브라우저를 이용한 웹 브라우징 시스템 및 방법과 이에 사용되는 모바일 단말기 | |
CN114065088A (zh) | 网页解析方法、系统、设备及计算机可读存储介质 | |
CN115168770A (zh) | 一种页面生成方法、装置、电子设备及介质 | |
US20040153871A1 (en) | Automatic analysis of the properties of a system based on runtime logs | |
CN112000416B (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 |