一种流式加载网页模板的方法及设备与流程

1.本申请涉及计算机领域，尤其涉及一种流式加载网页模板的方法及设备。


背景技术：

2.在大型项目开发中，由于项目文件随着业务需求发展越来越庞大，导致页面加载速度越来越慢，多个文件阻塞页面的渲染内容，用户体验差、等待时间长。而传统页面交互模型是按照一定顺序的，即，当服务器端获取数据并生成页面的时候，客户端被闲置，等待服务器端生成数据；当客户端接收到服务器端返回的页面并开始下载资源，解析页面的时候，服务器又在等待来自客户端的下一次请求。空闲时间造成资源的浪费。异步加载defer虽然能达到异步请求，但要等dom文档全部解析完才会被执行；async异步加载只能异步加载外部js；该两种方式的异步加载文件大小仍然会很大，请求时间也相对较长。


技术实现要素：

3.本申请的一个目的是提供一种流式加载网页模板的方法及设备，解决现有技术中异步加载方式的文件很大、请求时间也相对较长的问题。
4.根据本申请的一个方面，提供了一种流式加载网页模板的方法，该方法包括：
5.设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；
6.通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；
7.通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。
8.可选地，设定模板工具，包括：
9.配置node环境以及目标数据格式的打包文件，其中，所述目标数据格式的打包文件包括当前项目的描述文件。
10.可选地，所述目标数据格式的打包文件由在当前项目的根目录下使用包管理工具的文件生成命令生成的，其中，所述文件生成命令用于初始化生成一个新的目标数据格式的打包文件。
11.可选地，在所述目标数据格式的打包文件中安装npm的依赖项，其中，所述依赖项包括网页框架、node内置的文件系统模块以及动态路由获取参数。
12.可选地，所述方法包括：
13.基于当前项目的根目录下的npm安装指令查询项目依赖的第三方模块中的数据包，根据所述数据包生成依赖包文件。
14.可选地，所述方法包括：
15.根据所述依赖包文件、当前项目中执行在node环境下的主文件、用于浏览器访问的入口文件以及用于安装依赖配置的文件确定当前项目的目录结构。
16.可选地，所述目标数据格式的打包文件包括json打包文件，所述描述文件包括当前项目的名称、版本、作者、当前项目依赖的第三方模块以及所述第三方模块的依赖包管理的地址。
17.可选地，通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块，包括：
18.在所述浏览器分段接收到多个模块的同时向所述服务器发送分段加载请求，与所述服务器并发执行所述多个模块，并在浏览器上异步加载出所述服务器基于所述分段加载请求反馈的所述目标网页的多个模块。
19.根据本申请另一个方面，还提供了一种流式加载网页模板的设备，该设备包括：
20.分割装置，用于设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；
21.分段输出装置，用于通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；
22.加载装置，用于通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。
23.根据本申请又一个方面，还提供了一种流式加载网页模板的设备，所述设备包括：
24.一个或多个处理器；以及
25.存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述所述方法的操作。
26.根据本申请再一个方面，还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如前述所述的方法。
27.与现有技术相比，本申请通过设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。从而自动生成分段传输的页面，使得页面传输以二进制流的模式传输、模块分步加载，减小页面体积，加载速度更快。
附图说明
28.通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：
29.图1示出根据本申请的一个方面提供的一种流式加载网页模板的方法流程示意图；
30.图2示出本申请一实施例中分段请求显示结果示意图；
31.图3示出根据本申请另一个方面提供的一种流式加载网页模板的设备的结构示意图。
32.附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
33.下面结合附图对本申请作进一步详细描述。
34.在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(例如中央处理器(central processing unit，cpu))、输入/输出接口、网络接口和内存。
35.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(random access memory，ram)和/或非易失性内存等形式，如只读存储器(read only memory，rom)或闪存(flash ram)。内存是计算机可读介质的示例。
36.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(phase
‑
change ram，pram)、静态随机存取存储器(static random access memory，sram)、动态随机存取存储器(dynamic random access memory，dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(electrically erasable programmable read
‑
only memory，eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(compact disc read
‑
only memory，cd
‑
rom)、数字多功能光盘(digital versatile disk，dvd)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
37.图1示出根据本申请的一个方面提供的一种流式加载网页模板的方法流程示意图，该方法包括：步骤s11～步骤s13，其中，步骤s11，设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；步骤s12，通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；步骤s13，通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。从而自动生成分段传输的页面，使得页面传输以二进制流的模式传输、模块分步加载，减小页面体积，实现页面的异步加载，提高页面的访问速度。
38.具体地，在步骤s11中，设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；在此，为当前项目设定模板工具，该模板工具可以自定义输出内容，不需要借助其他的框架和库，通过该模块工具将当前项目的目标网页进行分割成多个小块，可以按照页面功能将页面分成多个模块，比如有头部导航模块、轮播图广告位模块、商品评论模块、商品信息模块等，并将分割得到的多个模块进行唯一标识。
39.具体地，在步骤s12中，通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；在此，通过web服务器和浏览器之间建立管道，进行分段输出，建立浏览器与服务器之间的信息传输，比如http请求需要通过服务器向浏览器客户端发送数据传输，从而将具有唯一标识的多个模块分段输出至浏览器，减少了请求数。
40.具体地，在步骤s13中，通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。在此，将多个模块分段输出至浏览器，前后端进行并行处理，实现浏览器和服务器的并发执行，对目标网页进行异步加载，按照页
面位置从上到下进行布局渲染加载，该页面位置是相对于浏览器视窗的，从用户看到的信息展示顺序，优先加载保证用户第一时间看到的重要信息，随后再加载比如评论等扩展信息，保证页面加载的流畅。通过分段控制输出使得html(超文本标记语言)文件变小，通过读取流文件的方式，能够快速直接渲染页面。
41.在本申请一实施例中，在步骤s11中，配置node环境以及目标数据格式的打包文件，其中，所述目标数据格式的打包文件包括当前项目的描述文件。在此，当前项目启动时，采用node服务，在本地配置node环境并在当前项目中配置目标数据格式的打包文件，该打包文件包括当前项目的描述文件；可选地，所述目标数据格式的打包文件包括json打包文件，所述描述文件包括当前项目的名称、版本、作者、当前项目依赖的第三方模块以及所述第三方模块的依赖包管理的地址。比如配置package.json文件，该package.json文件包含项目的描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
42.在本申请一实施例中，所述目标数据格式的打包文件由在当前项目的根目录下使用包管理工具的文件生成命令生成的，其中，所述文件生成命令用于初始化生成一个新的目标数据格式的打包文件。在此，目标数据格式的文件，比如package.json文件在当前项目的项目根目录下使用包管理工具的文件生成命令(npm init)生成的；在本申请实施例中，服务端采用node.js，页面直接由node.js来渲染，其中，node.js为一种javascript(解释型编程语言)的运行环境，能够使得javascript脱离浏览器运行。
43.继续接上述实施例，在所述目标数据格式的打包文件中安装npm的依赖项，其中，所述依赖项包括网页框架、node内置的文件系统模块以及动态路由获取参数。在此，在进行开发项目时，使用npm包，在项目路径下执行命令npm init就会生成package.json文件，其中，npm是node.js官方提供的包管理工具，用于node.js包的发布、传播、依赖控制，npm提供了命令工具，可以方便地下载、安装、升级、删除包，npm不需要单独安装，在安装node时一起安装，npm init用来初始化生成一个新的package.json文件。在package.json文件中安装了@koa/router、fs、koa三个依赖项，通过npm install koa安装，其中，koa为一种简单好用的web框架，提供了简介自由度高的方法；fs是node内置的模块，为文件系统模块，负责读写文件；@koa/router为动态路由获取参数。
44.在本申请一实施例中，所述方法包括：基于当前项目的根目录下的npm安装指令查询项目依赖的第三方模块中的数据包，根据所述数据包生成依赖包文件。在此，在当前项目的项目根目录下输入命令：npm install、系统会查看项目依赖的第三方模块(dependencies)里面的内容，自动把包下载完，生成依赖包(node_modules)文件，node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。
45.在本申请一实施例中，所述方法包括：根据所述依赖包文件、当前项目中执行在node环境下的主文件、用于浏览器访问的入口文件以及用于安装依赖配置的文件确定当前项目的目录结构。在此，根据当前项目用于浏览器访问的入口文件、主文件、依赖包文件以及用于安装依赖配置的文件生成目录结构，项目目录结构如下：
46.|——app.js
47.|——index.html
48.|——node_modules
49.|——package.json
50.其中，app.js为在项目中执行在node环境下的主文件，用于入口文件数据渲染生成，index.html是模板项目的入口文件，用于浏览器访问的入口，从index.html文件进入访问项目的根路径加载，node_modules是安装的依赖包文件夹，package.json是项目初始化npm init生成的用于安装依赖配置的文件。
51.在本申请一实施例中，在步骤s13中，在所述浏览器分段接收到多个模块的同时向所述服务器发送分段加载请求，与所述服务器并发执行所述多个模块，并在浏览器上异步加载出所述服务器基于所述分段加载请求反馈的所述目标网页的多个模块。在此，浏览器和服务器进行并发执行时，是浏览器接收到的分段模块的同时就向服务器发送该分段模块的加载请求，浏览器继续接收其他分段模块，服务器并发执行加载接收到的加载请求对应的分段模块，从而反馈给浏览器，在浏览器上异步加载出反馈的目标网页的多个模块，进行分段输出。如图2所示的，分段请求显示结果。
52.此外，本申请实施例还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现前述一种流式加载网页模板的方法。
53.与上文所述的方法相对应的，本申请还提供一种终端，其包括能够执行上述图1或图2或各个实施例所述的方法步骤的模块或单元，这些模块或单元可以通过硬件、软件或软硬结合的方式来实现，本申请并不限定。例如，在本申请一实施例中，还提供了一种流式加载网页模板的设备，所述设备包括：
54.一个或多个处理器；以及
55.存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述所述方法的操作。
56.例如，计算机可读指令在被执行时使所述一个或多个处理器：
57.设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；
58.通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；
59.通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。
60.图3示出根据本申请另一个方面提供的一种流式加载网页模板的设备的结构示意图，该设备包括：分割装置11、分段输出装置12及加载装置13，其中，分割装置11用于设定模板工具，通过所述模板工具将当前项目的目标网页分割成多个模块，并对多个模块进行唯一标识；分段输出装置12用于通过服务器与所述浏览器之间建立的管道，将进行唯一标识的多个模块分段输出至浏览器；加载装置13用于通过所述服务器与所述浏览器并发执行所述多个模块，在所述浏览器上异步加载出所述目标网页的多个模块。
61.需要说明的是，分割装置11、分段输出装置12及加载装置13执行的内容分别与上述步骤s11、s12和s13中的内容相同或相应相同，为简明起见，在此不再赘述。
62.显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。
63.需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(asic)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，ram存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。
64.另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。
65.对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。