CN110309451B - 一种web预加载页面的生成方法及装置 - Google Patents

Abstract

本申请公开了一种web预加载页面的生成方法及装置，根据该方法，服务器获取预先生成的web页面；所述web页面中包括N个元素，N大于0；所述服务器根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；所述服务器将所述预加载页面打包至所述web页面中。

Description

一种web预加载页面的生成方法及装置

技术领域

本申请涉及网络通信领域，具体涉及一种web预加载页面的生成方法及装置。

背景技术

网络性能中一项重要指标是页面响应速度，用户在加载页面时，如果长时间出现白屏，会导致用户认为网页性能不好，对用户体验造成了很大的影响。

目前，在解决出现白屏的现象中，一些浏览器可能会在加载完成前保留之前的页面，使得用户不用直接面对白屏，感觉是直接获得的刷新页面。但是，这种方案导致的问题是可能会造成用户认为页面点击无响应，也会造成不好的用户体验。

因此，针对上述问题，目前亟需一种web页面，在不需要提升硬件设备的前提，缩短白屏时间，提高用户对页面响应速度的体验。

发明内容

本申请实施例提供了一种web页面的生成方法及装置，用以解决现有技术中的web页面的生成方法中用户体验较差的问题。

本申请实施例提供一种web预加载页面的生成方法，包括：

服务器获取预先生成的web页面；所述web页面中包括N个元素，N大于0；

所述服务器根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；

所述服务器将所述预加载页面打包至所述web页面中。

一种可能的实现方式，所述服务器根据所述web页面，生成所述web页面的预加载页面，包括：

所述服务器获取所述web页面中的元素，并对所述web页面中的元素进行分类；

针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；

所述服务器将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除。

一种可能的实现方式，所述针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素，包括：

若确定所述web页面中的元素为图片类型的元素，则所述预加载页面中对应的所述图片类型的镜像元素的样式为透明，或者为所述镜像元素的背景颜色；

若确定所述web页面中的元素为文本类型的元素，则所述预加载页面中对应的所述文本类型的镜像元素的颜色为背景颜色；

若确定所述web页面中的元素为交互类型的元素，则所述预加载页面中对应的所述交互类型的镜像元素的颜色为背景颜色，且所述镜像元素中不包括所述web页面的所述交换类型的元素中的所述内部的文字元素。

一种可能的实现方式，所述服务器将所述修改后的web页面，作为所述预加载页面之前，还包括：

所述服务器将修改后的所述web页面发送至所述终端；

所述服务器若接收到所述终端返回的确认生成所述预加载页面的响应，则在所述服务器中生成所述预加载页面。

本申请实施例提供一种web预加载页面的显示方法，所述方法包括：

终端向服务器发送web页面的请求；

所述终端接收所述服务器生成的所述web页面的html文件；所述html文件包括所述web页面以及所述web页面的预加载页面；

所述终端根据所述web页面的html文件，将所述web页面的预加载页面预先渲染，将所述预加载页面显示在所述终端的显示界面；

所述终端将加载完毕的所述web页面显示在所述终端的显示界面。

本申请实施例提供一种web预加载页面的生成装置，包括：

获取模块，用于获取预先生成的web页面；所述web页面中包括N个元素，N大于0；

处理模块，用于根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；将所述预加载页面打包至所述web页面中。

一种可能的实现方式，所述处理模块，具体用于：

获取所述web页面中的元素，并对所述web页面中的元素进行分类；针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除。

一种可能的实现方式，所述处理模块，具体用于：

若确定所述web页面中的元素为图片类型的元素，则所述预加载页面中对应的所述图片类型的镜像元素的样式为透明，或者为所述镜像元素的背景颜色；若确定所述web页面中的元素为文本类型的元素，则所述预加载页面中对应的所述文本类型的镜像元素的颜色为背景颜色；若确定所述web页面中的元素为交互类型的元素，则所述预加载页面中对应的所述交互类型的镜像元素的颜色为背景颜色，且所述镜像元素中不包括所述web页面的所述交换类型的元素中的所述内部的文字元素。

一种可能的实现方式，所述处理模块，还用于：

