CN115758021A - 网页渲染方法及装置、电子设备和介质 - Google Patents

Abstract

本公开提供了一种网页渲染方法、装置、电子设备、计算机可读存储介质和计算机程序产品，涉及计算机领域，尤其涉及页面开发技术领域。实现方案为：获取所述网页所对应的初始页面内容，该初始页面内容包括页面模板；将页面模板解析为渲染函数；将渲染函数编译为虚拟文档对象模型DOM；将网页中需优先渲染的目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串；以及将HTML字符串插入到HTML节点下，以使得基于HTML字符串实现目标组件的优先渲染。

Description

网页渲染方法及装置、电子设备和介质

技术领域

本公开涉及计算机领域，尤其涉及页面开发技术领域，具体涉及一种网页渲染方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

背景技术

网页应用(Web App)是与各种移动客户端、桌面客户端、服务器端深度整合的互联网空间应用，是一个庞大规模原生承载互联网链接万物景观精神的内容整合与分发持续开放的平台。在用户通过浏览器访问网页时，终端从服务器中获取该网页的网页数据，根据该网页数据，例如通过解析JavaScript文件来获取渲染网页内容。但伴随着移动通信技术的升级迭代，用户在终端上对网页装载速度尤其敏感。

发明内容

本公开提供了一种网页渲染方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

根据本公开的一方面，提供了一种网页渲染方法，包括：获取所述网页所对应的初始页面内容，其中所述初始页面内容包括页面模板；将所述页面模板解析为渲染函数；将所述渲染函数编译为虚拟文档对象模型DOM；将所述网页中需优先渲染的目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串；以及将所述HTML字符串插入到HTML节点下，以使得基于所述HTML字符串实现所述目标组件的优先渲染。

根据本公开的另一方面，提供了一种网页渲染装置，包括：获取单元，配置为获取所述网页所对应的初始页面内容，其中所述初始页面内容包括页面模板；解析单元，配置为将所述页面模板解析为渲染函数；编译单元，配置为将所述渲染函数编译为虚拟文档对象模型DOM；初始化单元，配置为将所述网页中需优先渲染的目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串；以及渲染单元，配置为将所述HTML字符串插入到HTML节点下，以使得基于所述HTML字符串实现所述目标组件的优先渲染。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；存储器存储有可被至少一个处理器执行的指令，该指令被至少一个处理器执行，以使至少一个处理器能够执行本公开所述的方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该计算机指令用于使计算机执行本公开所述的方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现本公开所述的方法。

根据本公开的一个或多个实施例，通过将需优先渲染的组件所对应的虚拟DOM优先初始化为超文本标记语言HTML字符串，使得在浏览器首次加载页面的时白屏率下降，极大地提升了用户体验。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图示例性地示出了实施例并且构成说明书的一部分，与说明书的文字描述一起用于讲解实施例的示例性实施方式。所示出的实施例仅出于例示的目的，并不限制权利要求的范围。在所有附图中，相同的附图标记指代类似但不一定相同的要素。

图1示出了根据本公开的实施例的可以在其中实施本文描述的各种方法的示例性系统的示意图；

图2示出了根据本公开的实施例的网页渲染方法的流程图；

图3示出了根据本公开的实施例的网页渲染装置的结构框图；以及

图4示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

在本公开中，除非另有说明，否则使用术语“第一”、“第二”等来描述各种要素不意图限定这些要素的位置关系、时序关系或重要性关系，这种术语只是用于将一个元件与另一元件区分开。在一些示例中，第一要素和第二要素可以指向该要素的同一实例，而在某些情况下，基于上下文的描述，它们也可以指代不同实例。

在本公开中对各种所述示例的描述中所使用的术语只是为了描述特定示例的目的，而并非旨在进行限制。除非上下文另外明确地表明，如果不特意限定要素的数量，则该要素可以是一个也可以是多个。此外，本公开中所使用的术语“和/或”涵盖所列出的项目中的任何一个以及全部可能的组合方式。

下面将结合附图详细描述本公开的实施例。

图1示出了根据本公开的实施例可以将本文描述的各种方法和装置在其中实施的示例性系统100的示意图。参考图1，该系统100包括一个或多个客户端设备101、102、103、104、105和106、服务器120以及将一个或多个客户端设备耦接到服务器120的一个或多个通信网络110。客户端设备101、102、103、104、105和106可以被配置为执行一个或多个应用程序。

