CN112417360A - 网页渲染方法和装置 - Google Patents

Abstract

本发明提供了一种网页渲染方法和装置，涉及计算机技术的技术领域，包括接收第一客户端的用户请求，用户请求包括任务ID；判断内存中是否存在任务ID对应的HTML页面内容，其中，HTML页面内容包括HTML架构数据和用于渲染页面样式的资源数据；若存在，则将HTML页面内容反馈至第一客户端，以由第一客户端根据HTML页面内容渲染出HTML网页；若不存在，则根据任务ID从数据库中查询HTML页面内容，并将HTML页面内容缓存到内存中，以及将HTML页面内容反馈至第一客户端，以由第一客户端根据HTML页面内容渲染出HTML网页，使得客户端可快速实现网页渲染，提高用户体验。

Description

网页渲染方法和装置

技术领域

本发明涉及计算机技术领域，尤其是涉及一种网页渲染方法和装置。

背景技术

随着计算机技术的发展，用户可在智能终端通过网页进行浏览、社交、购物、观看视频等。

当前，一般先通过客户端发送网页架构数据获取请求，服务端根据该请求发送网页架构数据，此时客户端页面数据成像空白状态，再通过客户端发送该网页对应资源数据获取请求，客户端才能基于服务端发送的资源数据进行页面数据的渲染加载。此种页面渲染方式，需要客户端发送两次请求，且资源加载时间较长，还会出现空白状态的页面呈现，使得用户的体验较差。

发明内容

本发明的目的在于提供一种网页渲染方法和装置，通过提前预先配置网页架构数据和资源数据，使得客户端可快速实现网页渲染，提高用户体验。

第一方面，本发明实施例提供了一种网页渲染方法，包括：

接收第一客户端的用户请求，所述用户请求包括任务ID；

判断内存中是否存在所述任务ID对应的HTML页面内容，其中，所述HTML页面内容包括HTML架构数据和用于渲染页面样式的样式数据和响应用户行为的脚本数据；

若存在，则将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；

若不存在，则根据所述任务ID从数据库中查询所述HTML页面内容，并将所述HTML页面内容缓存到所述内存中，以及将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，所述方法还包括：

接收第二客户端发送的第一模版ID、第一任务ID和第一HTML架构内容数据；

根据所述第一模版ID查找对应的第一模版文件，所述第一模版文件包括多个第一CDN静态资源地址；

将所述第一HTML架构内容数据渲染到第一模版文件中，生成第一HTML页面内容。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，所述方法还包括：

接收第一客户端发送的第二任务ID、第二模版ID和第二HTML架构内容数据；

根据所述第二任务ID、所述第二模版ID对当前模版文件夹下的文件名进行解析，得到第二模版文件，将第二HTML架构数据渲染到第二模版文件，得到第二HTML页面内容；

将第二HTML页面内容上传到OSS服务器，生成当前版本号；

将所述当前版本号、所述第二HTML页面内容、所述第二任务ID和所述第二模版ID存入所述数据库。

结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，其中，所述方法还包括：

查询所述当前模版ID对应的历史资源文件和历史版本号；

从所述数据库中查询所述当前模版ID对应的第二HTML页面内容和当前版本号；

判断所述历史版本号与所述当前版本号是否相同；

若不同，则将第二HTML页面内容和当前版本号替换所述历史资源文件和所述历史版本号，生成所述当前模版ID对应的当前模版文件，并存入所述数据库。

结合第一方面，本发明实施例提供了第一方面的第四种可能的实施方式，其中，将所述第一HTML架构内容数据渲染到第一模版文件中，生成第一HTML页面内容的步骤，包括：

解析所述第一模版文件的文件名，通过正则匹配方式遍历所述第一模版文件的文件名中的每个资源文件的对应标签，确定所述每个资源文件的资源类型和文件类型；

基于所述资源类型和所述文件类型，将所述第一HTML架构内容数据渲染到对应的所述第一模版文件中，并生成第一HTML页面内容。

结合第一方面，本发明实施例提供了第一方面的第五种可能的实施方式，其中，所述方法还包括：

