CN111880788A - 页面渲染方法、装置、客户端和计算机可读存储介质 - Google Patents
页面渲染方法、装置、客户端和计算机可读存储介质 Download PDFInfo
- Publication number
- CN111880788A CN111880788A CN202010536789.8A CN202010536789A CN111880788A CN 111880788 A CN111880788 A CN 111880788A CN 202010536789 A CN202010536789 A CN 202010536789A CN 111880788 A CN111880788 A CN 111880788A
- Authority
- CN
- China
- Prior art keywords
- rendering
- page
- server
- client
- request
- 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
- 238000009877 rendering Methods 0.000 title claims abstract description 426
- 238000000034 method Methods 0.000 title claims abstract description 101
- 230000007246 mechanism Effects 0.000 claims description 53
- 230000006870 function Effects 0.000 claims description 11
- 230000008569 process Effects 0.000 abstract description 35
- 244000035744 Hura crepitans Species 0.000 description 22
- 238000010586 diagram Methods 0.000 description 8
- 230000004044 response Effects 0.000 description 7
- 230000008901 benefit Effects 0.000 description 5
- 238000004590 computer program Methods 0.000 description 5
- 238000002347 injection Methods 0.000 description 5
- 239000007924 injection Substances 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000003068 static effect Effects 0.000 description 4
- 238000004422 calculation algorithm Methods 0.000 description 3
- 230000001066 destructive effect Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000013467 fragmentation Methods 0.000 description 1
- 238000006062 fragmentation reaction Methods 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 239000000243 solution Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请公开了一种页面渲染方法、装置、客户端和计算机可读存储介质，所述页面渲染方法包括：生成目标页面的服务端渲染请求；将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列；接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。本申请实施例的页面渲染方法将CSR流程中的耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，并在客户端同时进行SSR和CSR渲染流程，客户端的SSR流程无需启动Java Script引擎及加载业务Bundle，就可以完成首屏渲染，缩短了客户端的首屏渲染时间，提高了用户体验。
Description
技术领域
本申请涉及网页开发技术领域，具体涉及一种页面渲染方法、装置、客户端和计算机可读存储介质。
背景技术
现有技术中常用的页面渲染方法主要包括服务端渲染(Server Side Render，简称SSR)和客户端渲染(Client Side Render，简称CSR)。SSR的原理是将HTML(Hyper TextMarkup Language，超文本标记语言)页面及其相应的动态数据在服务端进行组装，然后直接将完整的页面呈现在浏览器。CSR的原理是HTML页面及动态数据的组装发生在客户端，即浏览器端，即前后端分离的情况下就是采用的客户端渲染机制。
React Native(简称RN)是Facebook在2015年开源的跨平台移动应用开发框架，是Facebook早先开源的用户界面(User Interface，简称UI)框架React在原生移动应用平台的衍生产物。RN基于Java Script语言来开发移动应用，且使用客户端渲染CSR完成一个页面的渲染。
然而发明人发现，现有技术中的CSR渲染效率依赖于客户端设备性能和网络环境，客户端设备和网络环境的差异化、碎片化会导致页面渲染性能差异非常大，首屏渲染时间长，用户体验差。
发明内容
鉴于上述问题，提出了本申请以便提供一种克服上述问题或者至少部分地解决上述问题的页面渲染方法、装置、客户端和计算机可读存储介质。
依据本申请的第一方面，提供了一种页面渲染方法，包括：
生成目标页面的服务端渲染请求；
将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列；
接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。
可选地，所述接收并执行所述服务端返回的渲染操作序列包括：
基于服务端渲染机制执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
可选地，所述根据执行结果完成目标页面的渲染包括：
基于客户端渲染机制生成目标页面的虚拟DOM视图；
基于所述虚拟DOM视图和所述Native视图的视图标签匹配情况，完成用户界面组件的事件绑定。
可选地，所述基于客户端渲染机制生成目标页面的虚拟DOM视图包括：
启动React Native引擎和Java Script引擎；
基于启动的React Native引擎和Java Script引擎运行所述React Native业务包；
根据所述React Native业务包的运行结果，生成虚拟DOM视图。
可选地，所述基于服务端渲染机制执行所述渲染操作序列包括：
基于启动的React Native引擎模拟客户端渲染环境，在模拟的客户端渲染环境中执行所述渲染操作序列。
可选地，所述目标页面为客户端的首屏页面，所述页面渲染方法还包括：
通过Hook函数屏蔽客户端渲染机制对所述首屏页面的二次渲染。
可选地，所述页面渲染方法还包括：
获取对所述首屏页面的刷新请求；
根据所述页面刷新请求和所述视图标签，对所述首屏页面进行刷新。
依据本申请的第二方面，提供了一种页面渲染装置，包括：
生成单元，用于生成目标页面的服务端渲染请求；
发送单元，用于将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列；
渲染单元，用于接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。
可选地，所述渲染单元还用于：
基于服务端渲染机制执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
可选地，所述渲染单元还用于：
基于客户端渲染机制生成目标页面的虚拟DOM视图；
基于所述虚拟DOM视图和所述Native视图的视图标签匹配情况，完成用户界面组件的事件绑定。
可选地，所述渲染单元还用于：
启动React Native引擎和Java Script引擎；
基于启动的React Native引擎和Java Script引擎运行所述React Native业务包；
根据所述React Native业务包的运行结果，生成虚拟DOM视图。
可选地，所述渲染单元还用于：
基于启动的React Native引擎模拟客户端渲染环境，在模拟的客户端渲染环境中执行所述渲染操作序列。
可选地，所述目标页面为客户端的首屏页面，所述页面渲染装置还包括：
屏蔽单元，用于通过Hook函数屏蔽客户端渲染机制对所述首屏页面的二次渲染。
可选地，所述页面渲染装置还包括：
获取单元，用于获取对所述首屏页面的刷新请求；
刷新单元，用于根据所述页面刷新请求和所述视图标签，对所述首屏页面进行刷新。
依据本申请的第三方面，提供了一种客户端，包括：处理器；以及被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行如上述任一所述的页面渲染方法。
依据本申请的第四方面，提供了一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现如上述任一所述的页面渲染方法。
由上述可知，本申请的技术方案，采用生成目标页面的服务端渲染请求的方式，将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行ReactNative业务包，得到渲染操作序列；接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。本申请实施例的页面渲染方法将CSR流程中的耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，并在客户端同时进行SSR和CSR渲染流程，客户端的SSR流程无需启动Java Script引擎及加载业务Bundle，就可以完成首屏渲染，缩短了客户端的首屏渲染时间，提高了用户体验。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了根据本申请一个实施例的页面渲染方法的流程示意图；
图2示出了根据本申请一个实施例的页面渲染流程示意图；
图3示出了根据本申请一个实施例的页面渲染装置的结构示意图；
图4示出了根据本申请一个实施例的客户端的结构示意图；
图5示出了根据本申请一个实施例的计算机可读存储介质的结构示意图。
具体实施方式
下面将参照附图更详细地描述本申请的示例性实施例。虽然附图中显示了本申请的示例性实施例，然而应当理解，可以以各种形式实现本申请而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本申请，并且能够将本申请的范围完整的传达给本领域的技术人员。
现有技术中基于React Native(简称RN)的客户端渲染(CSR)流程具体可以包括如下步骤：1)启动Java Script引擎；2)加载RN基础包Bundle；3)拉取并加载业务包Bundle；4)执行业务包Bundle代码生成虚拟DOM(Document Object Model，文件对象模型)；5)完成虚拟DOM到Native视图的渲染。
上述过程中的步骤1)至步骤4)耗时较长，耗时占整体流程的60％以上，且最终的渲染效果依赖于客户端设备性能和网络环境，造成客户端的首屏渲染时间长，用户体验差。
基于此，本申请实施例提供了一种页面渲染方法，该页面是指客户端中的页面，而非一般的HTML页面。如图1所示，所述页面渲染方法包括如下的步骤S110至步骤S130：
步骤S110，生成目标页面的服务端渲染请求。
具体实施时，在进行页面渲染时，首先可以根据用户在客户端的操作生成页面渲染请求，这里的页面渲染请求可以是指服务端渲染(SSR)的请求。渲染请求中具体可以包含渲染请求的生成时间、对应的客户端的标识信息和待渲染的目标页面的URL(UniformResource Locator，统一资源定位符或网页地址)等。
例如，当用户在客户端上打开某一应用程序时，则会在该客户端上生成与该应用程序对应的服务端渲染请求，后续则可以根据请求的内容对该应用程序的页面进行渲染以展示给用户。
步骤S120，将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列。
为了解决客户端渲染(CSR)导致的首屏渲染时间较长的问题，本申请实施例在生成服务端渲染的请求后，将该请求发送至服务端，借助服务端强大的计算能力，加速页面渲染，缩短客户端的首屏渲染时间。具体地，服务端可以根据SSR请求运行相应的ReactNative业务包(Bundle)，得到渲染操作序列。这里的React Native业务Bundle可以从CDN(Content Delivery Network，内容分发网络)服务器获取，React Native业务Bundle可以是与具体业务场景相关的文件包，具体可以由Java Script代码、图片和布局文件等各种资源文件构成。渲染操作序列是指各个对象如页面组件的绘制顺序，例如在先生成一个文本框，再创建一个对话框等，通过控制一个特定组件绘制到屏幕上的顺序，可以更好地控制组件之间的位置关系等。
步骤S130，接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。
在将服务端渲染请求发送至服务端后，接收服务端返回的渲染操作序列，根据服务端渲染(SSR)的流程依次执行该渲染操作序列，进而完成目标页面的渲染，将该渲染后的页面展示给用户，进而实现对用户操作的响应。
与现有技术中的页面渲染方法相比，本申请实施例的页面渲染方法将CSR流程中耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，并根据服务端生成的渲染操作序列实现在客户端的SSR渲染流程，缩短了客户端的首屏渲染时间，提高了用户体验。
在本申请的一个实施例中，所述接收并执行所述服务端返回的渲染操作序列包括：基于服务端渲染机制执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
具体实施时，本申请实施例在得到服务端返回的渲染操作序列后，基于服务端渲染(SSR)机制来执行渲染操作序列，进而得到目标页面对应的用户界面组件和Native视图。现有技术中的SSR机制主要包括如下步骤：1)浏览器端向Node服务端发送URL请求；2)Node服务端从后端服务器获取首屏数据；3)Node服务端对获取到的首屏数据进行渲染，得到首屏HTML；4)Node服务端将渲染后得到的首屏HTML返回至浏览器端；5)浏览器端可以继续向Node服务端发送其他数据请求。本申请实施例中相当于是基于SSR机制的渲染流程在客户端执行了渲染操作序列，进而得到了客户端渲染后的目标页面。
在本申请的一个实施例中，所述根据执行结果完成目标页面的渲染包括：基于客户端渲染机制生成目标页面的虚拟DOM视图；基于所述虚拟DOM视图和所述Native视图的视图标签匹配情况，完成用户界面组件的事件绑定。
本申请实施例对于客户端的页面渲染可以采用服务端渲染(SSR)机制和客户端渲染(CSR)机制相结合的方式来实现，SSR机制主要用于首屏渲染，对于后续页面的刷新可以基于React Native的客户端渲染CSR机制来完成。具体实施时，基于React Native的CSR机制可以生成目标页面的虚拟DOM视图，虚拟DOM的优势是通过React Native中的Diff算法比对Java Script原生对象，计算出需要变更的DOM，然后只对变化的DOM进行操作，而不是更新整个视图，减少了Java Script操作真实DOM所带来的性能消耗，并且抽象了原本的渲染过程，实现了跨平台的能力，不仅仅局限于浏览器的DOM，还可以是安卓和IOS(苹果公司移动设备的移动操作***)的原生组件。
此外，为了建立服务端渲染SSR和客户端渲染CSR的关联关系，保证后续页面刷新的一致性，可以对客户端渲染CSR生成的虚拟DOM视图和服务端渲染SSR生成的Native视图的视图标签(view tag)进行匹配，进而根据匹配结果完成对用户界面组件的事件绑定。这里的视图标签(view tag)是指在用户界面UI中，每个创建的UI视图view，当被添加到窗口上时，都有一个tag值作为自己的唯一标识。这里的事件绑定就是为某个用户界面组件的某个事件绑定相关的事件处理程序。
在本申请的一个实施例中，所述基于客户端渲染机制生成目标页面的虚拟DOM视图包括：启动React Native引擎和Java Script引擎；基于启动的React Native引擎和JavaScript引擎运行所述React Native业务包；根据所述React Native业务包的运行结果，生成虚拟DOM视图。
具体实施时，在基于React Native的CSR机制生成虚拟DOM视图时，可以先启动React Native引擎和Java Script引擎，之后运行React Native业务包。CSR机制下ReactNative引擎的启动可以与SSR机制下生成SSR请求时同时进行，当基于SSR机制生成相应的Native视图后，可以再启动CSR机制下的Java Script引擎，以使CSR机制接管后续的页面刷新操作。
这里的React Native业务包(Bundle)同样可以从CDN服务器获取，具体可以由Java Script代码、图片和布局文件等各种资源文件等构成，且内容和服务端运行的ReactNative业务包相同，最后根据React Native业务包的运行结果可以得到对应的虚拟DOM视图。
在本申请的一个实施例中，所述基于服务端渲染机制执行所述渲染操作序列包括：基于启动的React Native引擎模拟客户端渲染环境，在模拟的客户端渲染环境中执行所述渲染操作序列。
具体实施时，如前所述，React Native引擎基于Java Script语言来开发移动应用，并使用客户端渲染CSR机制来完成一个页面的渲染，因此为了在SSR渲染流程中实现React Native的运行，可以在生成服务端渲染请求的同时，启动React Native引擎，在SSR渲染流程中模拟客户端渲染的React Native的运行环境，进而在该模拟的客户端渲染环境中执行渲染操作序列，得到渲染后的Native视图。
在本申请的一个实施例中，所述目标页面为客户端的首屏页面，所述页面渲染方法还包括：通过Hook函数屏蔽客户端渲染机制对所述首屏页面的二次渲染。
具体实施时，本申请实施例的SSR机制主要用于首屏渲染，因此基于SSR机制得到的是客户端的首屏页面，而由于CSR机制也在客户端同时运行，并且执行的是相同的ReactNative业务Bundle，为了避免CSR机制对SSR机制已经渲染过的首屏页面再次进行渲染，本申请实施例采用UI Manager Module(用户界面管理模块)调用Hook(钩子)函数来屏蔽或拦截CSR机制对首屏页面的二次渲染。Hook函数是一个应用程序定义的回调函数，用以监视***或某一特定类型的事件，这些事件可以是与某一特定线程关联的，也可以是***中所有线程的事件，在本申请实施例中可以是指基于CSR机制对首屏页面的渲染。
在本申请的一个实施例中，所述页面渲染方法还包括：获取对所述首屏页面的刷新请求；根据所述页面刷新请求和所述视图标签，对所述首屏页面进行刷新。
具体实施时，用户可以在客户端上通过对首屏页面的点击操作等来刷新首屏页面以浏览新的内容，因此本申请实施例可以根据用户在客户端的操作获取对首屏页面的刷新请求。此外，为了保证页面刷新的一致性，可以基于页面的视图标签来对首屏页面进行刷新。这里的刷新操作可以包括对页面视图的删除或者修改等操作。
如图2所示，本申请实施例还提供了一种页面渲染流程示意图。首先在客户端生成服务端渲染SSR请求，之后将该SSR请求发送至服务端，服务端根据SSR请求拉取相应的业务数据及React Native业务包，运行React Native业务包，得到渲染操作序列DSL(DomainSpecific Language，领域特定语言)并下发至客户端，在客户端基于SSR机制执行渲染操作序列，得到用户界面组件和Native视图。具体执行时，启动CSR机制下的React Native引擎，模拟客户端渲染的React Native运行环境，以使SSR机制在该环境下执行渲染操作序列，最后完成目标页面的首屏渲染。对于后续页面的刷新操作，可以由CSR机制来接管，具体地，在通过SSR机制得到渲染后的首屏页面后，启动CSR机制下的Java Script引擎，之后运行React Native业务包生成虚拟DOM视图，在这个过程中，屏蔽CSR机制对首屏页面的二次渲染，同时对虚拟DOM视图与Native视图的视图标签进行匹配，进而完成对用户界面组件的事件绑定，最后可以根据页面刷新请求执行后续的刷新渲染操作。
本申请实施例提供了一种页面渲染装置300，该页面是指客户端中的页面，而非一般的HTML页面。如图3所示，所述页面渲染装置300包括：生成单元310、发送单元320和渲染单元330。
本申请实施例的生成单元310，用于生成目标页面的服务端渲染请求。
具体实施时，在进行页面渲染时，首先可以根据用户在客户端的操作生成页面渲染请求，这里的页面渲染请求可以是指服务端渲染(SSR)的请求。渲染请求中具体可以包含渲染请求的生成时间、对应的客户端的标识信息和待渲染的目标页面的URL(UniformResource Locator，统一资源定位符或网页地址)等。
例如，当用户在客户端上打开某一应用程序时，则会在该客户端上生成与该应用程序对应的服务端渲染请求，后续则可以根据请求的内容对该应用程序的页面进行渲染以展示给用户。
本申请实施例的发送单元320，用于将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列。
为了解决客户端渲染(CSR)导致的首屏渲染时间较长的问题，本申请实施例在生成服务端渲染的请求后，将该请求发送至服务端，借助服务端强大的计算能力，加速页面渲染，缩短客户端的首屏渲染时间。具体地，服务端可以根据SSR请求运行相应的ReactNative业务包(Bundle)，得到渲染操作序列。这里的React Native业务Bundle可以从CDN(Content Delivery Network，内容分发网络)服务器获取，React Native业务Bundle可以是与具体业务场景相关的文件包，具体可以由Java Script代码、图片和布局文件等各种资源文件构成。渲染操作序列是指各个对象如页面组件的绘制顺序，即通过控制一个特定组件绘制到屏幕上的顺序，可以更好地控制组件之间的位置关系等。
本申请实施例的渲染单元330，用于接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。
在将服务端渲染请求发送至服务端后，接收服务端返回的渲染操作序列，根据服务端渲染(SSR)的流程依次执行该渲染操作序列，进而完成目标页面的渲染，将该渲染后的页面展示给用户，进而实现对用户操作的响应。
与现有技术中的页面渲染方法相比，本申请实施例的页面渲染方法将CSR流程中耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，并根据服务端生成的渲染操作序列实现在客户端的SSR渲染流程，缩短了客户端的首屏渲染时间，提高了用户体验。
在本申请的一个实施例中，所述渲染单元330还用于：基于服务端渲染机制执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
在本申请的一个实施例中，所述渲染单元330还用于：基于客户端渲染机制生成目标页面的虚拟DOM视图；基于所述虚拟DOM视图和所述Native视图的视图标签匹配情况，完成用户界面组件的事件绑定。
在本申请的一个实施例中，所述渲染单元330还用于：启动React Native引擎和Java Script引擎；基于启动的React Native引擎和Java Script引擎运行所述ReactNative业务包；根据所述React Native业务包的运行结果，生成虚拟DOM视图。
在本申请的一个实施例中，所述渲染单元330还用于：基于启动的React Native引擎模拟客户端渲染环境，在模拟的客户端渲染环境中执行所述渲染操作序列。
在本申请的一个实施例中，所述目标页面为客户端的首屏页面，所述页面渲染装置还包括：屏蔽单元，用于通过Hook函数屏蔽客户端渲染机制对所述首屏页面的二次渲染。
在本申请的一个实施例中，所述页面渲染装置还包括：获取单元，用于获取对所述首屏页面的刷新请求；刷新单元，用于根据所述页面刷新请求和所述视图标签，对所述首屏页面进行刷新。
本申请实施例还提供了一种基于服务端的页面渲染方法，该页面是指客户端中的页面，而非一般的HTML页面。所述基于服务端的页面渲染方法包括如下的步骤：
获取客户端发送的服务端渲染请求并进行解析，根据解析结果获取React Native业务包。
具体实施时，在进行页面渲染时，可以先获取客户端发送的服务端渲染SSR请求，这里的SSR请求具体可以包含渲染请求的生成时间、对应的客户端的标识信息和待渲染的目标页面的URL(Uniform Resource Locator，统一资源定位符或网页地址)等信息。对接收到的SSR请求进行解析，可以得到相应的页面渲染参数，例如可以包括待渲染页面的名称、版本、组件ID、组件数量、组件类型等参数。之后再根据解析得到的参数信息获取相应的React Native业务包(Bundle)，这里的React Native业务Bundle可以是指与具体业务场景相关的文件包，具体可以由Java Script代码、图片和布局文件等各种资源文件构成。
在服务端的运行环境中注入React Native框架的运行库。
为了使得运行在客户端的同一份React Native代码同样可以运行在服务端，本申请实施例在完成对SSR请求的解析并获取对应的React Native业务Bundle后，将ReactNative框架的运行库注入到了服务端的运行环境中。在一些编程语言中，把某些可以重用的程序或者实例打包或者重建成为“运行库”，这些实例可以在它们运行的时候被连接或者被任何程序调用。本申请实施例通过在服务端的运行环境中注入React Native框架的运行库，可以使得服务端在React Native框架的运行状态下进行页面的渲染。
根据已注入所述运行库的服务端的运行环境，运行所述React Native业务包，得到渲染操作序列。
在将React Native框架的运行库注入服务端的运行环境后，在该运行环境下，运行React Native业务包，进而得到渲染操作序列。这里的渲染操作序列可以是指可供客户端进行解析的渲染数据，具体地可以指各个页面组件的绘制顺序，例如在客户端先生成一个文本框，再创建一个对话框等，通过控制一个特定组件绘制到屏幕上的顺序，可以更好地控制组件之间的位置关系。
将所述渲染操作序列发送至所述客户端，以使所述客户端根据所述渲染操作序列进行页面渲染。
在得到可供客户端进行解析的完整渲染操作序列后，将该渲染操作序列发送至客户端，以使客户端执行该渲染操作序列，进而完成页面渲染。本申请实施例在不改动ReactNative业务代码的前提下，通过在服务端的运行环境中注入运行库的方式，使得ReactNative业务代码在服务端可以完成大部分的渲染工作，并输出客户端可解析的完整渲染序列，实现了React Native在服务端的运行，提高了页面渲染的性能。
在本申请的一个实施例中，所述运行库包括运行时(Runtime)。Runtime是指一个程序在运行(或者在被执行)的状态，也就是说，当打开一个程序使它在终端上运行的时候，这个程序就是处于运行时刻。本申请实施例通过在服务端的运行环境中注入React Native框架的Runtime，可以使得服务端在React Native框架的运行状态下进行页面的渲染。
在本申请的一个实施例中，所述在服务端的运行环境中注入React Native框架的运行库包括：根据所述解析结果创建沙箱环境，以将React Native框架的运行环境和所述服务端的运行环境进行隔离；在所述沙箱环境下，将所述React Native框架的运行库注入所述服务端的运行环境中。
在页面渲染进程中，为了防止执行恶意程序，本申请实施例在得到SSR请求的解析结果后，还根据解析得到的参数在运行环境中创建了沙箱环境，例如根据解析到的页面名称和版本等参数创建相应的沙箱环境。沙箱(Sandbox)又称为沙盒，是一种为运行中的程序提供隔离环境的安全机制。沙箱通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用，被广泛应用到浏览器、文档阅读器等解析和处理网络资源的应用中。本申请实施例中在创建好的沙箱环境下，将React Native框架的Runtime注入服务端的运行环境中，进而将React Native框架的运行环境和服务端程序的运行环境进行隔离，确保服务端的正常功能不受干扰，同时又保证了React Native框架的正常运行。
在本申请的一个实施例中，所述在服务端的运行环境中注入React Native框架的运行库包括：在Node服务端的运行环境中注入所述React Native框架的运行库。
在服务端渲染流程中，通常包括浏览器端(客户端)、Node服务端和后端服务器三部分，其中Node服务端充当的是中间层的角色，一个典型的Node中间层应用就是后端提供数据、Node中间层渲染模板、浏览器端动态渲染的过程。通过Node中间层可以实现首屏快速响应、SEO(search engine optimization，搜索引擎优化)友好，同时又保留前端后分离以及客户端渲染的功能(即首屏由服务端渲染，其它由客户端渲染)。在本申请实施例的页面渲染流程中，同样基于Node服务端来构建后端服务器和客户端的同构基础，通过在Node服务端的运行环境中注入React Native框架的Runtime，使得Node服务端能够在ReactNative框架的运行状态下进行页面的渲染，提高页面渲染的性能。
在本申请的一个实施例中，所述根据已注入所述运行库的服务端的运行环境，运行所述React Native业务包，得到渲染操作序列包括：根据已注入所述运行库的服务端的运行环境，加载React Native框架；根据所述React Native框架的加载结果，运行所述React Native业务包。
具体实施时，在将React Native框架的运行库注入服务端的运行环境后，在该运行环境下，启动React Native引擎，在React Native引擎成功启动后，运行React Native业务Bundle，以得到可供客户端解析的渲染操作序列。
在本申请的一个实施例中，所述基于服务端的页面渲染方法还包括：根据所述解析结果获取业务数据；在React Native框架加载完成后，将所述业务数据注入所述ReactNative业务包并运行，得到所述渲染操作序列。
具体实施时，本申请实施例在对SSR请求完成解析得到相应的参数信息之后，还会根据解析得到的参数信息拉取相应的业务数据，这里的业务数据可以是指与待渲染的页面的具体业务领域相关的数据，具体可以包括渲染某一业务场景下的页面内容时所需要的各组件的业务数据，包括父组件和子组件分别对应的业务数据。
例如，当用户进入网页时首先获取的业务数据是全部项目(父组件)的列表，即可以看做是主业务数据，用户从中挑选一个项目下的某个仪表盘(子组件)做展示，此时获取的是子组件数据，即子业务数据。
在本申请的一个实施例中，所述基于服务端的页面渲染方法还包括：通过内容分发网络服务器获取所述React Native业务包，以及通过业务服务器获取所述业务数据。
具体实施时，本申请实施例的React Native业务包从内容分发网络(ContentDelivery Network，简称CDN)服务器来获取，CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高用户访问响应速度和命中率。在本申请实施例中，通过采用CDN服务器大大提高了获取React Native业务包的效率，进而缩短了页面渲染的时间。
对于业务数据，可以采用动态获取的方式从业务服务器得到。当然本领域技术人员也可以采用动态获取和静态获取相结合的方式获取业务数据，例如可以先将业务数据打包成离线包，在页面渲染之前提前分发到客户端本地，在用户访问页面时，优先从本地获取静态的业务资源，而动态的业务资源则向业务服务器请求获取。
在本申请的一个实施例中，所述基于服务端的页面渲染方法还包括：通过内部局域网络或专线网络获取所述React Native业务包和所述业务数据。
具体实施时，为了降低网络耗时，本申请实施例的React Native业务Bundle和业务数据均通过内网或专线网络从远端服务端获取，大大提高了数据获取效率，缩短了页面渲染的时间，进而提高了用户体验。
本申请实施例提供了一种基于服务端的页面渲染装置，该页面是指客户端中的页面，而非一般的HTML页面。所述基于服务端的页面渲染装置包括：第一获取单元、第一注入单元、运行单元和发送单元。
第一获取单元，用于获取客户端发送的服务端渲染请求并进行解析，根据解析结果获取React Native业务包。
具体实施时，在进行页面渲染时，可以先获取客户端发送的服务端渲染SSR请求，这里的SSR请求具体可以包含渲染请求的生成时间、对应的客户端的标识信息和待渲染的目标页面的URL(Uniform Resource Locator，统一资源定位符或网页地址)等信息。对接收到的SSR请求进行解析，可以得到相应的页面渲染参数，例如可以包括待渲染页面的名称、版本、组件ID、组件数量、组件类型等参数。之后再根据解析得到的参数信息获取相应的React Native业务包(Bundle)，这里的React Native业务Bundle可以是指与具体业务场景相关的文件包，具体可以由Java Script代码、图片和布局文件等各种资源文件构成。
第一注入单元，用于在服务端的运行环境中注入React Native框架的运行库。
为了使得运行在客户端的同一份React Native代码同样可以运行在服务端，本申请实施例在完成对SSR请求的解析并获取对应的React Native业务Bundle后，将ReactNative框架的运行库注入到了服务端的运行环境中。在一些编程语言中，把某些可以重用的程序或者实例打包或者重建成为“运行库”，这些实例可以在它们运行的时候被连接或者被任何程序调用。本申请实施例通过在服务端的运行环境中注入React Native框架的运行库，可以使得服务端在React Native框架的运行状态下进行页面的渲染。
运行单元，用于根据已注入所述运行库的服务端的运行环境，运行所述ReactNative业务包，得到渲染操作序列。
在将React Native框架的运行库注入服务端的运行环境后，在该运行环境下，运行React Native业务包，进而得到渲染操作序列。这里的渲染操作序列可以是指可供客户端进行解析的渲染数据，具体地可以指各个页面组件的绘制顺序，例如在客户端先生成一个文本框，再创建一个对话框等，通过控制一个特定组件绘制到屏幕上的顺序，可以更好地控制组件之间的位置关系。
发送单元，用于将所述渲染操作序列发送至所述客户端，以使所述客户端根据所述渲染操作序列进行页面渲染。
在得到可供客户端进行解析的完整渲染操作序列后，将该渲染操作序列发送至客户端，以使客户端执行该渲染操作序列，进而完成页面渲染。本申请实施例在不改动ReactNative业务代码的前提下，通过在服务端的运行环境中注入运行库的方式，使得ReactNative业务代码在服务端可以完成大部分的渲染工作，并输出客户端可解析的完整渲染序列，实现了React Native在服务端的运行，提高了页面渲染的性能。
在本申请的一个实施例中，所述运行库包括运行时(Runtime)。Runtime是指一个程序在运行(或者在被执行)的状态，也就是说，当打开一个程序使它在终端上运行的时候，这个程序就是处于运行时刻。本申请实施例通过在服务端的运行环境中注入React Native框架的Runtime，可以使得服务端在React Native框架的运行状态下进行页面的渲染。
在本申请的一个实施例中，所述第一注入单元还用于：根据所述解析结果创建沙箱环境，以将React Native框架的运行环境和所述服务端的运行环境进行隔离；在所述沙箱环境下，将所述React Native框架的运行库注入所述服务端的运行环境中。
在本申请的一个实施例中，所述第一注入单元还用于：在Node服务端的运行环境中注入所述React Native框架的运行库。
在本申请的一个实施例中，所述运行单元还用于：根据已注入所述运行库的服务端的运行环境，加载React Native框架；根据所述React Native框架的加载结果，运行所述React Native业务包。
在本申请的一个实施例中，所述基于服务端的页面渲染装置还包括：第二获取单元，用于根据所述解析结果获取业务数据；第二注入单元，用于在React Native框架加载完成后，将所述业务数据注入所述React Native业务包并运行，得到所述渲染操作序列。
在本申请的一个实施例中，所述基于服务端的页面渲染装置还包括：第三获取单元，用于通过内容分发网络服务器获取所述React Native业务包，以及通过业务服务器获取所述业务数据。
在本申请的一个实施例中，所述基于服务端的页面渲染装置还包括：第四获取单元，用于通过内部局域网络或专线网络获取所述React Native业务包和所述业务数据。
本申请实施例还提供了一种页面渲染方法，该方法基于客户端和服务端两部分来实现，所述方法包括如下的步骤：
客户端生成目标页面的服务端渲染请求，并将所述服务端渲染请求发送至服务端。
具体实施时，在进行页面渲染时，客户端首先可以根据用户在客户端的操作生成页面渲染请求，这里的页面渲染请求可以是指服务端渲染(SSR)的请求。渲染请求中具体可以包含渲染请求的生成时间、对应的客户端的标识信息和待渲染的目标页面的URL(Uniform Resource Locator，统一资源定位符或网页地址)等。
例如，当用户在客户端上打开某一应用程序时，则会在该客户端上生成与该应用程序对应的服务端渲染请求并将该请求发送给服务端进行后续处理。
所述服务端对所述服务端渲染请求进行解析，并根据解析结果运行React Native业务包，得到渲染操作序列并发送至所述客户端。
为了解决客户端渲染(CSR)导致的首屏渲染时间较长的问题，本申请实施例在生成服务端渲染的请求后，将该请求发送至服务端，借助服务端强大的计算能力，加速页面渲染，缩短客户端的首屏渲染时间。具体地，服务端可以对接收到的SSR请求进行解析，可以得到相应的页面渲染参数，例如可以包括待渲染页面的名称、版本、组件ID、组件数量、组件类型等参数。之后根据解析结果运行相应的React Native业务包(Bundle)，得到渲染操作序列。这里的React Native业务Bundle可以从CDN(Content Delivery Network，内容分发网络)服务器获取，React Native业务Bundle可以是与具体业务场景相关的文件包，具体可以由Java Script代码、图片和布局文件等各种资源文件构成。渲染操作序列是指各个对象如页面组件的绘制顺序，例如在先生成一个文本框，再创建一个对话框等，通过控制一个特定组件绘制到屏幕上的顺序，可以更好地控制组件之间的位置关系等。之后服务端将生成的渲染操作序列发送至客户端进行页面渲染。
所述客户端接收并执行所述服务端返回的渲染操作序列，根据执行结果生成渲染后的目标页面。
客户端接收服务端返回的渲染操作序列，并依次执行该渲染操作序列，进而完成目标页面的渲染，将该渲染后的页面展示给用户，进而实现对用户操作的响应。
与现有技术中的页面渲染方法相比，本申请实施例的页面渲染方法将CSR流程中耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，缩短了客户端的首屏渲染时间，提高了用户体验。
在本申请的一个实施例中，所述服务端对所述服务端渲染请求进行解析，并根据解析结果运行React Native业务包，得到渲染操作序列并发送至所述客户端包括：所述服务端根据所述解析结果创建沙箱环境，以将React Native框架的运行环境和所述服务端的运行环境进行隔离；在所述沙箱环境下，将所述React Native框架的运行库注入所述服务端的运行环境中。
在页面渲染进程中，为了防止执行恶意程序，本申请实施例的服务端在得到对SSR请求的解析结果后，还根据解析得到的参数在运行环境中创建了沙箱环境，例如根据解析到的页面名称和版本等参数创建相应的沙箱环境。沙箱(Sandbox)又称为沙盒，是一种为运行中的程序提供隔离环境的安全机制。沙箱通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用，被广泛应用到浏览器、文档阅读器等解析和处理网络资源的应用中。本申请实施例中在创建好的沙箱环境下，将React Native框架的运行库注入服务端的运行环境中，进而将React Native框架的运行环境和服务端程序的运行环境进行隔离，确保服务端的正常功能不受干扰，同时又保证了React Native框架的正常运行。
在本申请的一个实施例中，所述运行库包括运行时(Runtime)。Runtime是指一个程序在运行(或者在被执行)的状态，也就是说，当打开一个程序使它在终端上运行的时候，这个程序就是处于运行时刻。本申请实施例通过在服务端的运行环境中注入React Native框架的Runtime，可以使得服务端在React Native框架的运行状态下进行页面的渲染。
在本申请的一个实施例中，所述服务端对所述服务端渲染请求进行解析，并根据解析结果运行React Native业务包，得到渲染操作序列并发送至所述客户端包括：所述服务端根据已注入所述运行库的服务端的运行环境，加载React Native框架；根据所述ReactNative框架的加载结果，运行所述React Native业务包。
具体实施时，在将React Native框架的运行库注入服务端的运行环境后，在该运行环境下，启动React Native引擎，在React Native引擎成功启动后，运行React Native业务Bundle，以得到可供客户端解析的渲染操作序列。
在本申请的一个实施例中，所述方法还包括：所述服务端根据所述解析结果获取业务数据；在React Native框架加载完成后，将所述业务数据注入所述React Native业务包并运行，得到所述渲染操作序列。
具体实施时，本申请实施例的服务端在对SSR请求完成解析得到相应的参数信息之后，还会根据解析得到的参数信息拉取相应的业务数据，这里的业务数据可以是指与待渲染的页面的具体业务领域相关的数据，具体可以包括渲染某一业务场景下的页面内容时所需要的各组件的业务数据，包括父组件和子组件分别对应的业务数据。
例如，当用户进入网页时首先获取的业务数据是全部项目(父组件)的列表，即可以看做是主业务数据，用户从中挑选一个项目下的某个仪表盘(子组件)做展示，此时获取的是子组件数据，即子业务数据。
在本申请的一个实施例中，所述方法还包括：通过内容分发网络服务器获取所述React Native业务包，以及通过业务服务器获取所述业务数据。
具体实施时，本申请实施例的React Native业务包从内容分发网络(ContentDelivery Network，简称CDN)服务器来获取，CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高用户访问响应速度和命中率。在本申请实施例中，通过采用CDN服务器大大提高了获取React Native业务包的效率，进而缩短了页面渲染的时间。
对于业务数据，可以采用动态获取的方式从业务服务器得到。当然本领域技术人员也可以采用动态获取和静态获取相结合的方式获取业务数据，例如可以先将业务数据打包成离线包，在页面渲染之前提前分发到客户端本地，在用户访问页面时，优先从本地获取静态的业务资源，而动态的业务资源则向业务服务器请求获取。
在本申请的一个实施例中，所述方法还包括：通过内部局域网络或专线网络获取所述React Native业务包和所述业务数据。
具体实施时，为了降低网络耗时，本申请实施例的React Native业务Bundle和业务数据均通过内网或专线网络从远端服务端获取，大大提高了数据获取效率，缩短了页面渲染的时间，进而提高了用户体验。
在本申请的一个实施例中，所述根据解析结果运行React Native业务包，得到渲染操作序列并发送至所述客户端包括：所述服务端根据所述React Native业务包的运行结果，生成虚拟DOM视图；根据所述虚拟DOM视图生成所述渲染操作序列并发送至所述客户端。
具体实施时，服务端基于React Native的渲染机制可以生成目标页面的虚拟DOM视图，虚拟DOM的优势是通过React Native中的Diff算法比对Java Script原生对象，计算出需要变更的DOM，然后只对变化的DOM进行操作，而不是更新整个视图，减少了JavaScript操作真实DOM所带来的性能消耗，并且抽象了原本的渲染过程，实现了跨平台的能力，不仅仅局限于浏览器的DOM，还可以是安卓和IOS(苹果公司移动设备的移动操作***)的原生组件。之后服务端再根据虚拟DOM视图生成渲染操作序列发送至客户端以进行后续的页面渲染。
在本申请的一个实施例中，所述客户端接收并执行所述服务端返回的渲染操作序列包括：所述客户端执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
具体实施时，本申请实施例在客户端得到服务端返回的渲染操作序列后，通过客户端来依次执行渲染操作序列，进而得到目标页面对应的用户界面组件和Native视图。
在本申请的一个实施例中，所述渲染后的页面是指渲染后的首屏页面，所述方法还包括：所述客户端获取对所述首屏页面的刷新请求；根据所述刷新请求复用所述ReactNative框架的运行环境；在所述React Native框架的运行环境下，对所述首屏页面进行刷新。
具体实施时，本申请实施例的React Native框架的运行环境可以仅启动一次，即针对首屏页面的渲染，后续页面刷新可根据页面刷新请求直接复用之前的React Native框架的运行环境，在该React Native框架的运行环境下，对首屏页面进行刷新，大大减少了React Native环境启动的耗时。
本申请实施例还提供了一种页面渲染***，所述页面渲染***包括：客户端和服务端。
本申请实施例的客户端，用于生成目标页面的服务端渲染请求，并将所述服务端渲染请求发送至服务端。
具体实施时，在进行页面渲染时，客户端首先可以根据用户在客户端的操作生成页面渲染请求，这里的页面渲染请求可以是指服务端渲染(SSR)的请求。渲染请求中具体可以包含渲染请求的生成时间、对应的客户端的标识信息和待渲染的目标页面的URL(Uniform Resource Locator，统一资源定位符或网页地址)等。
例如，当用户在客户端上打开某一应用程序时，则会在该客户端上生成与该应用程序对应的服务端渲染请求并将该请求发送给服务端进行后续处理。
本申请实施例的服务端，用于对所述服务端渲染请求进行解析，并根据解析结果运行React Native业务包，得到渲染操作序列并发送至所述客户端。
为了解决客户端渲染(CSR)导致的首屏渲染时间较长的问题，本申请实施例在生成服务端渲染的请求后，将该请求发送至服务端，借助服务端强大的计算能力，加速页面渲染，缩短客户端的首屏渲染时间。具体地，服务端可以对接收到的SSR请求进行解析，可以得到相应的页面渲染参数，例如可以包括待渲染页面的名称、版本、组件ID、组件数量、组件类型等参数。之后根据解析结果运行相应的React Native业务包(Bundle)，得到渲染操作序列。这里的React Native业务Bundle可以从CDN(Content Delivery Network，内容分发网络)服务器获取，React Native业务Bundle可以是与具体业务场景相关的文件包，具体可以由Java Script代码、图片和布局文件等各种资源文件构成。渲染操作序列是指各个对象如页面组件的绘制顺序，例如在先生成一个文本框，再创建一个对话框等，通过控制一个特定组件绘制到屏幕上的顺序，可以更好地控制组件之间的位置关系等。之后服务端将生成的渲染操作序列发送至客户端进行页面渲染。
本申请实施例的客户端，用于接收并执行所述服务端返回的渲染操作序列，根据执行结果生成渲染后的目标页面。
客户端接收服务端返回的渲染操作序列，并依次执行该渲染操作序列，进而完成目标页面的渲染，将该渲染后的页面展示给用户，进而实现对用户操作的响应。
与现有技术中的页面渲染方法相比，本申请实施例的页面渲染方法将CSR流程中耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，缩短了客户端的首屏渲染时间，提高了用户体验。
在本申请的一个实施例中，所述服务端还用于：根据所述解析结果创建沙箱环境，以将React Native框架的运行环境和所述服务端的运行环境进行隔离；在所述沙箱环境下，将所述React Native框架的运行库注入所述服务端的运行环境中。
在本申请的一个实施例中，所述服务端还用于：根据已注入所述运行库的服务端的运行环境，加载React Native框架；根据所述React Native框架的加载结果，运行所述React Native业务包。
在本申请的一个实施例中，所述服务端还用于：根据所述解析结果获取业务数据；在React Native框架加载完成后，将所述业务数据注入所述React Native业务包并运行，得到所述渲染操作序列。
在本申请的一个实施例中，所述服务端还用于：通过内容分发网络服务器获取所述React Native业务包，以及通过业务服务器获取所述业务数据。
在本申请的一个实施例中，所述服务端还用于：通过内部局域网络或专线网络获取所述React Native业务包和所述业务数据。
在本申请的一个实施例中，所述服务端还用于：根据所述React Native业务包的运行结果，生成虚拟DOM视图；根据所述虚拟DOM视图生成所述渲染操作序列并发送至所述客户端。
在本申请的一个实施例中，所述客户端还用于：执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
在本申请的一个实施例中，所述渲染后的页面是指渲染后的首屏页面，所述客户端还用于：获取对所述首屏页面的刷新请求；根据所述刷新请求复用所述React Native框架的运行环境；在所述React Native框架的运行环境下，对所述首屏页面进行刷新。
需要说明的是，上述各装置实施例的具体实施方式可以参照前述对应方法实施例的具体实施方式进行，在此不再赘述。
综上所述，本申请的技术方案，采用生成目标页面的服务端渲染请求的方式，将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列；接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。本申请实施例的页面渲染方法将CSR流程中的耗时过程迁移到了服务端来进行，利用服务端的强大计算能力加速了页面渲染，并在客户端同时进行SSR和CSR渲染流程，客户端的SSR流程无需启动Java Script引擎及加载业务Bundle，就可以完成首屏渲染，缩短了客户端的首屏渲染时间，在冷启动情况下，首屏耗时减少50％；热启动情况下，首屏耗时减少30％，提高了用户体验。
需要说明的是：
在此提供的算法和显示不与任何特定计算机、虚拟装置或者其它设备固有相关。各种通用装置也可以与基于在此的示教一起使用。根据上面的描述，构造这类装置所要求的结构是显而易见的。此外，本申请也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本申请的内容，并且上面对特定语言所做的描述是为了披露本申请的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本申请的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本申请并帮助理解各个发明方面中的一个或多个，在上面对本申请的示例性实施例的描述中，本申请的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本申请要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本申请的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本申请的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本申请的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本申请实施例的页面渲染装置中的一些或者全部部件的一些或者全部功能。本申请还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本申请的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
例如，图4示出了根据本申请一个实施例的客户端的结构示意图。该客户端400包括处理器410和被安排成存储计算机可执行指令(计算机可读程序代码)的存储器420。存储器420可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器420具有存储用于执行上述方法中的任何方法步骤的计算机可读程序代码431的存储空间430。例如，用于存储计算机可读程序代码的存储空间430可以包括分别用于实现上面的方法中的各种步骤的各个计算机可读程序代码431。计算机可读程序代码431可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘，紧致盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为例如图5所示的计算机可读存储介质。图5示出了根据本申请一个实施例的一种计算机可读存储介质的结构示意图。该计算机可读存储介质500存储有用于执行根据本申请的方法步骤的计算机可读程序代码431，可以被客户端400的处理器410读取，当计算机可读程序代码431由客户端400运行时，导致该客户端400执行上面所描述的方法中的各个步骤，具体来说，该计算机可读存储介质存储的计算机可读程序代码431可以执行上述任一实施例中示出的方法。计算机可读程序代码431可以以适当形式进行压缩。
应该注意的是上述实施例对本申请进行说明而不是对本申请进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本申请可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
Claims (10)
1.一种页面渲染方法，其特征在于，包括：
生成目标页面的服务端渲染请求；
将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列；
接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。
2.根据权利要求1所述的页面渲染方法，其特征在于，所述接收并执行所述服务端返回的渲染操作序列包括：
基于服务端渲染机制执行所述渲染操作序列，得到目标页面的用户界面组件和Native视图。
3.根据权利要求2所述的页面渲染方法，其特征在于，所述根据执行结果完成目标页面的渲染包括：
基于客户端渲染机制生成目标页面的虚拟DOM视图；
基于所述虚拟DOM视图和所述Native视图的视图标签匹配情况，完成用户界面组件的事件绑定。
4.根据权利要求3所述的页面渲染方法，其特征在于，所述基于客户端渲染机制生成目标页面的虚拟DOM视图包括：
启动React Native引擎和Java Script引擎；
基于启动的React Native引擎和Java Script引擎运行所述React Native业务包；
根据所述React Native业务包的运行结果，生成虚拟DOM视图。
5.根据权利要求4所述的页面渲染方法，其特征在于，所述基于服务端渲染机制执行所述渲染操作序列包括：
基于启动的React Native引擎模拟客户端渲染环境，在模拟的客户端渲染环境中执行所述渲染操作序列。
6.根据权利要求3所述的页面渲染方法，其特征在于，所述目标页面为客户端的首屏页面，所述方法还包括：
通过Hook函数屏蔽客户端渲染机制对所述首屏页面的二次渲染。
7.根据权利要求6所述的页面渲染方法，其特征在于，所述方法还包括：
获取对所述首屏页面的刷新请求；
根据所述页面刷新请求和所述视图标签，对所述首屏页面进行刷新。
8.一种页面渲染装置，其特征在于，包括：
生成单元，用于生成目标页面的服务端渲染请求；
发送单元，用于将所述服务端渲染请求发送至服务端，以使服务端根据所述服务端渲染请求运行React Native业务包，得到渲染操作序列；
渲染单元，用于接收并执行所述服务端返回的渲染操作序列，根据执行结果完成目标页面的渲染。
9.一种客户端，其中，该客户端包括：处理器；以及被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行如权利要求1至7中任一项所述的页面渲染方法。
10.一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现如权利要求1至7中任一项所述的页面渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010536789.8A CN111880788A (zh) | 2020-06-12 | 2020-06-12 | 页面渲染方法、装置、客户端和计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010536789.8A CN111880788A (zh) | 2020-06-12 | 2020-06-12 | 页面渲染方法、装置、客户端和计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111880788A true CN111880788A (zh) | 2020-11-03 |
Family
ID=73157504
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010536789.8A Pending CN111880788A (zh) | 2020-06-12 | 2020-06-12 | 页面渲染方法、装置、客户端和计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111880788A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113010827A (zh) * | 2021-03-16 | 2021-06-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
| CN113703893A (zh) * | 2021-08-24 | 2021-11-26 | 上海浦东发展银行股份有限公司 | 一种页面渲染方法、装置、终端及存储介质 |
| CN113760252A (zh) * | 2020-11-16 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 数据可视化方法、装置、计算机***和可读存储介质 |
| CN114912058A (zh) * | 2022-06-27 | 2022-08-16 | 中银金融科技有限公司 | 一种银行客户尽职调查***页面渲染方法及相关设备 |
| WO2023065707A1 (zh) * | 2021-10-21 | 2023-04-27 | 深圳前海微众银行股份有限公司 | 一种页面显示方法及装置 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017036309A1 (zh) * | 2015-08-31 | 2017-03-09 | 阿里巴巴集团控股有限公司 | 页面渲染方法、装置及设备 |
| CN109324788A (zh) * | 2018-09-05 | 2019-02-12 | 湖南华诺科技有限公司 | 一种基于React和Nodejs的服务端渲染方法 |
| CN109375918A (zh) * | 2018-11-23 | 2019-02-22 | 天津字节跳动科技有限公司 | 小程序的界面渲染方法、装置、电子设备和存储介质 |
| CN111026396A (zh) * | 2019-12-13 | 2020-04-17 | 北京小米移动软件有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
-
2020
- 2020-06-12 CN CN202010536789.8A patent/CN111880788A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017036309A1 (zh) * | 2015-08-31 | 2017-03-09 | 阿里巴巴集团控股有限公司 | 页面渲染方法、装置及设备 |
| CN109324788A (zh) * | 2018-09-05 | 2019-02-12 | 湖南华诺科技有限公司 | 一种基于React和Nodejs的服务端渲染方法 |
| CN109375918A (zh) * | 2018-11-23 | 2019-02-22 | 天津字节跳动科技有限公司 | 小程序的界面渲染方法、装置、电子设备和存储介质 |
| CN111026396A (zh) * | 2019-12-13 | 2020-04-17 | 北京小米移动软件有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
Non-Patent Citations (3)
| Title |
|---|
| ESCAPIST: "react服务端渲染框架", pages 1 - 7, Retrieved from the Internet <URL:https://www.cnblogs.com/escapist/p/10699787.html> * |
| KEY君: "服务端渲染SSR", Retrieved from the Internet <URL:https://www.jianshu.com/p/93c2a52f398e> * |
| WEIXIN_34361881: "基于 React.js 和 Node.js 的 SSR 实现方案", Retrieved from the Internet <URL:https://blog.csdn.net/weixin_34361881/article/details/91427464> * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113760252A (zh) * | 2020-11-16 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 数据可视化方法、装置、计算机***和可读存储介质 |
| CN113010827A (zh) * | 2021-03-16 | 2021-06-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
| CN113010827B (zh) * | 2021-03-16 | 2024-03-22 | 北京百度网讯科技有限公司 | 页面渲染方法、装置、电子设备以及存储介质 |
| CN113703893A (zh) * | 2021-08-24 | 2021-11-26 | 上海浦东发展银行股份有限公司 | 一种页面渲染方法、装置、终端及存储介质 |
| CN113703893B (zh) * | 2021-08-24 | 2024-06-07 | 上海浦东发展银行股份有限公司 | 一种页面渲染方法、装置、终端及存储介质 |
| WO2023065707A1 (zh) * | 2021-10-21 | 2023-04-27 | 深圳前海微众银行股份有限公司 | 一种页面显示方法及装置 |
| CN114912058A (zh) * | 2022-06-27 | 2022-08-16 | 中银金融科技有限公司 | 一种银行客户尽职调查***页面渲染方法及相关设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111880788A (zh) | 页面渲染方法、装置、客户端和计算机可读存储介质 | |
| CN111880790A (zh) | 页面渲染方法、页面渲染***和计算机可读存储介质 | |
| US8924943B2 (en) | Browser emulator system | |
| US7921353B1 (en) | Method and system for providing client-server injection framework using asynchronous JavaScript and XML | |
| US8700691B2 (en) | Minimal download and simulated page navigation features | |
| US20230036980A1 (en) | Micro-frontend system, sub-application loading method, electronic device, computer program product, and computer-readable storage medium | |
| US8245125B1 (en) | Hybrid rendering for webpages | |
| JP2019032883A (ja) | ウェブアプリケーションを実施する方法、装置、サーバ、及びシステム | |
| US9262311B1 (en) | Network page test system and methods | |
| CA2619313A1 (en) | Initial server-side content rendering for client-script web pages | |
| CN110442815B (zh) | 页面生成方法、***、装置及计算机可读存储介质 | |
| CN107040584B (zh) | 客户端下载图片的方法及装置 | |
| US20150317405A1 (en) | Web Page Variation | |
| CN112637361B (zh) | 一种页面代理方法、装置、电子设备及存储介质 | |
| CN113468448A (zh) | 页面渲染方法及装置 | |
| CN113703893B (zh) | 一种页面渲染方法、装置、终端及存储介质 | |
| US20160154771A1 (en) | Method and device for browser to process page element | |
| CN109582890A (zh) | 页面加载方法、装置、计算机设备及存储介质 | |
| CN111880789A (zh) | 页面渲染方法、装置、服务端和计算机可读存储介质 | |
| CN112667263A (zh) | Flutter组件的动态更新方法、装置、电子设备和存储介质 | |
| KR20130085856A (ko) | 이종 웹서비스의 조합 응용에서 웹서비스 호출을 위한 위젯 자동 생성 방법 및 그 장치 | |
| CN108319474B (zh) | 一种页面信息生成方法、装置和设备 | |
| CN111783019A (zh) | 浏览器子页面创建方法、装置、计算机设备和存储介质 | |
| CN111723314B (zh) | 网页展示方法、装置、电子设备及计算机可读存储介质 | |
| CN111310005A (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 |