CN111125597A - 网页加载方法、浏览器、电子设备及存储介质 - Google Patents
网页加载方法、浏览器、电子设备及存储介质 Download PDFInfo
- Publication number
- CN111125597A CN111125597A CN201911311136.3A CN201911311136A CN111125597A CN 111125597 A CN111125597 A CN 111125597A CN 201911311136 A CN201911311136 A CN 201911311136A CN 111125597 A CN111125597 A CN 111125597A
- Authority
- CN
- China
- Prior art keywords
- information
- object model
- document object
- kernel
- model information
- 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
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 70
- 238000009877 rendering Methods 0.000 claims abstract description 24
- 238000000034 method Methods 0.000 claims description 52
- 230000015654 memory Effects 0.000 claims description 19
- 238000004364 calculation method Methods 0.000 claims description 17
- 238000013507 mapping Methods 0.000 claims description 16
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 238000012545 processing Methods 0.000 abstract description 9
- 230000008569 process Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 8
- 238000011161 development Methods 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 238000011160 research Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 238000004961 DIM calculation Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000001151 other effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000000007 visual effect Effects 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
- G06F16/986—Document structures and storage, e.g. HTML extensions
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
技术领域
本申请涉及计算机技术领域,尤其涉及一种网页处理领域,特别涉及一种网页加载方法、浏览器、电子设备及存储介质。
背景技术
目前为止最流行的前端框架Vue、React等均采用了虚拟文档对象模型(Documentobject model;Dom)的方案来优化网页的渲染逻辑。且在传统模式下,业务结构反映到底层内核需要经过超文本标记语言(Hyper Text Markup Language;HTML)层这个中间模式才能真正触发界面绘制。基于此,现有的网页的页面加载过程从浏览器的前端框架到浏览器的内核需要经过页面的Template配置、虚拟(Virtual)Dom、HTML Dom以及内核Dom,才能实现页面的加载。
经过对上述模式的详细分析,可以发现Dom本身的逻辑结构几乎是相同的,前端框架中的虚拟Dom和内核层面的内核Dom则具有一定的结构相似度,必然导致前端框架中的Template到Virtual Dom的Template解析(parser)过程中、Virtual Dom到HTML Dom的Virtual Dom parser过程中以及HTML Dom到内核Dom的HTML Element parser的过程中,均存在一定程度的重复性操作。比如均进行了部分深度遍历、比较、转换对象结构等计算,在网页较为复杂时,现有的加载过程会导致网页加载耗时较长,从而使得网页的加载性能较低。
发明内容
为了解决上述技术问题,本申请提供一种网页加载方法、浏览器、电子设备及存储介质,用于缩短加载时长,提高网页加载性能。
一方面,本申请提供一种网页加载方法,包括:
获取网页的虚拟文档对象模型信息;
基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;
基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。
进一步可选地,如上所述的方法中,基于预先建立的文档对象模型结构规范,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息之前,所述方法还包括:
基于所述内核层的信息识别需求,建立所述文档对象模型结构规范。
进一步可选地,如上所述的方法中,基于所述内核文档对象模型信息,对网页的页面进行渲染之前,还包括:
基于所述内核文档对象模型信息和所述网页的上一版本页面的内核文档对象模型信息,计算所述网页中更新的节点信息;
对应地,基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载,包括:
基于所述网页中更新的节点信息和所述网页的上一版本页面的内核文档对象模型信息,对所述网页的页面进行渲染,实现网页的加载。
进一步可选地,如上所述的方法中,获取网页的虚拟文档对象模型信息,包括:
获取在当前前端框架下配置的所述虚拟文档对象模型信息;
获取在当前的前端框架下配置的第一模板信息;基于所述第一模板信息,生成所述虚拟文档对象模型信息;或者
获取其他前端框架下的网页的第二模板信息,基于所述第二模板信息生成初始虚拟文档对象模型信息;基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息。
进一步可选地,如上所述的方法中,基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息之前,所述方法还包括:
根据所述其他前端框架中的信息定义方式与所述当前前端框架中的信息定义方式,建立所述其他前端框架与所述当前前端框架之间的信息映射关系。
进一步可选地,如上所述的方法中,所述虚拟文档对象模型信息包括虚拟文档对象模型的树信息、或者虚拟文档对象模型树中更新的节点信息。
另一方面,本申请还提供了一种浏览器设备,包括:
获取模块,用于获取网页的虚拟文档对象模型信息;
转换模块,用于基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;
渲染模块,用于基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。
再一方面,本申请还提供了一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如上任一项所述的方法。
又一方面,本申请还提供一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使所述计算机执行如上任一项所述的方法。
上述申请中的一个实施例具有如下优点或有益效果:通过基于预先建立的Dom结构规范,将虚拟Dom信息转换为面向内核层的内核Dom信息,可以面向内核层面直接进行虚拟Dom转化,与传统模式相比,可以直接减少了一次深度遍历操作,在复杂页面结构下,能够有效地节省计算资源和时间,相关界面元素的修改变化可以更快得到响应和最终展现,从而能够有效地缩短页面加载的耗时,提升页面加载性能。
进一步地,本申请还可以将复杂的Dom diff计算放在性能更好的内核层来处理,使得计算执行效率更高,进一步提升页面加载的性能。
而且本申请的技术方案,可以适配各种前端框架,具有较强的扩展性和适用性。
上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。
附图说明
附图用于更好地理解本方案,不构成对本申请的限定。其中:
图1是根据本申请第一实施例的示意图;
图2为一种传统的页面加载模式的示意图。
图3为本实施例的页面加载模式的示意图。
图4是根据本申请第二实施例的示意图;
图5是用来实现本申请实施例的页面加载方法的电子设备的框图。
具体实施方式
以下结合附图对本申请的示范性实施例做出说明,其中包括本申请实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本申请的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
图1为本申请第一实施例的网页加载方法实施例的流程图。如图1所示,本实施例的网页加载方法,具体可以包括如下步骤:
S101、获取网页的虚拟Dom信息;
本实施例的网页加载方法的执行主体为浏览器,具体地由浏览器对网页的页面进行加载。例如,本实施例中,可以从浏览器的前端框架到浏览器的内核层来具体描述网页的加载过程。
例如,本实施例的步骤S101具体可以在浏览器的前端框架中来实现。本实施例的网页的虚拟Dom信息具体键值对形式的Dom树结构。例如,本实施例的虚拟Dom信息的格式可以为如下形式:
进一步可选地,本实施例的步骤S101的获取网页的虚拟Dom信息,具体可以包括如下三种情况:
第一种情况、获取在当前前端框架下配置的虚拟Dom信息;
该种情况可以适用于研发人员在前端框架下直接配置虚拟Dom信息,这种情况的实施,对研发人员的专业要求较高,需要研发人员能够直接在前端框架中撰写键值对形式的Dom树结构的虚拟Dom信息。
第二种情况、获取在当前的前端框架下配置的第一Template信息;基于第一Template信息,生成虚拟Dom信息;
该种情况与第一种情况相比,对研发人员的要求较低,研发人员可以先配置标签形式的第一Template信息。例如,本实施例的第一Template信息可以采用如下的标签形式:
<View/>
<Text/>
<Button/>
<Form/>
<Input/>
…
在前端框架中,可以基于该第一Template信息,将标签形式的第一Template信息转换成键值对形式的Dom树结构的虚拟Dom信息。
第三种情况、获取其他前端框架下的网页的第二Template信息,基于第二Template信息生成初始虚拟Dom信息;基于预先建立的其他前端框架与当前前端框架之间的信息映射关系,将初始虚拟Dom信息转换为虚拟Dom信息。
实际应用中,可以存在不同的前端框架,为了能够让不同的前端框架都能够适配到本实施例的内核层,以采用本实施例的优化架构的内核上执行网页的加载。本实施例中,还可以在前端框架中进行信息的转换。
具体地,可以先获取其他前端框架下的网页的第二Template信息,并基于第二Template信息生成初始虚拟Dom信息。例如,在其他前端框架对应的初始虚拟Dom信息中定义的是:
{
title:'张三'
}
而在当前的前端框架中定义的是:{
name:'张三'
}
很明显,在当前的前端框架中,无法识别“title”,从而无法获取到“张三”的信息,所以,本实施例中需要进行虚拟Dom信息的转换。具体可以基于预先建立的其他前端框架与当前前端框架之间的信息映射关系,将初始虚拟Dom信息转换为虚拟Dom信息,例如,此处可以将title:'张三',转化为name:'张三'。例如,可以根据每种前端框架中定义的字段的描述信息,将描述信息相同的字段建立信息映射关系。例如,title和name的描述信息中都是用于描述用户的姓名,只是在不用的前端框架中采用定义的不用的字段,这两个之间可以建立信息映射关系。
进一步可选地,在该步骤之前,还可以包括:根据其他前端框架中的信息定义方式与当前前端框架中的信息定义方式,建立其他前端框架与当前前端框架之间的信息映射关系。
实际应用中,对于任意一种其他前端框架,都可以按照上述方式建立信息映射关系,从而能够与本实施例的优化架构的内核相适配,扩展本实施例的优化框架的适用场景。
S102、基于预先建立的Dom结构规范模板,将虚拟Dom信息转换为面向内核层的内核Dom信息;
本实施例的Dom结构规范模板是用于规范内核层的内核Dom的信息的格式。在将虚拟Dom信息面向内核层的内核Dom信息转换过程中,直接参考该Dom结构规范进行转换,便能够得到内核层能够识别的内核Dom信息。
进一步可选地,本实施例的步骤S102之前,还可以包括:基于内核层的信息识别需求,建立虚拟Dom结构规范模板。
S103、基于内核Dom信息,对网页的页面进行渲染,实现网页的加载。
具体地,该步骤在浏览器的内核来实现。浏览器的内核基于收到的内核Dom信息,进行attachment操作,将网页中的骨架和内容整合在一起,实现对网页的渲染,得到渲染树即Render Tree,此时便实现了网页的加载。后续可以基于Render Tree在浏览器的前端展示渲染后的网页。其中的attachment操作可以参考相关现有技术,在此不再赘述。
另外,上述方案可以适用于对于一个初次展示的网页,此时内核中没有该网页的任何信息,此时可以按照上述实施例的方式对该网页进行加载。
而在实际应用中,通常会碰到网页的局部内容更新的场景,在页面的加载过程中,在浏览器的内核中会实时存储上一版本的页面的内核Dom信息。此时步骤S103渲染之前,还可以包括:基于内核Dom信息和网页的上一版本页面的内核Dom信息,计算网页中更新的节点信息;如果更新了页面中多个节点,也按照该种方式,计算到更新的多个节点信息。该过程可以为Dom Diff的计算过程。且实际应用中,如果页面中包括较多的节点,按照该方式,经过复杂的计算,可以获取到所有的更新的节点信息。最后基于网页中更新的节点信息,可以对内核中的内核Dom进行更新,并进一步基于更新后的内核Dom进行attachment处理,再进行网页的渲染,得到渲染树即Render Tree,实现了网页的加载。
需要说明的是,本实施例中的虚拟Dom信息可以为虚拟Dom的树信息,也就是说,不管是网页的初次展示还是部分更新,虚拟Dom信息中都采用一个完整的Dom树结构来表示,此时在浏览器的内核中进行Dom Diff计算,获取到更新的网页节点信息。当然了,如果是网页的初次展示,此时更新的网页节点信息可以认为是网页中所有节点的信息。
或者本实施例的虚拟Dom信息中,也可以仅包括虚拟Dom树中、更新的节点信息。与虚拟Dom信息中包括完整的Dom树结构相比,可以减少信息的传递量,缩短页面加载的时间,提高页面加载的性能。且该实施方案中,也可以省去内核中的Dom Diff计算,直接根据更新的网页节点信息,更新内核Dom,并基于内核Dom进行网页渲染,进一步缩短页面加载时间,提高页面加载效率。
本实施例的虚拟Dom实际上只是一个JavaScript环境下的Object对象,代表了界面整体的Tree结构以及事件、属性等,这里只定义了基本结构,如果需要一些扩展结构,可以通过内核API和业务层面共同确定后添加。广义上看,界面的编辑模式由XML框架改成了Js Object模式。
图2为一种传统的页面加载模式的示意图。如图2所示,其中Template、VirtualDom和HTML Dom都在浏览器的前端框架中实施,内核Dom在浏览器的内核中实施。具体实施过程中,研发人员在浏览器的前端框架中配置Template信息,该Template信息为标签形式,如上实施例的格式所示。然后Virtual Dom处理中将标签形式的Template信息转换成键值对形式,如上述实施例中的格式。然后再在HTML Dom处理中将键值对形式再转换成HTML的标签形式,如HTML的标签形式可以为如下:
<div/>
<span/>
…
Custom
Component
最后再将HTML标签形式转换成内核Dom,然后在浏览器的内核基于内核Dom,生成渲染树Render Tree,实现网页加载。
而且,如图2所示,在页面局部节点更新的过程中,需要在Virtual Dom阶段中进行Dom diff计算,获取更新的网页节点信息,后续可以仅处理更新的网页节点信息。
图3为本实施例的页面加载模式的示意图。即本实施例的页面加载模式即为上述图1所示实施例的页面加载流程。将图3和图2对比,可以发现本实施例的页面加载模式便是基于图2的传统模式进行了改进得到的。如图3所示,本实施例的页面加载模式,相对于图2,去除HTML层的处理,直接基于预先建立的Dom结构规范,将虚拟Dom信息转换为面向内核层的内核Dom信息,可以减少页面加载的流程,缩短页面加载时间,提高页面加载性能。
而且与图2相比,本实施例还可以将Dom diff计算设置在内核层来完成。由于图2所示的传统模式中,复杂的Dom diff计算在执行性能较差的JavaScript环境中执行,而图3所示的本实施例的技术方案,可以将复杂的Dom diff计算完全转移到浏览器内核层面的java、C、C++环境,可以使得计算执行效率更高。
本实施例的网页加载方法,通过基于预先建立的Dom结构规范,将虚拟Dom信息转换为面向内核层的内核Dom信息,可以面向内核层面直接进行虚拟Dom转化,与传统模式相比,可以直接减少了一次深度遍历操作,在复杂页面结构下,能够有效地节省计算资源和时间,相关界面元素的修改变化可以更快得到响应和最终展现,从而能够有效地缩短页面加载的耗时,提升页面加载性能。
进一步地,本实施例中,还可以将复杂的Dom diff计算放在性能更好的内核层来处理,使得计算执行效率更高,进一步提升页面加载的性能。
而且,本实施例的技术方案可以适配各种前端框架,具有较强的扩展性和适用性。
再者,本实施例的技术方案本身仍然是基于前端框架开发,从开发层面上讲,并未影响任何开发效率,开发者可以选择使用传统HTML、Js、Css的模式,开发层面不需要额外的学习成本,使用非常方便。
图4为本申请第二实施例提供的浏览器设备的结构图。如图4所示,本实施例的浏览器设备400,包括:
获取模块401,用于获取网页的虚拟文档对象模型信息;
转换模块402,用于基于预先建立的文档对象模型结构规范模板,将虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;
渲染模块403,用于基于内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。
进一步可选地,本实施例的获取模块401,用于:
获取在当前前端框架下配置的虚拟文档对象模型信息;
获取在当前的前端框架下配置的第一模板信息;基于第一模板信息,生成虚拟文档对象模型信息;或者
获取其他前端框架下的网页的第二模板信息,基于第二模板信息生成初始虚拟文档对象模型信息;基于预先建立的其他前端框架与当前前端框架之间的信息映射关系,将初始虚拟文档对象模型信息转换为虚拟文档对象模型信息。
进一步可选地,本实施例的浏览器设备400还包括:
建立模块404,用于根据其他前端框架中的信息定义方式与当前前端框架中的信息定义方式,建立其他前端框架与当前前端框架之间的信息映射关系。
进一步可选地,建立模块404,还用于:
基于内核层的信息识别需求,建立文档对象模型结构规范模板。
进一步可选地,本实施例的浏览器设备400还包括:
计算模块405用于基于内核文档对象模型信息和网页的上一版本页面的内核文档对象模型信息,计算网页中更新的节点信息;
对应地,渲染模块403用于基于网页中更新的节点信息和网页的上一版本页面的内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。
本实施例的浏览器设备400中,虚拟文档对象模型信息包括虚拟文档对象模型的树信息、或者虚拟文档对象模型树中更新的节点信息。
本实施例的浏览器设备400,通过采用上述模块实现网页加载的实现原理以及技术效果,与上述相关方法实施例相同,详细可以参考上述相关方法实施例的记载,在此不再赘述。
根据本申请的实施例,本申请还提供了一种电子设备和一种可读存储介质。
如图5所示,是根据本申请实施例的实现网页加载方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本申请的实现。
如图5所示,该电子设备包括:一个或多个处理器501、存储器502,以及用于连接各部件的接口,包括高速接口和低速接口。各个部件利用不同的总线互相连接,并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理,包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如,耦合至接口的显示设备)上显示GUI的图形信息的指令。在其它实施方式中,若需要,可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样,可以连接多个电子设备,各个设备提供部分必要的操作(例如,作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图5中以一个处理器501为例。
存储器502即为本申请所提供的非瞬时计算机可读存储介质。其中,所述存储器存储有可由至少一个处理器执行的指令,以使所述至少一个处理器执行本申请所提供的网页加载方法。本申请的非瞬时计算机可读存储介质存储计算机指令,该计算机指令用于使计算机执行本申请所提供的网页加载方法。
存储器502作为一种非瞬时计算机可读存储介质,可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块,如本申请实施例中的网页加载方法对应的程序指令/模块(例如,附图4所示的相关模块)。处理器501通过运行存储在存储器502中的非瞬时软件程序、指令以及模块,从而执行服务器的各种功能应用以及数据处理,即实现上述方法实施例中的网页加载方法。
存储器502可以包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需要的应用程序;存储数据区可存储实现网页加载方法的电子设备的使用所创建的数据等。此外,存储器502可以包括高速随机存取存储器,还可以包括非瞬时存储器,例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中,存储器502可选包括相对于处理器501远程设置的存储器,这些远程存储器可以通过网络连接至实现网页加载方法的电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
实现网页加载方法的电子设备还可以包括:输入装置503和输出装置504。处理器501、存储器502、输入装置503和输出装置504可以通过总线或者其他方式连接,图5中以通过总线连接为例。
输入装置503可接收输入的数字或字符信息,以及产生与实现网页加载方法的电子设备的用户设置以及功能控制有关的键信号输入,例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置504可以包括显示设备、辅助照明装置(例如,LED)和触觉反馈装置(例如,振动电机)等。该显示设备可以包括但不限于,液晶显示器(LCD)、发光二极管(LED)显示器和等离子体显示器。在一些实施方式中,显示设备可以是触摸屏。
此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用ASIC(专用集成电路)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令,并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的,术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如,磁盘、光盘、存储器、可编程逻辑装置(PLD)),包括,接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
根据本申请实施例的技术方案,通过基于预先建立的Dom结构规范,将虚拟Dom信息转换为面向内核层的内核Dom信息,可以面向内核层面直接进行虚拟Dom转化,与传统模式相比,可以直接减少了一次深度遍历操作,在复杂页面结构下,能够有效地节省计算资源和时间,相关界面元素的修改变化可以更快得到响应和最终展现,从而能够有效地缩短页面加载的耗时,提升页面加载性能。
根据本申请实施例的技术方案,还可以将复杂的Dom diff计算放在性能更好的内核层来处理,使得计算执行效率更高,进一步提升页面加载的性能。
而且,根据本申请实施例的技术方案,可以适配各种前端框架,具有较强的扩展性和适用性。
应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本申请公开的技术方案所期望的结果,本文在此不进行限制。
上述具体实施方式,并不构成对本申请保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等,均应包含在本申请保护范围之内。
Claims (14)
1.一种网页加载方法,其特征在于,包括:
获取网页的虚拟文档对象模型信息;
基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;
基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。
2.根据权利要求1所述的方法,其特征在于,基于预先建立的文档对象模型结构规范,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息之前,所述方法还包括:
基于所述内核层的信息识别需求,建立所述文档对象模型结构规范模板。
3.根据权利要求1所述的方法,其特征在于,基于所述内核文档对象模型信息,对网页的页面进行渲染之前,还包括:
基于所述内核文档对象模型信息和所述网页的上一版本页面的内核文档对象模型信息,计算所述网页中更新的节点信息;
对应地,基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载,包括:
基于所述网页中更新的节点信息和所述网页的上一版本页面的内核文档对象模型信息,对所述网页的页面进行渲染,实现网页的加载。
4.根据权利要求1所述的方法,其特征在于,获取网页的虚拟文档对象模型信息,包括:
获取在当前前端框架下配置的所述虚拟文档对象模型信息;
获取在当前的前端框架下配置的第一模板信息;基于所述第一模板信息,生成所述虚拟文档对象模型信息;或者
获取其他前端框架下的网页的第二模板信息,基于所述第二模板信息生成初始虚拟文档对象模型信息;基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息。
5.根据权利要求4所述的方法,其特征在于,基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息之前,所述方法还包括:
根据所述其他前端框架中的信息定义方式与所述当前前端框架中的信息定义方式,建立所述其他前端框架与所述当前前端框架之间的信息映射关系。
6.根据权利要求1-5任一所述的方法,其特征在于,所述虚拟文档对象模型信息包括虚拟文档对象模型的树信息、或者虚拟文档对象模型树中更新的节点信息。
7.一种浏览器设备,其特征在于,包括:
获取模块,用于获取网页的虚拟文档对象模型信息;
转换模块,用于基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;
渲染模块,用于基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。
8.根据权利要求7所述的设备,其特征在于,所述设备还包括:
建立模块,用于基于所述内核层的信息识别需求,建立所述文档对象模型结构规范模板。
9.根据权利要求7所述的设备,其特征在于,所述设备还包括:
计算模块,用于基于所述内核文档对象模型信息和所述网页的上一版本页面的内核文档对象模型信息,计算所述网页中更新的节点信息;
对应地,所述渲染模块,用于基于所述网页中更新的节点信息和所述网页的上一版本页面的内核文档对象模型信息,对所述网页的页面进行渲染,实现网页的加载。
10.根据权利要求8所述的设备,其特征在于,所述获取模块,用于:
获取在当前前端框架下配置的所述虚拟文档对象模型信息;
获取在当前的前端框架下配置的第一模板信息;基于所述第一模板信息,生成所述虚拟文档对象模型信息;或者
获取其他前端框架下的网页的第二模板信息,基于所述第二模板信息生成初始虚拟文档对象模型信息;基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息。
11.根据权利要求10所述的设备,其特征在于:
所述建立模块,还用于根据所述其他前端框架中的信息定义方式与所述当前前端框架中的信息定义方式,建立所述其他前端框架与所述当前前端框架之间的信息映射关系。
12.根据权利要求7-11任一所述的设备,其特征在于,所述虚拟文档对象模型信息包括虚拟文档对象模型的树信息、或者虚拟文档对象模型树中更新的节点信息。
13.一种电子设备,其特征在于,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行权利要求1-6中任一项所述的方法。
14.一种存储有计算机指令的非瞬时计算机可读存储介质,其特征在于,所述计算机指令用于使所述计算机执行权利要求1-6中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911311136.3A CN111125597B (zh) | 2019-12-18 | 2019-12-18 | 网页加载方法、浏览器、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201911311136.3A CN111125597B (zh) | 2019-12-18 | 2019-12-18 | 网页加载方法、浏览器、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111125597A true CN111125597A (zh) | 2020-05-08 |
CN111125597B CN111125597B (zh) | 2023-10-27 |
Family
ID=70499764
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201911311136.3A Active CN111125597B (zh) | 2019-12-18 | 2019-12-18 | 网页加载方法、浏览器、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111125597B (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112527297A (zh) * | 2020-12-23 | 2021-03-19 | 北京飞漫软件技术有限公司 | 数据处理的方法、装置、设备及存储介质 |
CN112817595A (zh) * | 2021-02-20 | 2021-05-18 | Oppo广东移动通信有限公司 | 界面渲染方法、装置、存储介质及电子设备 |
CN112989195A (zh) * | 2021-03-20 | 2021-06-18 | 重庆图强工程技术咨询有限公司 | 基于大数据的全过程咨询方法、装置、电子设备及存储介质 |
Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102214098A (zh) * | 2011-06-15 | 2011-10-12 | 中山大学 | 一种基于WebKit浏览器引擎的动态页面数据采集方法 |
CN102346770A (zh) * | 2011-09-21 | 2012-02-08 | 晨星软件研发(深圳)有限公司 | WebKit浏览器网页内容加载方法及装置 |
US8555157B1 (en) * | 2010-01-21 | 2013-10-08 | Google Inc. | Document update generation |
US20140208096A1 (en) * | 2013-01-22 | 2014-07-24 | Amazon Technologies, Inc. | Secure interface for invoking privileged operations |
CN104063460A (zh) * | 2014-06-25 | 2014-09-24 | 北京奇虎科技有限公司 | 一种在浏览器中加载网页的方法和装置 |
US9178934B1 (en) * | 2014-11-21 | 2015-11-03 | Instart Logic, Inc. | Modifying web content at a client |
US9582600B1 (en) * | 2014-09-23 | 2017-02-28 | Amazon Technologies, Inc. | Cloud browser DOM-based client |
US9740791B1 (en) * | 2014-09-23 | 2017-08-22 | Amazon Technologies, Inc. | Browser as a service |
CN108647025A (zh) * | 2018-05-15 | 2018-10-12 | 浙江口碑网络技术有限公司 | 文档对象模型中节点的处理方法及装置、电子和存储设备 |
US20180300197A1 (en) * | 2017-04-12 | 2018-10-18 | Microsoft Technology Licensing, Llc | Systems, methods, and computer-readable media for using immutable and copy-on-write data semantics to optimize record and replay frameworks |
CN109388766A (zh) * | 2017-08-07 | 2019-02-26 | 阿里巴巴集团控股有限公司 | 页面加载的方法和装置 |
CN110309461A (zh) * | 2019-07-04 | 2019-10-08 | 郑州悉知信息科技股份有限公司 | 页面展现方法和装置 |
KR20190136258A (ko) * | 2018-05-30 | 2019-12-10 | 주식회사 티파이브온라인 | 멀티스레드 지원을 위한 크로스플랫폼 시스템 및 운용방법 |
-
2019
- 2019-12-18 CN CN201911311136.3A patent/CN111125597B/zh active Active
Patent Citations (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8555157B1 (en) * | 2010-01-21 | 2013-10-08 | Google Inc. | Document update generation |
CN102214098A (zh) * | 2011-06-15 | 2011-10-12 | 中山大学 | 一种基于WebKit浏览器引擎的动态页面数据采集方法 |
CN102346770A (zh) * | 2011-09-21 | 2012-02-08 | 晨星软件研发(深圳)有限公司 | WebKit浏览器网页内容加载方法及装置 |
US20140208096A1 (en) * | 2013-01-22 | 2014-07-24 | Amazon Technologies, Inc. | Secure interface for invoking privileged operations |
CN104063460A (zh) * | 2014-06-25 | 2014-09-24 | 北京奇虎科技有限公司 | 一种在浏览器中加载网页的方法和装置 |
US9582600B1 (en) * | 2014-09-23 | 2017-02-28 | Amazon Technologies, Inc. | Cloud browser DOM-based client |
US9740791B1 (en) * | 2014-09-23 | 2017-08-22 | Amazon Technologies, Inc. | Browser as a service |
US9178934B1 (en) * | 2014-11-21 | 2015-11-03 | Instart Logic, Inc. | Modifying web content at a client |
US20180300197A1 (en) * | 2017-04-12 | 2018-10-18 | Microsoft Technology Licensing, Llc | Systems, methods, and computer-readable media for using immutable and copy-on-write data semantics to optimize record and replay frameworks |
CN109388766A (zh) * | 2017-08-07 | 2019-02-26 | 阿里巴巴集团控股有限公司 | 页面加载的方法和装置 |
CN108647025A (zh) * | 2018-05-15 | 2018-10-12 | 浙江口碑网络技术有限公司 | 文档对象模型中节点的处理方法及装置、电子和存储设备 |
KR20190136258A (ko) * | 2018-05-30 | 2019-12-10 | 주식회사 티파이브온라인 | 멀티스레드 지원을 위한 크로스플랫폼 시스템 및 운용방법 |
CN110309461A (zh) * | 2019-07-04 | 2019-10-08 | 郑州悉知信息科技股份有限公司 | 页面展现方法和装置 |
Non-Patent Citations (6)
Title |
---|
S. YE 等: "Learning object models from semistructured Web documents", 《IEEE》 * |
刘秀秀;潘梁;郭志川;胡琳琳;: "基于Webkit内核焦点查询算法的研究与优化", no. 02 * |
校丽丽;杨雷;吴珏;: "一种基于数据驱动模型的VirtualDOM树的构建方法", no. 01 * |
王震江;: "XML的DOM编程", no. 10 * |
赵亮: "探索Linux内核级安全增强系统的精彩之旅", 计算机安全, no. 10 * |
陈秋实: "移动Web前端性能优化方法及其应用研究", 《中国优秀硕士学位论文全文数据库电子期刊》 * |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112527297A (zh) * | 2020-12-23 | 2021-03-19 | 北京飞漫软件技术有限公司 | 数据处理的方法、装置、设备及存储介质 |
CN112527297B (zh) * | 2020-12-23 | 2024-09-17 | 北京飞漫软件技术有限公司 | 数据处理的方法、装置、设备及存储介质 |
CN112817595A (zh) * | 2021-02-20 | 2021-05-18 | Oppo广东移动通信有限公司 | 界面渲染方法、装置、存储介质及电子设备 |
CN112989195A (zh) * | 2021-03-20 | 2021-06-18 | 重庆图强工程技术咨询有限公司 | 基于大数据的全过程咨询方法、装置、电子设备及存储介质 |
CN112989195B (zh) * | 2021-03-20 | 2023-09-05 | 重庆图强工程技术咨询有限公司 | 基于大数据的全过程咨询方法、装置、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN111125597B (zh) | 2023-10-27 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11144711B2 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
KR102484617B1 (ko) | 이종 그래프 노드를 표현하는 모델 생성 방법, 장치, 전자 기기, 저장 매체 및 프로그램 | |
US11829436B2 (en) | Method and apparatus of pre-rendering page, electronic device, and storage medium | |
US20170091159A1 (en) | Programmatic native rendering of structured content | |
CN111125597B (zh) | 网页加载方法、浏览器、电子设备及存储介质 | |
CN111832701B (zh) | 模型的蒸馏方法、装置、电子设备及存储介质 | |
CN111897619A (zh) | 浏览器页面的显示方法、装置、电子设备及存储介质 | |
CN110852449A (zh) | 模型迁移方法和电子设备 | |
CN111880778B (zh) | 接口文档的生成方法、装置、电子设备及存储介质 | |
US11475093B2 (en) | Method and apparatus for processing webpage, device, and storage medium | |
CN111857656B (zh) | 数据处理方法、装置、电子设备及存储介质 | |
CN113254043A (zh) | Web前端项目处理方法、装置、电子设备及存储介质 | |
CN113656533A (zh) | 一种树形控件处理方法、装置及电子设备 | |
CN111610972A (zh) | 页面生成方法、装置、设备及存储介质 | |
CN111339462A (zh) | 一种组件渲染方法、装置、服务器、终端和介质 | |
CN113407745B (zh) | 数据标注方法、装置、电子设备及计算机可读存储介质 | |
CN113220571B (zh) | 移动网页的调试方法、系统、设备和存储介质 | |
US20240095298A1 (en) | Systems and methods for rendering interactive web pages | |
CN113822033B (zh) | 报表的生成方法、装置、设备以及存储介质 | |
CN111931524B (zh) | 用于输出信息的方法、装置、设备以及存储介质 | |
CN111832070A (zh) | 数据的掩码方法、装置、电子设备和存储介质 | |
CN111026916A (zh) | 文本描述的转换方法、装置、电子设备及存储介质 | |
CN111125445A (zh) | 社区主题生成方法、装置、电子设备及存储介质 | |
CN114217798A (zh) | 数据库表单界面的代码生成方法和装置 | |
CN114661402A (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 |