若所述内存中缓存的所述HTML页面内容的数量超过缓存阈值，则根据所述HTML页面内容对应的访问次数，将所述访问次数小于访问次数阈值的HTML页面内容进行删除。

结合第一方面，本发明实施例提供了第一方面的第六种可能的实施方式，其中，所述方法还包括：

通过js原生数据格式生成所述HTML页面内容。

第二方面，本发明实施例还提供一种网页渲染装置，包括：

接收模块，接收第一客户端的用户请求，所述用户请求包括任务ID；

判断模块，判断内存中是否存在所述任务ID对应的HTML页面内容，其中，所述HTML页面内容包括HTML架构数据和用于渲染页面样式的资源数据；

若存在，则将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；

若不存在，则根据所述任务ID从数据库中查询所述HTML页面内容，并将所述HTML页面内容缓存到所述内存中，以及将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页。

第三方面，实施例提供一种电子设备，包括存储器、处理器，所述存储器中存储有可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述前述实施方式任一项所述的方法的步骤。

第四方面，实施例提供一种机器可读存储介质，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现前述实施方式任一项所述的方法的步骤。

本发明实施例提供了一种网页渲染方法和装置，根据第一客户端(客户C端)发送的用户请求中对应的任务ID，在内存中查找是否存在对应的HTML页面内容，若存在则直接将该HTML页面内容反馈到第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；若不存在，则从数据库中查找对应的HTML页面内容，缓存到内存中，同时，反馈到第一客户端，以使第一客户端进行网页渲染，得到HTML网页，通过提前在内存中预先配置包括架构数据和资源数据的HTML页面内容，使得第一客户端可快速实现网页渲染，提高用户体验。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点在说明书以及附图中所特别指出的结构来实现和获得。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种网页渲染方法流程图；

图2为本发明实施例提供的另一种网页渲染方法流程图；

图3为本发明实施例提供的一种网页渲染装置的功能模块图；

图4为本发明实施例提供的一种电子设备功能模块图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

现有的网页渲染方案1：非静态化，客户端C端一般需要先请求网页架构，再请求页面依赖的数据和资源，相当于是进行了两次请求，即除请求网页架构数据和资源，还通过异步接口请求方式拿到页面数据后，前端动态渲染依赖动态数据部分的网页架构内容。此种非静态化异步接口需要两次请求，响应较慢，依赖接口返回数据的网页页面会呈现空白状态，用户体验很差。

现有的网页渲染方案2：依赖nuxt框架，路由依赖vue-router框架。由于依赖vue框架，静态资源体积比较大，资源加载时间长，页面产生白屏的时间更长。

此外，客户端C端在访问对应页面的路由时，去执行asycData钩子函数，若获取页面数据信息的接口请求失败，此时页面渲染就会失败，网页渲染的可靠性较低。

基于此，本发明实施例提供的一种网页渲染方法和装置，可以通过node服务端提前预先配置网页架构数据和资源数据，使得客户端可快速实现网页渲染，提高用户体验。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种网页渲染方法进行详细介绍，此方法应用于服务端，该服务端包括write网页生成服务和static静态服务两部分，预先通过客户B端与服务端的write网页生成服务，write服务接收到B端保存任务的请求后，会请求获取任务详情的接口，获取B端用户保存的页面数据结构，根据该数据网页结构内容(包括用户编辑的菜单，banner，导航等等)，该资源网页与客户C端的应用领域相关，即客户C端若应用于社交，则该预先生成的资源网页为B端用户编辑好的页面内容；通过客户C端向服务端的static静态服务发送的请求，直接从服务端获取到相应的网页内容，反馈给客户C端，以便客户C端进行网页渲染。

其中，客户C端代表消费者个人用户Consumer应用端，客户B端代表企业商家Business运营端。

图1为本发明实施例提供的一种网页渲染方法流程图。

如图1所示，本发明实施例提供的网页渲染方法，应用于服务端，包括以下步骤：

步骤S102，接收第一客户端的用户请求，所述用户请求包括任务ID；

这里，根据该任务ID，能够知晓用户显示渲染的页面，对应何种HTML页面内容以及何种模版。

