CN110442811A - 一种页面的处理方法、装置、计算机设备和存储介质 - Google Patents

一种页面的处理方法、装置、计算机设备和存储介质 Download PDF

Info

Publication number
CN110442811A
CN110442811A CN201910750332.4A CN201910750332A CN110442811A CN 110442811 A CN110442811 A CN 110442811A CN 201910750332 A CN201910750332 A CN 201910750332A CN 110442811 A CN110442811 A CN 110442811A
Authority
CN
China
Prior art keywords
page
resource
document
target pages
screen
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.)
Pending
Application number
CN201910750332.4A
Other languages
English (en)
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.)
Guangzhou Huya Technology Co Ltd
Original Assignee
Guangzhou Huya Technology 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 Guangzhou Huya Technology Co Ltd filed Critical Guangzhou Huya Technology Co Ltd
Priority to CN201910750332.4A priority Critical patent/CN110442811A/zh
Publication of CN110442811A publication Critical patent/CN110442811A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

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

Abstract

本发明实施例公开了一种页面的处理方法、装置、计算机设备和存储介质。该方法包括:接收客户端发送的、加载一页面的请求;响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。在服务端中拉取并渲染页面首屏的动态资源,可提高页面首屏的渲染速度、减少页面首屏的渲染时间,从而提高在客户端显示页面首屏的速度,由于首屏为用户所见,可给用户带来页面显示快的效果。

Description