将修改后的所述web页面发送至所述终端；若接收到所述终端返回的确认生成所述预加载页面的响应，则在所述服务器中生成所述预加载页面。

本申请实施例提供一种web预加载页面的显示装置，包括：

收发模块，用于向服务器发送web页面的请求；接收所述服务器生成的所述web页面的html文件；所述html文件包括所述web页面以及所述web页面的预加载页面；

处理模块，用于根据所述web页面的html文件，将所述web页面的预加载页面预先渲染，将所述预加载页面显示在所述终端的显示界面；将加载完毕的所述web页面显示在所述终端的显示界面。

根据本申请实施例的技术方案，服务器获取预先生成的web页面；所述web页面中包括N个元素；所述服务器根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；所述服务器将所述预加载页面打包至所述web页面中。能够提高web的准确率，从而能够解决现有技术中的用户直接面对白屏，无法感知页面加载过程，导致用户体验较差的问题。

附图说明

图1为本申请实施例提供的web空白页面的示意图；

图2为本申请实施例提供的web预加载页面的生成方法的工作流程图；

图3为本申请实施例提供的web预加载页面示意图；

图4为本申请实施例提供的web预加载页面的生成装置的结构示意图；

图5为本申请实施例提供的web预加载页面的生成装置的结构示意图。

具体实施方式

Web是一个极其多样化的平台。从静态的博客，到电商网站，再到桌面级的生成力软件，它们全都是Web这个大家庭的第一公民。随着互联网技术不断发展，越来越多人进行网上点餐、及时通信、附近搜索等社交生活。而提升网页加载速度，将网页快速、准确的呈现在用户面前成为主要的需求。首屏时间以及页面切换的速度是网页性能的重要指标，因此，减少页面渲染时间成了网页性能优化的关键点。

组织web应用的方式，也同样只会越来越多：多页、单页、Universal JavaScript应用、WebGL、以及Web Assembly等。对于构建一个体验较好的PWA，目前主流做法都是采用SPA，即单页面应用模型(Single-page App)来组织整个web应用，例如，Twitter Lite、Flipkart Lite、Housing Go与Polymer Shop。而多页面应用模型(MPA，Multi-page App)所能带来的很多好处，例如，页面与页面之间的隔离与解耦，这使得我们可以将每个页面当做一个独立的“微服务”来看待，这些服务可以被独立迭代，独立提供给各种第三方的入口嵌入，甚至被不同的团队独立维护。而整个网站则是各种服务的集合。

随着前端技术的发展，各种web框架应运而生。比如React、Vue和Angular等。

在多页应用中，每一个路由本来就只会请求这个路由所需要的资源。多页应用并不使用基于JavaScript的路由，而是HTML跳转机制，即路由的切换是原生的浏览器文档跳转(Navigating across documents)，这意味着之前的页面会被完全丢弃而浏览器需要为下一个路由的页面重新执行所有的启动步骤：重新下载资源、重新解析HTML、重新运行JavaScript、重新解码图片、重新布局页面、重新绘制等等，即使其中的很多步骤本是可以在多个路由之间复用的。这些工作将产生巨大的计算开销，也因此需要付出较多的时间成本。

在实际应用中，应用在页与页的切换时，其页面内容都是通过JS代码驱动，在JS代码未加载编译完成前，用户看到的页面将是一片空白。如图1所示，页面1为跳转前的页面，页面2位用户看到的空白页面，页面3位加载编译完成后的跳转后的页面。而存在的非常明显的白屏空隙可以控制在1秒左右，用户仍会认为这对于“仅仅切换个标签”来说过于缓慢，由于PWA是全屏运行的，因此，白屏对用户体验所带来的负面影响甚至比以往在浏览器内更大。

也就是说，只有当JS代码解析完成，并向后端获取到数据后，用户设备上才能最终得呈现完整、可用的页面。在首次渲染(First Paint)发生之前，大量的时间都消耗在了JavaScript的运行上，这导致几乎所有脚本都是阻塞的。这段时间内，主要是消耗在包括框架运行时、组件、库等依赖的运行上，以及业务组件实例化时框架的启动与渲染上。