在本公开的实施例中，服务器120可以运行使得能够执行网页渲染的方法的一个或多个服务或软件应用。

在某些实施例中，服务器120还可以提供其他服务或软件应用，这些服务或软件应用可以包括非虚拟环境和虚拟环境。在某些实施例中，这些服务可以作为基于web的服务或云服务提供，例如在软件即服务(SaaS)模型下提供给客户端设备101、102、103、104、105和/或106的用户。

在图1所示的配置中，服务器120可以包括实现由服务器120执行的功能的一个或多个组件。这些组件可以包括可由一个或多个处理器执行的软件组件、硬件组件或其组合。操作客户端设备101、102、103、104、105和/或106的用户可以依次利用一个或多个客户端应用程序来与服务器120进行交互以利用这些组件提供的服务。应当理解，各种不同的系统配置是可能的，其可以与系统100不同。因此，图1是用于实施本文所描述的各种方法的系统的一个示例，并且不旨在进行限制。

用户可以使用客户端设备101、102、103、104、105和/或106来获取用户操作。客户端设备可以提供使客户端设备的用户能够与客户端设备进行交互的接口。客户端设备还可以经由该接口向用户输出信息。尽管图1仅描绘了六种客户端设备，但是本领域技术人员将能够理解，本公开可以支持任何数量的客户端设备。

客户端设备101、102、103、104、105和/或106可以包括各种类型的计算机设备，例如便携式手持设备、通用计算机(诸如个人计算机和膝上型计算机)、工作站计算机、可穿戴设备、智能屏设备、自助服务终端设备、服务机器人、游戏系统、瘦客户端、各种消息收发设备、传感器或其他感测设备等。这些计算机设备可以运行各种类型和版本的软件应用程序和操作系统，例如MICROSOFT Windows、APPLE iOS、类UNIX操作系统、Linux或类Linux操作系统(例如GOOGLE Chrome OS)；或包括各种移动操作系统，例如MICROSOFT WindowsMobile OS、iOS、Windows Phone、Android。便携式手持设备可以包括蜂窝电话、智能电话、平板电脑、个人数字助理(PDA)等。可穿戴设备可以包括头戴式显示器(诸如智能眼镜)和其他设备。游戏系统可以包括各种手持式游戏设备、支持互联网的游戏设备等。客户端设备能够执行各种不同的应用程序，例如各种与Internet相关的应用程序、通信应用程序(例如电子邮件应用程序)、短消息服务(SMS)应用程序，并且可以使用各种通信协议。

网络110可以是本领域技术人员熟知的任何类型的网络，其可以使用多种可用协议中的任何一种(包括但不限于TCP/IP、SNA、IPX等)来支持数据通信。仅作为示例，一个或多个网络110可以是局域网(LAN)、基于以太网的网络、令牌环、广域网(WAN)、因特网、虚拟网络、虚拟专用网络(VPN)、内部网、外部网、区块链网络、公共交换电话网(PSTN)、红外网络、无线网络(例如蓝牙、WIFI)和/或这些和/或其他网络的任意组合。

服务器120可以包括一个或多个通用计算机、专用服务器计算机(例如PC(个人计算机)服务器、UNIX服务器、中端服务器)、刀片式服务器、大型计算机、服务器群集或任何其他适当的布置和/或组合。服务器120可以包括运行虚拟操作系统的一个或多个虚拟机，或者涉及虚拟化的其他计算架构(例如可以被虚拟化以维护服务器的虚拟存储设备的逻辑存储设备的一个或多个灵活池)。在各种实施例中，服务器120可以运行提供下文所描述的功能的一个或多个服务或软件应用。

服务器120中的计算单元可以运行包括上述任何操作系统以及任何商业上可用的服务器操作系统的一个或多个操作系统。服务器120还可以运行各种附加服务器应用程序和/或中间层应用程序中的任何一个，包括HTTP服务器、FTP服务器、CGI服务器、JAVA服务器、数据库服务器等。

在一些实施方式中，服务器120可以包括一个或多个应用程序，以分析和合并从客户端设备101、102、103、104、105和106的用户接收的数据馈送和/或事件更新。服务器120还可以包括一个或多个应用程序，以经由客户端设备101、102、103、104、105和106的一个或多个显示设备来显示数据馈送和/或实时事件。