一种页面的处理方法、装置、计算机设备和存储介质
技术领域
本发明实施例涉及页面的技术,尤其涉及一种页面的处理方法、装置、计算机设备和存储介质。
背景技术
随着WEB、H5等页面技术的发展,基于页面的应用越来越多,应用的功能也日趋增多。
目前,客户端向服务器请求页面之后,接收服务器返回的HMTL(HyperText MarkupLanguage,超文本标记语言)文档,该HMTL文档为页面的框架,没有内容,需要调用接口拉取数据,再将拉取的数据填充到HMTL文档中。
在拉取数据期间,页面只有框架而没有具体的内容,呈现刷新状态,而拉取数据的时间较长,导致用户等待页面的时间较长。
发明内容
本发明实施例提供一种页面的处理方法、装置、计算机设备和存储介质,以解决拉取页面中的数据的时间较长,导致用户等待页面的时间较长的问题。
第一方面,本发明实施例提供了一种页面的处理方法,包括:
接收客户端发送的、加载一页面的请求;
响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染有位于所述页面首屏区域中的动态资源;
将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
第二方面,本发明实施例还提供了一种页面的处理方法,包括:
接收显示页面的操作;
响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;
从资源服务器获取属于所述页面的、已编译的静态资源;
将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
第三方面,本发明实施例还提供了一种页面的处理方法,包括:
获取属于页面的源文件;
将所述源文件编译为目标文件,所述目标文件包括原始页面文档、首屏脚本、非首屏脚本与静态资源,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源、所述非首屏脚本用于获取位于所述页面非首屏区域中的动态资源;
将所述原始页面文档与所述首屏脚本分发至页面服务器;
将所述非首屏脚本与所述静态资源分发至资源服务器。
第四方面,本发明实施例还提供了一种页面的处理装置,包括:
请求接收模块,用于接收客户端发送的、加载一页面的请求;
目标页面文档确定模块,用于响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染有位于所述页面首屏区域中的动态资源;
目标页面文档发模块,用于将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
第五方面,本发明实施例还提供了一种页面的处理装置,包括:
操作接收模块,用于接收显示页面的操作;
目标页面文档请求模块,用于响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;
静态资源获取模块,用于从资源服务器获取属于所述页面的、已编译的静态资源;
静态资源渲染模块,用于将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
第六方面,本发明实施例还提供了一种页面的处理装置,包括:
源文件获取模块,用于获取属于页面的源文件;
文件编译模块,用于将所述源文件编译为目标文件,所述目标文件包括原始页面文档、首屏脚本、非首屏脚本与静态资源,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源、所述非首屏脚本用于获取位于所述页面非首屏区域中的动态资源;
第一资源分发模块,用于将所述原始页面文档与所述首屏脚本分发至页面服务器;
第二资源分发模块,用于将所述非首屏脚本与所述静态资源分发至资源服务器。
第七方面,本发明实施例还提供了一种计算机设备,所述计算机设备包括:
一个或多个处理器;
存储器,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如第一方面、第二方面、第三方面中任一所述的页面的处理方法。
第八方面,本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如第一方面、第二方面、第三方面中任一所述的页面的处理方法。
在本实施例中,接收客户端发送的、加载一页面的请求,响应于该请求,确定属于页面的、已编译的目标页面文档,目标页面文档已渲染位于页面首屏区域中的动态资源,将目标页面文档发送至客户端,客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将静态资源渲染至目标页面文档、以显示页面的首屏区域。对于页面渲染的过程而言,拉取并渲染动态资源占用的设备资源较高,耗时较多,而服务端所在的设备的性能一般比客户端所在的设备要强、网络环境一般比客户端所在的设备要好,因此,在服务端中拉取并渲染页面首屏的动态资源,可提高页面首屏的渲染速度、减少页面首屏的渲染时间,从而提高在客户端显示页面首屏的速度,由于首屏为用户所见,可给用户带来页面显示快的效果。
附图说明
图1为本发明实施例一提供的一种页面的处理方法的流程图;
图2是本发明实施例二提供的一种页面的处理方法的流程图;
图3是本发明实施例三提供的一种页面的处理方法的流程图;
图4是本发明实施例四提供的一种页面的处理方法的流程图;
图5A至图5C是本发明实施例提供的一种页面的处理的示例图;
图6为本发明实施例五提供的一种页面的处理装置的结构示意图;
图7为本发明实施例六提供的一种页面的处理装置的结构示意图;
图8为本发明实施例七提供的一种页面的处理装置的结构示意图;
图9为本发明实施例八提供的一种计算机设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
实施例一
图1为本发明实施例四提供的一种页面的处理方法的流程图,本实施例提供一个框架,用于开发项目(即页面),该项目整体进行编译并分发至页面服务器、资源服务器。
对于一个客户端而言,由于功能较多,其首页可按照原生的框架进行开发,如MWC(Model View Controller,模型-视图-控制器),而二级或二级以下的页面,功能相对简单,可按照本实施例所提供的框架进行开发。
本实施例可适用于将该页面的资源分发至页面服务器、资源服务器的情况,该方法可以由页面的处理装置来执行,该页面的处理装置可以由软件和/或硬件实现,可配置在计算机设备中,如SVN(Subversion,版本控制***)等,该方法具体包括如下步骤:
S101、获取属于页面的源文件。
页面的源文件,可以指使用源语言编写该页面所形成的源程序,该源文件包括未编译的原始页面文档、未编译的首屏脚本、未编译的非首屏脚本与未编译的静态资源。
S102、将所述源文件编译为目标文件。
在具体实现中,页面的源文件用户编写完成之后,则可以调用编译器,将项目整体(源文件)编译为目标程序,作为目标文件,在编译之后,该目标文件可直接运行。
以Android***为例,编译环境为Ubuntu,源文件编译的流程如下:
1、源码下载
下载及安装repo工具,repo工具由一系列python脚本组成,通过调用Git命令实现对AOSP项目的管理。
为项目在本地创建对应的仓库,同样,这里为了方便对代码进行管理,为其创建一个文件夹,后面所有的下载的源文件和编译出的目标文件也都放在这个文件夹中。
将该文件夹作为仓库,通过执行初始化仓库命令获取AOSP项目master上最新的代码并初始化该仓库。
初始化仓库之后,就可以开始正式同步源文件的代码到本地了。
2、构建编译环境
通过source build/envsetup.sh等命令初始化编译环境。
3、编译源码
初始化编译环境之后,则进入源码编译阶段,这个阶段又包括两个阶段:选择编译目标和执行编译。
通过lunch指令设置编译目标,所谓的编译目标就是生成的镜像要运行在什么样的设备上。
通过make指令进行代码编译,该指令通过-j参数来设置参与编译的线程数量,以提高编译速度。
4、运行模拟器
在编译完成之后,就可以通过以下命令运行Android虚拟机了。
当然,上述编译方法只是作为示例,在实施本实施例时,可以根据实际情况(如操作***的类型、版本)设置其他编译方法,本发明实施例对此不加以限制。另外,除了上述编译方法外,本领域技术人员还可以根据实际需要采用其它编译方法,本发明实施例对此也不加以限制。
在本实施例中,目标文件包括已编译的原始页面文档、已编译的首屏脚本、已编译的非首屏脚本与已编译的静态资源。
其中,原始页面文档是页面的主体,用于传递页面的各类信息,如HTML文档。
首屏脚本,属于描述页面行为的脚本,如JavaScript文件,在本实施例中,首屏脚本可用于获取位于页面首屏区域中的动态资源,以便将该动态资源渲染至原始页面文档中,作为目标文档,提高该页面首屏区域在客户端的显示速度。
非首屏脚本,属于描述页面行为的脚本,如JavaScript文件,在本实施例中,非首屏脚本用于获取位于页面非首屏区域中的动态资源,以便将该动态资源渲染至目标页面文档中,加载该页面的非首屏区域。
静态资源,可以指在一段时间内稳定的资源,如图片、CSS(Cascading StyleSheets,层叠样式表单)文件等,该静态资源用于渲染至目标页面文档。
在将源文件编译为目标文件之后,可采用Uglifyjs等方式,对目标文件进行压缩,从而减小文件的大小,减少网络开销。
S103、将所述原始页面文档与所述首屏脚本分发至页面服务器。
在本实施例中,编译之后的原始页面文档与首屏脚本可分发至页面服务器。
页面服务器,可以指为客户端提供页面访问的服务器,即页面服务器面向客户端,如Node服务器、Vue服务器、Jquery服务器等。
以Node服务器为例,Node.js应用如下几部分:
1、引入required模块:使用require指令来载入Node.js模块。
2、创建服务器:使用http.createServer()方法创建服务器,服务器可以通过request参数监听客户端的请求。
3、接收请求与响应请求:客户端可以发送请求,服务器接收请求后通过response参数返回响应数据。
相应地,配合Node服务器,页面可以指由React开发的单页面或多页面。
Reactk以声明式编写UI(User Interface,用户界面),可创建交互式UI,为应用的每一个状态设计视图,当数据改变时,React能有效地更新并正确地渲染组件。
对于简单组件,React组件使用一个名为render()的方法,接收输入的数据并返回需要展示的内容,这种写法被称为JSX。被传入的数据可在组件中通过this.props在render()访问。
对于有状态组件,除了使用外部数据(通过this.props访问)以外,组件还可以维护其内部的状态数据(通过this.state访问)。当组件的状态数据改变时,组件会再次调用render()方法重新渲染对应的标记。
对于应用,使用props和state,可以创建一个简易的Todo应用。
在存储页面的原始目标文档、首屏脚本之后,对于页面服务器而言,可提供该页面的访问服务。
在具体实现中,页面服务器可接收客户端发送的、加载一页面的请求,响应于该请求,确定属于页面的、已编译的目标页面文档,以及,将目标页面文档发送至客户端,其中,目标页面文档已渲染位于该页面首屏区域中的动态资源。
进一步地,确定属于页面的、已编译的目标页面文档,包括:
查找属于页面的、已编译的原始页面文档;
获取位于页面首屏区域的动态资源;
将动态资源渲染至原始页面文档中,获得目标页面文档。
进一步地,获取位于页面非首屏区域的动态资源,包括:
查找属于页面的、已编译的首屏脚本;
运行首屏脚本,首屏脚本用于获取位于页面首屏区域中的动态资源。
进一步地,确定属于页面的、已编译的目标页面文档,还包括:
将目标页面文档存储至缓存中;
对目标页面文档设置有效时间,有效时间用于在超时时,清除目标页面文档。
进一步地,确定属于所述页面的、已编译的目标页面文档,包括:
在缓存中查找属于页面的、已编译的目标页面文档;
若查找到,则从缓存中提取所述目标页面文档。
在本实施例中,由于客户端、页面服务器的操作与实施例二、三、四的应用基本相似,所以描述的比较简单,相关之处参见实施例二、三、四的部分说明即可,本实施例在此不加以详述。
在本实施例中,页面服务器存储有原始目标文档与首屏脚本,首屏脚本可用于获取位于页面首屏区域中的动态资源,以便将该动态资源渲染至原始页面文档中,作为目标文档,对于页面渲染的过程而言,拉取并渲染动态资源占用的设备资源较高,耗时较多,而页面服务器的性能一般比客户端所在的设备要强、网络环境一般比客户端所在的设备要好,因此,在页面服务器中拉取并渲染页面首屏的动态资源,可提高页面首屏的渲染速度、减少页面首屏的渲染时间,从而提高在客户端显示页面首屏的速度,由于首屏为用户所见,可给用户带来页面显示快的效果。
S104、将所述非首屏脚本与所述静态资源分发至资源服务器。
在本实施例中,编译之后的非首屏脚本与静态资源可分发至资源服务器。
资源服务器与页面服务器相互独立,用于存储、分发两个或两个以上页面中的非首屏脚本、静态资源,如CDN(Content Delivery Network,内容分发网络)、Redis服务器等。
以CDN为例,通过在网络各处放置节点服务器所构成的在现有的网络基础之上的一层智能虚拟网络,CDN可以实时地根据网络流量和各节点的连接、负载状况以及到客户端的距离和响应时间等综合信息将客户端的请求重新导向离客户端最近的服务节点上,使得客户端户可就近取得所需内容(如非首屏脚本、页面的静态资源),解决网络拥挤的状况,提高访问的响应速度,从而减少获取内容的时间。
在存储页面的非首屏脚本、静态资源之后,对于资源服务器而言,可提供该页面的访问服务。
在具体实现中,页面服务器可接收客户端发送的、加载一页面的请求,响应于该请求,确定属于页面的、已编译的非首屏脚本与已编译的静态资源,以及,将非首屏脚本与静态资源发送至客户端。
对于客户端而言,将静态资源渲染至所述目标页面文档、以显示页面的首屏区域,以及,将动态资源渲染至所述目标页面文档、以加载页面的非首屏区域。
进一步地,获取位于页面非首屏区域中的动态资源,包括:
从资源服务器获取属于页面的非首屏脚本;
运行非首屏脚本,脚本用于获取位于页面非首屏区域中的动态资源。
在本实施例中,由于客户端、页面服务器的操作与实施例二、三、四的应用基本相似,所以描述的比较简单,相关之处参见实施例二、三、四的部分说明即可,本实施例在此不加以详述。
在本实施例中,资源服务器存储有非首屏脚本、静态资源,非首屏脚本可用于获取位于页面非首屏区域中的动态资源,以便将该动态资源渲染至目标页面文档中,对于页面渲染的过程而言,渲染静态资源占用的资源较低,耗时较少,因此,在客户端渲染静态资源,对于渲染页面首屏区域的耗时影响很少,页面服务器面向多个客户端,相比于页面服务器渲染静态资源、非首屏区域的动态资源,在客户端渲染静态资源、非首屏区域的动态资源,可较少页面服务器的负载,并且,由于非首屏区域初始不可见,在用户浏览首屏区域的时间内可完成非首屏区域的渲染,可保证页面的完整显示。
实施例二
图2为本发明实施例二提供的一种页面的处理方法的流程图,本实施例提供一个框架,用于开发项目(即页面),该项目整体进行编译以及分发到页面服务器、资源服务器,所谓编译,可以用编译程序将页面从源语言编写的源程序产生目标程序的过程。
对于一个客户端而言,由于功能较多,其首页可按照原生的框架进行开发,如MWC,而二级或二级以下的页面,功能相对简单,可按照本实施例所提供的框架进行开发。
在页面服务器部署该页面的、已编译的页面文档(如HMTL文档)、在资源服务器部署该页面的、已编译的静态资源。
所谓静态资源,可以指在一段时间内固定的资源,如图片、CSS文件等。
本实施例可适用于页面服务器在页面文档渲染页面的首屏区域的动态数据的情况。
在一页面中,相对于首屏区域,即为非首屏区域。
所谓首屏区域,可以指加载页面时,该页面默认处于屏幕的可视区域中的部分。
所谓非首屏区域,可以指加载页面时,该页面默认处于屏幕的可视区域外的部分,该非首屏区域可以通过滑动、拖动等方式移动至屏幕的可视区域显示。
该方法可以由页面的处理装置来执行,该页面的处理装置可以由软件和/或硬件实现,可配置在计算机设备中,如页面服务器等,该方法具体包括如下步骤:
S201、接收客户端发送的、加载一页面的请求。
在具体实现中,计算机设备(如页面服务器)除了提供页面加载服务之外,还提供页面渲染服务,包括Node服务器、Vue服务器、Jquery服务器,等等。
以Node服务器为例,Node.js应用如下几部分:
1、引入required模块:使用require指令来载入Node.js模块。
2、创建服务器:使用http.createServer()方法创建服务器,服务器可以通过request参数监听客户端的请求。
3、接收请求与响应请求:客户端可以发送请求,服务器接收请求后通过response参数返回响应数据。
相应地,配合Node服务器,页面可以指由React开发的单页面或多页面。
Reactk以声明式编写UI(User Interface,用户界面),可创建交互式UI,为应用的每一个状态设计视图,当数据改变时,React能有效地更新并正确地渲染组件。
对于简单组件,React组件使用一个名为render()的方法,接收输入的数据并返回需要展示的内容,这种写法被称为JSX。被传入的数据可在组件中通过this.props在render()访问。
对于有状态组件,除了使用外部数据(通过this.props访问)以外,组件还可以维护其内部的状态数据(通过this.state访问)。当组件的状态数据改变时,组件会再次调用render()方法重新渲染对应的标记。
对于应用,使用props和state,可以创建一个简易的Todo应用。
在本实施例中,客户端可以通过HTTP(HyperText Transfer Protocol,超文本传输协议)、HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer或Hypertext Transfer Protocol Secure,超文本传输安全协议)等协议,将加载页面的请求发送至计算机设备(如页面服务器)。
其中,请求的内容可以包括客户端请求加载的页面的标识和/或页面的特征。页面标识可以是能够代表一个唯一确定的页面的信息,例如统一资源标识符(UniformResource Identifier,URI),统一资源标识符又具体可以包括统一资源定位符(UniformResource Locator,URL),或者统一资源名称(Uniform Resource Name,URN)等等。
需要说明的是,对于Node服务器等计算机设备,可以并发地处理两个或两个以上的加载页面的请求。
S202、响应于所述请求,确定属于所述页面的、已编译的目标页面文档。
在计算机设备(如页面服务器)中,可预先存储两个或两个以上页面的、已编译的原始页面文档。
原始页面文档是页面的主体,用于传递页面的各类信息。
以HTML文档作为页面文档的示例,HTML文档属于页面的框架,可以指示应用如何显示Web文档(即页面)的信息,如何链接各种信息。使用HTML文本可以在其生成的文档中含有其它文档,或者含有图像、音频、视频等,从而形成超文本。
在该原始页面文档中渲染位于页面首屏区域中的动态资源,可生成目标页面文档,即目标页面文档已渲染有位于页面首屏区域中的动态资源。
其中,动态资源可以指实时发生变化的资源,该动态资源可以由本领域技术人员根据实际情况设定,本实施例对此不加以限制。
例如,对于直播网站的页面,该动态资源可以包括排行榜中的数据,如某个用户的排名及其排行数值(如主播用户的人气值、观众用户的贡献值、陪玩用户的订单数等)。
在本实施例中,计算机设备(如页面服务器)以已编译的项目作为路由,响应于客户端的请求,在本地查找该请求(以URL表示)对应的项目。
如果未查找到,则向客户端返回错误页面,如404页面。
如果查找到,则可获取属于该请求对应页面的、已编译的目标页面文档。
对于实时性要求较高的项目、实时性要求较低的项目且未缓存或缓存失效等情况,可实时生成目标页面文档。
在此情况中,可查找属于页面的、已编译的原始页面文档,如HTML文档,获取位于页面首屏区域的动态资源,将动态资源渲染至原始页面文档中,获得目标页面文档。
该项目包括属于页面的、已编译的首屏脚本,如JavaScript文件,存储在计算机设备(如页面服务器)。
计算机设备(如页面服务器)可查找属于页面的、已编译的首屏脚本,运行首屏脚本,该首屏脚本用于从业务服务器获取位于页面首屏区域中的动态资源。
进一步而言,若该项目属于实时性要求较低的项目,则可以将目标页面文档存储至缓存中,以及,对目标页面文档设置有效时间,有效时间用于在超时时,清除目标页面文档,以在有效时间内直接提取目标页面文档。
对于实时性要求较低的项目且缓存生效等情况,可在缓存中查找属于页面的、已编译的目标页面文档,若查找到,则从缓存中提取目标页面文档。
S203、将所述目标页面文档发送至所述客户端。
在本实施例中,计算机设备(如页面服务器)可以通过HTTP、HTTPS等协议,将客户端所请求页面的目标页面文档发送至该客户端。
客户端用于从资源服务器获取属于页面的、已编译的静态资源,将静态资源渲染至目标页面文档、以显示页面的首屏区域。
在本实施例中,接收客户端发送的、加载一页面的请求,响应于该请求,确定属于页面的、已编译的目标页面文档,目标页面文档已渲染位于页面首屏区域中的动态资源,将目标页面文档发送至客户端,客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将静态资源渲染至目标页面文档、以显示页面的首屏区域。对于页面渲染的过程而言,拉取并渲染动态资源占用的设备资源较高,耗时较多,而服务端所在的设备的性能一般比客户端所在的设备要强、网络环境一般比客户端所在的设备要好,因此,在服务端中拉取并渲染页面首屏的动态资源,可提高页面首屏的渲染速度、减少页面首屏的渲染时间,从而提高在客户端显示页面首屏的速度,由于首屏为用户所见,可给用户带来页面显示快的效果。
此外,出于安全性的考虑,搜索引擎一般是拉取HTML文档,不会对里面的脚本文件进行解析,将导致网站无法获得有效的搜索引擎排名;而本实施例中,在服务端提供渲染动态数据的目标页面文档,有利用搜索引擎获取到包含数据的页面,增加项目的曝光度,从而提高项目的搜索引擎排名。
实施例三
图3为本发明实施例三提供的一种页面的处理方法的流程图,本实施例提供一个框架,用于开发项目(即页面),该项目整体进行编译以及分发到页面服务器、资源服务器,所谓编译,可以用编译程序将页面从源语言编写的源程序产生目标程序的过程。
对于一个客户端而言,由于功能较多,其首页可按照原生的框架进行开发,如MWC,而二级或二级以下的页面,功能相对简单,可按照本实施例所提供的框架进行开发。
在页面服务器部署该页面的、已编译的页面文档(如HMTL文档)、在资源服务器部署该页面的、已编译的静态资源。
所谓静态资源,可以指在一段时间内固定的资源,如图片、CSS文件等。
本实施例可适用于客户端从页面服务器获取已渲染动态数据的目标页面文档、从资源服务器获取静态资源,在目标页面文档渲染页面的首屏区域的情况。
在一页面中,相对于首屏区域,即为非首屏区域。
所谓首屏区域,可以指加载页面时,该页面默认处于屏幕的可视区域中的部分。
所谓非首屏区域,可以指加载页面时,该页面默认处于屏幕的可视区域外的部分,该非首屏区域可以通过滑动、拖动等方式移动至屏幕的可视区域显示。
该方法可以由页面的处理装置来执行,该页面的处理装置可以由软件和/或硬件实现,可配置在计算机设备中,如移动终端(如手机、平板电脑、智能穿戴设备(如智能手表、智能眼镜等))等,该方法具体包括如下步骤:
S301、接收显示页面的操作。
在本实施例中,在计算机设备中,操作***包括Android(安卓)、iOS、windows等等,在该操作***中可以安装、运行可加载页面的客户端,例如,直播应用、浏览器、即时通讯工具、搜索应用,等等。
以直播应用为客户端的示例,该直播应用可播放实时的直播视频数据,也可以点播在先的直播视频数据,也可以提供其他服务,如游戏陪玩服务、游戏等等。
对于直播应用等非浏览器的客户端,可以配置页面容器,以显示页面,例如,在Android***中,该页面容器可以为WebView,WebView是一个基于webkit引擎、展现页面的控件。
一般情况下,实现WebView有以下两种不同的方法:
第一种方法:
1、在要Activity中实例化WebView组件:WebView webView=new WebView(this);
2、调用WebView的loadUrl()方法,设置WevView要显示的页面:
互联网用:webView.loadUrl("http://www.***.com");
本地文件用:webView.loadUrl("file:///android_asset/XX.html");本地文件存放在:assets文件中;
3、调用Activity的setContentView()方法来显示页面视图;
4、用WebView显示了多个页面以后为了让WebView支持回退功能,覆盖Activity类的onKeyDown()方法;
5、在AndroidManifest.xml(根目录)文件中添加权限。
第二种方法:
1、在布局文件中声明WebView;
2、在Activity中实例化WebView;
3、调用WebView的loadUrl()方法,设置WevView要显示的网页;
4、为了让WebView能够响应超链接功能,调用setWebViewClient()方法,设置WebView视图;
5、用WebView显示了多个页面以后为了让WebView支持回退功能,覆盖Activity类的onKeyDown()方法;
6、在AndroidManifest.xml文件中添加权限。
当然,上述非浏览器的客户端显示页面的方式只是作为示例,在实施本发明实施例时,可以根据实际情况(如操作***的类型、版本等)设置其他非浏览器的客户端显示页面的方式,本实施例对此不加以限制。另外,除了上述非浏览器的客户端显示页面的方式外,本领域技术人员还可以根据实际需要采用其它非浏览器的客户端显示页面的方式,本实施例对此也不加以限制。
在本实施例中,客户端可以在UI(User Interface,用户界面)上显示操作元素,如输入栏、控件等,用户在UI上通过该操作元素触发个浏览页面的操作。
例如,用户可以通过点击控件来打开一个页面,或者在地址栏输入网址来打开一个页面等等。当用户点击控件时,相当于接收到了显示页面的操作;同样,当用户在地址栏输入网址并点击确定按钮或按下回车键时,相当于接收到了显示页面的操作。
S302、响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档。
在本实施例中,客户端响应于用户发起的操作,通过HTTP、HTTPS等协议,将加载相应页面的请求发送至页面服务器。
页面服务器响应于客户端的请求,返回相应页面的、已编译的目标页面文档(如HTML文档),该目标页面文档已渲染位于页面首屏区域中的动态资源。
在一种渲染的方式中,页面服务器查找属于页面的、已编译的原始页面文档;获取位于页面首屏区域的动态资源,将动态资源渲染至原始页面文档中,获得目标页面文档。
在获取位于页面非首屏区域的动态资源时,可查找属于页面的、已编译的首屏脚本;运行首屏脚本,首屏脚本用于获取位于页面首屏区域中的动态资源。
进一步地,页面服务器可将目标页面文档存储至缓存中,对目标页面文档设置有效时间,该有效时间用于在超时时,清除目标页面文档。
在另一种渲染的方式中,页面服务器在缓存中查找属于页面的、已编译的目标页面文档;若查找到,则从缓存中提取目标页面文档。
在本实施例中,由于页面服务器返回目标页面文档的方式与实施例一的应用基本相似,所以描述的比较简单,相关之处参见实施例一的部分说明即可,本实施例在此不加以详述。
S303、从资源服务器获取属于所述页面的、已编译的静态资源。
资源服务器,与页面服务器相互独立,用于存储两个或两个以上页面中的静态资源,如CDN、Redis服务器等。
以CDN为例,通过在网络各处放置节点服务器所构成的在现有的网络基础之上的一层智能虚拟网络,CDN可以实时地根据网络流量和各节点的连接、负载状况以及到客户端的距离和响应时间等综合信息将客户端的请求重新导向离客户端最近的服务节点上,使得客户端户可就近取得所需内容(如页面的静态资源),解决网络拥挤的状况,提高访问的响应速度,从而减少获取内容的时间。
在本实施例中,客户端通过HTTP、HTTPS等协议,向资源服务器发送访问页面的请求,资源服务器响应于该请求,通过HTTP、HTTPS等协议,将属于该页面的、已编译的静态资源发送至客户端。
需要说明的是,对于页面的静态资源而言,并不区分首屏区域与非首屏区域,即该静态资源既包括位于首屏区域的静态资源,也包括属于非首屏区域的静态资源。
S304、将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
客户端在接收到目标页面文档、静态资源之后,则可以将静态资源渲染至目标页面文档,从而在计算机设备(如移动设备)的屏幕的可视区域显示页面的首屏区域。
在一个示例中,渲染页面中静态资源的过程如下:
1、客户端开始载入HTML文本的源代码,当检测到<head>标签内有一个<link>标签时,引用CSS文件;
2、客户端继续载入HTML文本中<body>部分的代码,此时CSS文件已经加载到,可以开始渲染页面;
3、当客户端在HTML文本中检测到一个<img>标签时,引用了一张图片;
4、由于图片占用了一定面积,影响了后面段落的排布,因此客户端可能重新渲染这部分代码。
在本实施例中,接收显示页面的操作,响应于该操作,向页面服务器请求确定属于页面的、已编译的目标页面文档,目标页面文档已渲染位于页面首屏区域中的动态资源,从资源服务器获取属于页面的、已编译的静态资源,将静态资源渲染至目标页面文档、以显示页面的首屏区域。对于页面渲染的过程而言,渲染静态资源占用的资源较低,耗时较少,因此,在客户端渲染静态资源,对于渲染页面的首屏区域的时间影响很少,并且,非首屏区域初始不可见,页面服务器面向多个客户端,相比于页面服务器渲染静态资源、非首屏区域的动态资源,在客户端渲染静态资源、非首屏区域的动态资源,在页面服务器中渲染页面首屏的动态资源,可提高页面首屏的渲染速度、减少页面首屏的渲染时间,从而提高在客户端显示页面首屏的速度,由于首屏为用户所见,可给用户带来页面显示快的效果。
再者,对于页面渲染的过程而言,渲染静态资源占用的资源较低,耗时较少,因此,在客户端渲染静态资源,对于渲染页面首屏区域的耗时影响很少,页面服务器面向多个客户端,相比于页面服务器渲染静态资源、非首屏区域的动态资源,在客户端渲染静态资源、非首屏区域的动态资源,可较少页面服务器的负载。
此外,出于安全性的考虑,搜索引擎一般是拉取HTML文档,不会对里面的脚本文件进行解析,将导致网站无法获得有效的搜索引擎排名;而本实施例中,在服务端提供渲染动态数据的目标页面文档,有利用搜索引擎获取到包含数据的页面,增加项目的曝光度,从而提高项目的搜索引擎排名。
实施例四
图4为本发明实施例四提供的一种页面的处理方法的流程图,本实施例以前述实施例为基础,进一步增加渲染非首屏区域的处理操作。该方法具体包括如下步骤:
S401、接收显示页面的操作。
S402、响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档。
其中,目标页面文档已渲染位于页面首屏区域中的动态资源。
S403、从资源服务器获取属于所述页面的、已编译的静态资源。
S404、将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
S405、获取位于所述页面非首屏区域中的动态资源。
在具体实现中,动态资源可以指实时发生变化的资源,该动态资源可以由本领域技术人员根据实际情况设定,本实施例对此不加以限制。
例如,对于直播网站的页面,该动态资源可以包括排行榜中的数据,如某个用户的排名及其排行数值(如主播用户的人气值、观众用户的贡献值、陪玩用户的订单数等)。
在一种获取方式中,该项目包括属于页面的、已编译的非首屏脚本,如JavaScript文件,存储在资源服务器中。
在此方式中,客户端可从资源服务器获取属于页面的非首屏脚本,以及,运行该非首屏脚本,该脚本用于获取位于页面非首屏区域中的动态资源。
为了提高页面加载的速度,客户端向资源服务器发送访问页面的请求之后,资源服务器可一同返回静态资源和非首屏脚本。
当然,客户端也可以分别独立从资源服务器获取静态资源和非首屏脚本,本实施例对此不加以限制。
S406、将所述动态资源渲染至所述目标页面文档、以加载所述页面的非首屏区域。
客户端将属于非首屏区域的动态资源渲染至目标页面文档(如HTML文档),则可以完成页面的非首屏区域的加载。
在用户浏览页面的过程中,可以通过拖动、滑动等操作,将非首屏区域移入计算机设备(如移动终端)的屏幕的可视区域,此时非首屏区域处于可视状态。
在本实施例中,客户端获取位于页面非首屏区域中的动态资源,将动态资源渲染至目标页面文档、以加载页面的非首屏区域,页面服务器面向多个客户端,相比于页面服务器非首屏区域的动态资源,在客户端渲染非首屏的动态资源,可较少页面服务器的负载,并且,由于非首屏区域初始不可见,在用户浏览首屏区域的时间内可完成非首屏区域的渲染,可保证页面的完整显示。
为使本领域技术人员更好地理解本实施例,以下通过具体的示例来说明本实施例中页面的处理方法。
对于一个直播应用的排行榜(页面),名称为“陪玩大神榜”,用对提供陪玩业务的用户进行排名。
如图5A所示,页面服务器510存储该排行榜的HMTL文档、首屏区域的JavaScript文件,CDN520存储该排行榜的CSS文件、图片(如背景、下单、用户徽章、排名名次、榜单说明、页数等)、非首屏区域的JavaScript文件。
在移动终端530中安装直播应用。
如图5B所示,用户启动该直播应用,并点击“陪玩”栏目,此时,显示“陪玩大神榜”的入口对象。
用户点击该入口对象,触发显示排行榜的操作。
响应于该操作,直播应用发送加载排行榜的请求至页面服务器510。
页面服务器510查找是否存在该排行榜的项目。
若无相应的项目,则页面服务器510返回404页面至直播应用。
若有相应的项目,则页面服务器510判断该项目是否使用缓存。
如果未使用缓存,则运行首屏区域的JavaScript文件,从业务服务器540拉取该排行榜中位于首屏区域的排名数据,如排名第1-5名的用户的用户头像、用户昵称、接单量等,将该位于首屏区域的排名数据渲染至HTML文档。
如果已使用缓存,则进一步判断缓存是否过期。
如果未过期,则提取已渲染位于首屏区域的排名数据HTML文档。
如果已过期,则运行首屏区域的JavaScript文件,从业务服务器540拉取该排行榜中位于首屏区域的排名数据,如排名第1-5名的用户的用户头像、用户昵称、接单量等,将该位于首屏区域的排名数据渲染至HTML文档。
对于未使用缓存、已使用缓存但已过期的情况,将已渲染位于首屏区域的排名数据HTML文档写入缓存,并设置有效时间。
页面服务器510将已渲染位于首屏区域的排名数据HTML文档发送至直播应用。
直播应用从CDN520拉取CSS文件、图片以及非首屏区域的JavaScript文件。
如图5C所示,直播应用将CSS文件、图片渲染至HTML文档,可显示首屏区域551。
如图5C所示,直播应用运行非首屏区域的JavaScript文件,从业务服务器540拉取该排行榜中位于非首屏区域的排名数据,如排名第6-10名的用户的用户头像、用户昵称、接单量等,将该位于非首屏区域的排名数据渲染至HTML文档,可加载非首屏区域552,待用户向下滑动时,则可显示非首屏区域552。
实施例五
图6为本发明实施例五提供的一种页面的处理装置的结构示意图,该装置具体可以包括如下模块:
请求接收模块601,用于接收客户端发送的、加载一页面的请求;
目标页面文档确定模块602,用于响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染有位于所述页面首屏区域中的动态资源;
目标页面文档发模块603,用于将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
在本发明的一个实施例中,所述目标页面文档确定模块602包括:
原始页面文档查找子模块,用于查找属于所述页面的、已编译的原始页面文档;
首屏动态资源获取子模块,用于获取位于所述页面首屏区域的动态资源;
动态资源渲染子模块,用于将所述动态资源渲染至所述原始页面文档中,获得目标页面文档。
在本发明的一个实施例中,所述首屏动态资源获取子模块包括:
首屏脚本查找单元,用于查找属于所述页面的、已编译的首屏脚本;
首屏脚本运行单元,用于运行所述首屏脚本,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源。
在本发明的一个实施例中,所述目标页面文档确定模块602还包括:
目标页面文档缓存子模块,用于将所述目标页面文档存储至缓存中;
有效时间设置子模块,用于对所述目标页面文档设置有效时间,所述有效时间用于在超时时,清除所述目标页面文档。
在本发明的一个实施例中,所述目标页面文档确定模块602包括:
目标页面文档查找子模块,用于在缓存中查找属于所述页面的、已编译的目标页面文档;
目标页面文档提取子模块,用于若查找到,则从所述缓存中提取所述目标页面文档。
本发明实施例所提供的页面的处理装置可执行本发明任意实施例所提供的页面的处理方法,具备执行方法相应的功能模块和有益效果。
实施例六
图7为本发明实施例六提供的一种页面的处理装置的结构示意图,该装置具体可以包括如下模块:
操作接收模块701,用于接收显示页面的操作;
目标页面文档请求模块702,用于响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;
静态资源获取模块703,用于从资源服务器获取属于所述页面的、已编译的静态资源;
静态资源渲染模块704,用于将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
在本发明的一个实施例中,还包括:
非首屏动态资源获取模块,用于获取位于所述页面非首屏区域中的动态资源;
动态资源渲染模块,用于将所述动态资源渲染至所述目标页面文档、以加载所述页面的非首屏区域。
在本发明的一个实施例中,所述非首屏动态资源获取模块包括:
非首屏脚本获取子模块,用于从资源服务器获取属于所述页面的非首屏脚本;
非首屏脚本运行子模块,用于运行所述非首屏脚本,所述脚本用于获取位于所述页面非首屏区域中的动态资源。
本发明实施例所提供的页面的处理装置可执行本发明任意实施例所提供的页面的处理方法,具备执行方法相应的功能模块和有益效果。
实施例七
图8为本发明实施例七提供的一种页面的处理装置的结构示意图,该装置具体可以包括如下模块:
源文件获取模块801,用于获取属于页面的源文件;
文件编译模块802,用于将所述源文件编译为目标文件,所述目标文件包括原始页面文档、首屏脚本、非首屏脚本与静态资源,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源、所述非首屏脚本用于获取位于所述页面非首屏区域中的动态资源;
第一资源分发模块803,用于将所述原始页面文档与所述首屏脚本分发至页面服务器;
第二资源分发模块804,用于将所述非首屏脚本与所述静态资源分发至资源服务器。
在本发明的一个实施例中,还包括:
目标文件压缩模块,用于对所述目标文件进行压缩。
本发明实施例所提供的页面的处理装置可执行本发明任意实施例所提供的页面的处理方法,具备执行方法相应的功能模块和有益效果。
实施例八
图9为本发明实施例八提供的一种计算机设备的结构示意图。如图9所示,该计算机设备包括处理器900、存储器901、通信模块902、输入装置903和输出装置904;计算机设备中处理器900的数量可以是一个或多个,图9中以一个处理器900为例;计算机设备中的处理器900、存储器901、通信模块902、输入装置903和输出装置904可以通过总线或其他方式连接,图9中以通过总线连接为例。
存储器901作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块,如本实施例中的页面的处理方法对应的模块(例如,如图6所示的页面的处理装置中的请求接收模块601、目标页面文档确定模块602和目标页面文档发模块603;或者,如图7所示的页面的处理装置中的操作接收模块701、目标页面文档请求模块702、静态资源获取模块703和静态资源渲染模块704;或者,如图8所示的页面的处理装置中的源文件获取模块801、文件编译模块802、第一资源分发模块803和第二资源分发模块804)。处理器900通过运行存储在存储器901中的软件程序、指令以及模块,从而执行计算机设备的各种功能应用以及数据处理,即实现上述的页面的处理方法。
存储器901可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作***、至少一个功能所需的应用程序;存储数据区可存储根据计算机设备的使用所创建的数据等。此外,存储器901可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储器901可进一步包括相对于处理器900远程设置的存储器,这些远程存储器可以通过网络连接至计算机设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
通信模块902,用于与显示屏建立连接,并实现与显示屏的数据交互。输入装置903可用于接收输入的数字或字符信息,以及产生与计算机设备的用户设置以及功能控制有关的键信号输入。
本实施例提供的计算机设备,可执行本发明任一实施例提供的页面的处理方法,具体相应的功能和有益效果。
实施例九
本发明实施例九还提供一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现一种页面的处理方法。
在一种情况中,该方法包括:
接收客户端发送的、加载一页面的请求;
响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染有位于所述页面首屏区域中的动态资源;
将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
在另一种情况中,该方法包括:
接收显示页面的操作;
响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;
从资源服务器获取属于所述页面的、已编译的静态资源;
将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
在又一种情况中,该方法包括:
获取属于页面的源文件;
将所述源文件编译为目标文件,所述目标文件包括原始页面文档、首屏脚本、非首屏脚本与静态资源,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源、所述非首屏脚本用于获取位于所述页面非首屏区域中的动态资源;
将所述原始页面文档与所述首屏脚本分发至页面服务器;
将所述非首屏脚本与所述静态资源分发至资源服务器。
当然,本发明实施例所提供的计算机可读存储介质,其计算机程序不限于如上所述的方法操作,还可以执行本发明任意实施例所提供的页面的处理方法中的相关操作。
通过以上关于实施方式的描述,所属领域的技术人员可以清楚地了解到,本发明可借助软件及必需的通用硬件来实现,当然也可以通过硬件实现,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
值得注意的是,上述页面的处理装置的实施例中,所包括的各个单元和模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本发明的保护范围。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

