网页渲染方法、网页制作方法及网页渲染系统

摘要

本申请提供网页渲染方法、网页制作方法及网页渲染系统，其中网页渲染方法包括：向访问服务器发送网页访问请求，并接收访问服务器返回的目标网页的超文本标记语言代码，超文本标记语言代码为网页制作服务器生成并存储至访问服务器的代码；确定超文本标记语言代码中是否包括交互代码块；在超文本标记语言代码中包括交互代码块的情况下，渲染超文本标记语言代码中的首屏代码，并将超文本标记语言代码中的文档对象模型转换为动态文档对象模型，得到渲染后的目标网页。如此，客户端只需确定超文本标记语言代码中是否包括交互代码块，并在包括时将文档对象模型转换为动态文档对象模型，无需重新加载交互逻辑，提高了网页的渲染效率。

权利要求

1.一种网页渲染方法，其特征在于，应用于客户端，包括：向访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码，所述超文本标记语言代码为网页制作服务器生成并存储至所述访问服务器的代码；

确定所述超文本标记语言代码中是否包括交互代码块；

在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动态文档对象模型，得到渲染后的目标网页。

2.根据权利要求1所述的网页渲染方法，其特征在于，确定所述超文本标记语言代码中是否包括交互代码块之后，还包括：在所述超文本标记语言代码中不包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的目标网页。

3.根据权利要求1或2所述的网页渲染方法，其特征在于，确定所述超文本标记语言代码中是否包括交互代码块，包括：查找所述超文本标记语言代码中的文档对象模型的对象标记；

在所述对象标记为预设存在标记的情况下，确定所述超文本标记语言代码中包括所述交互代码块；

在所述对象标记为预设不存在标记的情况下，确定所述超文本标记语言代码中不包括所述交互代码块。

4.根据权利要求2所述的网页渲染方法，其特征在于，接收所述访问服务器返回的目标网页的超文本标记语言代码，包括：接收所述访问服务器返回的目标网页的超文本标记语言代码和资源存储文件；

相应地，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的目标网页，包括：根据所述超文本标记语言代码和资源存储文件，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的目标网页。

5.一种网页制作方法，其特征在于，应用于网页制作服务器，包括：接收目标网页的网页数据；

根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；

在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块；

将添加有所述交互代码块的首屏页面代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代码推送至访问服务器，以使客户端获取所述访问服务器中的超文本标记语言代码，并将所述超文本标记语言代码中的文档对象模型转换为动态文档对象模型，得到渲染后的目标网页。

6.根据权利要求5所述的网页制作方法，其特征在于，在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块之前，还包括：查找所述网页数据，确定所述网页数据中是否包括预设组件字段；

在所述网页数据中包括所述预设组件字段的情况下，确定所述网页数据中包括所述预设交互内容。

7.根据权利要求6所述的网页制作方法，其特征在于，查找所述网页数据，确定所述网页数据中是否包括预设组件字段，包括：将所述网页数据进行序列化，得到所述网页数据对应的一维数组；

对所述网页数据对应的一维数组进行遍历，确定所述网页数据中是否包括所述预设组件字段。

8.根据权利要求6所述的网页制作方法，其特征在于，在所述网页数据中包括预设组件字段的情况下，确定所述网页数据中包括所述预设交互内容，包括：在所述预设组件字段为表单组件的字段时，获取所述表单组件对应的表单数据，并确定所述表单数据对应的一维数组；

对所述表单数据对应的一维数组进行遍历，确定所述表单数据中是否包括预设输入字段；

在所述表单数据包括所述预设输入字段的情况下，确定所述网页数据中包括所述预设交互内容。

9.根据权利要求5‑8任一项所述的网页制作方法，其特征在于，将所述目标网页的超文本标记语言代码推送至访问服务器，包括：确定所述目标网页的超文本标记语言代码对应的资源存储文件；

将所述目标网页的超文本标记语言代码和所述资源存储文件推送给所述访问服务器。

10.根据权利要求5‑8任一项所述的网页制作方法，其特征在于，所述网页数据中携带模板标识；根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码之前，还包括：

根据所述模板标识，从至少一个预设网页模板中确定所述目标网页模板。

11.根据权利要求5‑8任一项所述的网页制作方法，其特征在于，根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码之后，还包括：在所述首屏页面代码中不包括预设交互内容的情况下，将所述首屏页面代码确定为所述目标网页的超文本标记语言代码。

12.一种网页渲染系统，其特征在于，包括网页制作服务器、访问服务器和客户端；

所述网页制作服务器，被配置为接收目标网页的网页数据，根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块；将添加有所述交互代码块的首屏页面代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代码推送至所述访问服务器；

所述客户端，被配置为向所述访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码；确定所述超文本标记语言代码中是否包括交互代码块；在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动态文档对象模型，得到渲染后的目标网页。

13.一种计算设备，其特征在于，包括：存储器和处理器；

所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令，以实现权利要求1‑4任意一项所述的网页渲染方法或者权利要求5‑11任意一项所述的网页制作方法的操作步骤。

14.一种计算机可读存储介质，其特征在于，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现权利要求1‑4任意一项所述网页渲染方法或者权利要求5‑11所述的网页制作方法的操作步骤。

说明书

网页渲染方法、网页制作方法及网页渲染系统

技术领域

[0001] 本申请涉及计算机技术领域，特别涉及一种网页渲染方法。本申请同时涉及一种网页制作方法，一种网页渲染系统，一种计算设备，以及一种计算机可读存储介质。

背景技术

[0002] 随着计算机技术和网络技术的快速发展，为了提高网页交互的效率，避免频繁的数据交互，SPA(Single Page web Application，单页网页应用)应运而生。SPA就是一个应
用程序只存在一张网页页面的应用，仅在应用程序初始化页面时加载相应的组件数据，一
旦页面首次加载完成，之后在用户与页面交互时，仅利用路由机制动态更新该页面，网页开
发中采用SPA能够很好避免页面的重新加载。一般地，当存在页面调用时，往往考虑在客户
端渲染SPA形成可展示页面，但是该种渲染不利于搜索引擎优化。

[0003] 现有技术中，为解决搜索引擎优化，用户与开发形成的网页进行交互生成页面调用请求时，考虑通过服务端渲染(Server‑Side Render，SSR)的方式渲染SPA页面，形成对应
所生成页面请求的可展示HTML(Hypertext Markup Language，超文本链接标记语言)页面。
现有实现SPA的SSR方式可描述为：SSR服务器预先生成首屏的HTML代码，SSR远端服务将网
页的框架和HTML代码发送到前端浏览器，然后在浏览器中生成和操作DOM。然而，上述方法
中实际上网页交互部分的代码后续还是需要在浏览器中加载的，导致网页渲染效率较低。

发明内容

[0004] 有鉴于此，本申请实施例提供了一种网页渲染方法。本申请同时涉及一种网页制作方法，一种网页渲染系统，一种计算设备，以及一种计算机可读存储介质，以解决现有技
术中存在的网页页面渲染效率较低的问题。