步骤S104，判断内存中是否存在所述任务ID对应的HTML页面内容，其中，所述HTML页面内容包括HTML架构数据和用于渲染页面样式的资源数据；

作为一种可选的实施例，把资源数据上传到内容分发网络(Content DeliveryNetwork，CDN)服务器中，并将该资源数据以地址形式集成于HTML架构数据中。

步骤S106，若存在，则将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；

步骤S108，若不存在，则根据所述任务ID从数据库中查询所述HTML页面内容，并将所述HTML页面内容缓存到所述内存中，以及将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页。

在实际应用的优选实施例中，根据第一客户端(客户C端)发送的用户请求中对应的任务ID，在内存中查找是否存在对应的HTML页面内容，若存在则直接将该HTML页面内容反馈到第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；若不存在，则从数据库中查找对应的HTML页面内容，缓存到内存中的同时，反馈到第一客户端，以使第一客户端进行网页渲染，得到HTML网页，通过提前在内存中预先配置包括架构数据和资源数据的HTML页面内容，使得第一客户端可快速实现网页渲染，提高用户体验。需要说明的是，本发明实施例为了将同种数据渲染出不同样式的网页，可采用node服务端直出渲染的方式，将服务拆分static服务和write服务。

其中，static服务，主要承接客户C端的用户请求，用户请求某个任务(对应某个模版)的页面时，访问请求地址：http://m-qun.umeng100.com/groupFission/task/1.html，接收服务端返回的HTML页面内容，此时呈现给用户的就是HTML网页。

write服务，主要用于预先生成HTML页面内容，并更新HTML页面内容，连接数据库，解析模版和任务的关系，更新任务数据表，将对应任务，对应模版的HTML页面内容存入数据库。示例地，运营人员在客户B端编辑页面数据的时候，通过点击保存等操作，请求write服务，将客户C端对应任务的HTML页面内容进行生成，相当于将请求后端HTML接口操作前置，即预先配置出HTML页面样式渲染资源(HTML页面内容)，这样大大提高了客户C端的用户访问HTML网页时的页面加载速度。

其中，第一客户端为客户C端，客户C端可包括用户手机等智能终端，第二客户端为客户B端为运营人员的手机、浏览器等。

作为一种可选的实施例，第一客户端可应用于多种实际业务场景，如在线教育场景、直播场景和在线听课场景等等。运营人员基于用户第一客户端的应用场景，通过第二客户端与write网页生成服务预先设置生成对应的页面内容。当用户通过相应业务APP进行在线教育、在线听课或直播娱乐时，需要打开相应场景中的某一个网页，通过第一客户端向服务端的static静态服务发送请求，能够直接从服务端获取到该应用场景对应的HTML网页内容，反馈给第一客户端，以便第一客户端能够快速实现该应用场景的相应网页的渲染。

为了便于更加清楚地知晓write服务部分，下面具体对HTML网页内容的预先配置情况进行说明。

在一些实施例中，本发明实施例提供的方法还包括以下步骤：

步骤1.1)，接收第二客户端发送的第一模版ID、第一任务ID和第一HTML架构内容数据。

在步骤1.1)之前，还包括步骤1.0)对服务端进行构建，具体包括：

首先，需要对write服务执行构建命令，最终构建出来的文件会放在项目根目录output文件夹，该文件夹下面包括所有模版文件夹，每个模版文件夹下包括该模版文件所依赖的静态资源(JS静态资源/CSS静态资源)。构建完成会将output文件夹上传到CDN服务器(output文件夹里的所有资源都将上传，每次上传完都会得到一个第一CDN静态资源地址，这里基于该第一CDN静态资源地址能够获得第一CDN静态资源、JS资源和第一CDN静态资源、CSS资源)。其中CDN静态资源都会有一个资源版本号，并区分获取JS资源还是CSS资源。HTML架构内容数据将资源版本号存入数据库；例如，遍历模版文件夹内的所有第一模版文件，得到第一模版ID，根据第一模版ID匹配第一模版文件夹，读取第一模版文件夹，可以在该文件夹下找到所有静态资源，JS静态资源匹配.js后缀的文件，CSS静态资源匹配.css后缀文件；在第一模版文件夹下找到第一模版文件，将模版依赖的所有第一CDN静态资源地址注入到第一模版文件中。