在一些实施方式中，服务器120可以为分布式系统的服务器，或者是结合了区块链的服务器。服务器120也可以是云服务器，或者是带人工智能技术的智能云计算服务器或智能云主机。云服务器是云计算服务体系中的一项主机产品，以解决传统物理主机与虚拟专用服务器(VPS，Virtual Private Server)服务中存在的管理难度大、业务扩展性弱的缺陷。

系统100还可以包括一个或多个数据库130。在某些实施例中，这些数据库可以用于存储数据和其他信息。例如，数据库130中的一个或多个可用于存储诸如开发文件的信息。数据库130可以驻留在各种位置。例如，由服务器120使用的数据库可以在服务器120本地，或者可以远离服务器120且可以经由基于网络或专用的连接与服务器120通信。数据库130可以是不同的类型。在某些实施例中，由服务器120使用的数据库例如可以是关系数据库。这些数据库中的一个或多个可以响应于命令而存储、更新和检索到数据库以及来自数据库的数据。

在某些实施例中，数据库130中的一个或多个还可以由应用程序使用来存储应用程序数据。由应用程序使用的数据库可以是不同类型的数据库，例如键值存储库，对象存储库或由文件系统支持的常规存储库。

图1的系统100可以以各种方式配置和操作，以使得能够应用根据本公开所描述的各种方法和装置。

目前，很多PC站点平台例如采用了前端框架Vue、React等开发SPA(Single PageWeb Application，单页Web应用)。Vue.js(简称为Vue)和React均是用于创建用户界面的开源JavaScript(简称JS)框架，也是创建单页应用的Web应用框架。

通过上述开发方式所得到的文件在经过构建后，主要静态资源被构建成JS文件，而HTML文件只有一个div标签(div是层叠样式表中的定位技术，全称DIVision，即为划分)。当浏览器请求时会先解析HTML文件，此时页面空白；随后加载JS文件，通过解析JS文件实现页面框架的初始化，最后将主要页面内容对应的DOM(Document Object Model，操作文档对象)结构挂载到div标签下，从而实现整个页面的展现。这种渲染方式，首屏渲染速度较慢，一旦出现网络等问题，页面就可能会出现白屏，使得用户体验感较差，seo(搜索引擎优化)效果差。

因此，根据本公开的实施例提供了一种网页渲染方法。图2示出了根据本公开的实施例的网页渲染方法的流程图，如图2所示，方法200包括：获取所述网页所对应的初始页面内容，其中所述初始页面内容包括页面模板(步骤210)；将所述页面模板解析为渲染函数(步骤220)；将所述渲染函数编译为虚拟文档对象模型DOM(步骤230)；将所述网页中需优先渲染的目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串(步骤240)；以及将所述HTML字符串插入到HTML根节点下，以使得基于所述HTML字符串实现所述目标组件的优先渲染(步骤250)。

根据本公开的实施例，通过将需优先渲染的组件所对应的虚拟DOM优先初始化为超文本标记语言HTML字符串，使得在浏览器首次加载页面的时白屏率下降，极大地提升了用户体验。

DOM即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

而虚拟DOM是一个用来描述真实DOM结构的JS对象，它不是真实的DOM，因此称为虚拟DOM。虚拟DOM包含了tag、props、children三个属性，以这三个属性来描述一个DOM节点，每组描述就是一个VNode，整个VNode的集合就是一个虚拟DOM树。

由于虚拟DOM是以JavaScript对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node等，是实现SSR、小程序等的基础。DOM是一个很大的对象，直接操作DOM，即便是一个空的div也要付出昂贵的代价，执行速度远不如抽象出来的JS对象的速度快。因此，把大量的DOM操作搬运到JS中，运用diff算法来计算出真正需要更新的节点，能最大限度地减少DOM操作，从而显著提高性能。虚拟DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

以Vue框架为例，在通过Webpack构建时，将开发过程中的单文件(.vue文件)会被构建工具的处理器(比如vue-loader)解析为JS文件，其中HTML的页面模板模块(template)会被解析成渲染函数(render)的形式，与JS模块一起被处理为组件序列化组成框架运行时可以识别的组件模块(JS形式的文件)。在接收到加载请求后于线上执行时，通过解析该JS形式的文件，将虚拟DOM初始化为超文本标记语言HTML字符串，即转换为真实DOM。