[0005] 根据本申请实施例的第一方面，提供了一种网页渲染方法，应用于客户端，包括：

[0006] 向访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码，所述超文本标记语言代码为网页制作服务器生成并存储至所述访问服务
器的代码；

[0007] 确定所述超文本标记语言代码中是否包括交互代码块；

[0008] 在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动态文档对
象模型，得到渲染后的目标网页。

[0009] 根据本申请实施例的第二方面，提供了一种网页制作方法，应用于网页制作服务器，包括：

[0010] 接收目标网页的网页数据；

[0011] 根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；

[0012] 在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块；

[0013] 将添加有所述交互代码块的首屏页面代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代码推送至访问服务器。

[0014] 根据本申请实施例的第三方面，提供了一种网页渲染系统，网页制作服务器、访问服务器和客户端；

[0015] 所述网页制作服务器，被配置为接收目标网页的网页数据，根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；在所述网页数据中包括预设交互内容
的情况下，在所述首屏页面代码中添加交互代码块；将添加有所述交互代码块的首屏页面
代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代
码推送至所述访问服务器；

[0016] 所述客户端，被配置为向所述访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码；确定所述超文本标记语言代码中是否包括交
互代码块；在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记
语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动态文档
对象模型，得到渲染后的目标网页。

[0017] 根据本申请实施例的第四方面，提供了一种计算设备，包括：

[0018] 存储器和处理器；

[0019] 所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令，以实现任意所述网页渲染方法或者所述网页制作方法的操作步骤。

[0020] 根据本申请实施例的第五方面，提供了一种计算机可读存储介质，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现任意所述网页渲染方法或者所述
网页制作方法的操作步骤。

[0021] 本申请提供的网页渲染方法，客户端可以向访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码，所述超文本标记语言代码为网
页制作服务器生成并存储至所述访问服务器的代码；确定所述超文本标记语言代码中是否
包括交互代码块；在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文
本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动
态文档对象模型，得到渲染后的目标网页。这种情况下，网页制作服务器会渲染生成目标网
页的超文本标记语言代码，当需要访问目标网页时，客户端可以从访问服务器中获取网页
制作服务器生成并存储至所述访问服务器的超文本标记语言代码，该超文本标记语言代码
中可以包括交互代码块，也即网页制作服务器在渲染生成超文本标记语言代码时，若需要
交互则可以直接添加交互代码块，客户端只需将超文本标记语言代码中的文档对象模型转
换为动态文档对象模型，即只需进行客户端激活，无需重新加载交互逻辑，提高了网页的渲
染效率。

[0022] 本申请提供的网页制作方法，网页制作服务器可以接收目标网页的网页数据；然后可以根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；在所述首
屏页面代码中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块；之后
将添加有所述交互代码块的首屏页面代码确定为所述目标网页的超文本标记语言代码，并
将所述目标网页的超文本标记语言代码推送至访问服务器。这种情况下，在制作网页时，网
页制作服务器可以先根据接收到的网页数据和目标网页模板，生成首屏页面代码，并在网
页数据中包括预设交互内容的情况下，在首屏页面代码中添加交互代码块，从而生成目标
网页的超文本标记语言代码，将其推送给访问服务器，此时访问服务器中存储的是结合模
板制作好的目标网页的超文本标记语言代码，且对于需要交互的情况，该超文本标记语言
代码中已经包括有交互代码块，前端浏览器需要访问该网页时，可以直接获取访问服务器
中存储的超文本标记语言代码进行渲染即可实现交互功能，无需再在浏览器中生成和添加
交互代码块，提高了网页的渲染效率。

附图说明

[0023] 图1是本申请一实施例提供的一种网页渲染方法的流程图；

[0024] 图2是本申请一实施例提供的一种网页制作方法的流程图；

[0025] 图3是本申请一实施例提供的一种建站平台界面示意图；

[0026] 图4是本申请一实施例提供的一种应用于广告推广场景中的网页制作方法的处理流程图；

[0027] 图5是本申请一实施例提供的一种客户端的结构示意图；

[0028] 图6是本申请一实施例提供的一种网页制作服务器的结构示意图；

[0029] 图7是本申请一实施例提供的一种网页渲染系统的结构示意图；

[0030] 图8是本申请一实施例提供的一种计算设备的结构框图。

具体实施方式

[0031] 在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况
下做类似推广，因此本申请不受下面公开的具体实施的限制。

[0032] 在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所
使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其
他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多
个相关联的列出项目的任何或所有可能组合。

[0033] 应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。
例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，
第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……
时”或“当……时”或“响应于确定”。

[0034] 首先，对本申请一个或多个实施例涉及的名词术语进行解释。

