一种页面生成方法、装置及系统的制作方法

一种页面生成方法、装置及系统的制作方法
【专利摘要】本申请提供了一种页面生成方法、装置及系统，方案包括：接收页面访问请求；根据所述页面访问请求，获取与页面访问请求相对应的页面的第一数据，所述第一数据为预先存储于本地的数据；在获取到第一数据后，根据第一数据对所述页面进行初次渲染；从服务器获取所述页面的第二数据；在获取到第二数据后，根据第二数据对所述页面进行二次渲染。本申请实施例中在获取到第一数据后即可根据第一数据进行页面渲染，不需要等待获取到所有数据后再生成页面呈现给用户，且由于第一数据为预先存储于本地的数据，从而可以快速的为用户提供根据第一数据渲染后的页面，解决了用户长时间等待的技术问题，提高了用户体验。
【专利说明】
一种页面生成方法、装置及系统
技术领域
[0001] 本申请涉及互联网技术领域，尤其涉及一种页面生成方法、装置及系统。
【背景技术】
[0002] 人们在浏览网页或应用程序（APP，Application)中的原生页（native page)时， 由于所要浏览的页面中的各种数据可能需要向不同的服务器获取，在获取到所有数据之后 才能生成页面。这种情况下，页面生成的耗时会比较长，从发出页面访问请求、获取各种数 据、进行页面渲染到最终页面完整呈现这一整个过程中，用户一直处于等待状态，而长时间 的等待可能会导致用户反感，甚至失去浏览兴趣。
[0003] 现有技术不足在于：
[0004] 在页面生成过程中，用户需要长时间的等待，导致用户体验不佳。

【发明内容】

