CN116991506A - 一种网页渲染方法、装置、终端和存储介质 - Google Patents

一种网页渲染方法、装置、终端和存储介质 Download PDF

Info

Publication number
CN116991506A
CN116991506A CN202311266290.XA CN202311266290A CN116991506A CN 116991506 A CN116991506 A CN 116991506A CN 202311266290 A CN202311266290 A CN 202311266290A CN 116991506 A CN116991506 A CN 116991506A
Authority
CN
China
Prior art keywords
target
webpage
character string
rendered
event processing
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
Application number
CN202311266290.XA
Other languages
English (en)
Other versions
CN116991506B (zh
Inventor
张宇昂
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202311266290.XA priority Critical patent/CN116991506B/zh
Publication of CN116991506A publication Critical patent/CN116991506A/zh
Application granted granted Critical
Publication of CN116991506B publication Critical patent/CN116991506B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明实施例公开了一种网页渲染方法、装置、终端和存储介质，可以接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。这种渲染方案节约了系统资源开销，从而大幅提升了网页渲染性能。

Description

一种网页渲染方法、装置、终端和存储介质
技术领域
本发明涉及通讯技术领域，具体涉及一种网页渲染方法、装置、终端和存储介质。
背景技术
随着移动互联网的普及和5G技术对数据传输的显著提速，网页被越来越多的应用于各种互联网产品中。因为节约客户端资源、前端耗时少、更有利于搜索引擎优化等优点，服务端渲染技术的采用也越来越广泛。但传统的服务端渲染技术是基于虚拟DOM的，需要在服务端先把组件编译成虚拟DOM，再根据所述虚拟DOM来生成用来渲染网页的字符串，这个过程需要消耗额外的内存和CPU资源，同时，传统的服务端渲染因为需要生成虚拟DOM，所以需要客户端生成虚拟DOM与服务端生成的DOM结构进行比较，导致客户端加载的javascript脚本的文件体积较大。传统的渲染方式对性能会造成一定的负面影响，尤其是在大型应用中，性能影响更为突出。
发明内容
本发明实施例提供一种网页渲染方法、装置、终端和存储介质，可以显著提高服务端渲染的性能。
本申请实施例提供一种网页渲染方法，所述方法应用于服务器，所述方法包括如下步骤：
接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；
将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；
构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；
基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；
将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
相应的，本申请实施例提供一种网页渲染装置，应用于服务端，包括：
第一接收单元，用于接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；
拆分单元，用于将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；
构建单元，用于构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；
生成单元，用于基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；
第一发送单元，用于将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
可选的，在本申请的一些实施例中，所述装置还可以包括接收子单元、确定子单元和第一发送子单元，如下：
所述接收子单元，用于接收来自客户端的交互请求；
所述确定子单元，用于确定实现所述交互请求的目标事件处理文件；
所述第一发送子单元，用于将所述目标事件处理文件发送给所述客户端，以便所述客户端加载所述目标事件处理文件，并基于所述目标事件处理文件在所述目标网页上执行目标操作
可选的，在本申请的一些实施例中，所述装置还可以包括第一构建子单元、第二构建子单元和绑定子单元，如下：
所述第一构建子单元，用于构建用于指示交互事件被触发时所执行操作的事件处理文件集合，所述事件处理文件集合中包括多个事件处理文件；
所述第二构建子单元，用于构建所述事件处理文件集合对应的事件处理目录，所述事件处理目录包括所述事件处理文件对应的文件索引、以及所述文件索引对应所述事件处理文件在所述服务端的地址；
所述绑定子单元，用于将所述文件索引与所述目标网页中多个可交互页面元素进行绑定，得到所述文件索引与所述可交互页面元素之间的绑定关系。
可选的，在本申请的一些实施例中，所述确定子单元，具体可以用于基于所述交互请求确定客户端交互操作所针对的目标页面元素；基于所述绑定关系，确定与所述目标页面元素相绑定的目标文件索引；基于所述事件处理目录，确定所述目标文件索引对应的目标事件处理文件在所述服务端的目标地址；基于所述目标地址，获取所述目标事件处理文件。
本申请实施例还提供一种网页渲染方法，所述方法应用于客户端，所述方法包括如下步骤：
向服务端发送网页请求；
接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；
基于所述目标字符串显示网页渲染后的目标网页。
相应的，本申请实施例提供一种网页渲染装置，应用于客户端，包括：
第二发送单元，用于向服务端发送网页请求；
第二接收单元，用于接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；
显示单元，用于基于所述目标字符串显示网页渲染后的目标网页。
可选的，在本申请的一些实施例中，所述显示单元包括转换子单元和显示子单元，如下；
所述转换子单元，用于将所述目标字符串转换为DOM元素；
所述显示子单元，用于基于所述DOM元素显示网页渲染后的目标网页。
可选的，在本申请的一些实施例中，所述装置还可以包括第二发送子单元、加载子单元和执行子单元，如下：
所述第二发送子单元，用于响应于用户针对所述目标网页中目标页面元素的交互操作，向所述服务端发送交互请求；
所述加载子单元，用于加载来自所述服务端的目标事件处理文件；
所述执行子单元，用于基于所述目标事件处理文件，在所述目标网页上执行目标操作。
本申请实施例提供的一种电子设备，包括处理器和存储器，所述存储器存储有多条指令，所述处理器加载所述指令，以执行本申请实施例提供的网页渲染方法中的步骤。
本申请实施例还提供一种计算机可读存储介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现本申请实施例提供的网页渲染方法中的步骤。
此外，本申请实施例还提供一种计算机程序产品，包括计算机程序或指令，该计算机程序或指令被处理器执行时实现本申请实施例提供的网页渲染方法中的步骤。
本申请实施例提供了一种网页渲染方法以及相关设备，可以接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中，不使用虚拟DOM技术，而是把待渲染内容拆分为多个待渲染子内容，通过内容编译器，把待渲染子内容直接编译为字符串拼接函数，拼接函数执行后直接得到用于渲染网页的目标字符串，这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术，所以不需要客户端生成虚拟DOM与服务端的结构进行比较，减少了javascript脚本的体积大小。另外，本申请在进行网页交互事件处理时，先将交互事件构建为一个个独立的事件处理文件，同时构建事件处理目录，该事件处理目录包含事件处理文件的文件索引及事件处理文件在服务端的地址。在客户端进行网页请求时，只加载事件处理目录，并确定可交互网页元素与事件处理文件之间的绑定关系，当用户针对可交互网页元素执行交互操作时，再从服务端加载具体的事件处理文件。该方案大大减少了客户端首屏加载的javaScript脚本的文件大小。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的网页渲染方法的场景示意图；
图2是本申请实施例提供的网页渲染方法的服务端的流程图；
图3是本申请实施例提供的网页渲染方法的客户端的流程图；
图4是本申请实施例提供的网页渲染方法的服务端和客户端综合的流程图；
图5是本申请实施例提供网页渲染方法的的网页内容示例；
图6是本申请实施例提供网页渲染方法的网页交互事件的说明图；
图7是本申请实施例提供的网页渲染方法的另一流程图；
图8是本申请实施例提供的网页渲染方法的服务端的结构示意图；
图9是本申请实施例提供的网页渲染方法的客户端的结构示意图；
图10是本申请实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例提供一种网页渲染方法以及相关设备，相关设备可以包括网页渲染装置、电子设备、计算机可读存储介质和计算机程序产品。该网页渲染装置具体可以集成在电子设备中，该电子设备可以是客户端或服务端等设备。
如图1所示，以客户端和服务端共同执行网页渲染方法为例。本申请实施例提供的网页渲染系统包括客户端10和服务端11等；客户端10与服务端11之间通过网络连接，比如，通过有线或无线网络连接等，其中，网页渲染装置可以集成在服务端中。
其中，服务端11，可以用于：接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。其中，服务端11可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。本申请所公开的网页渲染方法或装置，其中多个服务器可组成为一区块链，而服务器为区块链上的节点。
其中，客户端10，可以用于：向服务端发送网页请求；接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；基于所述目标字符串显示网页渲染后的目标网页。其中，客户端10可以包括手机、智能语音交互设备、智能家电、车载终端、飞行器、平板电脑、笔记本电脑、或个人计算机（PC，Personal Computer）等。客户端10还可以是应用程序客户端或浏览器客户端等等。
以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。在进行说明之前，首先对一些对本申请一个或多个实施例涉及的名词术语进行解释。
HTML（Hyper Text Markup Language，超文本标记语言）：是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
JavaScript（简称“JS”）：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
DOM（Document Object Model，文档对象模型）：是处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口（API），它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格（目前，HTML和XML文档是通过说明部分定义的）。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于体积大，所以不适合全部放在存储器中处理。
如图2所示，该网页渲染方法在服务端的具体流程可以如下：
201、接收来自客户端的网页请求，并基于网页请求确定待渲染内容。
其中，网页请求是客户端向服务端获取网页数据的一种请求，目的是使用服务端返回的数据展示网页页面。比如，在一款使用网页展示商品详情的电商应用程序中，用户点击该电商应用程序中展示的某一款商品时，便会向服务端发送网页请求，请求服务端返回商品详情页的数据。客户端在进行网页请求时所需要的参数包括统一资源定位标志，客户端请求的方式可以包括get、post、put、delete等，本实施例对此不做限制。
其中，待渲染内容是服务端根据网页请求的统一资源定位标志确定的具体网页在渲染过程中所需要的内容。比如，待渲染内容可以是网页中网页元素所对应的代码，如一张图片、一段文字、一个按钮对应的代码，等等，也可以是各种类型内容的组合，比如既有图片，又有文字，还有按钮等等，本实施例对此不做限制。
比如，在一款使用网页展示商品详情的电商应用程序中，客户端用户点击该电商应用程序中展示的某一款商品时，便会向服务端发送网页请求，服务端可以接收来自客户端的网页请求，并根据该网页请求确定需要进行服务器渲染的待渲染内容。
202、将待渲染内容拆分为多个待渲染子内容。
其中，待渲染子内容与目标网页上的页面元素相对应，比如，待渲染子内容与网页上的按钮元素相对应。
其中，页面元素是网页页面中展示的内容，比如，以如图5所示的目标网页为例，该目标网页包含有多个页面元素，商品图片、商品名称、颜色分类、价格、购买件数等。每个页面元素都是渲染后才显示出来的，在渲染之前对应的是待渲染内容。
比如，本申请实施例希望根据待渲染内容得到需要展示的目标网页，该目标网页上包括多个页面元素：商品图片、商品名称、颜色分类、价格、购买件数等等。可以通过将待渲染内容拆分为多个待渲染子内容，使得待渲染子内容与目标网页上的页面元素相对应。
在一实施例中，待渲染子内容与页面元素的对应关系可以有多种，比如，可以使得一个待渲染子内容与一个页面元素相对应，以图5为例，商品图片在被渲染显示之前的内容可以视为一个待渲染子内容，商品名称在被渲染显示之前的内容可以视为一个待渲染子内容，颜色分类在被渲染显示之前的内容可以视为一个待渲染子内容，商品价格在被渲染显示之前的内容可以视为一个待渲染子内容；也可以把多个待渲染子内容视为一个整体，使得多个待渲染子内容与一个页面元素相对应，比如图5的示例，可以把商品名称、颜色分类、商品价格这三个在同一列展示的内容视为一个整体，作为一个待渲染子内容看待，本实施例对此不做限制。
比如，将待渲染内容拆分为待渲染子内容后，其中一个待渲染子内容与目标网页上的按钮页面元素相对应，每当用户点击目标网页上的按钮，该按钮上面的数字就会增加1。可以从外部接收一个名称为val的值渲染到目标网页中，在客户端阶段可以通过用户点击按钮来增加val的值，该待渲染子内容的代码示例可以如下：
203、构建内容编译器，并基于内容编译器将待渲染子内容编译为字符串拼接函数。
其中，编译器是由代码构成的具有特定功能的程序，可以将符合预设条件的输入编译为目标输出，比如，Clang编译器是一个c语言编译器，当输入是符合c语言规定语法的代码时，Clang编译器编译后，便能得到可供计算机识别并执行的机器语言。内容编译器可以运行在服务端，其功能是将基于待渲染子内容的拆分规范而撰写的组件代码编译为字符串拼接函数。
其中，在编程中函数是用程序代码完成某些有意义的工作，比如处理文本、控制输入或计算数值。通过在程序代码中引入函数名称和所需的参数，可在该程序中执行该函数，得到特定的结果。比如c语言中非常常见的一个字符串反转函数，名字叫做reverse_string()，输入一个字符串作为参数，比如‘abcde’，reverse_string(‘abcde’)，该函数经过执行后便会得到‘edcba’。
其中，字符串拼接函数是用于字符串拼接的函数，经过内容编译器编译后，上述按规范划分和撰写的待渲染子内容，便会被转化为字符串拼接函数，执行该字符串拼接函数后，便会得到目标字符串。
其中，内容编译器的构建规范是与上述待渲染子内容的拆分规范、以及待渲染子内容的撰写规范相匹配的，也就是说，如果待渲染子内容的拆分规范、以及待渲染子内容的撰写规范被重新定义为另一种规范，那么内容编译器也会随之进行相应的调整。
比如，可以根据待渲染子内容的拆分规范、以及待渲染子内容的撰写规范构建相应的内容编译器，并基于内容编译器将待渲染子内容编译为如下的字符串拼接函数：
其中，framework.createTag()、framework.createTag()、framgwork.createText()、framework.createEndTag()、framework.createEndTag()是用于构成字符串拼接函数的多个函数，按照规范拆分和书写的待渲染子内容代码，经过构建的内容编译器编译后，便可以得到形如例子中的字符串拼接函数。
204、基于字符串拼接函数，生成页面元素对应的目标字符串。
其中，目标字符串是用于生成页面元素的字符串，比如，服务端接收到客户端所发送的网页请求后，可以由服务端的内容编译器编译目标网页的待渲染内容后生成目标字符串，然后响应于客户端的网页请求，将生成的目标字符串返回给客户端，以供客户端渲染显示使用。
比如，执行如下的字符串拼接函数：
其中，字符串拼接函数中的单个函数framework.createTag(‘div’)执行之后会得到目标字符串中的<div>，字符串拼接函数中的单个函数framework.createTag(‘button’)执行之后会得到目标字符串中的<button>，字符串拼接函数中的单个函数framework.createText(val)执行之后会得到数值格式的val变量的字符串格式，val是输入的数字，可以是任意数字。字符串拼接函数中的单个函数framework.createEndTag('button')执行后会得到</button>, 字符串拼接函数中的单个函数framework.createEndTag('div')执行后会得到</div>。所以，实例中的整个字符串拼接函数经过执行后便会得到目标字符串<div><button>val</button></div>。
在传统的服务端渲染过程中，服务器需要先将待渲染内容转化为虚拟DOM结构，然后根据转化后的虚拟DOM结构生成目标字符串，客户端就可以利用该目标字符串展示相应的目标网页。但是将待渲染内容转化为虚拟DOM结构的过程需要消耗额外的内存和CPU资源，就会对渲染性能造成一定的负面影响，尤其是在大型应用，比如一款展示大量商品的电商应用，页面内容非常丰富，页面元素非常多，传统的服务端渲染需要先将待渲染内容转化为虚拟DOM，然后再从虚拟DOM转化为目标字符串，对渲染性能的影响会更为突出。因此本发明中的实施例通过预设页面元素拆分规范、页面元素代码撰写规范、基于这些规范构造内容编译器，通过内容编译器直接把待渲染内容编译为字符串拼接函数，字符串拼接函数经过执行后直接得到目标字符串，省去了传统服务端渲染过程中需要生成虚拟DOM的过程，使得性能得到显著提升。
205、将目标字符串发送至客户端进行网页渲染，以便客户端基于目标字符串显示网页渲染后的目标网页。
比如，返回给客户端的目标字符串是<div><button>val</button></div>，该目标字符串所代表的内容便是在目标网页中展示一个带有数字值的按钮。客户端接收到该目标字符串后，便可以根据该目标字符串在目标网页中渲染显示相应带有数字值的按钮。
可选的，本实施例中，步骤“将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页”之后，还可以包括：
接收来自客户端的交互请求；
确定实现交互请求的目标事件处理文件；
将目标事件处理文件发送给客户端，以便客户端加载目标事件处理文件，并基于目标事件处理文件在目标网页上执行目标操作。
其中，交互请求是指对于某些具有和用户进行交互功能的网页，当用户针对网页中的可交互网页元素进行交互时发送的请求。并不是所有网页都具备交互功能，有的网页只是展示内容给用户看，并不需要和用户交互；而有的网页不仅需要展示给用户看，还可以接受用户的交互操作，比如，可交互的网页中包括可交互网页元素，通过这些可交互网页元素，可以响应用户的交互请求，如点赞、评论、加入购物车、点击进入详情页等。当用户点击这些可交互页面元素时，便需要触发一些操作，使得页面发生一定的变化。
其中，事件处理文件是一种代码文件，利用事件处理文件可以响应用户针对网页上可交互网页元素的交互操作，事件处理文件通常是通过javascript代码实现的，当然也可以通过其他的语言实现，但是本实施例以javascript为例。在处理用户的交互请求时，通过可交互的页面元素所绑定的事件寻找对应的代码，进行执行以响应用户操作。
比如，一款电商应用中，商品被用户加入购物车后，商品数量会显示为1，在商品的左边和右边，会有“+”和“-”的按钮，当用户点击“+”按钮时，购物车中该商品的数量便会增加1，当用户点击“-”按钮时，购物车中该商品的数量便会减少1。当用户点击“+”“-”按钮时，便是在接受交互请求，然后需要基于该交互请求执行相应的代码，以响应用户的交互请求。该例子所对应的示例代码可以如下：
其中，代码示例中的Page对应于目标网页中的按钮，addval对应的是点击按钮后需要执行的操作，比如使显示购物车中商品数量的按钮中显示的数量值增加1。当用户点击了该按钮，便会去执行addVal中对应的代码以响应用户的操作。addVal对应的具体代码，便写在一个单独的事件处理文件中，该事件处理文件存储在服务端。
当服务端确定了用户的交互请求所对应的事件处理文件之后，便会将该事件处理文件从服务端发送至客户端。当客户端加载到该事件处理文件之后，便可以调用解释器执行事件处理文件中的代码，响应用户的交互请求，使得购物车中商品数量的值增加1。
可选的，本实施例中，步骤“接收来自客户端的交互请求”之前，还可以包括：
构建用于指示交互事件被触发时所执行操作的事件处理文件集合，该事件处理文件集合中包括多个事件处理文件；
构建事件处理文件集合对应的事件处理目录，事件处理目录包括所述事件处理文件对应的文件索引、以及文件索引对应所述事件处理文件在服务端的地址；
将文件索引与目标网页中多个可交互页面元素进行绑定，得到文件索引与可交互页面元素之间的绑定关系。
其中，事件处理文件集合中包括多个事件处理文件，在实际应用中目标网页上通常包括多个可交互页面元素，每个可交互页面元素都对应着相应的交互事件，当用户触发交互事件时需要执行相应的javascript代码文件，也即事件处理文件，多个javascript代码文件便构成事件处理文件集合。比如，一个目标网页上有多个可交互页面元素：点击后可以进入详情的“查看详情”按钮，点击后可以查看评论列表的“查看评论”按钮，点击后可以加入购物车的“加入购物车”按钮。例子中的这每一个按钮，被交互时都需要执行操作，使网页内容发生变化。所以，每一个按钮都需要相关的代码去响应用户的交互操作。本实施例中，这三个按钮被点击时对应的代码分别被保存在一个独立的事件处理文件中，也就是会有三个事件处理文件。那么这三个事件处理文件便构成了事件处理文件集合。
其中，事件处理目录是事件处理文件集合中用于查询事件处理文件的索引的目录文件，该事件处理目录包括每个事件处理文件在服务端的地址，以及相应的索引。客户端可以基于目标网页被交互的页面元素从事件处理目录中寻找事件处理文件的地址，并从服务端下载该事件处理文件。比如，如图6所示，目标网页中包括多个可交互页面元素，每个可交互页面元素都绑定相应的索引，事件处理目录中包括多个事件处理文件对应的索引、以及该事件处理文件在服务端的地址，服务端存储着多个事件处理文件。根据该事件处理目录便可以找到对应的事件处理文件在服务端的地址，进而在用户与网页交互时，便可以根据所述事件处理文件在服务端的地址，加载所述事件处理文件，以执行所述事件处理文件中的代码，响应用户的交互请求。
其中，将文件索引与目标网页中多个可交互页面元素进行绑定指的是将目标网页中的可交互页面元素与事件处理文件索引进行绑定。这样之后，当可交互页面元素被用户操作时，便可以基于被交互页面元素找到对应的事件处理文件索引，得到事件处理文件索引之后再基于事件处理文件目录的索引和对应的事件处理文件地址的映射关系，从服务端下载的事件处理文件。当客户端加载到交互事件对应的事件处理文件之后，就可以执行事件处理文件中的代码，从而响应用户的交互请求。该所述步骤的部分示例代码如下：
可选的，本实施例中，步骤“确定实现所述交互请求的目标事件处理文件”，可以包括：
基于交互请求确定客户端交互操作所针对的目标页面元素；
基于绑定关系，确定与目标页面元素相绑定的目标文件索引；
基于事件处理目录，确定目标文件索引对应的目标事件处理文件在服务端的目标地址；
基于目标地址，获取目标事件处理文件。
当用户对目标网页的可交互元素进行交互后，首先确定用户交互的可交互页面元素具体是哪一个。当定位到用户交互的可交互页面元素之后，基于可交互页面元素和事件处理文件索引之间的绑定关系，确定目标可交互元素对应的事件处理文件索引。然后，基于确定的索引以及事件处理目录中索引与事件处理文件地址的映射关系，确定目标可交互元素对应的事件处理文件在服务端的地址。然后，客户端基于事件处理文件在服务端的地址向服务端发送请求，加载事件处理文件。当事件处理文件被加载到客户端后，客户端便可以执行事件处理文件中的代码以响应用户的交互请求。
比如，在一款电商应用中的商品详情页面，“加入购物车”按钮是一个可交互页面元素，当用户点击了加入购物车按钮之后，便可以确定“加入购物车”按钮是客户端交互操作所针对的目标页面元素。然后找到“加入购物车”按钮所绑定的事件处理文件索引，比如该索引的名字叫addShoppingCart。在事件处理目录中，该索引addShoppingCart会对应一个事件处理文件的地址，那么客户端便可以得到该地址。然后，客户端基于该地址向服务端发送网络请求，从服务端加载该地址对应的事件处理文件addShoppingCart.js。当该事件处理文件被下载到客户端后，客户端便可以执行文件中的代码，执行后就可以更新目标网页，得到目标结果，比如在购物车列表中显示对应的商品、以及对应商品的数量等。
由上可知，本实施例可以通过服务端接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中，不使用虚拟DOM技术，而是把网页页面拆分为多个内容元素，通过内容编译器，把所述内容元素直接编译为字符串拼接函数，所述拼接函数执行后直接得到用于渲染网页的目标字符串，这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术，所以不需要客户端生成虚拟DOM与服务端的结构进行比较，减少了javascript脚本的体积大小。另外，本申请，在进行网页交互事件处理时，先将交互事件构建为一个个独立的事件处理文件，同时构建事件处理的目录文件，所述目录文件包含全部的所述事件处理文件的索引及所述事件处理文件在所述服务端的地址。在客户端进行网页请求时，只加载所述事件处理的目录文件，并确定可交互网页元素与事件处理文件的绑定关系，当用户与所述可交互网页元素交互时，再从所述服务端加载具体的事件处理文件。该方案大大减少了客户端首屏加载的javaScript脚本的文件大小。
根据前面实施例所描述的方法，以下将以该网页渲染装置具体集成在客户端举例作进一步详细说明。本申请实施例提供一种网页渲染方法，如图3所示，该网页渲染方法的具体流程可以如下：
301、向服务端发送网页请求。
302、接收来自服务端的目标字符串，目标字符串是服务端通过执行内容编译器生成的字符串拼接函数得到的。
其中，目标字符串是客户端用于生成目标网页的字符串，是综合了网页页面结构和具体数据的字符串。比如目标网页上的一个显示数字3的按钮，其对应的目标字符串是<div><button>3</button></div>。比如目标网页上，有三行内容，第一行显示1，第二行显示2，第三行显示3，且1、2、3这三个数字都是斜体的，那么该部分目标内容对应的目标字符串如下：
为了保证客户端接收到的数据与服务端数据的一致性，当客户端接收到目标字符串后，会基于目标字符串生成一个虚拟DOM结构去比较与服务端的html字符串是否一致。
在本实施例中，当用户请求目标网页时，服务端接收到客户端的网页请求后，由服务端生成目标字符串，然后通过网络把目标字符串返回给客户端以响应用户的请求。目标字符串在服务端的生成方式是这样的：
首先把目标网页中的待显示内容按页面元素进行拆分，拆分为待渲染子内容。然后按照预定规范撰写每个待渲染子内容对应的代码。随后，基于拆分方式和预定规范，进行内容编译器的构建。构建的该内容编译器可以把待渲染子内容编译为字符串拼接函数，当字符串拼接函数执行后，便可以得到目标字符串。
以如图5所示的目标网页为例，该目标网页包含有多个页面元素，商品图片、商品名称、颜色分类、价格、购买件数等。可以把网页元素按商品图片、商品名称、颜色分类、价格、购买件数分别拆分为一个待渲染子内容，进行待渲染子内容的代码撰写，并构建内容编译器。当用户发送网络请求后，客户端接收到该网路请求，便会找到与该网页目标元素相对应的代码，通过内容编译器的编译，便会生成目标字符串，然后把目标字符串返回给客户端，供客户端渲染显示。比如其中的一个页面元素：显示有数字的按钮。该按钮对应的代码示例如下：
/>
该组件代码经过内容编译器编译后，还会把其中的变量val替换为具体的数值，这里以val的具体数值是3为例，于是便会得到目标字符串<div><button>3</button></div>。
303、基于目标字符串显示网页渲染后的目标网页。
其中，目标字符串是由html中的类型标签和标签上具体的内容组合而成的字符串。当客户端向服务端发起网络请求，获取到目标字符串之后，便可以利用目标字符串进行目标网页的渲染。
比如，客户端获取到的目标字符串是<div><button>val</button></div>，该目标字符串所代表的内容便是在目标网页中展示一个带有数字值的按钮。客户端接收到该目标字符串后，便可以根据该目标字符串在目标网页中渲染显示相应带有数字值的按钮。
比如，客户端获取到的目标字符串是<html><head><meta charset="UTF-8"><title>编程基础</title></head><body><h3>21天精通编程</h3></body></htm1>，那么该目标字符串在目标网页中渲染之后，是一个标题叫“编程基础”，内容是“21天精通编程”的一个简单网页。
可选的，本实施例中，步骤“基于目标字符串显示网页渲染后的目标网页”，可以包括：
将目标字符串转换为DOM元素；
基于DOM元素显示网页渲染后的目标网页。
其中，DOM元素是文档对象模型：是W3C组织推荐的处理可扩展标志语言的标准编程接口。定义了访问和操作HTML和XML文档的标准。包含以下三种常见节点：元素节点、文本节点、属性节点。
目标字符串虽然看起来由各种节点组成，但本质是一个字符串，并不能操作字符串中的元素。所以，在把目标字符串渲染成为目标网页的时候，需要先把目标字符串转化为DOM元素，然后客户端的浏览器再把DOM元素渲染为可以显示的目标网页。
可选的，本实施例中，步骤“基于目标字符串显示网页渲染后的目标网页”之后，还可以包括：
响应于用户针对目标网页中目标页面元素的交互操作，向服务端发送交互请求；
加载来自服务端的目标事件处理文件；
基于目标事件处理文件，在目标网页上执行目标操作。
当目标网页在客户端渲染显示之后，目标网页的各个页面元素将会被展现出来，有的元素只能被浏览其中的内容，而有的元素不仅可以被浏览其中的内容，还可以被用户交互，当可交互的页面元素被用户操作时，在本实施例中，会向服务端发送交互请求。当服务端接收到来自客户端的交互请求，便会从服务端存储器中寻找可以响应客户端交互的事件处理文件。当客户端段找到目标事件处理文件，便会将该事件处理文件发送给客户端。客户端获取到事件处理文件之后，就可以得到事件处理文件中的代码，客户端执行事件处理文件中的代码，就可以在目标网页上执行目标操作，更新网页的内容。
比如，一款电商应用中，目标网页中有一个“加入购物车”的按钮，当用户点击的时候，可以把商品加入购物车，同时按钮上代表购物车商品数量的数字会显示为1，在商品的左边和右边，会有“+”和“-”的按钮，当用户点击“+”按钮时，购物车中该商品的数量便会增加1，当用户点击“-”按钮时，购物车中该商品的数量便会减少1。当用户点击“+”“-”按钮时，便是在向服务端发送交互请求，该例子所对应的示例代码可以如下：
其中，代码示例中的Page对应于目标网页中的按钮，addval对应的是点击按钮后需要执行的操作，比如使显示购物车中商品数量的按钮中显示的数量值增加1。当用户点击了该按钮，便会去执行addVal中对应的代码以响应用户的操作。addVal对应的具体代码，便写在一个单独的事件处理文件中，该事件处理文件存储在服务端。
当服务端确定了用户的交互请求所对应的事件处理文件之后，便会将该事件处理文件从服务端发送至所述客户端。当客户端加载到该事件处理文件之后，便可以调用解释器执行事件处理文件中的代码，响应用户的交互请求，使得购物车中商品数量的值增加1。
由上可知，本实施例可以通过客户端向服务端发送网页请求；接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；基于所述目标字符串显示网页渲染后的目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中，不使用虚拟DOM技术，而是把网页页面拆分为多个内容元素，通过内容编译器，把所述内容元素直接编译为字符串拼接函数，所述拼接函数执行后直接得到用于渲染网页的目标字符串，这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术，所以不需要客户端生成虚拟DOM与服务端的结构进行比较，减少了javascript脚本的体积大小。另外，本申请，在进行网页交互事件处理时，先将交互事件构建为一个个独立的事件处理文件，同时构建事件处理的目录文件，所述目录文件包含全部的所述事件处理文件的索引及所述事件处理文件在所述服务端的地址。在客户端进行网页请求时，只加载所述事件处理的目录文件，并确定可交互网页元素与事件处理文件的绑定关系，当用户与所述可交互网页元素交互时，再从所述服务端加载具体的事件处理文件。该方案大大减少了客户端首屏加载的javaScript脚本的文件大小。
根据前面实施例所描述的方法，以下将以该网页渲染系统具体集成在服务端和客户端举例作进一步详细说明。本申请实施例提供一种网页渲染方法，如图4所示，该网页渲染方法的具体流程可以如下：
401、客户端向服务端发送网页请求。
比如，在一款使用网页展示商品详情的电商应用程序中，用户点击该电商应用程序中展示的某一款商品时，便会向服务端发送网页请求，请求服务端返回商品详情页的数据。客户端在进行网页请求时所需要的参数包括统一资源定位标志，客户端请求的方式可以包括get、post、put、delete等，本实施例对此不做限制。
402、服务端接收来自客户端的网页请求，并基于网页请求确定待渲染内容。
比如，如图5所示，待渲染内容与图中网页上的各个元素相对应：商品图片、商品名称、商品颜色分类、商品价格、购买件数、“+”“-”号按钮。
403、服务端将待渲染内容拆分为多个待渲染子内容，待渲染子内容与目标网页上的页面元素相对应。
比如，如图5中，该目标网页包含有多个页面元素，商品图片、商品名称、颜色分类、价格、购买件数等都是页面元素。每个页面元素都是渲染后才显示出来的，在渲染之前被称为待渲染内容。待渲染内容中的各个内容，按照预设规范进行拆分，每一个被拆分的部分就是一个待渲染子内容。可以每个页面元素拆分为一个待渲染子内容，也可以把几个页面元素视为一个整体，作为一个待渲染子内容。比如可以把商品名称、颜色分类、商品价格这三个在同一列展示的内容视为一个整体，作为一个待渲染子内容看待。当待渲染内容被拆分为待渲染子内容后，撰写代码时，便以待渲染子内容为单位撰写组件代码，使得一个代码块对应一个待渲染子内容。
比如，一个待渲染子内容是显示有数字的按钮，点击按钮后按钮上面的数字可以增加1。那么该待渲染子内容对应的示例代码如下：
针对复杂一点的结构，例如循环结构。我们可以把整个循环结构视为一个待渲染子内容，撰写一个组件代码即可。
比如，一个具有不确定行数的数字列表，在不同的情况下，可能是三列，也可能是五列，还可能是其他数值的列。那么其组件示例代码可以如下：
404、服务端构建内容编译器，并基于内容编译器将待渲染子内容编译为字符串拼接函数。
比如，在步骤403中将网页的待渲染内容按预设规范拆分成了多个待渲染子内容，并撰写了与待渲染子内容对应的组件代码。基于预设规范构建内容编译器，然后使用该内容编译器对待渲染子内容对应的组件代码进行编译，编译后将会得到一个字符串拼接函数。
在步骤403的示例中，一个待渲染子内容是显示有数字的按钮，点击按钮后按钮上面的数字可以增加1。该按钮对应的组件代码，在经过内容编译器编译后，会生成如下的字符串拼接函数：
其中，framework.createTag()、framework.createTag()、framgwork.createText()、framework.createEndTag()、framework.createEndTag()都是生成字符串的函数，这多个函数拼接在一起便构成了字符串拼接函数。
比如在步骤403的示例中，一个具有不确定行数的数字列表。该待渲染子内容对应的组件代码，经过内容编译器编译后，会生成如下的字符串拼接函数：
framework.createLoop(list.map(i=>framework.createTag('i')+framework.createText(i)+framework.createEndTag(‘i’)));
405、服务端基于内容编译器编译出的字符串拼接函数，生成页面元素对应的目标字符串。
比如，步骤404的示例中的字符串拼接函数
/>
假设text的值是4，则该字符串拼接函数，经过执行后便会得到目标字符串<div><button>4</button></div>。
比如404的示例中的字符串拼接函数framework.createLoop(list.map(i=>framework.createTag('i')+ framework.createText(i)+framework.createEndTag(‘i’)));
假如循环次数是3，则该字符串拼接函数经过执行后，会得到目标字符串：
406、服务端将目标字符串发送至客户端。
服务端在基于内容编译器编译出的字符串拼接函数，生成页面元素对应的目标字符串之后，会响应于客户端的网页请求，把目标字符串发送到客户端，供客户端渲染使用。
比如，在步骤405的示例中，会将目标字符串<div><button>4</button></div>和
发送到客户端。
407、客户端接收来自服务端的目标字符串，并基于目标字符串显示目标网页。
客户端在接收到来自服务端的目标字符串之后，首先会把目标字符串转化为DOM结构，然后，浏览器自带的引擎，将会基于DOM结构渲染显示目标网页。
比如在406的示例中，客户端从服务端接收到的目标字符串<div><button>4</button></div>，经过渲染显示之后，会在目标网页上呈现出一个显示有数字4的按钮。
比如在406的示例中，客户端从服务端接收到的目标字符串
经过渲染显示之后，会在目标网页上呈现出分别显示有0、1、2的三行数据。
除了显示目标网页的内容之外，很多目标网页还需要响应用户的交互操作。比如点击网页的“加入购物车”按钮，把商品加入购物车，并在按钮上显示加入购物车的商品数量。所以，还需要与网页的可交互页面元素绑定事件。
本实施例中，处理交互事件的方式是，将执行目标网页可交互页面元素的交互事件的代码，分别放入一个独立的事件处理文件中。把事件处理文件存放在服务端，同时撰写一个事件处理文件地址和索引一一对应的事件处理文件目录。目标网页在第一次加载时，只将用于显示网页内容的目标字符串以及用于处理网页交互的事件处理文件目录发送到客户端。客户端在渲染显示目标字符串之前，会先将目标字符串转化为DOM结构，然后给可交互页面元素绑定上事件处理文件的索引。当用户与目标网页的可交互页面元素进行交互时，通过该页面元素绑定的事件处理文件索引，在事件处理文件目录中找到对应的事件处理文件在服务端的地址，然后基于该地址，客户端从服务端下载对应的事件处理文件。当客户端获取到对应的事件处理文件中的代码，便可以执行相应的操作，响应用户的网页交互。
比如目标网页上，一个显示有数字的按钮，当按钮被点击时，按钮上的数字便会增加1。那么在撰写代码时，会将响应按钮点击事件的代码放入一个独立的事件处理文件中，示例代码如下：
当按钮被用户点击后，首先会去寻找该可交互按钮所绑定的事件处理索引addVal，然后根据事件处理索引在事件处理目录中寻找该事件处理索引addVal对应的事件处理文件在服务端的地址。然后根据事件处理文件的地址，从服务端下载事件处理文件到客户端，然后客户端读取事件处理文件中的代码，执行该代码响应用户的交互操作。其基本流程如图7所述。
由上可知，本实施例可以在客户端向服务端发送网页请求；服务端接收来自客户端的网页请求，并基于网页请求确定待渲染内容；服务端将待渲染内容拆分为多个待渲染子内容，待渲染子内容与目标网页上的页面元素相对应；服务端构建内容编译器，并基于内容编译器将待渲染子内容编译为字符串拼接函数；服务端基于内容编译器编译出的字符串拼接函数，生成页面元素对应的目标字符串；服务端将目标字符串发送至客户端；客户端接收来自服务端的目标字符串，并基于目标字符串显示目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中，不使用虚拟DOM技术，而是把网页页面拆分为多个内容元素，通过内容编译器，把所述内容元素直接编译为字符串拼接函数，所述拼接函数执行后直接得到用于渲染网页的目标字符串，这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术，所以不需要客户端生成虚拟DOM与服务端的结构进行比较，减少了javascript脚本的体积大小。另外，本申请，在进行网页交互事件处理时，先将交互事件构建为一个个独立的事件处理文件，同时构建事件处理的目录文件，所述目录文件包含全部的所述事件处理文件的索引及所述事件处理文件在所述服务端的地址。在客户端进行网页请求时，只加载所述事件处理的目录文件，并确定可交互网页元素与事件处理文件的绑定关系，当用户与所述可交互网页元素交互时，再从所述服务端加载具体的事件处理文件。该方案大大减少了客户端首屏加载的javaScript脚本的文件大小。
为了更好地实施以上方法，本申请实施例还提供一种网页渲染装置，应用于服务端，如图8所示，该网页渲染装置可以包括第一接收单元801、拆分单元802、构建单元803、生成单元804以及第一发送单元805，如下：
（1）第一接收单元801
第一接收单元，用于接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；
（2）拆分单元802
拆分单元，用于将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；
（3）构建单元803
构建单元，用于构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；
（4）生成单元804
生成单元，用于基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；
（5）第一发送单元805
第一发送单元，用于将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
可选的，在本申请的一些实施例中，所述装置还可以包括接收子单元、确定子单元和第一发送子单元，如下：
所述接收子单元，用于接收来自客户端的交互请求；
所述确定子单元，用于确定实现所述交互请求的目标事件处理文件；
所述第一发送子单元，用于将所述目标事件处理文件发送给所述客户端，以便所述客户端加载所述目标事件处理文件，并基于所述目标事件处理文件在所述目标网页上执行目标操作
可选的，在本申请的一些实施例中，所述装置还可以包括第一构建子单元、第二构建子单元和绑定子单元，如下：
所述第一构建子单元，用于构建用于指示交互事件被触发时所执行操作的事件处理文件集合，所述事件处理文件集合中包括多个事件处理文件；
所述第二构建子单元，用于构建所述事件处理文件集合对应的事件处理目录，所述事件处理目录包括所述事件处理文件对应的文件索引、以及所述文件索引对应所述事件处理文件在所述服务端的地址；
所述绑定子单元，用于将所述文件索引与所述目标网页中多个可交互页面元素进行绑定，得到所述文件索引与所述可交互页面元素之间的绑定关系。
可选的，在本申请的一些实施例中，所述确定子单元，具体可以用于基于所述交互请求确定客户端交互操作所针对的目标页面元素；基于所述绑定关系，确定与所述目标页面元素相绑定的目标文件索引；基于所述事件处理目录，确定所述目标文件索引对应的目标事件处理文件在所述服务端的目标地址；基于所述目标地址，获取所述目标事件处理文件。
为了更好地实施以上方法，本申请实施例还提供一种网页渲染装置，应用于客户端，如图9所示，该网页渲染装置可以包括第二发送单元901、第二接收单元902以及显示单元903，如下：
（1）第二发送单元901
第二发送单元，用于向服务端发送网页请求；
（2）第二接收单元902
第二接收单元，用于接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；
（3）显示单元903
显示单元，用于基于所述目标字符串显示网页渲染后的目标网页。
可选的，在本申请的一些实施例中，所述显示单元包括转换子单元和显示子单元，如下；
所述转换子单元，用于将所述目标字符串转换为DOM元素；
所述显示子单元，用于基于所述DOM元素显示网页渲染后的目标网页。
可选的，在本申请的一些实施例中，所述装置还可以包括第二发送子单元、加载子单元和执行子单元，如下：
所述第二发送子单元，用于响应于用户针对所述目标网页中目标页面元素的交互操作，向所述服务端发送交互请求；
所述加载子单元，用于加载来自所述服务端的目标事件处理文件；
所述执行子单元，用于基于所述目标事件处理文件，在所述目标网页上执行目标操作。
由上可知，本实施例可以通过第一接收单元801接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；通过拆分单元802将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；通过构建单元803构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；通过生成单元804基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；通过第一发送单元805将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中，不使用虚拟DOM技术，而是把网页页面拆分为多个内容元素，通过内容编译器，把所述内容元素直接编译为字符串拼接函数，所述拼接函数执行后直接得到用于渲染网页的目标字符串，这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术，所以不需要客户端生成虚拟DOM与服务端的结构进行比较，减少了javascript脚本的体积大小。另外，本申请，在进行网页交互事件处理时，先将交互事件构建为一个个独立的事件处理文件，同时构建事件处理的目录文件，所述目录文件包含全部的所述事件处理文件的索引及所述事件处理文件在所述服务端的地址。在客户端进行网页请求时，只加载所述事件处理的目录文件，并确定可交互网页元素与事件处理文件的绑定关系，当用户与所述可交互网页元素交互时，再从所述服务端加载具体的事件处理文件。该方案大大减少了客户端首屏加载的javaScript脚本的文件大小。
本申请实施例还提供一种电子设备，如图10所示，其示出了本申请实施例所涉及的电子设备的结构示意图，该电子设备可以是终端或者服务器等，具体来讲：
该电子设备可以包括一个或者一个以上处理核心的处理器1001、一个或一个以上计算机可读存储介质的存储器1002、电源1003和输入单元1004等部件。本领域技术人员可以理解，图10中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：
处理器1001是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器1002内的软件程序和/或模块，以及调用存储在存储器1002内的数据，执行电子设备的各种功能和处理数据。可选的，处理器1001可包括一个或多个处理核心；优选的，处理器1001可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器1001中。
存储器1002可用于存储软件程序以及模块，处理器1001通过运行存储在存储器1002的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器1002可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器1002可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器1002还可以包括存储器控制器，以提供处理器1001对存储器1002的访问。
电子设备还包括给各个部件供电的电源1003，优选的，电源1003可以通过电源管理系统与处理器1001逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源1003还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
该电子设备还可包括输入单元1004，该输入单元1004可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。
尽管未示出，该电子设备还可以包括显示单元等，在此不再赘述。具体在本实施例中，电子设备中的处理器1001会按照如下的指令，将一个或一个以上的应用程序的进程对应的可执行文件加载到存储器1002中，并由处理器1001来运行存储在存储器1002中的应用程序，从而实现各种功能，如下：
接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
由上可知，本实施例可以接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。本申请可以在服务端渲染前端组件为html字符串的过程中，不使用虚拟DOM技术，而是把网页页面拆分为多个内容元素，通过内容编译器，把所述内容元素直接编译为字符串拼接函数，所述拼接函数执行后直接得到用于渲染网页的目标字符串，这种方案由于服务端没有使用虚拟DOM技术使得渲染性能大幅提升。同时这种方案由于服务端没有使用虚拟DOM技术，所以不需要客户端生成虚拟DOM与服务端的结构进行比较，减少了javascript脚本的体积大小。另外，本申请，在进行网页交互事件处理时，先将交互事件构建为一个个独立的事件处理文件，同时构建事件处理的目录文件，所述目录文件包含全部的所述事件处理文件的索引及所述事件处理文件在所述服务端的地址。在客户端进行网页请求时，只加载所述事件处理的目录文件，并确定可交互网页元素与事件处理文件的绑定关系，当用户与所述可交互网页元素交互时，再从所述服务端加载具体的事件处理文件。该方案大大减少了客户端首屏加载的javaScript脚本的文件大小。
本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。
为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条指令，该指令能够被处理器进行加载，以执行本申请实施例所提供的任一种网页渲染方法中的步骤。例如，该指令可以执行如下步骤：
接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
以上各个操作的具体实施可参见前面的实施例，在此不再赘述。
其中，该计算机可读存储介质可以包括：只读存储器（ROM，Read Only Memory）、随机存取记忆体（RAM，Random Access Memory）、磁盘或光盘等。
由于该计算机可读存储介质中所存储的指令，可以执行本申请实施例所提供的任一种网页渲染方法中的步骤，因此，可以实现本申请实施例所提供的任一种网页渲染方法所能实现的有益效果，详见前面的实施例，在此不再赘述。
根据本申请的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述网页渲染方面的各种可选实现方式中提供的方法。
以上对本申请实施例所提供的一种网页渲染方法以及相关设备进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (12)

1.一种网页渲染方法，其特征在于，应用于服务端，包括：
接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；
将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；
构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；
基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；
将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
2.根据权利要求1所述的网页渲染方法，其特征在于，将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页之后，还包括：
接收来自客户端的交互请求；
确定实现所述交互请求的目标事件处理文件；
将所述目标事件处理文件发送给所述客户端，以便所述客户端加载所述目标事件处理文件，并基于所述目标事件处理文件在所述目标网页上执行目标操作。
3.根据权利要求2所述的网页渲染方法，其特征在于，接收来自客户端的交互请求之前，还包括：
构建用于指示交互事件被触发时所执行操作的事件处理文件集合，所述事件处理文件集合中包括多个事件处理文件；
构建所述事件处理文件集合对应的事件处理目录，所述事件处理目录包括所述事件处理文件对应的文件索引、以及所述文件索引对应所述事件处理文件在所述服务端的地址；
将所述文件索引与所述目标网页中多个可交互页面元素进行绑定，得到所述文件索引与所述可交互页面元素之间的绑定关系。
4.根据权利要求3所述的网页渲染方法，其特征在于，确定实现所述交互请求的目标事件处理文件，包括：
基于所述交互请求确定客户端交互操作所针对的目标页面元素；
基于所述绑定关系，确定与所述目标页面元素相绑定的目标文件索引；
基于所述事件处理目录，确定所述目标文件索引对应的目标事件处理文件在所述服务端的目标地址；
基于所述目标地址，获取所述目标事件处理文件。
5.一种网页渲染方法，其特征在于，应用于客户端，包括：
向服务端发送网页请求；
接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；
基于所述目标字符串显示网页渲染后的目标网页。
6.根据权利要求5所述的网页渲染方法，其特征在于，基于所述目标字符串显示网页渲染后的目标网页，包括：
将所述目标字符串转换为DOM元素；
基于所述DOM元素显示网页渲染后的目标网页。
7.根据权利要求5所述的网页渲染方法，其特征在于，基于所述目标字符串显示网页渲染后的目标网页之后，还包括：
响应于用户针对所述目标网页中目标页面元素的交互操作，向所述服务端发送交互请求；
加载来自所述服务端的目标事件处理文件；
基于所述目标事件处理文件，在所述目标网页上执行目标操作。
8.一种网页渲染装置，其特征在于，应用于服务端，包括：
第一接收单元，用于接收来自客户端的网页请求，并基于所述网页请求确定待渲染内容；
拆分单元，用于将所述待渲染内容拆分为多个待渲染子内容，所述待渲染子内容与目标网页上的页面元素相对应；
构建单元，用于构建内容编译器，并基于所述内容编译器将所述待渲染子内容编译为字符串拼接函数；
生成单元，用于基于所述字符串拼接函数，生成所述页面元素对应的目标字符串；
第一发送单元，用于将所述目标字符串发送至客户端进行网页渲染，以便所述客户端基于所述目标字符串显示网页渲染后的目标网页。
9.一种网页渲染装置，其特征在于，应用于客户端，包括：
第二发送单元，用于向服务端发送网页请求；
第二接收单元，用于接收来自所述服务端的目标字符串，所述目标字符串是所述服务端通过执行内容编译器生成的字符串拼接函数得到的；
显示单元，用于基于所述目标字符串显示网页渲染后的目标网页。
10.一种电子设备，其特征在于，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行权利要求1至7任一项所述的网页渲染方法中的操作。
11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至7任一项所述的网页渲染方法中的步骤。
12.一种计算机程序产品，包括计算机程序或指令，其特征在于，该计算机程序或指令被处理器执行时实现权利要求1至7任一项所述的网页渲染方法中的步骤。
CN202311266290.XA 2023-09-28 2023-09-28 一种网页渲染方法、装置、终端和存储介质 Active CN116991506B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311266290.XA CN116991506B (zh) 2023-09-28 2023-09-28 一种网页渲染方法、装置、终端和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311266290.XA CN116991506B (zh) 2023-09-28 2023-09-28 一种网页渲染方法、装置、终端和存储介质

Publications (2)

Publication Number Publication Date
CN116991506A true CN116991506A (zh) 2023-11-03
CN116991506B CN116991506B (zh) 2024-04-30

Family

ID=88527002

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311266290.XA Active CN116991506B (zh) 2023-09-28 2023-09-28 一种网页渲染方法、装置、终端和存储介质

Country Status (1)

Country Link
CN (1) CN116991506B (zh)

Citations (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140181703A1 (en) * 2012-12-22 2014-06-26 Oracle International Corporation Dynamically generated user interface
US20170161032A1 (en) * 2015-12-02 2017-06-08 Alibaba Group Holding Limited Running applications using pre-generated components
CN107643889A (zh) * 2016-07-20 2018-01-30 平安科技（深圳）有限公司 基于模板引擎的页面渲染方法和装置
CN108334387A (zh) * 2017-01-20 2018-07-27 阿里巴巴集团控股有限公司 动态界面渲染方法及装置
CN109325195A (zh) * 2018-07-23 2019-02-12 招银云创（深圳）信息技术有限公司 浏览器的渲染方法和系统、计算机设备、计算机存储介质
CN109885360A (zh) * 2019-02-28 2019-06-14 北京小米移动软件有限公司 一种数据处理方法、装置及存储介质
CN110020307A (zh) * 2017-11-30 2019-07-16 阿里巴巴集团控股有限公司 一种客户端视图的绘制方法和装置
CN111104587A (zh) * 2018-10-26 2020-05-05 北京金山云网络技术有限公司 网页显示方法、装置和服务器
CN112115063A (zh) * 2020-09-29 2020-12-22 腾讯科技（深圳）有限公司 一种软件本地化测试方法、装置、终端及存储介质
CN112182452A (zh) * 2020-09-27 2021-01-05 中国平安财产保险股份有限公司 页面组件渲染处理方法、装置、设备及计算机可读介质
US20210373912A1 (en) * 2019-12-13 2021-12-02 Google Llc Systems and methods for adding digital content during an application opening operation
CN113760390A (zh) * 2021-04-19 2021-12-07 北京京东拓先科技有限公司 页面文件加载方法、装置、设备及存储介质
CN113778404A (zh) * 2021-01-29 2021-12-10 北京京东拓先科技有限公司 一种页面生成方法和装置
CN114153463A (zh) * 2022-02-09 2022-03-08 厚普智慧物联科技有限公司 基于脚本编译器的管理系统业务功能创建方法及系统
CN114371905A (zh) * 2022-01-14 2022-04-19 武汉源启科技股份有限公司 页面的渲染方法和装置
CN114764357A (zh) * 2021-01-13 2022-07-19 华为技术有限公司 界面显示过程中的插帧方法及终端设备
CN115168774A (zh) * 2022-07-28 2022-10-11 济南浪潮数据技术有限公司 网页渲染方法、系统、电子设备及计算机可读存储介质
CN115795212A (zh) * 2022-11-18 2023-03-14 北京奇艺世纪科技有限公司 一种页面显示方法、装置、电子设备及存储介质
US20230153372A1 (en) * 2021-11-12 2023-05-18 Siteimprove A/S Generating lossless static object models of dynamic webpages

Patent Citations (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140181703A1 (en) * 2012-12-22 2014-06-26 Oracle International Corporation Dynamically generated user interface
US20170161032A1 (en) * 2015-12-02 2017-06-08 Alibaba Group Holding Limited Running applications using pre-generated components
CN107643889A (zh) * 2016-07-20 2018-01-30 平安科技（深圳）有限公司 基于模板引擎的页面渲染方法和装置
CN108334387A (zh) * 2017-01-20 2018-07-27 阿里巴巴集团控股有限公司 动态界面渲染方法及装置
CN110020307A (zh) * 2017-11-30 2019-07-16 阿里巴巴集团控股有限公司 一种客户端视图的绘制方法和装置
CN109325195A (zh) * 2018-07-23 2019-02-12 招银云创（深圳）信息技术有限公司 浏览器的渲染方法和系统、计算机设备、计算机存储介质
CN111104587A (zh) * 2018-10-26 2020-05-05 北京金山云网络技术有限公司 网页显示方法、装置和服务器
CN109885360A (zh) * 2019-02-28 2019-06-14 北京小米移动软件有限公司 一种数据处理方法、装置及存储介质
US20210373912A1 (en) * 2019-12-13 2021-12-02 Google Llc Systems and methods for adding digital content during an application opening operation
CN112182452A (zh) * 2020-09-27 2021-01-05 中国平安财产保险股份有限公司 页面组件渲染处理方法、装置、设备及计算机可读介质
CN112115063A (zh) * 2020-09-29 2020-12-22 腾讯科技（深圳）有限公司 一种软件本地化测试方法、装置、终端及存储介质
CN114764357A (zh) * 2021-01-13 2022-07-19 华为技术有限公司 界面显示过程中的插帧方法及终端设备
CN113778404A (zh) * 2021-01-29 2021-12-10 北京京东拓先科技有限公司 一种页面生成方法和装置
CN113760390A (zh) * 2021-04-19 2021-12-07 北京京东拓先科技有限公司 页面文件加载方法、装置、设备及存储介质
US20230153372A1 (en) * 2021-11-12 2023-05-18 Siteimprove A/S Generating lossless static object models of dynamic webpages
CN114371905A (zh) * 2022-01-14 2022-04-19 武汉源启科技股份有限公司 页面的渲染方法和装置
CN114153463A (zh) * 2022-02-09 2022-03-08 厚普智慧物联科技有限公司 基于脚本编译器的管理系统业务功能创建方法及系统
CN115168774A (zh) * 2022-07-28 2022-10-11 济南浪潮数据技术有限公司 网页渲染方法、系统、电子设备及计算机可读存储介质
CN115795212A (zh) * 2022-11-18 2023-03-14 北京奇艺世纪科技有限公司 一种页面显示方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN116991506B (zh) 2024-04-30

Similar Documents

Publication Publication Date Title
US20200257437A1 (en) Methods and systems for web content generation
US9495429B2 (en) Automatic synthesis and presentation of OLAP cubes from semantically enriched data sources
US8700988B2 (en) Selectively interpreted portal page layout template
US8196039B2 (en) Relevant term extraction and classification for Wiki content
JP7366078B2 (ja) ページのテーマを決定するための方法、装置、電子機器、コンピュータ可読記憶媒体及びコンピュータプログラム
US8930824B2 (en) Facilitating propagation of user interface patterns or themes
US20090132904A1 (en) Method, Apparatus and Computer Program Product for Interactive Surveying
CN104714982A (zh) 一种网页的加载方法和系统
CN105354013A (zh) 应用界面渲染方法及装置
US20130132422A1 (en) System and method for creating and controlling an application operating on a plurality of computer platform types
CN112100550A (zh) 一种页面构建方法和装置
US20150161111A1 (en) Interpreted Language Translation System and Method
CN113326043B (zh) 网页渲染方法、网页制作方法及网页渲染系统
WO2022048141A1 (zh) 一种图像处理方法及装置、计算机可读存储介质
Jartarghar et al. React apps with Server-Side rendering: Next. js
CN113391808A (zh) 页面的配置方法、装置及电子设备
US20240095298A1 (en) Systems and methods for rendering interactive web pages
WO2020236138A1 (en) Conditional interpretation of a single style definition identifier on a resource
CN113792208A (zh) 基于网页的图片交互方法、装置、设备、介质及程序产品
CN116991506B (zh) 一种网页渲染方法、装置、终端和存储介质
Lonka Improving the initial rendering performance of react applications through contemporary rendering approaches
CN112947900A (zh) web应用开发方法、装置、服务器及开发终端
Paternò et al. Ambient intelligence for supporting task continuity across multiple devices and implementation languages
CN113934959B (zh) 一种程序预览方法、装置、计算机设备和存储介质
CN112632436A (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