[0035] 前端：即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各
种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。其中，响应式Web设计
(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境
(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

[0036] SPA(single page web application，单页网页应用)：是一种网络应用程序(WebApp)模型。在传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新
的页面，而在SPA这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的
数据交换，响应速度自然相对更高。

[0037] SSR(Server‑Side Rendering，服务器端渲染)：在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM(这里也是第一次访问SPA网
站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因)，
但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的
HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应
用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得
更好的SEO。

[0038] SEO(Search Engine Optimization，搜索引擎优化)：是一种通过了解搜索引擎的运作规则(如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等)
来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。搜索引擎优化是任
何一个网站想要在网站推广中获取成功至为关键的一步，其最终目的是做好用户体验。

[0039] HTML(HyperText Markup Language，超文本标记语言)：是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为
一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、
动画、声音、表格、链接等。

[0040] JavaScript(简称“JS”)：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器
环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和
声明式(如函数式编程)风格。

[0041] 客户端(Client)：或称为用户端，是指与服务器相对应，为客户提供本地服务的程序。除了一些只在本地运行的应用程序之外，一般安装在普通的客户机上，需要与服务端互
相配合运行。因特网发展以后，较常用的用户端包括了如万维网使用的网页浏览器，收寄电
子邮件时的电子邮件客户端，以及即时通讯的客户端软件等。对于这一类应用程序，需要网
络中有相应的服务器和服务程序来提供相应的服务，如数据库服务，电子邮件服务等等，这
样在客户机和服务器端需要建立特定的通信连接，来保证应用程序的正常运行。

[0042] 服务端：是一种针对性的程序，所谓的针对性就是专门为某一客户端设立的程序。原则上来讲，服务端是不具备运算能力，因为服务端同时会与多个客户端建立连接，一旦服
务端进行运算的话，就会占用大量的资源，从而影响到其他客户端的通信，所以服务端通常
都只具备认证与传输数据功能。

[0043] 前端同构应用：指的是在服务端执行虚拟DOM(一般用Node.js，不过其它语言也具备这项能力，之前前端程序员用JS比较多)，此时前端和服务端的渲染层是同一套代码，因
为服务端使用和前端相同的虚拟DOM的原理拼接HTML模板，所以前端同构应用一般也是
SSR。

[0044] 同构渲染：加入一个中间层的概念，node中间层从后端接过渲染的逻辑，首次渲染时使用Node.js来直出HTML，后续客户端交互包括当前页路由切换直接在客户端完成，一般
来说同构渲染是介于前后端中的共有部分。同构渲染大致意思就是前端、后端都要参与渲
染，而且首次渲染出的HTML要一样。现在主流这几个框架都提供了同构渲染的API，如React
的服务端渲染方法render To String和对应的前端渲染方法render。也即，同构渲染是先
通过服务端渲染，生成HTML以及初始化数据，客户端拿到代码和初始化数据后，通过对HTML
的DOM进行patch和事件绑定对DOM进行客户端激活，这个整体的过程叫同构渲染。

[0045] Node.js：发布于2009年5月，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript运行在服务端的开发平台，它让
JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

[0046] Vue.js(读音/vju：/，类似于view)：是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核
心库只关注视图层，方便与第三方库或既有项目整合。

[0047] 客户端激活(client‑side hydration)：所谓客户端激活，指的是Vue在浏览器端接管由服务端发送的静态HTML，使其变为由Vue管理的动态DOM的过程。客户端激活技术是
建立在SSR技术应用场景上的，将服务端渲染好的静态资源，与客户端的应用程序相结合进
行同构渲染，以达到更好的交互效果。

[0048] DOM(Document Object Model，文档对象模型)：是处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚
本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文
档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它
要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它
可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

[0049] JSON(JavaScriptObject Notation，JS对象简谱)：是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程
语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得JSON成为理想的数据交换
语言，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

[0050] 在本申请中，提供了一种网页制作方法，本申请同时涉及一种网页制作服务器，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。

[0051] 图1示出了根据本申请一实施例提供的一种网页渲染方法的流程图，应用于客户端，具体包括以下步骤：

[0052] 步骤102：向访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码，所述超文本标记语言代码为网页制作服务器生成并存储至所述
访问服务器的代码。

[0053] 具体的，访问服务器是存储超文本标记语言代码的服务器，当客户端需要访问目标网页时，可以通过网页地址，在该访问服务器中获取相应的超文本标记语言代码(HTML代
码)，进行渲染展示，该访问服务器即是指存储超文本标记语言代码的远端云服务。网页制
作服务器可以是指生成目标网页的超文本标记语言代码的SSR服务端。目标网页是用户想
要访问的网页。

[0054] 另外，网页访问请求可以是指通过预设访问操作所触发的访问目标网页的请求，其中，预设访问操作可以是预先设置的操作，如输入网址进行搜索，或者点击网址链接。超
文本标记语言代码可以是指网页制作服务器渲染生成，并存储至访问服务器的目标网页的
HTML代码。

[0055] 实际应用中，当客户端需要访问目标网页时，可以向访问服务器发送网页访问请求，该网页访问请求中可以携带目标网页的网页标识，从而使得访问服务器接收到该网页
访问请求时，可以根据其中携带的标识，向客户端返回目标网页的超文本标记语言(HTML)
代码。并且，客户端从访问服务器中获取到的HTML代码是网页制作服务器生成并存储至访
问服务器的代码，即该HTML代码是网页制作服务器渲染生成的HTML代码，当客户端获取到
该HTML代码后，客户端可以进行同构渲染。其中，同构渲染是指先通过服务端渲染(Server‑
Side Rendering，SSR)，生成HTML代码以及初始化数据，客户端拿到HTML代码和初始化数据
后，通过对HTML代码的DOM进行patch和事件绑定对DOM进行客户端激活(Client‑Side 
Hydration，CSH)，这个整体的过程叫同构渲染。

[0056] 需要说明的是，当用户在客户端的浏览器中输入或点击某个网址时，说明用户想要访问该网址对应的目标网页，此时客户端可以向访问服务器发送网页访问请求，访问服
务器接收到该请求后，可以向客户端返回目标网页的超文本标记语言代码，客户端后续可
以基于接收到的该超文本标记语言代码进行同构渲染，从而提高目标网页的渲染效率。

[0057] 本实施例一个可选的实施方式中，访问服务器接收到客户端发送的网页访问请求后，在向客户端返回目标网页的超文本标记语言代码时，还可以同时返回对应的资源存储
文件，因而客户端也可以接收到访问服务器返回的资源存储文件，也即接收所述访问服务
器返回的目标网页的超文本标记语言代码，具体实现过程可以如下：

[0058] 接收所述访问服务器返回的目标网页的超文本标记语言代码和资源存储文件。

[0059] 实际应用中，资源存储文件是指存储超文本标记语言代码中所需读取的资源的文件，也即超文本标记语言代码中只包括所需资源的存储地址，通过读取该存储地址，可以找
到对应的资源存储文件，在渲染网页时，可以读取资源存储文件，获取展示网页所需的资
源，因而本申请中客户端可以从访问服务器中一同获取目标网页的超文本标记语言代码和
资源存储文件。如目标网页中包括一个图片和一个视频，则超文本标记语言代码中需要从
存储该图片的资源存储文件中读取该文件，并从存储该视频的资源存储文件中读取该视
频，此时可以基于超文本标记语言代码和存储的该图片、视频一起渲染目标网页。

[0060] 步骤104：确定所述超文本标记语言代码中是否包括交互代码块。

[0061] 具体的，在向访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码的基础上，进一步地，将确定所述超文本标记语言代码中是否
包括交互代码块。其中，交互代码块是用于执行交互操作的代码块，实际实现时，该交互代
码块可以为SPA代码块。

[0062] 需要说明的是，客户端在获取到目标网页的超文本标记语言代码后，可以进一步判断该超文本标记语言代码中是否包括交互代码块，以便于后续确定是否进行客户端激
活。

[0063] 本实施例一个可选的实施方式中，可以通过文档对象模型的对象标记来确定是否包括交互代码块，也即确定所述超文本标记语言代码中是否包括交互代码块，具体实现过
程可以如下：

[0064] 查找所述超文本标记语言代码中的文档对象模型的对象标记；

[0065] 在所述对象标记为预设存在标记的情况下，确定所述超文本标记语言代码中包括所述交互代码块；

[0066] 在所述对象标记为预设不存在标记的情况下，确定所述超文本标记语言代码中不包括所述交互代码块。

[0067] 实际应用中，文档对象模型可以是指DOM节点，文档对象模型的对象标记可以是指DOM节点的data‑server‑rendred标记，根据该标记可以确定HTML代码中是否包括有交互代
码块，预设存在标记是预先设置的对象标记，用于指示HTML代码中包括有交互代码块，预设
不存在标记是预先设置的对象标记，用于指示HTML代码中不包括有交互代码块。如data‑
server‑rendred标记为ture，则说明HTML代码中包括有交互代码块，若为false，则说明
HTML代码中不包括有交互代码块。

[0068] 本申请实施例中可以通过文档对象模型的对象标记来确定超文本标记语言代码中是否包括交互代码块，确定过程简单、准确，客户端在获取到目标网页的超文本标记语言
代码后，可以快速确定出超文本标记语言代码中是否包括交互代码块，从而快速渲染目标
网页，提高了目标网页的渲染效率。

[0069] 步骤106：在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动
态文档对象模型，得到渲染后的目标网页。

[0070] 具体的，在确定所述超文本标记语言代码中是否包括交互代码块的基础上，进一步的，将在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记语
言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换为动态文档对
象模型，得到渲染后的目标网页。

[0071] 实际应用中，客户端激活是指Vue在浏览器端接管由访问服务器发送的静态HTML代码，使其变为由Vue管理的动态DOM的过程，也即，客户端激活是指将接收到的HTML代码中
的静态DOM转换为动态DOM。另外，客户端获取到目标网页的HTML代码后，若该HTML代码中不
包括SPA代码块，则渲染首屏后可以不进行下一步操作，若该HTML代码中包括SPA代码块，则
需要进行客户端激活。也即是，无论目标网页的HTML代码中是否包括SPA代码块，均先渲染
首屏代码，若不包括，则渲染后不执行其他操作，若包括，则渲染后，进行客户端激活。

[0072] 需要说明的是，在所述超文本标记语言代码中包括交互代码块的情况下，说明目标网页中包括有复杂的交互操作，需要进行客户端激活，也即，如果一个超文本标记语言代
码中添加了交互代码块(即SPA代码块)，则客户端获取到该超文本标记语言代码，渲染出目
标网页后，如果访问用户在该目标网页中执行了交互操作，则此时可以直接基于该交互代
码块，完成交互操作，无需再经过网页制作服务器。也即，该交互代码块可以在客户端进行
激活，通过该交互代码块完成用户针对该网页的交互操作，从而节省交互资源，提高网页浏
览效率。

[0073] 本实施例一个可选的实施方式中，客户端在获取到目标网页的超文本标记语言代码的同时，还可以获取到对应的资源存储文件，因而在可以基于获取到超文本标记语言代
码和对应的资源存储文件，渲染目标网页，也即，渲染所述超文本标记语言代码中的首屏代
码，得到渲染后的网页，具体实现过程可以如下：

[0074] 根据所述超文本标记语言代码和资源存储文件，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的网页。

[0075] 需要说明的是，客户端可以结合获取到的目标网页的HTML代码和对应的资源存储文件渲染首屏页面。也即，在渲染网页时，可以读取资源存储文件，获取展示网页所需的资
源，从而渲染目标网页。

[0076] 本实施例一个可选的实施方式中，若确定出超文本标记语言代码中不包括交互代码块，则可以不进行客户端激活，也即确定所述超文本标记语言代码中是否包括交互代码
块之后，还包括：

[0077] 在所述超文本标记语言代码中不包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的目标网页。

[0078] 需要说明的是，客户端获取到目标网页的HTML代码后，若该HTML代码中不包括SPA代码块，则渲染首屏后可以不进行下一步操作，即不进行客户端激活，直接渲染静态页面，
从而避免对于内容简单、无需交互的网页进行客户端激活，提高了网页渲染效率，且避免了
资源浪费。

[0079] 本申请提供的网页渲染方法，网页制作服务器会渲染生成目标网页的超文本标记语言代码，当需要访问目标网页时，客户端可以从访问服务器中获取网页制作服务器生成
并存储至所述访问服务器的超文本标记语言代码，该超文本标记语言代码中可以包括交互
代码块，也即网页制作服务器在渲染生成超文本标记语言代码时，若需要交互则可以直接
添加交互代码块，客户端只需将超文本标记语言代码中的文档对象模型转换为动态文档对
象模型，即只需进行客户端激活，无需重新加载交互逻辑，提高了网页的渲染效率。另外，客
户端只有在获取到的超文本标记语言代码中包括交互代码块的情况下，才会将所述超文本
标记语言代码中的文档对象模型转换为动态文档对象模型，即只有包括交互代码块时，才
进行客户端激活，对于复杂网页和简单网页以不同的策略进行渲染，进一步提高了网页的
渲染效率，避免了资源浪费。

[0080] 图2示出了根据本申请一实施例提供的一种网页制作方法的流程图，应用于网页制作服务器，具体包括以下步骤：

[0081] 步骤202：接收目标网页的网页数据。

[0082] 实际应用中，为解决搜索引擎优化，可以将SPA和SSR相结合，在普通的SPA中，一般是将框架(即网页模板)及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM，这
也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器
要更慢的主要原因，即首屏渲染速度较慢，网页渲染效率较低。

[0083] 需要说明的是，传统的SPA前端技术没有首屏服务端渲染这一过程，用户访问一个SPA应用，首屏渲染是在浏览器中进行的，所以用户打开网页会出现一个白屏时间，因而可
以采用SSR技术进行首屏渲染。SSR技术主要解决了首屏加载速度慢的问题，其原理是提前
在SSR服务器预先生成好首屏的HTML代码，这样用户在浏览器中，可以更快看到首屏页面，
但对于一个常规的网页来说，网页是有交互操作的，所以还是要加入SPA应用的代码(里面
包含了一系列操作)，实际上交互部分的代码后续还是需要加载的。

[0084] 与传统SPA相比，服务器端渲染(SSR)的优势主要在更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，更快的内容到达时间(time‑to‑content)，特别是
对于缓慢的网络情况或运行缓慢的设备，无需等待所有的JavaScript都完成下载并执行，
才显示服务器渲染的标记，所以用户将会更快速地看到完整渲染的页面，通常可以产生更
好的用户体验，因而对于那些内容到达时间与转化率直接相关的网页而言，服务器端渲染
至关重要。

[0085] 因而，为了提高首屏渲染速度，从而提高网页渲染效率，本申请中提供了一种网页制作方法，在制作网页时，网页制作服务器可以先根据接收到的网页数据和目标网页模板，
生成首屏页面代码，并在网页数据中包括预设交互内容的情况下，在首屏页面代码中添加
交互代码块，从而生成目标网页的超文本标记语言代码，将其推送给访问服务器，此时访问
服务器中存储的是结合模板制作好的目标网页的超文本标记语言代码，且对于需要交互的
情况，该超文本标记语言代码中已经包括有交互代码块，前端浏览器需要访问该网页时，可
以直接获取访问服务器中存储的超文本标记语言代码进行渲染即可实现交互功能，无需再
在浏览器中生成和添加交互代码块，提高了网页的渲染效率。

[0086] 具体的，网页制作服务器可以是指生成目标网页的超文本标记语言代码的SSR服务端。目标网页是创作者需要创建的网页，目标网页的网页数据可以是指根据创建者创建
的网页内容，生成的JSON数据。

[0087] 需要说明的是，一个网页的视图是由许多元素构成的，虽然视觉效果各不相同，但构成的元素大概是图片、文字、动画等，因而可以将各元素抽象成组件，创作者可以通过客
户端(即前端)的浏览器中提供的建站平台，配置所需组件，生成自己想要的网页页面。

[0088] 实际实现时，创作者可以在客户端提供的建站平台中，选择自己所需的组件，组合生成预期的目标网页，该建站平台可以将该目标网页生成一份JSON数据，即目标网页的网
页数据，然后建站平台可以将该网页数据同步给生成超文本标记语言代码的网页制作服务
器(即SSR服务端)，此时网页制作服务器可以接收到建站平台发送的目标网页的网页数据。

[0089] 需要说明的是，当创作者在建站平台中拖拽自己所需的组件，并设置完成后，可以点击该建站平台中的保存控件，触发生成并发送目标网页的网页数据。也即，用户点击保存
控件后会将当前页面的JSON数据发送到生成页面的SSR服务端。

[0090] 示例的，图3是本申请一实施例提供的一种建站平台界面示意图，如图3所示，建站平台界面左侧为已选择组件的显示和处理区域，建站平台界面中间是创作者需要创作的目
标网页的详细信息和组件添加模块。其中，目标网页的详细信息可以包括页面名称、页面标
题、页面背景(主背景和副背景，且主背景和副背景均可以选择对应的背景色和背景图)、解
释信息(如“主背景仅在PC端限制，可通过【预览】‑【PC】预览)、分享控件等。组件添加模块可
以包括图片、按钮、标题、文本、橱窗和视频等内容的添加控件。建站平台界面右侧是设置区
域，可以设置所添加组件的基础信息，如模块名称、图片要求、格式、容量、尺寸、建议尺寸、
轮播按钮、颜色、图片跳转链接、图片唤起链接等。另外，该建站平台界面中还可以包括保存
控件，以触发生成并发送目标网页的网页数据。

[0091] 步骤204：根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码。

[0092] 具体的，在接收目标网页的网页数据的基础上，进一步地，将根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码。其中，目标网页模板是基于网页数据生
成最终的超文本标记语言代码的模板，即每个具体的网页内容所处的位置，各个网页内容
之间的位置关系等，也就是指网页框架；另外，首屏页面代码可以是指目标网页的第一次显
示页面的HTML代码。

[0093] 需要说明的是，网页制作服务器接收到建站平台发送的目标网页的网页数据后，可以结合预先设置好的模版与传输过来的JSON数据(即网页数据)生成一份首屏内容的
HTML代码(首屏页面代码)。

[0094] 本实施例一个可选地实施方式中，所述网页数据中携带模板标识；根据所述网页数据和预设网页模板，生成所述目标网页的首屏页面代码之前，还包括：

[0095] 根据所述模板标识，从至少一个预设网页模板中确定所述目标网页模板。

[0096] 需要说明的是，建站平台中可以预先存储有多个创建网页的模板供创作者选择，也即创作者在拖拽组件，生成相应的待制作页面时，还可以选择自己所需的网页模板。若创
作者在生成目标网页时，选择了网页模板，则用户点击保存控件，将生成的网页数据发送给
网页制作服务器时，可以在该网页数据中携带模板标识，以使网页制作服务器根据创作者
选择的模板，生成对应的页面代码。

[0097] 实际应用时，网页制作服务器中可以预先存储有至少一个预设的网页模板，在接收到的网页数据中携带有模板标识的情况下，从至少一个预设网页模板中确定出该模板标
识指示的目标网页模板。其中，模板标识可以是创建网页模板时，为每个网页模板设置的标
识符，一个标识符用于唯一标识一个网页模板。

[0098] 另外，若创作者在生成目标网页时，没有选择网页模板，则用户点击保存控件，将生成的网页数据发送给网页制作服务器时，该网页数据中不携带模板标识，此时网页制作
服务器可以选择默认的网页模板，作为目标网页模板，生成对应的页面代码。

[0099] 本申请中网页制作服务器在接收到目标网页的网页数据后，可以根据接收到的网页数据和预设好的目标网页模板，生成所述目标网页的首屏页面代码，便于后续继续对生
成的首屏页面代码进行处理，得到客户端可以直接访问的超文本标记语言代码。

[0100] 步骤206：在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块。

[0101] 具体的，在根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码的基础上，进一步地，将在所述网页数据中包括预设交互内容的情况下，在所述首屏页面
代码中添加交互代码块。其中，预设交互内容是指预先设置的用户可以进行交互的内容，如
预设交互内容可以为表单、橱窗等内容，即预设交互内容是指可以进行复杂交互操作的内
容；另外，交互代码块是用于执行交互操作的代码块，实际实现时，该交互代码块可以为SPA
代码块。

[0102] 需要说明的是，网页制作服务器可以通过预设的页面数据规则来判断是否需要注入交互代码块，该预设的页面数据规则可以为网页数据中是否包括预设交互内容，即是否
包括复杂的交互。一般来说，包括该预设交互内容的网页，用户可能会基于该网页执行一些
复杂的交互操作，因而若网页制作服务器确定在接收到的网页数据中包括预设交互内容，
则可以在首屏页面代码中添加交互代码块。

[0103] 另外，如果一个超文本标记语言代码中添加了交互代码块(即SPA代码块)，则后续客户端获取到该超文本标记语言代码，渲染出网页页面后，如果访问用户在该网页页面中
执行了交互操作，则此时可以直接基于该交互代码块，完成交互操作，无需再经过网页制作
服务器。也即，该交互代码块后续可以在客户端进行激活，通过该交互代码块完成用户针对
该网页的交互操作。

[0104] 本实施例一个可选的实施方式中，由于在确定出网页数据中包括预设交互内容的情况下，才会在首屏页面代码中添加交互代码块，因而在此之前还需要执行检测步骤，确定
网页数据中是否括预设交互内容，也即在所述网页数据中包括预设交互内容的情况下，在
所述首屏页面代码中添加交互代码块之前，还包括：

[0105] 查找所述网页数据，确定所述网页数据中是否包括预设组件字段；

[0106] 在所述网页数据中包括所述预设组件字段的情况下，确定所述网页数据中包括所述预设交互内容。

[0107] 具体的，预设组件字段可以预先进行设置，预设组件字段是指首屏页面代码中包括的代码字段，该代码字段表示某个预设组件，该预设组件为可能会执行复杂交互操作的
组件，如表单组件、橱窗组件、视频组件等。

[0108] 实际实现时，网页制作服务器接收到网页数据(页面JSON数据)后，可以判断网页数据中是否含有表单组件、橱窗组件或视频组件等需要进行复杂交互操作的预设组件，若
含有这种需要进行复杂交互操作的预设组件，则可以确定网页数据中包括所述预设交互内
容。示例的，可以对接收到的整个网页数据进行查找，若查找到“comp＝Showcase”字段、
“comp＝Form”字段或者“comp＝Video”字段，则说明网页数据中包括有橱窗组件、表单组件
或者视频组件，此时可以直接确定网页数据中包括预设交互内容，后续需要执行复杂的交
互操作，在首屏页面代码中添加交互代码块。

[0109] 本实施例一个可选的实施方式中，查找所述网页数据，确定所述网页数据中是否包括预设组件字段，具体实现方式可以如下：

[0110] 将所述网页数据进行序列化，得到所述网页数据对应的一维数组；

[0111] 对所述网页数据对应的一维数组进行遍历，确定所述网页数据中是否包括所述预设组件字段。

[0112] 需要说明的是，网页制作服务器在对接收到的网页数据进行查找时，可以先将该网页数据序列化成一个一维数组，然后遍历该一维数组，确定是否包括预设组件字段即可。

[0113] 本实施例一个可选的实施方式中，在确定网页数据中包括表单组件时，除了可以直接确定网页数据中包括预设交互内容外，还可以进一步判断该表单组件对应的具体表单
数据中是否包括复杂的操作字段，从而进一步准确确定网页数据中是否包括预设交互内
容，也即在所述网页数据中包括预设组件字段的情况下，确定所述网页数据中包括所述预
设交互内容，具体实现过程可以如下：

[0114] 在所述预设组件字段为表单组件的字段时，获取所述表单组件对应的表单数据，并确定所述表单数据对应的一维数组；

[0115] 对所述表单数据对应的一维数组进行遍历，确定所述表单数据中是否包括预设输入字段；

[0116] 在所述表单数据包括所述预设输入字段的情况下，确定所述网页数据中包括所述预设交互内容。

[0117] 需要说明的是，在目标网页中包括表单组件时，还可以进一步确定表单组件中是否包括地址选择输入框、电话验证框等需要用户输入内容的字段，若包括，则说明用户需要
进行复杂的输入交互，此时确定网页数据中包括预设交互内容，向在首屏页面代码中添加
交互代码块。

[0118] 实际应用中，在查找到“comp＝Form”时，可以通过form_id获取表单数据，然后遍历表单数据对应的一维数组，若查找到“type＝telephone”字段(预设输入字段)，则说明网
页数据中包括所述预设交互内容。

[0119] 本申请中通过对网页数据的层层遍历查找，确定网页数据中是否包括需要进行复杂交互操作的橱窗组件、表单组件或视频组件等预设组件，还可以在确定出包括表单组件
的情况下，再进一步对详细的表单数据进行遍历分析，从而准确确定网页数据中是否包括
预设交互内容，提高确定是否在首屏页面代码中添加交互代码块的准确率。

[0120] 本实施例一个可选的实施方式中，根据所述网页数据和预设网页模板，生成所述目标网页的首屏页面代码之后，还包括：

[0121] 在所述首屏页面代码中不包括预设交互内容的情况下，将所述首屏页面代码确定为所述目标网页的超文本标记语言代码。

[0122] 实际应用中，对网页数据进行查找，若查找到预设交互内容，则可以在首屏页面代码中添加交互代码块，然后推送给访问服务器；若未查找到预设交互内容，则说明目标网页
中只包括图片、文字、视频、文本等简单的展示组件，此时用户不需要基于该目标网页进行
大量复杂的交互，因而此时可以不向首屏页面代码中添加交互代码块，网页制作服务器直
接将生成的静态首屏页面代码推送给访问服务器。

[0123] 需要说明的是，网页制作服务器直接生成的HTML页面是不具备复杂的交互能力的，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序，运用SSR技术，能
一定程度上解决首屏慢的问题，还能获得更好的SEO。

[0124] 由于网页中有些组件会有相对复杂的交互，如表单组件、橱窗组件、视频组件等，而有的组件并没有复杂的交互如文字组件、图片组件等，因而可以通过查找网页数据，来判
断是否需要在首屏页面代码中添加交互代码模块，即该目标网页是否需要进行热激活。

[0125] 其中，客户端激活技术是建立在SSR技术应用场景上的，可以简单的理解为激活网页的交互功能。一般的网页是由前端开发工程师通过代码编写完成的，开发工程师能够根
据业务的复杂程度决定技术的选型，然而通过建站平台生成的网页是有多种形态的，有些
没有复杂交互的网页是没有必要进行热激活的，不用加载相应的交互代码块(即SPA代码
块)。因而，本申请中可以通过查找网页数据，来判断该目标网页是否需要进行热激活，从而
确定是否需要在首屏页面代码中添加交互代码模块。

[0126] 步骤208：将添加有所述交互代码块的首屏页面代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代码推送至访问服务器。

[0127] 具体的，在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块的基础上，进一步地，将添加有所述交互代码块的首屏页面代码确定为所
述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代码推送至访问
服务器。其中，访问服务器是存储超文本标记语言代码的服务器，后续客户端需要访问该网
页时，可以通过网页地址，在该访问服务器中获取相应的超文本标记语言代码，进行渲染展
示，该访问服务器即是指存储超文本标记语言代码的远端云服务。

[0128] 需要说明的是，网页制作服务器可以根据目标网页的网页内容的复杂程度，生成对应的超文本标记语言代码，然后网页制作服务器可以将处理好的目标网页的超文本标记
语言代码推送至访问服务器，以供后续用户通过客户端进行访问。

[0129] 本实施例一个可选的实施方式中，将所述目标网页的超文本标记语言代码推送至访问服务器，包括：

[0130] 确定所述目标网页的超文本标记语言代码对应的资源存储文件；

[0131] 将所述目标网页的超文本标记语言代码和所述资源存储文件推送给所述访问服务器。

[0132] 实际应用中，资源存储文件是指存储超文本标记语言代码中所需读取的资源的文件，也即超文本标记语言代码中只包括所需资源的存储地址，通过读取该存储地址，可以找
到对应的资源存储文件，在渲染网页时，可以读取资源存储文件，获取展示网页所需的资
源，因而本申请中可以将目标网页的超文本标记语言代码和资源存储文件一起打包推送给
访问服务器。如目标网页中包括一个图片和一个视频，则超文本标记语言代码中需要从存
储该图片的文件中读取该文件，并从存储该视频的文件中读取该视频，此时可以将超文本
标记语言代码和存储该图片、视频的文件一起打包推送至访问服务器。

[0133] 需要说明的是，网页制作服务器将目标网页的超文本标记语言代码推送至访问服务器后，用户就可以通过客户端访问该网页，此时客户端可以根据从访问服务器中获取的
超文本标记语言代码，确定是否开启客户端热激活，即是否需要将当前的静态首屏页面，转
换为可交互的动态页面。具体实现时，可以判断视图挂载的id＝app dom节点是否data‑
server‑rendred＝true，用户在浏览器访问网页时，网页会根据data‑server‑rendred标记
判断当前网页中是否添加了SPA代码块(即交互代码块)，若不含SPA代码块则渲染首屏后不
进行下一步操作，如含有SPA代码块则进行客户端热激活，进行同构渲染。

[0134] 本申请提供的网页制作方法，在制作网页时，网页制作服务器可以先根据接收到的网页数据和目标网页模板，生成首屏页面代码，并在网页数据中包括预设内容的情况下，
在首屏页面代码中添加交互代码块，从而生成目标网页的超文本标记语言代码，将其推送
给访问服务器，此时访问服务器中存储的是结合模板制作好的目标网页的超文本标记语言
代码，且对于需要交互的情况，该超文本标记语言代码中已经包括有交互代码块，前端浏览
器需要访问该网页时，可以直接获取访问服务器中存储的超文本标记语言代码进行渲染即
可实现交互功能，无需再在浏览器中生成和添加交互代码块，提高了网页的渲染效率。

[0135] 下述结合附图4，以本申请提供的网页制作方法在广告推广场景中的应用为例，对所述网页制作方法进行进一步说明。其中，图4示出了本申请一实施例提供的一种应用于广
告推广场景中的网页制作方法的处理流程图，具体包括以下步骤：

[0136] 步骤402：用户拖拽建站平台中的组件，组合生成预期的广告推广页面的视图。

[0137] 步骤404：建站平台根据配置好的广告推广页面的视图，生成一份JSON数据。

[0138] 步骤406：建站平台同步JSON数据到生成页面代码的SSR远端服务，SSR远端服务生成一份首屏内容HTML代码。

[0139] 具体的，用户点击保存页面后会将当前页面的JSON数据发送到生成页面的SSR远端服务，SSR远端服务会结合预先设置好的模版与传输过来的JSON数据生成一份首屏内容
HTML代码。

[0140] 步骤408：SSR远端服务通过页面数据规则判断JSON数据中是否包括预设交互内容，若否，则执行下述步骤410，若是，则执行下述步骤412。

[0141] 需要说明的是，SSR远端服务接收到页面JSON数据后，判断是否含有表单组件、橱窗组件、视频组件等，若含有橱窗组件、视频组件等，则表示页面有较为复杂的交互，需要注
入SPA代码块；或者，若含有表单组件，则判断是否有地址选择输入框、电话验证框等，从而
确定是否需要注入SPA代码块。

[0142] 具体的，SSR远端服务可以将接收到的JSON数据序列化，得到一个一维数组，遍历该数组，判断字段comp＝Showcase或者comp＝Video则注入；或者，当comp＝Form时，通过
form_id获取表单数据，遍历item一维数组，查找到type＝telephone。以上两种情况表示页
面有较为复杂交互需要注入SPA代码块。

[0143] 另外，若页面仅仅包含图片、文字、视频、文本等简单展示组件时，则不注入相关SPA代码块。

[0144] 步骤410：SSR远端服务将所述首屏内容HTML代码确定为处理好的HTML页面代码。

[0145] 步骤412：SSR远端服务在首屏内容HTML代码中注入SPA代码块，并注入初始交互数据，将注入SPA代码块的首屏内容HTML代码确定为处理好的HTML页面代码。

[0146] 步骤414：SSR远端服务将处理好的HTML页面代码和所需的静态文件打包，同步推送到远端云服务。

[0147] 步骤416：用户通过客户端访问远端云服务，获取该HTML页面代码和所需的静态文件。

[0148] 步骤418：客户端确定HTML页面代码中是否包括SPA代码块，若是，则执行下述步骤420，若否，则执行下述步骤422。

[0149] 步骤420：客户端渲染HTML页面代码中的首屏代码，并将HTML页面代码中的DOM转换为动态DOM，得到渲染后的广告推广页面。

[0150] 步骤422：客户端渲染HTML页面代码中的首屏代码，得到渲染后的广告推广页面。

[0151] 本申请提供的网页制作方法，在制作网页时，SSR远端服务可以先根据接收到的JSON数据和预设模板，生成首屏内容HTML代码，并在JSON数据中包括橱窗组件或表单组件
的情况下，在首屏内容HTML代码中添加SPA代码块，从而生成广告推广页面的HTML代码，将
其推送给远端云服务，此时远端云服务中存储的是结合模板制作好的广告推广页面的HTML
代码，且该广告推广页面的HTML代码中已经包括有SPA代码块，前端浏览器需要访问该广告
推广页面时，可以直接获取远端云服务中存储的广告推广页面的HTML代码进行渲染即可实
现交互功能，无需再在浏览器中生成和添加SPA代码块，提高了广告推广页面的首屏渲染速
度，从而提高了页面的渲染效率。

[0152] 与上述方法实施例相对应，本申请还提供了客户端实施例，图5示出了本申请一实施例提供的一种客户端的结构示意图。如图5所示，该客户端包括：

[0153] 第一接收模块502，被配置为向访问服务器发送网页访问请求，并接收所述访问服务器返回的目标网页的超文本标记语言代码，所述超文本标记语言代码为网页制作服务器
生成并存储至所述访问服务器的代码；

[0154] 第一确定模块504，被配置为确定所述超文本标记语言代码中是否包括交互代码块；

[0155] 转换模块506，被配置为在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象
模型转换为动态文档对象模型，得到渲染后的目标网页。

[0156] 可选地，所述客户端还包括渲染模块，被配置为：

[0157] 在所述超文本标记语言代码中不包括交互代码块的情况下，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的目标网页。

[0158] 可选地，第一确定模块504进一步被配置为：

[0159] 查找所述超文本标记语言代码中的文档对象模型的对象标记；

[0160] 在所述对象标记为预设存在标记的情况下，确定所述超文本标记语言代码中包括所述交互代码块；

[0161] 在所述对象标记为预设不存在标记的情况下，确定所述超文本标记语言代码中不包括所述交互代码块。

[0162] 可选地，第一接收模块502进一步被配置为：

[0163] 接收所述访问服务器返回的目标网页的超文本标记语言代码和资源存储文件；

[0164] 相应地，渲染模块进一步被配置为：

[0165] 根据所述超文本标记语言代码和资源存储文件，渲染所述超文本标记语言代码中的首屏代码，得到渲染后的网页。

[0166] 本申请提供的客户端可以从访问服务器中获取网页制作服务器生成并存储至所述访问服务器的超文本标记语言代码，该超文本标记语言代码中可以包括交互代码块，也
即网页制作服务器在渲染生成超文本标记语言代码时，若需要交互则可以直接添加交互代
码块，客户端只需将超文本标记语言代码中的文档对象模型转换为动态文档对象模型，即
只需进行客户端激活，无需重新加载交互逻辑，提高了网页的渲染效率。另外，客户端只有
在获取到的超文本标记语言代码中包括交互代码块的情况下，才会将所述超文本标记语言
代码中的文档对象模型转换为动态文档对象模型，即只有包括交互代码块时，才进行客户
端激活，对于复杂网页和简单网页以不同的策略进行渲染，进一步提高了网页的渲染效率，
避免了资源浪费。

[0167] 上述为本实施例的一种客户端的示意性方案。需要说明的是，该客户端的技术方案与上述的网页渲染方法的技术方案属于同一构思，客户端的技术方案未详细描述的细节
内容，均可以参见上述网页渲染方法的技术方案的描述。

[0168] 与上述方法实施例相对应，本申请还提供了网页制作服务器实施例，图6示出了本申请一实施例提供的一种网页制作服务器的结构示意图。如图6所示，该装置包括：

[0169] 第二接收模块602，被配置为接收目标网页的网页数据；

[0170] 生成模块604，被配置为根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；

[0171] 添加模块606，被配置为在所述网页数据中包括预设交互内容的情况下，在所述首屏页面代码中添加交互代码块；

[0172] 推送模块608，被配置为将添加有所述交互代码块的首屏页面代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言代码推送至访问服务
器。

[0173] 可选地，所述服务器还包括查找模块，被配置为：

[0174] 查找所述网页数据，确定所述网页数据中是否包括预设组件字段；

[0175] 在所述网页数据中包括所述预设组件字段的情况下，确定所述网页数据中包括所述预设交互内容。

[0176] 可选地，查找模块进一步被配置为：

[0177] 将所述网页数据进行序列化，得到所述网页数据对应的一维数组；

[0178] 对所述网页数据对应的一维数组进行遍历，确定所述网页数据中是否包括所述预设组件字段。

[0179] 可选地，查找模块进一步被配置为：

[0180] 在所述预设组件字段为表单组件的字段时，获取所述表单组件对应的表单数据，并确定所述表单数据对应的一维数组；

[0181] 对所述表单数据对应的一维数组进行遍历，确定所述表单数据中是否包括预设输入字段；

[0182] 在所述表单数据包括所述预设输入字段的情况下，确定所述网页数据中包括所述预设交互内容。

[0183] 可选地，推送模块608进一步被配置为：

[0184] 确定所述目标网页的超文本标记语言代码对应的资源存储文件；

[0185] 将所述目标网页的超文本标记语言代码和所述资源存储文件推送给所述访问服务器。

[0186] 可选地，所述网页数据中携带模板标识；所述服务器还包括第二确定模块，被配置为：

[0187] 根据所述模板标识，从至少一个预设网页模板中确定所述目标网页模板。

[0188] 可选地，所述服务器还包括第三确定模块，被配置为：

[0189] 在所述首屏页面代码中不包括预设交互内容的情况下，将所述首屏页面代码确定为所述目标网页的超文本标记语言代码。

[0190] 本申请提供的网页制作服务器，在制作网页时，网页制作服务器可以先根据接收到的网页数据和目标网页模板，生成首屏页面代码，并在网页数据中包括预设内容的情况
下，在首屏页面代码中添加交互代码块，从而生成目标网页的超文本标记语言代码，将其推
送给访问服务器，此时访问服务器中存储的是结合模板制作好的目标网页的超文本标记语
言代码，且对于需要交互的情况，该超文本标记语言代码中已经包括有交互代码块，前端浏
览器需要访问该网页时，可以直接获取访问服务器中存储的超文本标记语言代码进行渲染
即可实现交互功能，无需再在浏览器中生成和添加交互代码块，提高了网页的首屏渲染速
度，从而提高了网页的渲染效率。

[0191] 上述为本实施例的一种网页制作服务器的示意性方案。需要说明的是，该网页制作服务器的技术方案与上述的网页制作方法的技术方案属于同一构思，网页制作服务器的
技术方案未详细描述的细节内容，均可以参见上述网页制作方法的技术方案的描述。

[0192] 与上述方法实施例相对应，本申请还提供了网页渲染系统实施例，图7示出了本申请一实施例提供的一种网页渲染系统的结构示意图。如图7所示，该装置包括网页制作服务
器702、访问服务器704和客户端706；

[0193] 所述网页制作服务器702，被配置为接收目标网页的网页数据，根据所述网页数据和目标网页模板，生成所述目标网页的首屏页面代码；在所述网页数据中包括预设交互内
容的情况下，在所述首屏页面代码中添加交互代码块；将添加有所述交互代码块的首屏页
面代码确定为所述目标网页的超文本标记语言代码，并将所述目标网页的超文本标记语言
代码推送至所述访问服务器704；

[0194] 所述客户端706，被配置为向所述访问服务器704发送网页访问请求，并接收所述访问服务器704返回的目标网页的超文本标记语言代码；确定所述超文本标记语言代码中
是否包括交互代码块；在所述超文本标记语言代码中包括交互代码块的情况下，渲染所述
超文本标记语言代码中的首屏代码，并将所述超文本标记语言代码中的文档对象模型转换
为动态文档对象模型，得到渲染后的目标网页。

[0195] 本申请提供的网页渲染系统，在制作网页时，网页制作服务器可以先根据接收到的网页数据和目标网页模板，生成首屏页面代码，并在网页数据中包括预设内容的情况下，
在首屏页面代码中添加交互代码块，从而生成目标网页的超文本标记语言代码，将其推送
给访问服务器，此时访问服务器中存储的是结合模板制作好的目标网页的超文本标记语言
代码，且对于需要交互的情况，该超文本标记语言代码中已经包括有交互代码块，前端浏览
器需要访问该网页时，可以直接获取访问服务器中存储的超文本标记语言代码进行渲染即
可实现交互功能，无需再在浏览器中生成和添加交互代码块，提高了网页的首屏渲染速度，
从而提高了网页的渲染效率。

[0196] 上述为本实施例的一种网页渲染系统的示意性方案。需要说明的是，该网页渲染系统的技术方案与上述的网页渲染方法、网页制作方法的技术方案属于同一构思，网页渲
染系统的技术方案未详细描述的细节内容，均可以参见上述网页渲染方法、网页制作方法
的技术方案的描述。

[0197] 图8示出了根据本申请一实施例提供的一种计算设备800的结构框图。该计算设备800的部件包括但不限于存储器810和处理器820。处理器820与存储器810通过总线830相连
接，数据库850用于保存数据。

[0198] 计算设备800还包括接入设备840，接入设备840使得计算设备800能够经由一个或多个网络860通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网
(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备840可以包括有线或无线的
任何类型的网络接口(例如，网络接口卡(NIC))中的一个或多个，诸如IEEE802.11无线局域
网(WLAN)无线接口、全球微波互联接入(Wi‑MAX)接口、以太网接口、通用串行总线(USB)接
口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口，等等。

[0199] 在本申请的一个实施例中，计算设备800的上述部件以及图8中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图8所示的计算设备结构框图仅仅是出于示
例的目的，而不是对本申请范围的限制。本领域技术人员可以根据需要，增添或替换其他部
件。

[0200] 计算设备800可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动
电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移
动设备，或者诸如台式计算机或PC的静止计算设备。计算设备800还可以是移动式或静止式
的服务器。

[0201] 其中，处理器820用于执行如下计算机可执行指令，以实现任意所述网页渲染方法或者所述网页制作方法的操作步骤。

[0202] 上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的网页渲染方法、网页制作方法的技术方案属于同一构思，计算设备的技术
方案未详细描述的细节内容，均可以参见上述网页渲染方法、网页制作方法的技术方案的
描述。

[0203] 本申请一实施例还提供一种计算机可读存储介质，其存储有计算机可执行指令，该计算机可执行指令被处理器执行时以用于实现任意所述网页渲染方法或者所述网页制
作方法的操作步骤。

[0204] 上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的网页渲染方法、网页制作方法的技术方案属于同一构思，存储
介质的技术方案未详细描述的细节内容，均可以参见上述网页渲染方法、网页制作方法的
技术方案的描述。

[0205] 上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行
并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或
者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的
或者可能是有利的。

[0206] 所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所
述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储
器、只读存储器(ROM，Read‑Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、
电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内
容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖
区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

[0207] 需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为
依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知
悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申
请所必须的。

[0208] 在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

[0209] 以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本申请的内容，可
作很多的修改和变化。本申请选取并具体描述这些实施例，是为了更好地解释本申请的原
理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权
利要求书及其全部范围和等效物的限制。