步骤1.2)，根据所述第一模版ID查找对应的第一模版文件，所述第一模版文件包括多个第一CDN静态资源地址。

其中，根据第一模版ID知晓运营人员旨在对哪个模版进行编辑配置，找到对应的模版文件，可以得到当前HTML架构依赖的静态资源，根据第一HTML架构内容数据知晓该预先配置的网页呈现的内容数据。

例如，客户B端发送的第一模版ID为5、第一架构内容数据包括menu：好友、banner：蓝色，则可知，通过对各个模版文件的文件名进行解析，查找到模版ID为5的第一模版文件，该第一模版文件中可能包括HTML架构menu栏、HTML架构banner栏等等资源文件的框架结构。

步骤1.3)，将所述第一HTML架构内容数据渲染到第一模版文件中，生成第一HTML页面内容。

这里，将menu：好友注入到对应的HTML架构menu栏中，将banner：蓝色注入到对应的HTML架构banner栏中，使得第一客户端根据所述第一CDN静态资源地址，可以从CDN服务器中获取对应的HTML架构的文件内容。

其中，还可以根据第一CDN静态资源地址，menu：好友、banner：蓝色，从CDN服务器中查找到对应的第一CDN静态资源对应的脚本文件，如添加、删除menu：好友或者切换菜单menu，就会触发执行脚本文件代码；加载该脚本文件中对应的样式资源文件，页面内容将会带有编辑时设置好的样式，比如banner：蓝色。

作为一种可选的实施例，上述步骤1.3)还可用以下步骤进行实现，包括：

步骤1.3.1)，解析所述第一模版文件的文件名，通过正则匹配方式遍历所述第一模版文件的文件名中的每个资源文件的对应标签，确定所述每个资源文件的资源类型和文件类型。

例如，文件名中包括link标签，即可知晓该资源文件的资源的文件类型为CSS文件。

步骤1.3.2)，基于所述资源类型和所述文件类型，将所述第一架构内容数据渲染到对应的所述第一模版文件中，并生成第一HTML页面内容。

这里，将第一HTML架构内容数据中获取到menu好友对应的数据字段、渲染到第一模版文件menu好友的第一模版架构中。

在一些实施例中，为了知晓当前的客户C端(第一客户端)中的网页资源是否为最新版本，本发明实施例中的方法还包括以下步骤：

步骤2.1)，接收第一客户端发送的第二任务ID、第二模版ID和第二HTML架构内容数据；

这里，接收客户C端发送的社交任务ID2对应的第二HTML页面内容；

步骤2.2)，根据所述第二任务ID、所述第二模版ID对所述当前模版文件夹下的文件进行解析，得到第二模版文件，将第二HTML架构数据渲染到第二模版文件，得到第二HTML页面内容；

其中，解析该当前模版文件夹下文件的文件名，得到该当前模板文件对应的当前版本号301，以及此模板文件对应的模版ID，如对应模版ID5。

步骤2.3)，将第二HTML页面内容上传到OSS服务器，生成当前版本号；

其中，将所述当前版本号上传到CDN服务器，更新所述第二HTML页面内容对应的脚本文件的版本号；

这里，将该当前版本号301上传到CDN服务器，并对该资源文件对应脚本文件的版本号进行更新。此时，该被更新的版本号存在两种情况，第一种此版本号为301，第二种此版本号为300。为了后续的更新验证，此处均更新为301。

步骤2.4)，将所述当前版本号、所述第二HTML页面内容、所述第二任务ID和所述第二模版ID存入所述数据库。

示例地，将当前版本号301、第二HTML页面内容和模版ID5存入数据库中。

在一些实施例中，上述实施例的版本号更新方法还包括：

步骤3.1)，查询所述当前模版ID对应的历史资源文件和历史版本号；

这里，从模版目录下查找模版ID5的模版文件对应的历史资源文件和历史版本号，历史版本号如300。

步骤3.2)，从所述数据库中查询所述当前模版ID对应的第二HTML页面内容和当前版本号；

此时的当前版本号为301。

步骤3.3)，判断所述历史版本号与所述当前版本号是否相同；