Claims (15)

1.一种页面的处理方法,其特征在于,包括:
接收客户端发送的、加载一页面的请求;
响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染有位于所述页面首屏区域中的动态资源;
将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
2.根据权利要求1所述的方法,其特征在于,所述确定属于所述页面的、已编译的目标页面文档,包括:
查找属于所述页面的、已编译的原始页面文档;
获取位于所述页面首屏区域的动态资源;
将所述动态资源渲染至所述原始页面文档中,获得目标页面文档。
3.根据权利要求2所述的方法,其特征在于,所述获取位于所述页面非首屏区域的动态资源,包括:
查找属于所述页面的、已编译的首屏脚本;
运行所述首屏脚本,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源。
4.根据权利要求2所述的方法,其特征在于,所述确定属于所述页面的、已编译的目标页面文档,还包括:
将所述目标页面文档存储至缓存中;
对所述目标页面文档设置有效时间,所述有效时间用于在超时时,清除所述目标页面文档。
5.根据权利要求1-4任一项所述的方法,其特征在于,所述确定属于所述页面的、已编译的目标页面文档,包括:
在缓存中查找属于所述页面的、已编译的目标页面文档;
若查找到,则从所述缓存中提取所述目标页面文档。
6.一种页面的处理方法,其特征在于,包括:
接收显示页面的操作;
响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;
从资源服务器获取属于所述页面的、已编译的静态资源;
将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
7.根据权利要求6所述的方法,其特征在于,还包括:
获取位于所述页面非首屏区域中的动态资源;
将所述动态资源渲染至所述目标页面文档、以加载所述页面的非首屏区域。
8.根据权利要求7所述的方法,其特征在于,所述获取位于所述页面非首屏区域中的动态资源,包括:
从资源服务器获取属于所述页面的非首屏脚本;
运行所述非首屏脚本,所述脚本用于获取位于所述页面非首屏区域中的动态资源。
9.一种页面的处理方法,其特征在于,包括:
获取属于页面的源文件;
将所述源文件编译为目标文件,所述目标文件包括原始页面文档、首屏脚本、非首屏脚本与静态资源,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源、所述非首屏脚本用于获取位于所述页面非首屏区域中的动态资源;
将所述原始页面文档与所述首屏脚本分发至页面服务器;
将所述非首屏脚本与所述静态资源分发至资源服务器。
10.根据权利要求9所述的方法,其特征在于,在所述将所述源文件编译为目标文件之后,还包括:
对所述目标文件进行压缩。
11.一种页面的处理装置,其特征在于,包括:
请求接收模块,用于接收客户端发送的、加载一页面的请求;
目标页面文档确定模块,用于响应于所述请求,确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染位于所述页面首屏区域中的动态资源;
目标页面文档发模块,用于将所述目标页面文档发送至所述客户端,所述客户端用于从资源服务器获取属于所述页面的、已编译的静态资源,将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
12.一种页面的处理装置,其特征在于,包括:
操作接收模块,用于接收显示页面的操作;
目标页面文档请求模块,用于响应于所述操作,向页面服务器请求确定属于所述页面的、已编译的目标页面文档,所述目标页面文档已渲染有位于所述页面首屏区域中的动态资源;
静态资源获取模块,用于从资源服务器获取属于所述页面的、已编译的静态资源;
静态资源渲染模块,用于将所述静态资源渲染至所述目标页面文档、以显示所述页面的首屏区域。
13.一种页面的处理装置,其特征在于,包括:
源文件获取模块,用于获取属于页面的源文件;
文件编译模块,用于将所述源文件编译为目标文件,所述目标文件包括原始页面文档、首屏脚本、非首屏脚本与静态资源,所述首屏脚本用于获取位于所述页面首屏区域中的动态资源、所述非首屏脚本用于获取位于所述页面非首屏区域中的动态资源;
第一资源分发模块,用于将所述原始页面文档与所述首屏脚本分发至页面服务器;
第二资源分发模块,用于将所述非首屏脚本与所述静态资源分发至资源服务器。
14.一种计算机设备,其特征在于,所述计算机设备包括:
一个或多个处理器;
存储器,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-10中任一所述的页面的处理方法。
15.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该计算机程序被处理器执行时实现如权利要求1-10中任一所述的页面的处理方法。
CN201910750332.4A 2019-08-14 2019-08-14 一种页面的处理方法、装置、计算机设备和存储介质 Pending CN110442811A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910750332.4A CN110442811A (zh) 2019-08-14 2019-08-14 一种页面的处理方法、装置、计算机设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910750332.4A CN110442811A (zh) 2019-08-14 2019-08-14 一种页面的处理方法、装置、计算机设备和存储介质