为了消除白屏时间，本申请实施例提供了一种预加载页面，来实现瞬间的加载与占位。在用户使用时可以看到在实际内容加载出来之前会有一些占位图片，因为其结构和实际加载内容相似，因此让用户感知到自己的页面正在加载中，体验较好。即使是在硬件很弱的设备上，也可以在点击切换标签后立刻渲染出目标路由的预加载页面，以保证UI是稳定、连续、有响应的，使得用户感觉页面似乎加载更快了，避免用户看到白屏或者单纯重复的loading图片，降低用户体验。

为节省HTTP往返、浏览器解析文档、或脚本执行的时间，以实现加载页面时先加载出所述预加载页面，需要提前请求一些隐藏在应用依赖关系(Dependency Graph)较深处的资源。例如，对于一个基于路由进行代码分割的SPA，如果我们可以在webpack清单、路由等入口代码(entry chunks)被下载与运行之前就把初始URL，即用户访问的入口URL路由所依赖的代码推送或提前加载，则当这些资源被真正请求时，它们可能已经下载好并存在在缓存中了，这样就加快了初始路由的加载速度。

为了让所述预加载页面可以被Service Worker缓存，瞬间加载并独立于JavaScript渲染，我们需要把组成所述预加载页面的HTML标签、CSS样式与图片资源等一并***至各个路由对应的web页面的html文件中。

在现有技术中，预加载页面和业务开发的web页面的生成过程是耦合在一起的。设计师出设计稿，前端工程师根据交互设计稿实现可交互的WEB页面，同时利用业务项目中已有的架构和框架选型。根据设计稿中各元素的尺寸、位置开发所述预加载页面。将开发好的所述预加载页面通过webpack工具嵌入到html文件中指定位置，这样在启动页面后，将首先看到开发的预加载页面，等获取到后端数据后，渲染真实页面并替换预渲染的所述预加载页面。

在整个流程中，预加载页面需要前端工程师通过手动开发，往往需求变动或者页面样式进行调整，之前的预加载页面便不能够再使用了，必须再次开发新的预加载页面。现有的预加载页面开发极大依赖于人工开发，在一个快速迭代的项目中，页面样式及设计变化频繁，前端工程师在开发在开发原有项目的过程中，还需要再次开发所述预加载页面，因此增加了开发人力资源的开销。在一个快速迭代的项目中，预加载页面的开发极大的增加了项目的开发成本。另外，由于发布或者上线的压力，导致了所述预加载页面和web页面可能会出现不能一一对应的情况，即，WEB页面已经是新的设计和布局，而预渲染的所述预加载页面还是之前的样式和布局，预加载页面无法与更新后的WEB页面一一对应，用户体验较差。

本申请实施例提供一种web预加载页面的生成方法的流程示意图，如图1所示，所述方法包括：

步骤201：服务器获取预先生成的web页面；所述web页面中包括N个元素，N大于0；

步骤202：所述服务器根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；

步骤203：所述服务器将所述预加载页面打包至所述web页面中。

所述预加载页面和业务中的WEB页面本来有着相同的尺寸和页面布局，区别仅仅在文字和图片的呈现方式。因此所述预加载页面的开发完全可以通过自动化工具来完成，在业务开发的过程中，通过工具来自动生成WEB页面对应的所述预加载页面。这样将极大的缩减整个项目的开发时间，降低人力成本，提升开发效率。同时所述预加载页面和WEB页面样式代码往往有公用的部分，完全可以复用，避免重复开发。

在步骤201中，所述预先生成的web页面，可以为HTML5标准的包括HTML，CSS，JS等文件类型的网页，也可以为其他html标准生成的web页面，在此不做限定。

所述服务器可以为生成所述预加载页面的服务器，也可以为生成所述预加载页面的服务器端的程序，也可以为与其他服务器结合的服务器，在此不做限定。

在步骤202中，所述预加载页面文件可以为html格式的文件；或者与web项目，兼容的js和vue两种格式的文件，以适应其web页面对DOM/BOM的依赖。在具体实施过程中，所述预加载页面可以为所述WEB页面的大体轮廓，不包含具体的文字和图片，可以通过不同的灰色阴影来表示文字或者图片。

一种具体的实施过程中，可以包括以下步骤：