步骤3.4)，若不同，则将第二HTML页面内容和当前版本号替换所述历史资源文件和所述历史版本号，生成所述当前模版ID对应的当前模版文件，并存入所述数据库。

示例地，此时模版文件ID5对存储的资源文件非最新版，通过上述替换方式，实现更新。

本发明实施例客户C端的每个任务都对应一个HTML页面，每一个渲染完成的HTML页面内容对应有模版ID，将渲染完成的HTML页面内容存入数据库，并将页面静态资源版本号根据不同模版，区分js，CSS文件类型，获取服务构建时上传CDN生成的静态资源版本号，并将版本号存入数据库。更新HTML静态资源时，取出js，css版本号和HTML页面版本号对比，不一致则更新版本号。

上述步骤1.0)中write服务的构建启动的时候，将服务根目录的client目录下的js，css，img打包压缩并上传CDN，并将js，css生成的时候生成的hash版本号，存入数据库。若后期更改了对应模版的js，css脚本，这个版本号用于更新已经生成的HTML。

在一些实施例中，为了提高网页渲染的稳定性，所述方法还包括：

步骤4.1)，若所述内存中缓存的所述HTML页面内容的数量超过缓存阈值，则根据所述HTML页面内容对应的访问次数，将所述访问次数小于访问次数阈值的HTML页面内容进行删除。

本发明实施例采用较稳定的static服务，用于返回给用户HTML页面内容。static服务可部署在多台node服务器上，就算一台服务器故障还有其他几台能够正常工作，以正常收到用户请求，并将页面返回给客户C端。该服务通过缓存内存，用户访问task id为1的任务的HTML页面时，static服务可去数据库里面查询task id的记录，如果找到该记录，将task id为1的HTML缓存到map里。(并且检查缓存是否超过设置最大缓存量，如果超过限制，会去检索缓存里所有任务访问的次数，几乎没有访问的任务，从缓存中移除)，如果下次又有用户来访问task id为1的页面，直接从map缓存里取出task id为1的HTML页面返回给客户C端。缓存的作用减少了大量用户请求static服务获取HTML页面内容时，大量去查询数据库，会导致数据库连接大，造成数据库崩溃，缓存解决了流量大的时候，性能问题。

在一些实施例中，为了使得打包生成的文件体积较小，所述方法还包括：

步骤5.1)，通过js原生数据格式生成所述HTML页面内容。

本发明实施例无需引入任何第三方库，可采用原生js编写页面逻辑，最后打包出来的js，css体积非常小；采用gulp打包js，css脚本，gulp-rev生成版本号，采用ali-oss将脚本传到CDN,并利用gulp-rev-collector插件替换ejs模版js，css路径为对应模版js或css的CDN地址。

需要说明的是，本发明实施例采用node服务静态化页面直出渲染，不依赖特有框架，不限定node框架，不限定静态资源脚本框架，可以采用任何node框架(由于功能简单，甚至是采用原生nodejs都能实现)，例如express,eggjs,next等等，比较灵活，轻量级。但提倡用原生js脚本去编写，减少页面资源打包体积。

本发明与现有的nuxt框架的静态化网页服务端渲染(Server-side rendering ofstatic web pages，ssr)方案比较，差异在于：nuxt、ssr同构方案前端和后端公用一套路由，当用户访问http://m-qun-umeng100.com/view/h5GroupQRs5/index.HTML时,配置nginx代理，其实是访问的http://部署机器ip:port/view/h5GroupQRs5/index.HTML，其实页面访问依赖nuxt服务启动。并且访问到对应路由页面时，会执行钩子函数asyncData去请求后端接口拿页面渲染需要的基本数据，返回异步请求的菜单信息info.ajax，如果info.ajax接口故障，那么页面数据就会空白。

本发明实施例可无需引入vue-router，仍可以自由选择静态资源技术栈，如果选择原生脚本，那么打包出来的体积非常小。

本发明实施例，将服务端拆分为了两个服务，static服务只管接受用户请求，将HTML页面返回给用户，加强了static服务稳定性，以及减少服务出错可能性。write服务用于处理静态资源打包构建，模版渲染，处理任务，模版，HTML页面存数据库操作。并且两个服务都不依赖nginx机器，加强了服务稳定性。两个服务都比较清晰，技术栈可以随意替换，非常灵活。

