网页加载方法、浏览器、电子设备及存储介质技术

技术编号:24091987 阅读:36 留言:0更新日期:2020-05-09 08:29
本申请公开了网页加载方法、浏览器、电子设备及存储介质,涉及网页处理技术领域。具体实现方案为:获取网页的虚拟文档对象模型信息;于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。本申请的技术方案,能够有效地缩短页面加载的耗时,提升页面加载性能。

Web loading methods, browsers, electronic devices and storage media

【技术实现步骤摘要】
网页加载方法、浏览器、电子设备及存储介质
本申请涉及计算机
,尤其涉及一种网页处理领域,特别涉及一种网页加载方法、浏览器、电子设备及存储介质。
技术介绍
目前为止最流行的前端框架Vue、React等均采用了虚拟文档对象模型(Documentobjectmodel;Dom)的方案来优化网页的渲染逻辑。且在传统模式下,业务结构反映到底层内核需要经过超文本标记语言(HyperTextMarkupLanguage;HTML)层这个中间模式才能真正触发界面绘制。基于此,现有的网页的页面加载过程从浏览器的前端框架到浏览器的内核需要经过页面的Template配置、虚拟(Virtual)Dom、HTMLDom以及内核Dom,才能实现页面的加载。经过对上述模式的详细分析,可以发现Dom本身的逻辑结构几乎是相同的,前端框架中的虚拟Dom和内核层面的内核Dom则具有一定的结构相似度,必然导致前端框架中的Template到VirtualDom的Template解析(parser)过程中、VirtualDom到HTMLDom的VirtualDomparser过程中以及HTMLDom到内核Dom的HTMLElementparser的过程中,均存在一定程度的重复性操作。比如均进行了部分深度遍历、比较、转换对象结构等计算,在网页较为复杂时,现有的加载过程会导致网页加载耗时较长,从而使得网页的加载性能较低。
技术实现思路
为了解决上述技术问题,本申请提供一种网页加载方法、浏览器、电子设备及存储介质,用于缩短加载时长,提高网页加载性能。一方面,本申请提供一种网页加载方法,包括:获取网页的虚拟文档对象模型信息;基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。进一步可选地,如上所述的方法中,基于预先建立的文档对象模型结构规范,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息之前,所述方法还包括:基于所述内核层的信息识别需求,建立所述文档对象模型结构规范。进一步可选地,如上所述的方法中,基于所述内核文档对象模型信息,对网页的页面进行渲染之前,还包括:基于所述内核文档对象模型信息和所述网页的上一版本页面的内核文档对象模型信息,计算所述网页中更新的节点信息;对应地,基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载,包括:基于所述网页中更新的节点信息和所述网页的上一版本页面的内核文档对象模型信息,对所述网页的页面进行渲染,实现网页的加载。进一步可选地,如上所述的方法中,获取网页的虚拟文档对象模型信息,包括:获取在当前前端框架下配置的所述虚拟文档对象模型信息;获取在当前的前端框架下配置的第一模板信息;基于所述第一模板信息,生成所述虚拟文档对象模型信息;或者获取其他前端框架下的网页的第二模板信息,基于所述第二模板信息生成初始虚拟文档对象模型信息;基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息。进一步可选地,如上所述的方法中,基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息之前,所述方法还包括:根据所述其他前端框架中的信息定义方式与所述当前前端框架中的信息定义方式,建立所述其他前端框架与所述当前前端框架之间的信息映射关系。进一步可选地,如上所述的方法中,所述虚拟文档对象模型信息包括虚拟文档对象模型的树信息、或者虚拟文档对象模型树中更新的节点信息。另一方面,本申请还提供了一种浏览器设备,包括:获取模块,用于获取网页的虚拟文档对象模型信息;转换模块,用于基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;渲染模块,用于基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。再一方面,本申请还提供了一种电子设备,包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如上任一项所述的方法。又一方面,本申请还提供一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使所述计算机执行如上任一项所述的方法。上述申请中的一个实施例具有如下优点或有益效果:通过基于预先建立的Dom结构规范,将虚拟Dom信息转换为面向内核层的内核Dom信息,可以面向内核层面直接进行虚拟Dom转化,与传统模式相比,可以直接减少了一次深度遍历操作,在复杂页面结构下,能够有效地节省计算资源和时间,相关界面元素的修改变化可以更快得到响应和最终展现,从而能够有效地缩短页面加载的耗时,提升页面加载性能。进一步地,本申请还可以将复杂的Domdiff计算放在性能更好的内核层来处理,使得计算执行效率更高,进一步提升页面加载的性能。而且本申请的技术方案,可以适配各种前端框架,具有较强的扩展性和适用性。上述可选方式所具有的其他效果将在下文中结合具体实施例加以说明。附图说明附图用于更好地理解本方案,不构成对本申请的限定。其中:图1是根据本申请第一实施例的示意图;图2为一种传统的页面加载模式的示意图。图3为本实施例的页面加载模式的示意图。图4是根据本申请第二实施例的示意图;图5是用来实现本申请实施例的页面加载方法的电子设备的框图。具体实施方式以下结合附图对本申请的示范性实施例做出说明,其中包括本申请实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本申请的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。图1为本申请第一实施例的网页加载方法实施例的流程图。如图1所示,本实施例的网页加载方法,具体可以包括如下步骤:S101、获取网页的虚拟Dom信息;本实施例的网页加载方法的执行主体为浏览器,具体地由浏览器对网页的页面进行加载。例如,本实施例中,可以从浏览器的前端框架到浏览器的内核层来具体描述网页的加载过程。例如,本实施例的步骤S101具体可以在浏览器的前端框架中来实现。本实施例的网页的虚拟Dom信息具体键值对形式的Dom树结构。例如,本实施例的虚拟Dom信息的格式可以为如下形式:进一步可选地,本实施例的步骤S101的获取网页的虚拟Dom信息,具体可以包括如下三种情况:第一种情况、获取在当前前端框架下配本文档来自技高网...