步骤一、通过在web页面中***客户端代码，将所述服务器与所述用户的客户端建立通信连接。

步骤二、打包模块启动所述web页面。

步骤三、用户通过所述客户端向所述服务器发送请求，请求生成所述预加载页面。

步骤四、所述服务器接收所述客户端的请求后，启动所述web页面的开发者模式，用于提取所述web页面中的元素。

在具体实施过程中，所述web页面的开发者模式可以通过puppeteer(一款开源操作Chrome headless的库)打开Chrome headless浏览器，通过Chrome headless打开所述WEB页面的开发者模式。

在步骤202中，一种可能的实现方式，所述服务器根据所述web页面，生成所述web页面的预加载页面，包括：

步骤一、所述服务器获取所述web页面中的元素，并对所述web页面中的元素进行分类；

步骤二、针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；

步骤三、所述服务器将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除。

在步骤一中，一种可能的实现方式，包括：遍历所有元素节点，将元素节点进行分类，分成文本节点、图片节点、按钮节点、SVG节点、列表节点、背景图片节点等。

在步骤二中，在所述分类的基础上，对每类元素分类进行样式更新，生成所述预加载页面所需样式。

一种可能的实现方式，通过CSS的样式更新方式，即尽量不增删原有web页面中的元素，不删除所述web页面的样式，而在已有样式上进行覆盖。结合图1，所述预加载页面可以为图3所示的页面302。

一种可能的实现方式，所述针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素，包括：

若确定所述web页面中的元素为图片类型的元素，则所述预加载页面中对应的所述图片类型的镜像元素的样式为透明，或者为所述镜像元素的背景颜色；

在生成所述预加载页面的过程中，img元素、背景为图片的元素，svg元素都可以作为图片元素。

一种可能的实现方式，可以将图片的src设置成一张0像素*0像素的透明图片，动态读取图片尺寸，并通过行内样式设置图片尺寸，设置图片背景为所述预加载页面所需的颜色。

所述图片元素的样式设置可以包括，颜色，形状，反向形状等字段。颜色和形状用于确定所述预加载页面中图片块的颜色和形状，颜色值支持16进制和RGB等，形状可以包括枚举值，circle(矩形)和rect(圆形)等。反向形状字段可以包括一个数组，数组中每个元素包括一个DOM选择器，用于选择DOM元素，被选择DOM的形状将和配置的形状相反，例如，配置的是rect那么，反向形状中的图片块将在所述预加载页面中显示成circle形状(圆形)。

若确定所述web页面中的元素为文本类型的元素，则所述预加载页面中对应的所述文本类型的镜像元素的颜色为背景颜色；

具体的，可以将文字颜色设置为背景颜色，根据line-height、font-size等CSS属性通过条纹背景设置文本节点的所述预加载页面样式。

一种可能的实施例中，如果一个元素只有一个文本节点，可以将所述文本解读作为子节点，所述元素可以视为文本元素。为了所述预加载页面更加美观，可以将所有的文本节点外都包裹一个元素节点，例如，包裹一个span标签。该配置对象可以配置一个颜色字段，用于决定所述预加载页面中文本元素的颜色，颜色值可以支持16进制、RGB等。

若确定所述web页面中的元素为交互类型的元素，则所述预加载页面中对应的所述交互类型的镜像元素的颜色为背景颜色，且所述镜像元素中不包括所述web页面的所述交换类型的元素中的所述内部的文字元素。

按钮元素、SVG元素、列表元素、按钮类型的输入元素等交互类型的元素，可以将这些元素做为交互元素，交互元素内部的文字可以不再单独显示为文字元素，交互元素的整个背景色可以为配置的颜色。

该配置可以包括两个字段，颜色和排除字段。颜色用来确定所述预加载页面中被视为交互元素的颜色，排除字段可以包括一个数组，数组中元素是DOM选择器，用来选择元素，该数组中的元素将不被视为交互元素。

所有带有伪元素的元素可以设置成透明，或者矩形、圆形色块，并且会忽略背景图片的css样式。该配置可以包括两个字段，颜色和形状。颜色用来确定所述预加载页面中被视为伪元素的颜色，形状用来设置伪元素的形状，可以包括枚举值：circle和rect等。