作为一种可选的实施例，nuxt服务部署在3台ng机器a，b，c上，用户访问http://m-qun-umeng100.com/view/h5GroupQRs5/index.HTML,但此时部署机器的nuxt服务挂掉(故障)，那么页面就会出现404。通过本发明实施例，如果static服务故障，会分流到另一个部署了static的机器上，然而static服务逻辑非常简单，就是获取HTML(缓存中取，或者数据库中取)，不容易故障。

作为另一种可选的实施例，如果获取页面数据的接口info.ajax故障，nuxt服务应该会返回到错误页面，通过本发明实施例，info.ajax接口故障，修改数据库当前任务状态为失败。当用户客户C端访问该任务时，能够更快地跳转到失败页面。

本发明实施例通过将页面数据前置请求，即提前将页面渲染好，当用户访问的时候就能够确定当前页面生成的状态，如果失败，那么直接跳转到失败页面，或者选择备选方案，写一个mpa的替代页面，让用户无感知。如果页面失败也可以选择重试生成失败的页面，设置重试次数，比如3次，保证静态页面生成成功率。

图2为本发明实施例提供的另一种网页渲染方法流程图。

如图2所示，步骤S201，请求对应任务页1.HTML，即接收用户C端对HTML页面数据的请求；

步骤S202，将该请求中的任务ID，task ID发送到服务端的静态服务中；

步骤S203，查询缓存，即查询内存中是否缓存有该task ID对应的HTML页面数据；

步骤S204，若存在，则取出缓存的HTML页面内容，并返回给客户C端，以由客户端C根据所述HTML页面内容渲染出HTML网页；

步骤S205，若不存在，则根据task ID查询数据库，拿到HTML页面内容，并将所述HTML页面内容缓存到所述内存中，遍历map，如果缓存页面超过100个，去除访问不太频繁的页面。

步骤S210，后台点击入群通道编辑保存，请求生成通道页面接口，即客户B端用户对页面进行编辑；

步骤S211，启动构建，读取/server/views/template，即读取模版目录；

步骤S212，遍历该目录下所有ejs后缀模版文件；

步骤S213，模版名解析模版ID，即基于模版名解析模版ID；

步骤S214，根据模版ID映射到对应模版资源文件js/css；即经步骤S211-214，遍历模版目录，查找到与该解析模版ID对应的模版文件。

步骤S215，解析当前遍历到的ejs模版，正则匹配注入资源起始位置结束位置，即确定出资源注入的起始与终止位置；

步骤S216，注入对应模版CDN的js/cs文件地址，将包括js/cs文件的CDN地址注入；

步骤S217，输出编译后的ejs模版到bulid目录，将编译后文件存在指定位置；

步骤S218，读取server/views/bulid，即bulid目录，即从该指定位置中能够读取该编译后文件；

步骤S219，提取任务页1.HTML数据，并存入数据库，即提取出HTML页面内容，并保存。经步骤S215-S219将架构内容数据渲染到模版文件中，生成HTML页面内容。

步骤S230，鲁班尺后台点击更新任务1.HTML，即通过下述步骤，基于客户C端的网页版本，对HTML页面内容进行更新；

步骤S231，读取客户C端目录下的js/css；

步骤S232，Babel编译es6语法转化成es5，压缩、生成hash并上传CDN；

步骤S233，模版ID：js，hash、css，hash；即于同一模版ID对应的js/css后加上版本号；

步骤S234，于数据库存入模版ID，对应js/css打包后的hash。即根据客户C端编译后文件js/css，获取该文件名、模版ID、hash哈希值，将服务端对应模版ID对应的文件hash进行更新，并存入数据库。

步骤S240，于数据库中查询1.HTML，该任务对应的模版ID，查询到对应的js，hash、css，hash；

步骤S241，返回1.HTML的js，hash、css，hash；

步骤S242，解析出1.HTML里的js，hash是否和数据库返回的js，hash一致，不一致，则用数据库的js，hash进行替换；css，hash类同，不再赘述；