【技术保护点】
1.一种网页加载方法,其特征在于,包括:/n获取网页的虚拟文档对象模型信息;/n基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;/n基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。/n

【技术特征摘要】
1.一种网页加载方法,其特征在于,包括:
获取网页的虚拟文档对象模型信息;
基于预先建立的文档对象模型结构规范模板,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息;
基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载。


2.根据权利要求1所述的方法,其特征在于,基于预先建立的文档对象模型结构规范,将所述虚拟文档对象模型信息转换为面向内核层的内核文档对象模型信息之前,所述方法还包括:
基于所述内核层的信息识别需求,建立所述文档对象模型结构规范模板。


3.根据权利要求1所述的方法,其特征在于,基于所述内核文档对象模型信息,对网页的页面进行渲染之前,还包括:
基于所述内核文档对象模型信息和所述网页的上一版本页面的内核文档对象模型信息,计算所述网页中更新的节点信息;
对应地,基于所述内核文档对象模型信息,对网页的页面进行渲染,实现网页的加载,包括:
基于所述网页中更新的节点信息和所述网页的上一版本页面的内核文档对象模型信息,对所述网页的页面进行渲染,实现网页的加载。


4.根据权利要求1所述的方法,其特征在于,获取网页的虚拟文档对象模型信息,包括:
获取在当前前端框架下配置的所述虚拟文档对象模型信息;
获取在当前的前端框架下配置的第一模板信息;基于所述第一模板信息,生成所述虚拟文档对象模型信息;或者
获取其他前端框架下的网页的第二模板信息,基于所述第二模板信息生成初始虚拟文档对象模型信息;基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息。


5.根据权利要求4所述的方法,其特征在于,基于预先建立的所述其他前端框架与所述当前前端框架之间的信息映射关系,将所述初始虚拟文档对象模型信息转换为所述虚拟文档对象模型信息之前,所述方法还包括:
根据所述其他前端框架中的信息定义方式与所述当前前端框架中的信息定义方式,建立所述其他前端框架与所述当前前端框架之间的信息映射关系。


6.根据权利要求1-5任一所述的方法,其特征在于,所述虚拟文档对象模型信息包括虚拟文档对象模型的树信息、或者虚拟文档对象模型树中更新的节点信息。


7.一种浏览器设备,其特征在于,包括:
获取模块,用于获取网页的虚...

【专利技术属性】
技术研发人员:牛潞彪
申请(专利权)人:百度在线网络技术北京有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1