在步骤二中，进一步的，可以对所述预加载页面进行优化，包括但不限于html、css压缩混淆，将无用的样式表剔除等，以使所述预加载页面的适应性更高，可扩展性更强。

具体的，可以包括：

所述服务器可以压缩生成的shell.html文件，并且进行按需压缩；

若确定存在有不需要进行样式更新的元素，可以将该元素的通过CSS选择器排除；

若确定所述元素不需要移除，而仅需要隐藏，可以通过设置所述元素样式的透明度为0，来隐藏该元素，包括隐藏元素的CSS选择器；

若确定所述元素中的内部元素不需要删除，可以将所述元素设置为处理成一个色块，色块的颜色和所述元素的颜色一致。内部的文字等元素将不再做特殊处理，文字将隐藏；

若确定所述元素需要删除，且需要从DOM中移除，可以将所述元素中添加移除元素的CSS选择器。

在步骤三中，所述请求还可以包括请求生成所述预加载页面的的预览页面和操作页面。

一种可能的实现方式，所述服务器将所述修改后的web页面，作为所述预加载页面之前，还包括：

步骤一、所述服务器将修改后的所述web页面发送至所述终端；

步骤二、所述服务器若接收到所述终端返回的确认生成所述预加载页面的响应消息，则在所述服务器中生成所述预加载页面。

在步骤一中，所述服务器可以将生成好的所述预加载页面保存到内存中，并发送到所述终端上，所述用户可以查看生成的所述预加载页面。

在具体实施过程中，所述用户可以所述终端的开发页面中的交互界面中，进行所述预加载页面的预览，当所述服务器发送所述预加载页面后，可以通过浏览器打开预览页面，所述预览页面也可以通过移动终端进行预览，例如，通过扫描预览页面中的二维码，在手机端预览所述预加载页面。如图2所示。

进一步的，用户可以根据所述预览页面，可以通过编辑器对所述预加载页面进行适应性修改，用以更好的匹配所述web页面。

在步骤二中、若确定所述预览页面满足需求，则返回确认响应消息；所述服务器接收所述确认响应消息后，生成所述预加载页面。

具体的，所述用户确认所述预加载页面满足需求后，发送确认生成所述预加载页面的响应消息；所述服务器可以在所述预加载页面的制定目录下生成对应的文件。

在步骤203中，使用服务器在构建时渲染所述预加载页面，将所述预加载页面的DOM和样式***至最终输出的web页面中。

一种可能的实现方式，在启动的根元素内部添加对应的注释，这样在步骤203的打包的过程中，可以将所述预加载页面的内容***到正确位置，以实现预渲染，即在启动web页面时，首先看到所述预加载页面。

所述打包可以通过打包模块实现，所述打包模块可以为Webpack，一种JavaScript应用程序的模块打包器(module bundler)。当打包模块处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个包。所述打包模块还可以包括用于增强打包模块的功能的插件，比如压缩、混淆功能等。

打包模块在构建过程中进行编译、文件名哈希等工作，打包模块可以收集需要缓存的依赖到一个预缓存列表中，并使用所述预缓存列表在每次构建时生成新的脚本文件。在新的脚本被激活时，所述预缓存列表中的资源就会被请求与缓存。

在步骤203中，通过webpack重新打包应用，当页面重新启动后，就能够在获取到数据前看到应用的预加载页面。

一种可能的实现方式，可以通过webpack打包，将生成的所述预加载页面对应的文件打包到对应的web页面中，包括以下步骤：

步骤一、所述服务器通知所述打包模块将所述预加载页文件打包到输出的web页面的文件中。

步骤二、所述打包模块根据所述指令，从所述预加载页面对应的目录中寻找所述预加载页面的文件，读取硕士文件内容，并存入内存中。

步骤三、所述打包模块将所述预加载页面的文件文件内容***到所述web页面对应的文件中。

在具体实施过程中，若所述预加载页面为html文件，则可以通过webpack打包所述预加载页面，若所述预加载页面为js或vue格式的文件，则可以通过所述web页面对应的web项目中的预渲染模块打包所述预加载页面。