步骤S243，将更新后的1.HTML存入数据库。即判断网页对应的HTML页面对应的hash与数据库中存储的相应模版ID对应的hash是否一致，若不一致进行替换更新。通过此种方式以识别当前的客户C端网页是否已经更新，若更新，则数据库中存储相应文件内容也需要进行更新。

如图3所示，本发明实施例还提供一种网页渲染装置，包括：

接收模块，接收第一客户端的用户请求，所述用户请求包括任务ID；

判断模块，判断内存中是否存在所述任务ID对应的HTML页面内容，其中，所述HTML页面内容包括HTML架构数据和用于渲染页面样式的资源数据；

若存在，反馈模块则将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；

若不存在，查询模块则根据所述任务ID从数据库中查询所述HTML页面内容，将所述HTML页面内容反馈至所述第一客户端，并缓存到所述内存中并将所述HTML页面内容缓存到所述内存中，以及将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页。

在一些实施例中，所述装置还包括生成模块，用于接收第二客户端发送的第一模版ID、第一任务ID和第一HTML架构内容数据；

根据所述第一模版ID查找对应的第一模版文件，所述第一模版文件包括多个第一CDN静态资源地址；

将所述第一HTML架构内容数据渲染到第一模版文件中，生成第一HTML页面内容。

在一些实施例中，生成模块，还具体用于接收第一客户端发送的第二任务ID、第二模版ID和第二HTML架构内容数据；根据所述第二任务ID、所述第二模版ID对当前模版文件夹下的文件名进行解析，得到第二模版文件，将第二HTML架构数据渲染到第二模版文件，得到第二HTML页面内容；将第二HTML页面内容上传到OSS服务器，生成当前版本号；将所述当前版本号、所述第二HTML页面内容、所述第二任务ID和所述第二模版ID存入所述数据库。

在一些实施例中，生成模块，还具体用于查询所述当前模版ID对应的历史资源文件和历史版本号；从所述数据库中查询所述当前模版ID对应的第二HTML页面内容和当前版本号；判断所述历史版本号与所述当前版本号是否相同；若不同，则将第二HTML页面内容和当前版本号替换所述历史资源文件和所述历史版本号，生成所述当前模版ID对应的当前模版文件，并存入所述数据库。

在一些实施例中，生成模块，还具体用于解析所述第一模版文件的文件名，通过正则匹配方式遍历所述第一模版文件的文件名中的每个资源文件的对应标签，确定所述每个资源文件的资源类型和文件类型；基于所述资源类型和所述文件类型，将所述第一HTML架构内容数据渲染到对应的所述第一模版文件中，并生成第一HTML页面内容。

在一些实施例中，生成模块，还具体用于若所述内存中缓存的所述HTML页面内容的数量超过缓存阈值，则根据所述HTML页面内容对应的访问次数，将所述访问次数小于访问次数阈值的HTML页面内容进行删除。

在一些实施例中，生成模块，还具体用于通过js原生数据格式生成所述HTML页面内容。

本发明实施例提供的用于实现一种电子设备，本实施例中，所述电子设备可以是，但不限于，个人电脑(Personal Computer，PC)、笔记本电脑、监控设备、服务器等具备分析及处理能力的计算机设备。

作为一种示范性实施例，可参见图4，电子设备110，包括通信接口111、处理器112、存储器113以及总线114，处理器112、通信接口111和存储器113通过总线114连接；上述存储器113用于存储支持处理器112执行上述图像锐化方法的计算机程序，上述处理器112被配置为用于执行该存储器113中存储的程序。

本文中提到的机器可读存储介质可以是任何电子、磁性、光学或其它物理存储装置，可以包含或存储信息，如可执行指令、数据，等等。例如，机器可读存储介质可以是：RAM(Radom Access Memory，随机存取存储器)、易失存储器、非易失性存储器、闪存、存储驱动器(如硬盘驱动器)、任何类型的存储盘(如光盘、dvd等)，或者类似的存储介质，或者它们的组合。

非易失性介质可以是非易失性存储器、闪存、存储驱动器(如硬盘驱动器)、任何类型的存储盘(如光盘、dvd等)，或者类似的非易失性存储介质，或者它们的组合。