在本公开中，在开发阶段，将页面模板模块(template)会被解析成渲染函数(render)后，进一步确定需优先渲染的目标组件并将该目标组件的所对应的虚拟DOM初始化为超文本标记语言HTML字符串，将所述HTML字符串插入到HTML节点(例如HTML根节点)下。从而，在客户端接收到网页加载请求时，使得客户端优先基于该HTML字符串实现目标组件的渲染。

根据一些实施例，基于预设的标识信息确定所述网页中需优先渲染的目标组件。例如，通过以下代码为相应组件添加需优先渲染的标识信息：<div needRender＝"true"></div，以通过识别代码中的该标识信息确定目标组件。通过对组件添加标识，来选择需要处理成真实DOM字符串的组件，从而实现整个网页页面可以选择性地进行渐进式渲染。

根据一些实施例，确定所述网页中需优先渲染的目标组件包括：对所述渲染函数进行编译，以生成抽象语法树AST；以及对所述抽象语法树AST进行遍历，以确定所述目标组件。

抽象语法树(abstract syntax code，AST)是源代码的抽象语法结构的树状表示，语法树的每一个节点都代表着程序代码中的一个语法结构,如包、类型、修饰符、运算符、接口、返回值都可以是一个语法结构。之所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法，也就是说语法分析阶段所采用的上下文无关文法，因为在写文法时，经常会对文法进行等价的转换(消除左递归、回溯、二义性等)，这样会给文法分析引入一些多余的成分，对后续阶段造成不利影响，甚至会使合个阶段变得混乱。因此，很多编译器经常要独立地构造语法分析树，为前端、后端建立一个清晰的接口。抽象语法树在很多领域有广泛的应用，比如浏览器、智能编辑器、编译器。

通过对抽象语法树进行遍历，可以方便地识别到需在网页上优先渲染的目标组件，例如通过识别预先添加的需优先渲染的标识信息，从而实现整个网页页面可以选择性地进行渐进式渲染。

在一些示例中，将JS文件转换为抽象语法树AST来识别需要优先渲染的组件，如果需要优先渲染则添加将虚拟DOM处理成真实DOM的服务端渲染函数。例如，在通过Vue框架进行前端页面开发时，该框架提供了相应的将虚拟DOM处理成真实DOM的服务端渲染函数。通过递归操作对抽象语法树AST的节点进行遍历，在处理完所有组件后，生成一份静态的HTML字符串，并将该HTML字符串挂载到HTML文件的标识处。

根据一些实施例，所述HTML节点为所述网页应用(如SPA，单页应用程序)所挂载的根节点，例如通常为app的div标签下。

这样，在客户端进行网页加载时，在浏览器首次访问HTML文件时即可获取到相应组件的信息，从而优先在网页中进行渲染。在浏览器进一步对其他形式文件(例如JS文件)进行解析后，进一步完成真个网页页面的渲染，从而达到渐进式渲染的效果。

可以理解的是，还可以通过其他合适的方法识别需优先渲染的目标组件，包括但不限于正则匹配等，在此不作限制。

根据一些实施例，将所述网页中需优先渲染的目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串包括：基于所述模板组件所对应的虚拟DOM生成所述目标组件所对应的应用实例；以及通过调用renderToString()函数，将所述应用实例渲染为HTML字符串。

示例地，可以针对type＝scpipt&lang＝js文件，将其解析为抽象语法树AST,对于所遍历到的需要优先渲染的组件，添加以下代码：

import{createSSRApp}from'vue'

const app＝createSSRApp(vue component实例)

Const htmlString＝async renderToString(app)

在遍历完所有组件后，将htmlString插入HTML文件的标识处。

可以理解的是，在不同开发框架下，可以调用相应的函数以将目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串，在此不作限制。

根据一些实施例，将所述网页中需优先渲染的目标组件所对应的虚拟文档对象模型初始化为超文本标记语言字符包括：响应于确定所述网页中需优先渲染的目标组件中包括预设静态组件，从预设路径获取所述预设静态组件所对应的超文本标记语言字符串，其中所述预设静态组件所对应的超文本标记语言字符串为在之前执行网页应用构建过程中所保存到所述预设路径下的。

示例地，可以预先确定哪些静态组件，即纯样式组件，无需经常修改其样式内容，因此可以通过标识该静态组件，在将其提前解析为HTML字符串后，将其HTML字符串缓存到内存中的预设路径下。从而，在下一次构建网页的过程中，可以通过识别该标识，从该预设路径获取其相对应的HTML字符串，以使得能够进一步提高构建和生产效率。根据一些实施例，所述初始页面内容还包括第一JavaScript文件，所述方法还包括：基于不需要优先渲染的组件所对应的虚拟DOM以及所述第一JavaScript文件，生成第二JavaScript文件；以及响应于所述网页的加载请求，获取所述第二JavaScript文件，以使得所述客户端通过解析所述第二JavaScript文件实现所述网页组件的渲染。