需要说明的是，HTML文件中有标签并不表明这些标签就能立刻被绘制到屏幕上，需要优化所述页面的关键渲染路径。一种可能的方式，是将script标签放在body的底部，以保证内容能在脚本执行之前被绘制，这种方法可以用于能渲染不完整DOM树的浏览器(例如桌面浏览器常见的流式渲染)。针对移动端的浏览器，尤其是较慢的硬件、电量消耗等因素，需要优化所述预加载页面的渲染路径。如果我们在浏览器还未完成上一次绘制工作之前就过快得进行了DOM操作，浏览器就只好抛弃所有已经完成的像素，且一直要等待到DOM操作引起的所有工作结束之后才能重新进行下一次渲染。而这种情况更容易在拥有较慢CPU/GPU的移动设备上出现。

如图3所示，本申请实施例提供一种web预加载页面的显示方法，所述方法包括：

步骤301：终端向服务器发送web页面的请求；

步骤302：所述终端接收所述服务器生成的所述web页面的html文件；所述html文件包括所述web页面以及所述web页面的预加载页面；

步骤303：所述终端根据所述web页面的html文件，将所述web页面的预加载页面预先渲染，将所述预加载页面显示在所述终端的显示界面；

步骤304：所述终端将加载完毕的所述web页面显示在所述终端的显示界面。

在具体实施过程中，在用户首次点击网站时，首先呈现的是预先准备好的所述预加载页面，然后加载、编译JS，向后端发送请求获取页面数据，然后通过渲染好的真实可交互页面去替换之前的所述预加载页面。

如图4所示，本申请实施例提供一种web预加载页面的生成装置，包括：

获取模块401，用于获取预先生成的web页面；所述web页面中包括N个元素，N大于0；

处理模块402，用于根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；将所述预加载页面打包至所述web页面中。

一种可能的实现方式，处理模块402，具体用于：

获取所述web页面中的元素，并对所述web页面中的元素进行分类；针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除。

一种可能的实现方式，处理模块402，具体用于：

若确定所述web页面中的元素为图片类型的元素，则所述预加载页面中对应的所述图片类型的镜像元素的样式为透明，或者为所述镜像元素的背景颜色；若确定所述web页面中的元素为文本类型的元素，则所述预加载页面中对应的所述文本类型的镜像元素的颜色为背景颜色；若确定所述web页面中的元素为交互类型的元素，则所述预加载页面中对应的所述交互类型的镜像元素的颜色为背景颜色，且所述镜像元素中不包括所述web页面的所述交换类型的元素中的所述内部的文字元素。

一种可能的实现方式，处理模块402，还用于：

将修改后的所述web页面发送至所述终端；若接收到所述终端返回的确认生成所述预加载页面的响应，则在所述服务器中生成所述预加载页面。

如图5所示，本申请实施例提供一种web预加载页面的显示装置，包括：

收发模块501，用于向服务器发送web页面的请求；接收所述服务器生成的所述web页面的html文件；所述html文件包括所述web页面以及所述web页面的预加载页面；

处理模块502，用于根据所述web页面的html文件，将所述web页面的预加载页面预先渲染，将所述预加载页面显示在所述终端的显示界面；将加载完毕的所述web页面显示在所述终端的显示界面。

综上所述，本申请实施例根据本申请实施例的技术方案，服务器获取预先生成的web页面；所述web页面中包括N个元素；所述服务器根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；所述服务器将所述预加载页面打包至所述web页面中。能够提高web的准确率，从而能够解决现有技术中的用户直接面对白屏，无法感知页面加载过程，导致用户体验较差的问题。

在开发的过程中自动生成页面的预加载页面，然后在加载JS代码之前完成所述预加载页面的渲染，提升了首屏渲染效率。

本领域普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

本领域内的技术人员应明白，本申请的实施例可提供为方法、***、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (8)

1.一种web预加载页面的生成方法，其特征在于，包括：

服务器获取预先生成的web页面；所述web页面中包括N个元素，N大于0；

所述服务器根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；

所述服务器将所述预加载页面打包至所述web页面中；

其中，所述服务器根据所述web页面，生成所述web页面的预加载页面，包括：

所述服务器获取所述web页面中的元素，并对所述web页面中的元素进行分类；