可以理解的是，本实施例中的各功能模块的具体操作方法可参照上述方法实施例中相应步骤的详细描述，在此不再重复赘述。

本发明实施例所提供计算机可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序代码被执行时可实现上述任一实施例所述的网页渲染方法，具体实现可参见方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本发明实施例的描述中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种网页渲染方法，其特征在于，包括：

接收第一客户端的用户请求，所述用户请求包括任务ID；

判断内存中是否存在所述任务ID对应的HTML页面内容，其中，所述HTML页面内容包括HTML架构数据和用于渲染页面样式的资源数据；

若存在，则将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；

若不存在，则根据所述任务ID从数据库中查询所述HTML页面内容，并将所述HTML页面内容缓存到所述内存中，以及将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页。

2.根据权利要求1所述的网页渲染方法，其特征在于，所述方法还包括：

接收第二客户端发送的第一模版ID、第一任务ID和第一HTML架构内容数据；

根据所述第一模版ID查找对应的第一模版文件，所述第一模版文件包括多个第一CDN静态资源地址；

将所述第一HTML架构内容数据渲染到第一模版文件中，生成第一HTML页面内容。

3.根据权利要求2所述的网页渲染方法，其特征在于，所述方法还包括：

接收所述第一客户端发送的第二任务ID、第二模版ID和第二HTML架构内容数据；

根据所述第二任务ID、所述第二模版ID对当前模版文件夹下的文件名进行解析，得到第二模版文件，将第二HTML架构数据渲染到第二模版文件，得到第二HTML页面内容；

将第二HTML页面内容上传到OSS服务器，生成当前版本号；

将所述当前版本号、所述第二HTML页面内容、所述第二任务ID和所述第二模版ID存入所述数据库。

4.根据权利要求3所述的网页渲染方法，其特征在于，所述方法还包括：

查询所述当前模版ID对应的历史资源文件和历史版本号；

从所述数据库中查询所述当前模版ID对应的第二HTML页面内容和当前版本号；

判断所述历史版本号与所述当前版本号是否相同；

若不同，则将第二HTML页面内容和当前版本号替换所述历史资源文件和所述历史版本号，生成所述当前模版ID对应的当前模版文件，并存入所述数据库。

5.根据权利要求2所述的网页渲染方法，其特征在于，将所述第一HTML架构内容数据渲染到第一模版文件中，生成第一HTML页面内容的步骤，包括：

解析所述第一模版文件的文件名，通过正则匹配方式遍历所述第一模版文件的文件名中的每个资源文件的对应标签，确定所述每个资源文件的资源类型和文件类型；

基于所述资源类型和所述文件类型，将所述第一HTML架构内容数据渲染到对应的所述第一模版文件中，并生成第一HTML页面内容。

6.根据权利要求2所述的网页渲染方法，其特征在于，所述方法还包括：

若所述内存中缓存的所述HTML页面内容的数量超过缓存阈值，则根据所述HTML页面内容对应的访问次数，将所述访问次数小于访问次数阈值的HTML页面内容进行删除。

7.根据权利要求6所述的网页渲染方法，其特征在于，所述方法还包括：

通过js原生数据格式生成所述HTML页面内容。

8.一种网页渲染装置，其特征在于，包括：

接收模块，接收第一客户端的用户请求，所述用户请求包括任务ID；

判断模块，判断内存中是否存在所述任务ID对应的HTML页面内容，其中，所述HTML页面内容包括HTML架构数据和用于渲染页面样式的资源数据和响应页面用户行为的脚本数据；若存在，则将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页；若不存在，则根据所述任务ID从数据库中查询所述HTML页面内容，并将所述HTML页面内容缓存到所述内存中，以及将所述HTML页面内容反馈至所述第一客户端，以由所述第一客户端根据所述HTML页面内容渲染出HTML网页。

9.一种电子设备，其特征在于，包括存储器、处理器及存储在所述存储器上并且能够在所述处理器上运行的程序，所述处理器执行所述程序时实现如权利要求1至7中任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序被执行时实现权利要求1-7中任意一项所述的方法。

Images