如上所述，该第一JavaScript文件(即JS模块)与页面模板template所解析成渲染函数(JS文件)形成组件序列化组成框架运行时可以识别的组件模块(JS形式的文件)。在接收到加载请求后于线上执行时，客户端优先加载HTML节点下的内容，然后通过解析该JS形式的文件，将虚拟DOM初始化为超文本标记语言HTML字符串挂载到HTML节点下，然后客户端重新加载HTML节点下的内容。此时，前端页面的加载时间较长，一旦出现网络等问题，页面即会出现白屏现象，用户体验感较差。而在本公开中，可以将一部分组件(或全部组件)所对应的虚拟DOM优先处理成真实DOM。而其他部分组件与该第一JavaScript文件作为所生成第二JavaScript文件，在线上执行网页加载操作时进行解析以处理成真实DOM。

根据一些实施例，所述初始页面内容还包括层叠样式表CSS文件。层叠样式表CSS用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。

根据本公开的实施例，如图3所示，还提供了一种网页渲染装置300，包括：获取单元310，配置为获取所述网页所对应的初始页面内容，其中所述初始页面内容包括页面模板；解析单元320，配置为将所述页面模板解析为渲染函数；编译单元330，配置为将所述渲染函数编译为虚拟文档对象模型DOM；初始化单元340，配置为将所述网页中需优先渲染的目标组件所对应的虚拟DOM初始化为超文本标记语言HTML字符串；以及渲染单元350，配置为将所述HTML字符串插入到HTML节点下，以使得基于所述HTML字符串实现所述目标组件的优先渲染。

这里，网页渲染装置300的上述各单元310～350的操作分别与前面描述的步骤210～250的操作类似，在此不再赘述。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

参考图4，现将描述可以作为本公开的服务器或客户端的电子设备400的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图4所示，电子设备400包括计算单元401，其可以根据存储在只读存储器(ROM)402中的计算机程序或者从存储单元408加载到随机访问存储器(RAM)403中的计算机程序，来执行各种适当的动作和处理。在RAM403中，还可存储电子设备400操作所需的各种程序和数据。计算单元401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

电子设备400中的多个部件连接至I/O接口405，包括：输入单元406、输出单元407、存储单元408以及通信单元409。输入单元406可以是能向电子设备400输入信息的任何类型的设备，输入单元406可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入，并且可以包括但不限于鼠标、键盘、触摸屏、轨迹板、轨迹球、操作杆、麦克风和/或遥控器。输出单元407可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元408可以包括但不限于磁盘、光盘。通信单元409允许电子设备400通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、802.11设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元401可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元401的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元401执行上文所描述的各个方法和处理，例如方法200。例如，在一些实施例中，方法200可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元408。在一些实施例中，计算机程序的部分或者全部可以经由ROM 402和/或通信单元409而被载入和/或安装到电子设备400上。当计算机程序加载到RAM 403并由计算单元401执行时，可以执行上文描述的方法200的一个或多个步骤。备选地，在其他实施例中，计算单元401可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行方法200。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)、互联网和区块链网络。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行、也可以顺序地或以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

虽然已经参照附图描述了本公开的实施例或示例，但应理解，上述的方法、系统和设备仅仅是示例性的实施例或示例，本发明的范围并不由这些实施例或示例限制，而是仅由授权后的权利要求书及其等同范围来限定。实施例或示例中的各种要素可以被省略或者可由其等同要素替代。此外，可以通过不同于本公开中描述的次序来执行各步骤。进一步地，可以以各种方式组合实施例或示例中的各种要素。重要的是随着技术的演进，在此描述的很多要素可以由本公开之后出现的等同要素进行替换。

Claims (19)

1.一种网页渲染方法，包括：

获取所述网页所对应的初始页面内容，其中所述初始页面内容包括页面模板；

将所述页面模板解析为渲染函数；

将所述渲染函数编译为虚拟文档对象模型；

将所述网页中需优先渲染的目标组件所对应的虚拟文档对象模型初始化为超文本标记语言字符串；以及