[0005] 本申请实施例提出了一种页面生成方法、装置及系统，以解决现有技术中在页面 生成过程中用户需要长时间的等待导致用户体验不佳的技术问题。
[0006] 本申请实施例提供了一种页面生成方法，包括如下步骤：
[0007] 接收页面访问请求；
[0008] 根据所述页面访问请求，获取与所述页面访问请求相对应的页面的第一数据，所 述第一数据为预先存储于本地的数据；
[0009] 在获取到第一数据后，根据所述第一数据对所述页面进行初次渲染；
[0010] 从服务器获取所述页面的第二数据；
[0011] 在获取到所述第二数据后，根据所述第二数据对所述页面进行二次渲染。
[0012] 本申请实施例提供了一种页面生成装置，包括：
[0013] 接收模块，用于接收页面访问请求；
[0014] 获取模块，用于根据所述页面访问请求，获取与所述页面访问请求相对应的页面 的第一数据，所述第一数据为预先存储于本地的数据；
[0015] 渲染模块，用于在获取到第一数据后，根据所述第一数据对所述页面进行初次渲 染；
[0016] 所述获取模块进一步用于从服务器获取所述页面的第二数据；所述渲染模块进一 步用于在获取到所述第二数据后，根据所述第二数据对所述页面进行二次渲染。
[0017] 有益效果如下：
[0018] 本申请实施例所提供的页面生成方案，在接收到页面访问请求后，根据该页面访 问请求获取与该页面访问请求对应的页面的第一数据，并在获取到第一数据后根据第一数 据进行页面渲染，所述第一数据为预先存储于本地的数据。本申请实施例中在获取到第一 数据后即可为用户呈现根据第一数据渲染后所生成的页面，不需要等待获取到所有数据后 再生成页面呈现给用户。且第一数据为预先存储于本地的数据，因此，根据第一数据对页面 进行渲染所需要的时间较少，几乎可以忽略不计，从而可以更快速地为用户提供根据第一 数据渲染后所生成的页面，解决了用户长时间等待的技术问题，提高了用户体验。
【附图说明】
[0019] 下面将参照附图描述本申请的具体实施例，其中：
[0020] 图1示出了本申请实施例中页面生成方法实施的流程示意图；
[0021] 图2示出了本申请实施例中下单页面生成流程示意图；
[0022] 图3示出了本申请实施例中页面生成装置的结构示意图；
[0023] 图4示出了本申请实施例中页面生成系统内的交互示意图。
【具体实施方式】
[0024] 为了使本申请的技术方案及优点更加清楚明白，以下结合附图对本申请的示例性 实施例进行进一步详细的说明，显然，所描述的实施例仅是本申请的一部分实施例，而不是 所有实施例的穷举。并且在不冲突的情况下，本说明中的实施例及实施例中的特征可以互 相结合。
[0025] 针对现有技术的不足，本申请实施例提出了一种页面生成方法、装置及系统，下面 进行说明。
[0026] 图1示出了本申请实施例中页面生成方法实施的流程示意图，如图所示，页面生 成方法可以包括如下步骤：
[0027] 步骤101、接收页面访问请求；
[0028] 步骤102、根据该页面访问请求，获取与该页面访问请求相对应的页面的第一数 据，第一数据为预先存储于本地的数据；
[0029] 步骤103、在获取到第一数据后，根据第一数据对页面进行初次渲染；
[0030] 步骤104、从服务器获取所述页面的第二数据；
[0031 ] 步骤105、在获取到第二数据后，根据第二数据对所述页面进行二次渲染。
[0032] 其中，第一数据可以为在接收页面访问请求之前通过用户访问其他页面或者下载 /终端间传输等方式预先存储在本地的数据，如图片、文字等信息。第二数据可以是除预先 存储于本地的第一数据以外的其他数据。
[0033] 本申请实施例所提供的页面生成方法，在接收到页面访问请求后，根据该页面访 问请求获取与该页面访问请求对应的页面的第一数据，并在获取到第一数据后根据第一数 据进行页面渲染。所述第一数据为预先存储于本地的数据。本申请实施例中在获取到第一 数据后即可为用户呈现根据第一数据渲染后所生成的页面，不需要等待获取到所有数据后 再生成页面呈现给用户。且第一数据为预先存储于本地的数据，因此，根据第一数据对页面 进行渲染所需要的时间较少，几乎可以忽略不计，从而可以快速地为用户提供根据第一数 据渲染后的页面，解决了用户长时间等待的技术问题，提高了用户体验。在本申请实施例 中还进一步包括从服务器获取页面的第二数据，并在获取到第二数据后对页面进行二次渲 染，从而确保页面数据的完整性。
[0034] 实施中，所述页面可以为商品下单页面；
[0035] 所述获取与页面访问请求相对应的页面的第一数据，可以具体包括：
[0036] 从商品详情页面或购物车页面获取商品下单页面的第一数据；
[0037] 其中，第一数据可以为：商品标识、商品颜色、商品尺寸、购买数量、商品图片、商家 店铺信息等。
[0038] 随着网购热潮的不断增长，网上购物已成为人们日常生活的一部分。而在现有网 购过程中，用户通常是先在购物网站挑选自己喜欢的商品，在商品的详情页面查看商品的 具体内容，然后通过点击加入购物车再确认购买或者直接在商品详情页面点击购买等方式 进入到下单页面。在本申请实施例中，利用用户浏览的商品详情页面或者购物车页面已经 存在的商品信息，将这些信息透传到下单页面，从而实现对下单页面的预渲染。
[0039] 具体实施中，在用户发送当前页面访问请求之前，本地可能已经缓存了用户之前 访问过的其他页面的数据，如：在cookies中存储有图片信息等。本申请实施例中获取第 一数据可以是利用cookies方式，将本地cookies中的第一数据传输至当前页面，从而实现 根据该第一数据对页面进行植染的目的；还可以通过Session变量、Application变量等来 实现将一个页面（源页面）中的数据传输到另一个页面（当前页面）的目的，也可以利用 post方法、QueryString、Server. Transfer等方式来实现页面间传值。本领域技术人员可 以根据实际需要选择相应的页面间透传数据的具体方式，本申请对此不作限制。
[0040] 采用本申请实施例所提供的页面生成方法，可以快速的为用户提供下单页面，以 免用户一直等待而失去购物兴趣，给用户带来更好的购物体验。
[0041] 实施中，第二数据可以为商品库存信息。
[0042] 为了避免由于库存不足而导致下单失败，本申请实施例在获取下单页面的商品 标识、商品颜色、商品尺寸、购买数量、商品图片、商家店铺等信息之外，还需要获取商品库 存信息，并根据商品库存信息对下单页面进行二次渲染，比如，获取到的第二数据为库存不 足，那么可以在下单页面提示用户"该宝贝已不能购买"等类似信息。
[0043] 本申请实施例通过向服务器请求商品库存信息并根据获取到的商品库存信息对 页面进行二次渲染，避免出现库存不足却依然进行下单的情况，确保商品下单的有效性。 [0044] 实施中，获取与页面访问请求相对应的页面的第一数据和第二数据，可以具体包 括：
[0045] 采用异步线程分别获取与页面访问请求相对应的页面的第一数据和第二数据。
[0046] 其中，异步线程可以指一个进程启动的多个不相关的线程。在具体实施中，可以通 过线程池等方式来实现，本领域技术人员进行相应的开发即可，本申请对异步线程的具体 实现方式不作限制。
[0047] 现有技术中页面生成过程为同步等待方式，也即，接收到页面访问请求后向A服 务器获取A数据后，才能向B服务器获取B数据，最终在获取到所有数据后生成页面提供给 用户。
[0048] 而本申请实施例通过启动异步线程，可以在接收到页面访问请求后，由一个线程 获取与页面访问请求相对应的页面的第一数据，由另一个线程获取与页面访问请求相对应 的页面的第二数据，彼此之间不会有等待情况，各自完成不同的数据获取操作。由于本申请 实施例中采用异步线程分别获取第一数据和第二数据，不需要等待获取到第一数据之后再 获取第二数据，从而提高了第二数据的获取速度，进而可以快速地为用户生成经二次渲染 后的页面。
[0049] 具体实施中，在页面生成时可能还需要用户的一些基本信息，比如：用户手机号 码、账号ID等，而这些用户数据（或者称为第三数据）是客户端上通用的，属于全局数据， 通常存储于客户端的共享位置，因此不需要从其他页面透传得到。
[0050] 本申请实施例中可以进一步获取用户数据并根据用户数据对页面进行渲染。由于 这些用户数据也是存储于客户端上的数据，因此，可以与第一数据一起完成页面的首次渲 染；待获取到第二数据后再对页面进行二次渲染，从而使得页面数据更加完整。
[0051] 为了便于本申请的实施，下面以手机淘宝APP的下单页面作为实例进行说明。
[0052] 目前手机淘宝APP的下单业务流程中需要依赖优惠系统、库存系统等多个服务器 系统，当用户点击下单时，手机淘宝APP接收到用户访问下单页面的请求后，需要向各个服 务器依次获取下单页面所需要的各种数据或将请求提交到一个服务器上同时由这个服务 器依次获取各种参数，在获取到所有数据后才进行页面渲染，为用户呈现生成的下单页面。 在向服务器获取数据的过程中，由于网络链路传输时延的存在导致下单耗时较长，尤其在 弱网络情况下，下单页面的生成时间会更长。这种方式下，可能导致用户无限的等待，甚至 最终以超时结束。长时间的等待会导致用户反感、甚至失去购买兴趣。
[0053] 本申请实施例所提供的页面生成方法，当用户确定所要购买的商品后，从该商品 详情页或者购物车页面点击下单时，手机淘宝APP接收到用户发送的访问下单页面请求， 根据该请求从商品详情页或者购物车页面确定下单页所需的第一数据（比如商品的图片 信息、商家店铺信息、购买数量、优惠信息等），将这些信息透传给下单页面，根据这些信息 即可对下单页面进行原生渲染。
[0054] 这里之所以称其为原生渲染，是因为下单页面所需要的数据大部分可以从商品详 情页或者购物车页面获取得到，这些信息已基本可以满足渲染需求。但还有部分业务逻辑 是需要服务器参与的，比如库存信息等。本申请实施例中通过启动异步线程，由补偿线程向 远程的服务器请求第二数据（比如库存信息或交易校验信息等），在获取到服务器返回的 第二数据后，对下单页面进行补偿渲染。比如，获取到的第二数据为库存不足或校验不通 过，那么可以在下单页面提示用户"该宝贝已不能购买"等类似信息。
[0055] 图2示出了本申请实施例下单页面生成流程示意图，如图所示，下单页面生成流 程可以包括如下步骤：
[0056] 当用户点击下单按钮后，手机淘宝客户端接收到下单页访问请求，详情业务引擎 获取到业务元数据（也即第一数据），并将业务元数据透传给交易渲染引擎。其中，业务元 数据可以是根据不同业务场景确定的数据，比如，交易模块所需要的业务相关的参数等。 [0057] 详情业务引擎透传的业务元数据的数据结构可以为：
[0058] "hizMeta^: { ^basie-. I //下单页需要的基础数据 "itemi<T:''.!2345'' // 宝贝 id 'skultr:n 10] 20-, // 宝员具体 slrn信息 、uantity~T;, //购买数量 "picture^ 'L*% // 宝页图片 ?-(ψΙιφ^，.{ /7店铺相关的信息 ?ισρΙΜ":"料 //是否是tma〗〗卖家 } "exPamms": { "prom说kaild":"〗 2JM__56' // 优惠信息 "tgKey":"9876543"，//聚划算需要的信息 _"icorf ic.on2,kxm3:J,沒一些可能需要的大促 icon "ddiveryMeth<xT:，，2_-r //购买时候的运送方式
[0059] } }
[0060] 上述数据结构中定义了业务元数据包括基本数据和额外的数据，通常情况下，基 本数据（如上述代码所示可以包括宝贝id、宝贝具体SkU信息、购买数量、宝贝图片、店铺相 关信息等）属于所有商品均具备的数据，而额外的数据（如优惠信息、聚划算需要的信息、 其他促销信息、购买时候的运送方式等）只有在特定场景下的商品才会具备的数据，例如： 参加双11活动的商品会在具备基础数据之外，还具备双11促销信息这样的额外数据，而未 参加双11活动的商品则只具备基础数据，不会具备该额外数据。
[0061] 此外，在用户下单时还需要用户的一些数据，如用户手机号码、收货地址等，由于 这些用户元数据是客户端上通用的，通常存放于各个业务能共享的位置，不需要从由详情 业务引擎透传给交易渲染引擎。
[0062] 用户元数据的数据结构可以为：
[0063] ''iMserMetit': { "eookie'V-//存放用户不敏感的信息 "edlphone":"〗 2345678900' // 用户手机号码 iIeved々用户等级 Ui如鮮":[//用户收货地?止列表 { "province"，，' "dty":"'，， "area":"'' i-?
[0064]
[0065] 上述用户元数据的数据结构定义了用户元数据可能包括用户手机号码、用户等 级、用户收货地址列表（如X省X市X区等）以及其他的用户不敏感信息等，这些数据属于 本地的全局数据，交易渲染引擎可以直接通过共享得到该用户元数据。
[0066] 当详情业务引擎将业务元数据头传给交易渲染引擎时，交易渲染引擎开始基于 bizMeta数据以及全局的userMeta数据进行初步的原生植染，经原生植染后，基本的页面 框架已经基本上展现出来。
[0067] 交易渲染引擎还可以通知补偿引擎去服务器侧获取补偿数据（也即第二数据）， 如校验信息、库存信息等，以确保交易数据的完整性。假设补偿数据中有需要渲染的数据， 则将其发送给交易渲染引擎，将这份需要渲染的数据通过二次渲染补偿到下单页，从而得 到最终的完整的下单页面。
[0068] 在本申请实施例中，通过手机淘宝购物进入下单页面时，只需要在获取到商品详 情页或购物车页面的数据后即可对下单页面进行原生渲染，无需等待向服务器请求的库存 信息，且由于原生渲染完全是基于本地已经存在的数据的透传，网络开销为零，用户可以及 时的看到初步的下单页面，而不仅仅是等待图标，从而提升了用户体验。在用户点击提交订 单之前，补偿线程已基本完成第二数据请求和补偿渲染等操作，为用户呈现完整的下单页 面。
[0069] 采用本申请实施例所提供的页面生成方法，页面生成的速度更快，无需用户长时 间的等待，可以给普通消费者带来更好的购物体验。
[0070] 具体实施中，本申请实施例所提供的技术方案可以在弱网络、或者4G/WIFI等较 快网络下实施，且还可以进一步通过网络环境来判断是采用现有的直接渲染模式、还是采 用本申请实施例所提供的先原生渲染再补偿渲染的模式。
[0071] 基于同一发明构思，本申请实施例中还提供了一种页面生成装置，由于这些设备 解决问题的原理与一种页面生成方法相似，因此这些设备的实施可以参见方法的实施，重 复之处不再赘述。
[0072] 图3示出了本申请实施例中页面生成装置的结构示意图，如图所示，页面生成装 置可以包括：
[0073] 接收模块301，用于接收页面访问请求；
[0074] 获取模块302,用于根据页面访问请求，获取与页面访问请求相对应的页面的第一 数据，第一数据为预先存储于本地的数据；
[0075] 渲染模块303,用于在获取到第一数据后，根据第一数据对页面进行渲染。
[0076] 获取模块302进一步用于从服务器获取页面的第二数据；
[0077] 渲染模块303进一步用于在获取到第二数据后，根据第二数据对页面进行二次渲 染。
[0078] 实施中，获取模块302可以具体用于从商品详情页面或购物车页面获取商品下单 页面的第一数据；其中，第一数据为：商品标识、商品颜色、商品尺寸、购买数量、商品图片、 商家店铺信息等。
[0079] 实施中，获取模块302可以具体用于获取商品库存信息。
[0080] 实施中，获取模块302可以具体用于采用异步线程分别获取与所述页面访问请求 相对应的页面的第一数据和第二数据。
[0081] 基于同一发明构思，本申请实施例中还提供了一种页面生成系统，包括上述页面 生成装置以及服务器；其中，服务器用于向页面生成装置发送第二数据。
[0082] 图4示出了本申请实施例中页面生成系统内的交互示意图，如图所示，页面生成 装置先根据本地预先存储的第一数据对页面进行渲染，在获取到服务器返回的第二数据 后，再根据第二数据对页面进行二次渲染。
[0083] 本申请实施例所提供的页面生成方案，针对客户端页面生成速度较慢导致用户体 验不佳的问题，将页面渲染拆分成原生渲染和补偿渲染两个子流程，从而可以原生渲染后 的页面及时呈现给用户，在完整页面呈现之前用户看到的不再仅仅是等待图标，在不影响 用户正常页面访问的情况下，提升了用户体验。
[0084] 为了描述的方便，以上所述装置的各部分以功能分为各种模块或单元分别描述。 当然，在实施本申请时可以把各模块或单元的功能在同一个或多个软件或硬件中实现。 [0085] 本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序 产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实 施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机 可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产 品的形式。
[0086] 本申请是参照根据本申请实施例的方法、设备（系统）、和计算机程序产品的流程 图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一 流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算 机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理 器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生 用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能 的装置。
[0087] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特 定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指 令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或 多个方框中指定的功能。
[0088] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计 算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或 其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图 一个方框或多个方框中指定的功能的步骤。
[0089] 尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造 性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优 选实施例以及落入本申请范围的所有变更和修改。
【主权项】
1. 一种页面生成方法，其特征在于，包括如下步骤： 接收页面访问请求； 根据所述页面访问请求，获取与所述页面访问请求相对应的页面的第一数据，所述第 一数据为预先存储于本地的数据； 在获取到第一数据后，根据所述第一数据对所述页面进行初次渲染； 从服务器获取所述页面的第二数据； 在获取到所述第二数据后，根据所述第二数据对所述页面进行二次渲染。2. 如权利要求1所述的方法，其特征在于，所述页面为商品下单页面； 所述获取与页面访问请求相对应的页面的第一数据，具体包括： 从商品详情页面或购物车页面获取所述商品下单页面的第一数据； 其中，所述第一数据至少包括以下一种：商品标识、商品颜色、商品尺寸、购买数量、商 品图片、商家店铺信息。3. 如权利要求2所述的方法，其特征在于，第二数据为商品库存信息。4. 如权利要求1所述的方法，其特征在于，所述获取第一数据和第二数据，具体包括： 采用异步线程分别获取与所述页面访问请求相对应的页面的第一数据和第二数据。5. -种页面生成装置，其特征在于，包括： 接收模块，用于接收页面访问请求； 获取模块，用于根据所述页面访问请求，获取与所述页面访问请求相对应的页面的第 一数据，所述第一数据为预先存储于本地的数据； 渲染模块，用于在获取到第一数据后，根据所述第一数据对所述页面进行初次渲染； 所述获取模块进一步用于从服务器获取所述页面的第二数据；所述渲染模块进一步用 于在获取到所述第二数据后，根据所述第二数据对所述页面进行二次渲染。6. 如权利要求5所述的装置，其特征在于，所述获取模块具体用于从商品详情页面或 购物车页面获取商品下单页面的第一数据；其中，所述第一数据至少包括以下一种：商品 标识、商品颜色、商品尺寸、购买数量、商品图片、商家店铺信息。7. 如权利要求6所述的装置，其特征在于，所述获取模块具体用于获取商品库存信息。8. 如权利要求5所述的装置，其特征在于，所述获取模块具体用于采用异步线程分别 获取与所述页面访问请求相对应的页面的第一数据和第二数据。9. 一种页面生成系统，其特征在于，包括如权利要求5至8任一所述的页面生成装置以 及服务器；所述服务器用于向所述页面生成装置发送所述第二数据。
【文档编号】G06F17/30GK105843814SQ201510018604
【公开日】2016年8月10日
【申请日】2015年1月14日
【发明人】孙楠
【申请人】阿里巴巴集团控股有限公司