针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；

所述服务器将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除。

2.根据权利要求1所述的方法，其特征在于，所述针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素，包括：

若确定所述web页面中的元素为图片类型的元素，则所述预加载页面中对应的所述图片类型的镜像元素的样式为透明，或者为所述镜像元素的背景颜色；

若确定所述web页面中的元素为文本类型的元素，则所述预加载页面中对应的所述文本类型的镜像元素的颜色为背景颜色；

若确定所述web页面中的元素为交互类型的元素，则所述预加载页面中对应的所述交互类型的镜像元素的颜色为背景颜色，且所述镜像元素中不包括所述web页面的所述交换类型的元素中的内部的文字元素。

3.根据权利要求1或2所述的方法，其特征在于，所述服务器将所述修改后的web页面，作为所述预加载页面之前，还包括：

所述服务器将修改后的所述web页面发送至所述终端；

所述服务器若接收到所述终端返回的确认生成所述预加载页面的响应，则在所述服务器中生成所述预加载页面。

4.一种web预加载页面的显示方法，其特征在于，所述方法包括：

终端向服务器发送web页面的请求；

所述终端接收所述服务器生成的所述web页面的html文件；所述html文件包括所述web页面以及所述web页面的预加载页面；其中，所述web页面中包括N个元素，N大于0，所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；其中，所述服务器在生成所述web页面的html文件时，获取所述web页面中的元素，并对所述web页面中的元素进行分类；针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；所述服务器将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除；

所述终端根据所述web页面的html文件，将所述web页面的预加载页面预先渲染，将所述预加载页面显示在所述终端的显示界面；

所述终端将加载完毕的所述web页面显示在所述终端的显示界面。

5.一种web预加载页面的生成装置，其特征在于，包括：

获取模块，用于获取预先生成的web页面；所述web页面中包括N个元素，N大于0；

处理模块，用于根据所述web页面，生成所述web页面的预加载页面；所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；将所述预加载页面打包至所述web页面中；

其中，所述处理模块，具体用于：

获取所述web页面中的元素，并对所述web页面中的元素进行分类；针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面的中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除。

6.根据权利要求5所述的装置，其特征在于，所述处理模块，具体用于：

若确定所述web页面中的元素为图片类型的元素，则所述预加载页面中对应的所述图片类型的镜像元素的样式为透明，或者为所述镜像元素的背景颜色；若确定所述web页面中的元素为文本类型的元素，则所述预加载页面中对应的所述文本类型的镜像元素的颜色为背景颜色；若确定所述web页面中的元素为交互类型的元素，则所述预加载页面中对应的所述交互类型的镜像元素的颜色为背景颜色，且所述镜像元素中不包括所述web页面的所述交换类型的元素中的内部的文字元素。

7.根据权利要求5或6所述的装置，其特征在于，所述处理模块，还用于：

将修改后的所述web页面发送至所述终端；若接收到所述终端返回的确认生成所述预加载页面的响应，则在所述服务器中生成所述预加载页面。

8.一种web预加载页面的显示装置，其特征在于，包括：

收发模块，用于向服务器发送web页面的请求；接收所述服务器生成的所述web页面的html文件；所述html文件包括所述web页面以及所述web页面的预加载页面；其中，所述web页面中包括N个元素，N大于0，所述预加载页面包括M个元素，M大于0且小于或等于N；所述预加载页面中每个元素与所述web页面中的一个元素互为镜像元素，互为镜像元素的两个元素的位置和大小相同；其中，所述服务器在生成所述web页面的html文件时，获取所述web页面中的元素，并对所述web页面中的元素进行分类；针对每一类型的元素，所述服务器将该类型的元素的CSS样式修改为所述预加载页面中该类型的元素的样式，并将所述修改后的该类元素作为该类元素的镜像元素；所述服务器将所述修改后的web页面中，所述预加载页面中不显示的N-M个元素以及所述元素的CSS样式删除；

处理模块，用于根据所述web页面的html文件，将所述web页面的预加载页面预先渲染，将所述预加载页面显示在所述终端的显示界面；将加载完毕的所述web页面显示在所述终端的显示界面。

Images