将所述超文本标记语言字符串插入到超文本标记语言节点下，以使得基于所述超文本标记语言字符串实现所述目标组件的优先渲染。

2.如权利要求1所述的方法，其中，基于预设的标识信息确定所述网页中需优先渲染的目标组件。

3.如权利要求2所述的方法，其中，确定所述网页中需优先渲染的目标组件包括：

对所述渲染函数进行编译，以生成抽象语法树；以及

对所述抽象语法树进行遍历，以确定所述目标组件。

4.如权利要求1所述的方法，其中，所述初始页面内容还包括第一JavaScript文件，所述方法还包括：

基于不需要优先渲染的组件所对应的虚拟文档对象模型以及所述第一JavaScript文件，生成第二JavaScript文件；以及

响应于所述网页的加载请求，获取所述第二JavaScript文件，以使得所述客户端通过解析所述第二JavaScript文件实现所述网页组件的渲染。

5.如权利要求1或4所述的方法，其中，所述初始页面内容还包括层叠样式表文件。

6.如权利要求1所述的方法，其中，将所述网页中需优先渲染的目标组件所对应的虚拟文档对象模型初始化为超文本标记语言字符串包括：

基于所述模板组件所对应的虚拟文档对象模型生成所述目标组件所对应的应用实例；以及

通过调用renderToString()函数，将所述应用实例渲染为超文本标记语言字符串。

7.如权利要求1所述的方法，其中，将所述网页中需优先渲染的目标组件所对应的虚拟文档对象模型初始化为超文本标记语言字符包括：响应于确定所述网页中需优先渲染的目标组件中包括预设静态组件，从预设路径获取所述预设静态组件所对应的超文本标记语言字符串，其中所述预设静态组件所对应的超文本标记语言字符串为在之前执行网页渲染方法的过程中保存到所述预设路径下的。

8.如权利要求1所述的方法，其中，所述超文本标记语言节点为所述网页应用所挂载的根节点。

9.一种网页渲染装置，包括：

获取单元，配置为获取所述网页所对应的初始页面内容，其中所述初始页面内容包括页面模板；

解析单元，配置为将所述页面模板解析为渲染函数；

编译单元，配置为将所述渲染函数编译为虚拟文档对象模型；

初始化单元，配置为将所述网页中需优先渲染的目标组件所对应的虚拟文档对象模型初始化为超文本标记语言字符串；以及

渲染单元，配置为将所述超文本标记语言字符串插入到超文本标记语言节点下，以使得基于所述超文本标记语言字符串实现所述目标组件的优先渲染。

10.如权利要求9所述的装置，还包括：通过预设的标识信息确定所述网页中需优先渲染的目标组件的单元。

11.如权利要求10所述的装置，其中，确定所述网页中需优先渲染的目标组件的单元包括：

用于对所述渲染函数进行编译以生成抽象语法树的单元；以及

用于对所述抽象语法树进行遍历以确定所述目标组件的单元。

12.如权利要求9所述的装置，其中，所述初始页面内容还包括第一JavaScript文件，所述装置还包括：

用于基于不需要优先渲染的组件所对应的虚拟文档对象模型以及所述第一JavaScript文件生成第二JavaScript文件的单元；以及

用于响应于所述网页的加载请求获取所述第二JavaScript文件的单元，以使得所述客户端通过解析所述第二JavaScript文件实现所述网页组件的渲染。

13.如权利要求9或12所述的装置，其中，所述初始页面内容还包括层叠样式表文件。

14.如权利要求9所述的装置，其中，所述初始化单元包括：

用于基于所述模板组件所对应的虚拟文档对象模型生成所述目标组件所对应的应用实例的单元；以及

用于通过调用renderToString()函数将所述应用实例渲染为超文本标记语言字符串的单元。

15.如权利要求9所述的装置，其中，所述初始化单元包括获取子单元，配置为：响应于确定所述网页中需优先渲染的目标组件中包括预设静态组件，从预设路径获取所述预设静态组件所对应的超文本标记语言字符串，其中所述预设静态组件所对应的超文本标记语言字符串为在之前执行网页渲染方法的过程中保存到所述预设路径下的。

16.如权利要求9所述的装置，其中，所述超文本标记语言节点为所述网页应用所挂载的根节点。

17.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-8中任一项所述的方法。

18.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-8中任一项所述的方法。

19.一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现权利要求1-8中任一项所述的方法。

Images