Publications (1)

Publication Number Publication Date
CN110442811A true CN110442811A (zh) 2019-11-12

Family

ID=68435534

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910750332.4A Pending CN110442811A (zh) 2019-08-14 2019-08-14 一种页面的处理方法、装置、计算机设备和存储介质

Country Status (1)

Country Link
CN (1) CN110442811A (zh)

Cited By (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110990746A (zh) * 2019-12-06 2020-04-10 北京同邦卓益科技有限公司 页面加载方法、装置、***、存储介质、电子设备
CN111026490A (zh) * 2019-12-09 2020-04-17 北京小米移动软件有限公司 页面渲染方法、装置、电子设备及存储介质
CN111078231A (zh) * 2019-11-22 2020-04-28 浙江蓝卓工业互联网信息技术有限公司 可视化界面组件热部署方法和客户端、服务端
CN111124574A (zh) * 2019-12-18 2020-05-08 南京三百云信息科技有限公司 首屏渲染加速方法、开发端、服务器、***和电子设备
CN111259636A (zh) * 2020-02-07 2020-06-09 北京字节跳动网络技术有限公司 文档渲染方法、装置和电子设备
CN111339035A (zh) * 2020-02-21 2020-06-26 苏宁云计算有限公司 一种目标数据的查询方法、装置、计算机设备和存储介质
CN111538885A (zh) * 2020-04-24 2020-08-14 腾讯音乐娱乐科技(深圳)有限公司 页面监听方法、装置、电子设备及存储介质
CN111581473A (zh) * 2020-04-01 2020-08-25 北京皮尔布莱尼软件有限公司 一种网页处理方法
CN111581563A (zh) * 2020-04-30 2020-08-25 北京字节跳动网络技术有限公司 页面响应方法、装置、存储介质和电子设备
CN111859219A (zh) * 2020-07-23 2020-10-30 广州酷狗计算机科技有限公司 网页骨架图的生成方法、装置、终端及存储介质
CN112256363A (zh) * 2020-09-21 2021-01-22 北京三快在线科技有限公司 应用页面渲染方法、装置、电子设备
CN112464129A (zh) * 2020-11-09 2021-03-09 广东华兴银行股份有限公司 一种加载h5页面请求的安全通讯方法、设备及介质
CN112765507A (zh) * 2021-01-27 2021-05-07 上海淇玥信息技术有限公司 一种页面首屏渲染与资源加载方法、装置和电子设备
CN112835581A (zh) * 2021-03-10 2021-05-25 百度在线网络技术(北京)有限公司 端能力调用方法、装置、设备以及存储介质
CN112835580A (zh) * 2021-03-10 2021-05-25 百度在线网络技术(北京)有限公司 指令处理方法、装置、设备以及存储介质
CN112882710A (zh) * 2021-03-10 2021-06-01 百度在线网络技术(北京)有限公司 基于客户端的渲染方法、装置、设备以及存储介质
CN113158100A (zh) * 2020-01-22 2021-07-23 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置
CN113297217A (zh) * 2021-05-20 2021-08-24 广州光点信息科技有限公司 一种数据传输方法、装置及***
CN113343154A (zh) * 2021-06-29 2021-09-03 中国平安财产保险股份有限公司 页面加载方法、装置、电子设备及存储介质
CN113515328A (zh) * 2020-04-09 2021-10-19 北京沃东天骏信息技术有限公司 页面渲染的方法、装置、电子设备和存储介质
CN113656720A (zh) * 2021-08-25 2021-11-16 北京达佳互联信息技术有限公司 页面展示方法、装置、电子设备及存储介质
CN115659087A (zh) * 2022-11-28 2023-01-31 阿里巴巴(中国)有限公司 页面渲染方法、***、设备、存储介质及程序产品
WO2023005715A1 (zh) * 2021-07-30 2023-02-02 花瓣云科技有限公司 快应用处理方法、电子设备与快应用***

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102184231A (zh) * 2011-05-12 2011-09-14 广州市动景计算机科技有限公司 获取页面资源的方法及装置
CN106339414A (zh) * 2016-08-12 2017-01-18 合网络技术(北京)有限公司 网页渲染方法及装置
CN107391664A (zh) * 2017-07-19 2017-11-24 广州华多网络科技有限公司 基于web的页面数据处理方法和***
CN107526751A (zh) * 2016-06-22 2017-12-29 广州市动景计算机科技有限公司 网页的加载方法、客户端、网页服务器及可编程设备
CN107920042A (zh) * 2016-10-08 2018-04-17 北京小唱科技有限公司 一种直播间页面的优化传输方法和服务器
CN108874922A (zh) * 2018-05-31 2018-11-23 康键信息技术(深圳)有限公司 客户端设备、基于单页应用的网页渲染方法和存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102184231A (zh) * 2011-05-12 2011-09-14 广州市动景计算机科技有限公司 获取页面资源的方法及装置
CN107526751A (zh) * 2016-06-22 2017-12-29 广州市动景计算机科技有限公司 网页的加载方法、客户端、网页服务器及可编程设备
CN106339414A (zh) * 2016-08-12 2017-01-18 合网络技术(北京)有限公司 网页渲染方法及装置
CN107920042A (zh) * 2016-10-08 2018-04-17 北京小唱科技有限公司 一种直播间页面的优化传输方法和服务器
CN107391664A (zh) * 2017-07-19 2017-11-24 广州华多网络科技有限公司 基于web的页面数据处理方法和***
CN108874922A (zh) * 2018-05-31 2018-11-23 康键信息技术(深圳)有限公司 客户端设备、基于单页应用的网页渲染方法和存储介质

Cited By (36)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111078231A (zh) * 2019-11-22 2020-04-28 浙江蓝卓工业互联网信息技术有限公司 可视化界面组件热部署方法和客户端、服务端
CN110990746A (zh) * 2019-12-06 2020-04-10 北京同邦卓益科技有限公司 页面加载方法、装置、***、存储介质、电子设备
CN111026490A (zh) * 2019-12-09 2020-04-17 北京小米移动软件有限公司 页面渲染方法、装置、电子设备及存储介质
CN111124574A (zh) * 2019-12-18 2020-05-08 南京三百云信息科技有限公司 首屏渲染加速方法、开发端、服务器、***和电子设备
CN113158100A (zh) * 2020-01-22 2021-07-23 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置
CN113158100B (zh) * 2020-01-22 2024-05-03 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置
CN111259636A (zh) * 2020-02-07 2020-06-09 北京字节跳动网络技术有限公司 文档渲染方法、装置和电子设备
CN111259636B (zh) * 2020-02-07 2023-10-13 北京字节跳动网络技术有限公司 文档渲染方法、装置和电子设备
CN111339035A (zh) * 2020-02-21 2020-06-26 苏宁云计算有限公司 一种目标数据的查询方法、装置、计算机设备和存储介质
CN111339035B (zh) * 2020-02-21 2022-11-18 苏宁云计算有限公司 一种目标数据的查询方法、装置、计算机设备和存储介质
CN111581473A (zh) * 2020-04-01 2020-08-25 北京皮尔布莱尼软件有限公司 一种网页处理方法
CN111581473B (zh) * 2020-04-01 2024-03-15 北京皮尔布莱尼软件有限公司 一种网页处理方法
CN113515328A (zh) * 2020-04-09 2021-10-19 北京沃东天骏信息技术有限公司 页面渲染的方法、装置、电子设备和存储介质
CN111538885B (zh) * 2020-04-24 2023-10-24 腾讯音乐娱乐科技(深圳)有限公司 页面监听方法、装置、电子设备及存储介质
CN111538885A (zh) * 2020-04-24 2020-08-14 腾讯音乐娱乐科技(深圳)有限公司 页面监听方法、装置、电子设备及存储介质
CN111581563B (zh) * 2020-04-30 2023-04-28 北京字节跳动网络技术有限公司 页面响应方法、装置、存储介质和电子设备
CN111581563A (zh) * 2020-04-30 2020-08-25 北京字节跳动网络技术有限公司 页面响应方法、装置、存储介质和电子设备
CN111859219A (zh) * 2020-07-23 2020-10-30 广州酷狗计算机科技有限公司 网页骨架图的生成方法、装置、终端及存储介质
CN112256363A (zh) * 2020-09-21 2021-01-22 北京三快在线科技有限公司 应用页面渲染方法、装置、电子设备
CN112464129A (zh) * 2020-11-09 2021-03-09 广东华兴银行股份有限公司 一种加载h5页面请求的安全通讯方法、设备及介质
CN112765507B (zh) * 2021-01-27 2023-12-26 上海淇玥信息技术有限公司 一种页面首屏渲染与资源加载方法、装置和电子设备
CN112765507A (zh) * 2021-01-27 2021-05-07 上海淇玥信息技术有限公司 一种页面首屏渲染与资源加载方法、装置和电子设备
CN112835581B (zh) * 2021-03-10 2024-07-05 百度在线网络技术(北京)有限公司 端能力调用方法、装置、设备以及存储介质
CN112882710A (zh) * 2021-03-10 2021-06-01 百度在线网络技术(北京)有限公司 基于客户端的渲染方法、装置、设备以及存储介质
CN112882710B (zh) * 2021-03-10 2024-06-04 百度在线网络技术(北京)有限公司 基于客户端的渲染方法、装置、设备以及存储介质
CN112835580B (zh) * 2021-03-10 2024-05-28 百度在线网络技术(北京)有限公司 指令处理方法、装置、设备以及存储介质
CN112835580A (zh) * 2021-03-10 2021-05-25 百度在线网络技术(北京)有限公司 指令处理方法、装置、设备以及存储介质
CN112835581A (zh) * 2021-03-10 2021-05-25 百度在线网络技术(北京)有限公司 端能力调用方法、装置、设备以及存储介质
CN113297217A (zh) * 2021-05-20 2021-08-24 广州光点信息科技有限公司 一种数据传输方法、装置及***
CN113343154B (zh) * 2021-06-29 2023-09-26 中国平安财产保险股份有限公司 页面加载方法、装置、电子设备及存储介质
CN113343154A (zh) * 2021-06-29 2021-09-03 中国平安财产保险股份有限公司 页面加载方法、装置、电子设备及存储介质
WO2023005715A1 (zh) * 2021-07-30 2023-02-02 花瓣云科技有限公司 快应用处理方法、电子设备与快应用***
CN113656720B (zh) * 2021-08-25 2024-04-16 北京达佳互联信息技术有限公司 页面展示方法、装置、电子设备及存储介质
CN113656720A (zh) * 2021-08-25 2021-11-16 北京达佳互联信息技术有限公司 页面展示方法、装置、电子设备及存储介质
CN115659087B (zh) * 2022-11-28 2023-03-17 阿里巴巴(中国)有限公司 页面渲染方法、设备及存储介质
CN115659087A (zh) * 2022-11-28 2023-01-31 阿里巴巴(中国)有限公司 页面渲染方法、***、设备、存储介质及程序产品

Similar Documents

Publication Publication Date Title
CN110442811A (zh) 一种页面的处理方法、装置、计算机设备和存储介质
KR101824222B1 (ko) 동적 컨텐츠 및 스테일 컨텐츠를 포함하는 웹사이트들의 고속 렌더링
CN103412890B (zh) 一种网页加载方法和装置
CN100535900C (zh) 用于提供异步门户页的方法和***
CN104035753A (zh) 一种双WebView展示定制页面的方法及***
US20110167332A1 (en) System and Method for Generating Web Pages
CN110442815B (zh) 页面生成方法、***、装置及计算机可读存储介质
CN106339414A (zh) 网页渲染方法及装置
WO2014071749A1 (zh) 一种基于html5协议的网页展现方法及装置
CN102792244A (zh) 用于增加浏览速度的预览功能
CN103699674A (zh) 网页保存、网页打开方法及装置和网页浏览***
CN101184105A (zh) 一种用于更新数据的客户端装置和方法
US20100229081A1 (en) Method for Providing a Navigation Element in an Application
US20170031877A1 (en) Web Page Design System
US9122484B2 (en) Method and apparatus for mashing up web applications
US20080065677A1 (en) Analyzing web site traffic
US20130124974A1 (en) System for Assembling Webpage's Region of Other Website into a Webpage of a Website and Method for the Same
CN103530338A (zh) 在计算设备上进行页面渲染的框架及生成页面的方法
CN103458065A (zh) 一种HTML5标准下基于Webkit内核的视频地址提取方法
Patel Analyzing the Impact of Next. JS on Site Performance and SEO
CN108664191B (zh) ***访问方法及装置
US20090300103A1 (en) Storage medium recording a program for rewriting uniform resource locator information
US9679073B2 (en) Webpage comprising a rules engine
CN112732254B (zh) 网页开发方法、装置、计算机设备和存储介质
CN116955861A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20191112

RJ01 Rejection of invention patent application after publication