CN111708600B - 页面显示方法、装置、设备及计算机可读存储介质 - Google Patents
页面显示方法、装置、设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN111708600B CN111708600B CN202010845037.XA CN202010845037A CN111708600B CN 111708600 B CN111708600 B CN 111708600B CN 202010845037 A CN202010845037 A CN 202010845037A CN 111708600 B CN111708600 B CN 111708600B
- Authority
- CN
- China
- Prior art keywords
- page
- rendered
- client
- rendering
- proxy server
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例提供一种页面显示方法、装置、设备及计算机可读存储介质,涉及云技术领域,其中,方法包括:在客户端向服务器发送页面访问请求时,代理服务器获取所述页面访问请求;其中,所述页面访问请求中包括页面标识;在预设存储器中匹配出与所述页面标识对应的已渲染页面;将所述已渲染页面作为所述页面访问请求的访问结果,发送给所述客户端,以使得所述客户端显示所述已渲染页面。通过本申请实施例,能够极大的降低页面访问时的读取与渲染时间,降低显示的白屏时间,提高用户体验。
Description
技术领域
本申请实施例涉及互联网技术领域,涉及但不限于一种页面显示方法、装置、设备及计算机可读存储介质。
背景技术
目前,浏览器访问待访问页面时的页面渲染方法主要包括:客户端渲染方式和服务端渲染方式,其中,对于客户端渲染方式,由于从浏览器获取的资源为静态资源,该静态资源不含数据信息,所以客户端渲染的白屏时间包括了在浏览器启动后从浏览器获取资源的时间、脚本执行时间、客户端与服务器交互的时间等,并且,是从服务器获取到数据后才能将获取的数据渲染到页面上。因此,相关技术中的渲染方式白屏时间较长,用户使用体验度较差。
发明内容
本申请实施例提供一种页面显示方法、装置、设备及计算机可读存储介质,涉及云技术领域,通过代理服务器将预设存储器中的已渲染页面发送给客户端,客户端可以直接显示该已渲染页面,而无需再将服务器发送的静态数据渲染到当前页面上,从而极大的降低了页面访问时的白屏时间,提高用户体验。
本申请实施例的技术方案是这样实现的:
本申请实施例提供一种页面显示方法,包括:
在客户端向服务器发送页面访问请求时,代理服务器获取所述页面访问请求;其中,所述页面访问请求中包括页面标识;
在预设存储器中匹配出与所述页面标识对应的已渲染页面;
将所述已渲染页面作为所述页面访问请求的访问结果,发送给所述客户端,以使得所述客户端显示所述已渲染页面。
本申请实施例提供一种页面显示方法,包括:
服务器在接收客户端发送页面访问请求的过程中,如果代理服务器拦截到所述页面访问请求,确定所述代理服务器在预设存储器中是否匹配出与所述页面访问请求中的页面标识对应的已渲染页面;
如果所述代理服务器未匹配出所述已渲染页面时,所述服务器接收所述代理服务器发送的静态资源获取请求,所述静态资源获取请求中包括所述页面标识;
获取与所述页面标识对应的静态资源;
将所述静态资源发送给所述客户端,以使得所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
本申请实施例提供一种页面显示方法,包括:
响应于页面访问操作,在预设存储器中匹配出与所述页面访问操作的页面标识对应的已渲染页面;
在当前界面上显示所述已渲染页面。
本申请实施例提供一种页面显示装置,包括:
第一获取模块,用于在客户端向服务器发送页面访问请求时,获取所述页面访问请求;其中,所述页面访问请求中包括页面标识;
匹配模块,用于在预设存储器中匹配出与所述页面标识对应的已渲染页面;
第一发送模块,用于将所述已渲染页面作为所述页面访问请求的访问结果,发送给所述客户端,以使得所述客户端显示所述已渲染页面。
本申请实施例提供一种页面显示装置,包括:
确定模块,用于在接收客户端发送页面访问请求的过程中,如果代理服务器拦截到所述页面访问请求,确定所述代理服务器在预设存储器中是否匹配出与所述页面访问请求中的页面标识对应的已渲染页面;
接收模块,用于如果所述代理服务器未匹配出所述已渲染页面,接收所述代理服务器发送的静态资源获取请求,所述静态资源获取请求中包括所述页面标识;
第二获取模块,用于获取与所述页面标识对应的静态资源;
第二发送模块,用于将所述静态资源发送给所述客户端,以使得所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
本申请实施例提供一种页面显示设备,包括:
存储器,用于存储可执行指令;处理器,用于执行所述存储器中存储的可执行指令时,实现上述的方法。
本申请实施例提供一种计算机可读存储介质,存储有可执行指令,用于引起处理器执行所述可执行指令时,实现上述的方法。
本申请实施例具有以下有益效果:
在客户端向服务器发送页面访问请求时,代理服务器拦截到页面访问请求,并通过代理服务器在预设存储器中获取已渲染页面,并将已渲染页面发送给客户端。如此,客户端可以直接显示该已渲染页面,而无需再将服务器发送的静态数据渲染到当前页面上,从而极大的降低了页面访问时的读取与渲染时间,降低显示的白屏时间,提高用户体验。
附图说明
图1是本申请实施例提供的页面显示系统的一个可选的架构示意图;
图2是本申请实施例提供的IaaS层、PaaS层和SaaS层的部署关系示意图;
图3是本申请实施例提供的代理服务器的结构示意图;
图4是本申请实施例提供的页面显示方法的一个可选的流程示意图;
图5是本申请实施例提供的页面显示方法的一个可选的流程示意图;
图6是本申请实施例提供的页面显示方法的一个可选的流程示意图;
图7是本申请实施例提供的页面显示方法的一个可选的流程示意图;
图8是本申请实施例提供的页面显示方法的一个可选的流程示意图;
图9是本申请实施例提供的页面显示方法的一个可选的流程示意图;
图10是本申请实施例提供的页面显示方法的流程图;
图11是本申请实施例提供的第一次和第二次请求的流程图;
图12是本申请实施例的页面显示方法的最终展示效果对比图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请作进一步地详细描述,所描述的实施例不应视为对本申请的限制,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本申请保护的范围。
在以下的描述中,涉及到“一些实施例”,其描述了所有可能实施例的子集,但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集,并且可以在不冲突的情况下相互结合。除非另有定义,本申请实施例所使用的所有的技术和科学术语与属于本申请实施例的技术领域的技术人员通常理解的含义相同。本申请实施例所使用的术语只是为了描述本申请实施例的目的,不是旨在限制本申请。
在解释本申请实施例之前,首先对本申请中涉及到的专业名词进行解释:
1)渐进式Web应用(PWA,Progressive Web APPs):运用现代的Web应用程序接口(API,Application Programming Interface),以及传统的渐进式增强策略来创建跨平台Web应用程序。这些Web应用程序无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。需要说明的是,本申请实施例的方法即可以应用于任意一种渐进式Web应用中。
2)Service Worker(一种代理服务器):本质上是Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理服务器。Service Worker旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留,在服务器上来采取适当的动作。此外Service Worker还允许访问推送通知和后台同步API。
3)客户端渲染(Client Slider Render):服务器返回静态资源,客户端在请求时,服务端不做任何处理,直接以原文件的形式返回给客户端,然后根据超级文本标记语言(HTML,Hyper Text Markup Language)上的JavaScript(简称JS)请求接口与服务器交互,然后生成文档对象模型(DOM,Document Object Model)插入HTML。
本申请实施例为了解决客户端渲染白屏时间过长的问题,利用代理服务器(例如,可以是Service Worker)可以将上次访问客户端渲染而来的HTML返回给浏览器,可以做到在脚本执行前就能够展示出页面的效果。
本申请实施例提供一种页面显示方法,首先,在客户端向服务器发送页面访问请求时,代理服务器获取所述页面访问请求;其中,页面访问请求中包括页面标识;然后,在预设存储器中匹配出与页面标识对应的已渲染页面;最后,将已渲染页面作为页面访问请求的访问结果,发送给客户端,客户端显示该已渲染页面。如此,由于客户端可以直接显示该已渲染页面,而无需再将服务器发送的静态数据渲染到当前页面上,从而极大的降低了页面访问时的读取与渲染时间,降低显示的白屏时间,提高用户体验。
下面说明本申请实施例提供的页面显示设备的示例性应用,在一种实现方式中,本申请实施例提供的页面显示设备可以实施为笔记本电脑,平板电脑,台式计算机,移动设备(例如,移动电话,便携式音乐播放器,个人数字助理,专用消息设备,便携式游戏设备)、智能机器人等任意具有屏幕显示功能的终端,在另一种实现方式中,本申请实施例提供的页面显示设备还可以实施为服务器(例如客户端对应的应用服务器或者代理服务器)。下面,将说明页面显示设备实施为代理服务器时的示例性应用。
参见图1,图1是本申请实施例提供的页面显示系统10的一个可选的架构示意图。为实现用户在终端上的客户端浏览网页时快速显示所请求的页面,本申请实施例提供的页面显示系统10中包括终端100、网络200、服务器300、代理服务器400和预设存储器401。其中,终端100上运行有应用程序,该应用程序可以是任意一种浏览器应用,在实现本申请实施例的页面显示方法时,终端100上的客户端接收用户的点击操作,该点击操作用于请求对待访问页面进行访问,客户端通过网络200向服务器300发送页面访问请求,页面访问请求中包括页面标识;此时,如果代理服务器400被注册之后,则代理服务器400拦截并获取到该页面访问请求,并在预设存储器401中匹配出与页面标识对应的已渲染页面;代理服务器400将该已渲染页面作为页面访问请求的访问结果,将已渲染页面发送给终端100。终端100在接收到已渲染页面之后,在终端的当前界面100-1上显示该已渲染页面。
本申请实施例涉及的页面显示方法还可以基于云平台并通过云技术来实现,例如,上述代理服务器400可以是云端服务器,或者,上述服务器300可以是云端服务器。
云技术(Cloud technology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来,实现数据的计算、储存、处理和共享的一种托管技术。云技术(Cloudtechnology)基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称,可以组成资源池,按需所用,灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源,如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用,将来每个物品都有可能存在自己的识别标志,都需要传输到后台系统进行逻辑处理,不同程度级别的数据将会分开处理,各类行业数据皆需要强大的系统后盾支撑,只能通过云计算来实现。
本申请实施例中,上述预设存储器401可以是云端存储器,可以采用云存储技术显示预设存储器401的功能。其中,云存储(cloud storage)是在云计算概念上延伸和发展出来的一个新的概念,分布式云存储系统(以下简称存储系统)是指通过集群应用、网格技术以及分布存储文件系统等功能,将网络中大量各种不同类型的存储设备(存储设备也称之为存储节点)通过应用软件或应用接口集合起来协同工作,共同对外提供数据存储和业务访问功能的一个存储系统。
目前,存储系统的存储方法为:创建逻辑卷,在创建逻辑卷时,就为每个逻辑卷分配物理存储空间,该物理存储空间可能是某个存储设备或者某几个存储设备的磁盘组成。客户端在某一逻辑卷上存储数据,也就是将数据存储在文件系统上,文件系统将数据分成许多部分,每一部分是一个对象,对象不仅包含数据而且还包含数据标识(ID,ID entity)等额外的信息,文件系统将每个对象分别写入该逻辑卷的物理存储空间,且文件系统会记录每个对象的存储位置信息,从而当客户端请求访问数据时,文件系统能够根据每个对象的存储位置信息让客户端对数据进行访问。
存储系统为逻辑卷分配物理存储空间的过程,具体为:按照对存储于逻辑卷的对象的容量估量(该估量往往相对于实际要存储的对象的容量有很大余量)和独立冗余磁盘阵列(RAID,Redundant Array of Independent Disk)的组别,预先将物理存储空间划分成分条,一个逻辑卷可以理解为一个分条,从而为逻辑卷分配了物理存储空间。
作为云计算的基础能力提供商,会建立云计算资源池平台,简称云平台,一般称为基础设施即服务(IaaS,Infrastructure as a Service),在资源池中部署多种类型的虚拟资源,供外部客户选择使用。云计算资源池中主要包括:计算设备(为虚拟化机器,包含操作系统)、存储设备和网络设备。按照逻辑功能划分,在IaaS层上可以部署平台即服务(PaaS,Platform as a Service)层,PaaS层之上再部署软件即服务(SaaS,Software as aService)层,也可以直接将SaaS层部署在IaaS层上。PaaS层为软件运行的平台,如数据库、web容器等。SaaS层为各式各样的业务软件,如web门户网站、短信群发器等。其中,IaaS层203、PaaS层202和SaaS层201部署关系如图2所示,一般来说,SaaS层201和PaaS层202相对于IaaS层203是上层。
图3是本申请实施例提供的代理服务器400的结构示意图,图3所示的代理服务器400包括:至少一个处理器310、存储器350、至少一个网络接口320和用户接口330。代理服务器400中的各个组件通过总线系统340耦合在一起。可理解,总线系统340用于实现这些组件之间的连接通信。总线系统340除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图3中将各种总线都标为总线系统340。
处理器310可以是一种集成电路芯片,具有信号的处理能力,例如通用处理器、数字信号处理器(DSP,Digital Signal Processor),或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等,其中,通用处理器可以是微处理器或者任何常规的处理器等。
用户接口330包括使得能够呈现媒体内容的一个或多个输出装置331,包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口330还包括一个或多个输入装置332,包括有助于用户输入的用户接口部件,比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器350可以是可移除的,不可移除的或其组合。示例性的硬件设备包括固态存储器,硬盘驱动器,光盘驱动器等。存储器350可选地包括在物理位置上远离处理器310的一个或多个存储设备。存储器350包括易失性存储器或非易失性存储器,也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM,Read Only Memory),易失性存储器可以是随机存取存储器(RAM,Random Access Memory)。本申请实施例描述的存储器350旨在包括任意适合类型的存储器。在一些实施例中,存储器350能够存储数据以支持各种操作,这些数据的示例包括程序、模块和数据结构或者其子集或超集,下面示例性说明。
操作系统351,包括用于处理各种基本系统服务和执行硬件相关任务的系统程序,例如框架层、核心库层、驱动层等,用于实现各种基础业务以及处理基于硬件的任务;
网络通信模块352,用于经由一个或多个(有线或无线)网络接口320到达其他计算设备,示例性的网络接口320包括:蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB,Universal Serial Bus)等;
输入处理模块353,用于对一个或多个来自一个或多个输入装置332之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中,本申请实施例提供的装置可以采用软件方式实现,图3示出了存储在存储器350中的一种页面显示装置354,该页面显示装置354可以是代理服务器400中的页面显示装置,其可以是程序和插件等形式的软件,包括以下软件模块:第一获取模块3541、匹配模块3542和第一发送模块3543,这些模块是逻辑上的,因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。
在另一些实施例中,上述服务器300可以具有与代理服务器400相同的结构,服务器300中的存储器中的页面显示装置可以是程序和插件等形式的软件,包括以下软件模块(图中未示出):确定模块、接收模块、第二获取模块和第二发送模块,这些模块是逻辑上的,因此根据所实现的功能可以进行任意的组合或进一步拆分。
在再一些实施例中,本申请实施例提供的装置可以采用硬件方式实现,作为示例,本申请实施例提供的装置可以是采用硬件译码处理器形式的处理器,其被编程以执行本申请实施例提供的页面显示方法,例如,硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC,Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD,Programmable Logic Device)、复杂可编程逻辑器件(CPLD,ComplexProgrammable Logic Device)、现场可编程门阵列(FPGA,Field-Programmable GateArray)或其他电子元件。
下面将结合本申请实施例提供的代理服务器400的示例性应用和实施,说明本申请实施例提供的页面显示方法。参见图4,图4是本申请实施例提供的页面显示方法的一个可选的流程示意图,将结合图4示出的步骤进行说明。
步骤S401,在客户端向服务器发送页面访问请求时,代理服务器获取页面访问请求。
这里,客户端可以是任意一种能够渲染页面的应用的客户端,例如,可以是Web应用的客户端,或者任意一种浏览器的客户端。客户端接收用户的页面访问操作,形成页面访问请求,其中,页面访问操作可以是用户在客户端当前页面上的点击操作、长按操作、选中操作和输入操作等任意一种交互操作,访问操作对应至少一个页面标识。
在一些实施例中,当客户端接收到用户的页面访问操作后,解析该页面访问操作以获取到页面标识,然后将页面标识封装于页面访问请求中,页面访问请求中包括页面标识。
在一些实施例中,页面标识包括但不限于以下至少之一:网址、网页名称、网页属性(例如视频类网页、新闻资讯类网页、图像信息类网页等)、网页更新时间、网页内容(包括但不限于网页中信息的关键词、网页中信息的正文内容等)、网页内容的作者等。
举例来说,当用户想要在浏览器上浏览某一网页的信息时,用户输入该网页的网址,则此时的访问操作为用户的输入操作,输入操作对应该网页的页面标识,其中,页面标识即该网页的网址,则浏览器进入该网址对应的网页,将该网页的内容渲染至客户端当前界面上。
代理服务器可以是客户端对应的应用程序与应用程序的服务器之间的代理服务器,也可以在网络可用时作为应用程序和网络间的代理服务器,代理服务器能够实现离线数据处理(例如离线数据缓存),也可以实现在线数据处理。本申请实施例中,代理服务器可以是独立于服务器的JS主线程的独立线程,在执行特定需要消耗大量资源的服务操作时,不会堵塞主线程。在一些实施例中,代理服务器可以是Service Worker。
本申请实施例中,在客户端向服务器发送页面访问请求时,代理服务器能够拦截获取到页面访问请求。
步骤S402,在预设存储器中匹配出与页面标识对应的已渲染页面。
这里,预设存储器用于存储已渲染页面,已渲染页面是指在当前时刻之前的历史时间段内,客户端完成渲染后得到的页面。在一些实施例中,已渲染页面可以是HTML文本,其中HTML文本可以是完整的文本,也可以是HTML片段,HTML片段是指HTML文本中的部分片段或者HTML文本中不包括起始数据包的文本片段。客户端在获取到已渲染页面之后,无需进行再次渲染,可以在当前界面上直接显示已渲染页面的页面内容。
本申请实施例中,代理服务器可以将客户端在历史时间段内渲染得到已渲染页面存储至预设存储器中,在存储的时候,不仅可以实现离线数据存储,还可以实现在线数据存储。
步骤S403,将已渲染页面作为页面访问请求的访问结果,发送给客户端,以使得客户端显示已渲染页面。
这里,由于代理服务器在预设存储器中获取到与页面标识对应的已渲染页面,因此,将该已渲染页面确定为页面访问请求所请求的待访问页面,将已渲染页面发送给客户端。客户端在接收到已渲染页面之后,在当前界面上显示该已渲染页面,此时无需再从服务器获取页面标识对应的数据,也无需再对从服务器获取的数据进行渲染。
本申请实施例提供的页面显示方法,在客户端向服务器发送页面访问请求时,代理服务器拦截到页面访问请求,并通过代理服务器在预设存储器中获取已渲染页面,并将已渲染页面发送给客户端。如此,客户端可以直接显示该已渲染页面,而无需再将服务器发送的静态数据渲染到当前页面上,从而极大的降低了页面访问时的读取与渲染时间,降低显示的白屏时间,提高用户体验。
在一些实施例中,页面显示系统中至少包括:客户端、服务器和代理服务器,其中,服务器为客户端对应的服务器,代理服务器是客户端对应的应用程序与服务器之间的代理服务器,或者是客户端对应的应用程序与浏览器之间的代理服务器,或者还可以是在网络可用时作为浏览器和网络之间的代理服务器。代理服务器能够实现在线获取已渲染页面,还可以实现离线获取已渲染页面。
图5是本申请实施例提供的页面显示方法的一个可选的流程示意图,如图5所示,方法包括以下步骤:
步骤S501,客户端接收用户的页面访问操作。
页面访问操作可以是用户在客户端当前页面上的点击操作、长按操作、选中操作和输入操作等任意一种交互操作,访问操作对应至少一个页面标识。
步骤S502,客户端根据页面访问操作确定待访问页面的页面标识。
步骤S503,客户端将页面标识封装于页面访问请求中。
步骤S504,客户端将页面访问请求发送给服务器。
步骤S505,在客户端向服务器发送页面访问请求时,代理服务器拦截并获取到页面访问请求。
步骤S506,代理服务器在预设存储器中匹配出与页面标识对应的已渲染页面。
步骤S507,将已渲染页面作为页面访问请求的访问结果,发送给客户端。
步骤S508,客户端显示已渲染页面。
本申请实施例提供中,通过页面显示系统中的客户端、服务器和代理服务器实现对用户的页面访问操作对应的页面访问请求的响应,由于代理服务器是独立于服务器的另一服务器,通过代理服务器可以在预设存储器中获取已渲染页面,并将已渲染页面发送给客户端,如此,客户端可以直接显示该已渲染页面,而无需再将服务器发送的静态数据渲染到当前页面上,从而极大的降低了页面访问时的读取与渲染时间,降低显示的白屏时间。
基于图5,图6是本申请实施例提供的页面显示方法的一个可选的流程示意图,如图6所示,步骤S506可以通过以下步骤实现:
步骤S601,判断代理服务器是否在预设存储器中匹配出与页面标识对应的已渲染页面。如果判断结果为是,则执行步骤S507;如果判断结果为否,则执行步骤S602。
步骤S602,代理服务器根据页面标识生成静态资源获取请求。
这里,由于代理服务器未在预设存储器中匹配出与页面标识对应的已渲染页面,则表面预设存储器中没有存储与页面标识对应的已渲染页面,本次的页面访问请求是对待访问页面的初次访问,因此,不能采用本申请实施例提供的方法直接获取到已渲染页面,需要从服务器获取页面标识对应的静态资源,完成对静态资源的初次渲染。
步骤S603,代理服务器向服务器发送静态资源获取请求,静态资源获取请求中包括页面标识。
这里,静态资源获取请求用于请求获取页面访问请求所访问的页面的静态资源,静态资源获取请求中包括页面标识,该页面标识与页面访问请求中的页面标识相同。
步骤S604,服务器在线获取与页面标识对应的静态资源。
这里,由于是对待访问页面进行初次访问,因此需要获取与页面标识对应的静态资源。本申请实施例中,可以在线获取静态资源,或者,可以在预设的静态资源存储单元中获取静态资源。由于本申请实施例的方法可以应用于在线浏览网页的场景,而网页的数据量较大,不能将所有的网页的静态资源均离线存储于预设的静态资源存储单元中,因此,通常情况下采用在线方式获取与页面标识对应的静态资源。
步骤S605,服务器将静态资源发送给客户端。
步骤S606,客户端通过执行JS脚本获取静态资源。
这里,JS脚本对应应用程序的JS主线程,本申请实施例中,可以通过运行JS主线程来获取静态资源。
步骤S607,客户端将静态资源对应的数据渲染至当前页面上,得到渲染页面。这里,可以采用任意一种页面渲染方式对静态资源进行渲染,以得到渲染页面。
步骤S608,客户端显示渲染页面。
请继续参照图6,在一些实施例中,在客户端得到渲染页面之后,方法还可以包括以下步骤:
步骤S609,代理服务器获取渲染页面和渲染页面的标识。
这里,渲染页面的标识可以是上述页面标识,也可以是在得到渲染页面之后,根据渲染页面确定的标识,或者也可以是根据静态资源或静态资源对应的数据确定的标识。
步骤S610,代理服务器将渲染页面与渲染页面的标识进行关联。
在一些实施例中,步骤S610可以通过以下步骤实现:
步骤S6101,获取与渲染页面对应的起始数据包。
这里,起始数据包是值形成完整的HTML文本时的头部内容对应的数据包,即完整的HTML文本的头部字节。
步骤S6102,将起始数据包与渲染页面对应的数据包进行拼接,得到拼接数据包。
这里,由于渲染页面对应的数据包对应HTML片段,是形成完整HTML文本的部分数据,因此,为了得到完整的HTML,需要将起始数据包与渲染页面的数据包进行拼接,得到完整的数据包,即拼接数据包。根据拼接数据包能够得到完整的HTML。
步骤S6103,根据拼接数据包确定出拼接后的渲染页面。
这里,可以根据拼接数据包确定出拼接后的渲染页面的HTML文本。
步骤S6104,将拼接后的渲染页面与渲染页面的标识进行关联。
这里,将拼接后的渲染页面与渲染页面的标识进行关联的目的是,为了将拼接后的渲染页面存储至预设存储器中之后,可以根据渲染页面的标识与拼接后的渲染页面之间的关联关系,快速的查找到特定标识对应的拼接后的渲染页面。
步骤S611,代理服务器将关联后的渲染页面和渲染页面的标识存储至预设存储器中。
这里,由于在进行关联的时候,是可以将拼接后的渲染页面与渲染页面的标识进行关联,因此,步骤S611中还可以是将关联后的拼接后的渲染页面和渲染页面的标识存储至预设存储器中。
本申请实施例提供的页面显示方法,将起始数据包与渲染页面的数据包进行拼接,得到完整的拼接数据包,从而得到完整的渲染页面,并将完整的渲染页面与渲染页面的标识关联之后存储于预设存储器中,如此,可以根据标识在预设存储器中查找到完整的渲染页面,对页面访问请求进行高效且准确的响应。
基于图5,图7是本申请实施例提供的页面显示方法的一个可选的流程示意图,如图7所示,在步骤S505之前,方法还可以包括以下步骤:
步骤S701,判断代理服务器是否对所实现的服务进行注册。如果判断结果为是,执行步骤S505;如果判断结果为否,执行步骤S702。
步骤S702,代理服务器获取服务注册请求。
步骤S703,代理服务器响应于服务注册请求,通过JS脚本实现对代理服务器所实现的服务的注册。
代理服务器在首次使用时需要进行注册,即注册代理服务器所实现的服务功能,当代理服务器完成注册之后,在后续的页面访问过程中,代理服务器会自动拦截页面访问请求。
本申请实施例中,可以采用任意一种注册方式实现代理服务器的注册。例如,当首次接收到页面访问请求时,判断出代理服务器并没有注册,则自动执行对代理服务器的注册,或者,用户可以手动完成对代理服务器的注册。
在一些实施例中,方法还包括以下步骤:
步骤S704,代理服务器依次判断预设存储器中的每一已渲染页面是否发生更新。如果判断出任一已渲染页面发生更新时,执行步骤S705,否则返回继续执行步骤S704。
这里,代理服务器可以定期或者不定期的对预设存储器中的已渲染页面是否发生更新进行判断,或者,可以在接收到用户的更新判断请求时,响应于用户的更新判断请求,对预设存储器中的每一已渲染页面是否发生更新进行判断,以确定出发生更新的已渲染页面。
步骤S705,获取客户端对已渲染页面进行更新渲染后的更新页面。
步骤S706,采用更新页面替换预设存储器中的已渲染页面。
步骤S707,将更新页面与页面标识进行关联,并将关联后的更新页面存储至预设存储器中。
本申请实施例中,由于预设存储器中的已渲染页面发生了更新,因此对已渲染页面进行替换,可以保证预设存储器中所存储的已渲染页面是最新的页面,或者可以将更新页面存储至预设存储器中,如此在后续的页面访问过程中,不仅可以请求访问到历史的页面,还可以请求访问到最新的页面。
基于图5,图8是本申请实施例提供的页面显示方法的一个可选的流程示意图,如图8所示,在步骤S506之后,方法还包括以下步骤:
步骤S801,当获取到页面访问请求时,代理服务器向服务器发送静态资源获取请求,静态资源获取请求中包括页面标识。
本申请实施例中,当从预设存储器中获取到已渲染页面后,如果已渲染页面已经发生了更新,且每次都是取的预设存储器中缓存的已渲染页面,那么当线上的静态资源更新时也必须要对所获取的已渲染页面进行更新,因此,可以在代理服务器从预设存储器中获取已渲染页面的同时,服务器也向客户端返回最新的静态资源。
本申请实施例中,可以在代理服务器获取到页面访问请求的同时,代理服务器向服务器发送静态资源获取请求,静态资源获取请求中包括页面标识,静态资源获取请求用于请求获取到与页面标识对应的最新的静态资源。
步骤S802,代理服务器获取服务器返回的与页面标识对应的静态资源和静态资源的第一版本号。
对于每一页面,有且仅有一个版本号,版本号可以是页面对应的应用的版本号,或者是开发人员为该页面设置的版本号。
步骤S803,获取已渲染页面的第二版本号。
步骤S804,判断第一版本号与第二版本号是否相同。如果判断结果为是,则执行步骤S507;如果判断结果为否,则执行步骤S805。
步骤S805,如果第一版本号与第二版本号不同,则采用静态资源修改预设存储器中的已渲染页面。
如果第一版本号与第二版本号不同,则表明当前的页面访问请求所访问的页面已经发生更新,即预设存储器中存储的已渲染页面已经发生了更新,因此,需要对预设存储器中存储的已渲染页面进行修改。
本申请实施例中,由于从服务器获取到了页面的最新静态资源,因此,可以根据页面的最新静态资源修改预设存储器中的已渲染页面。
S806,将修改后的已渲染页面发送给客户端。
将修改后的已渲染页面发送给客户端,客户端可以显示最新的页面。
基于图5,图9是本申请实施例提供的页面显示方法的一个可选的流程示意图,如图9所示,在步骤S506之后,方法还包括以下步骤:
步骤S901,代理服务器从服务器获取页面标识对应的第一页面数据。
这里,第一页面数据是服务器发送的与页面标识对应的静态资源中的数据。
步骤S902,代理服务器获取已渲染页面对应的第二页面数据。
这里,第二页面数据是从预设存储器中获取的与页面标识对应的已渲染页面的数据。
步骤S903,代理服务器将第一页面数据中与第二页面数据不同的数据段,确定为目标数据段。
这里,目标数据段是预设标识对应的页面发生更新的数据段。
步骤S904,代理服务器将目标数据段发送给客户端。
步骤S905,客户端将目标数据段渲染至已渲染页面中,以得到当前渲染页面。
由于第一页面数据中包括相对于第二页面数据发生更新的数据段,因此可以将发生更新的目标数据段渲染至已渲染页面中,实现对已渲染页面的更新,得到当前渲染页面。由于在渲染得到当前渲染页面时,仅对发生更新的目标数据段进行渲染,而无需渲染当前渲染页面的全部数据,因此,可以极大的减小页面更新时的渲染数据量,提高页面更新的速度,降低页面渲染的耗时。
步骤S906,客户端显示当前渲染页面。
请继续参照图9,在一些实施例中,在步骤S905之后,方法还可以包括:
步骤S907,代理服务器获取当前渲染页面。
步骤S908,代理服务器采用当前渲染页面替换预设存储器中的已渲染页面。
步骤S909,代理服务器将当前渲染页面与页面标识进行关联,并将关联后的当前渲染页面存储至预设存储器中。
本申请实施例中,由于预设存储器中的已渲染页面发生了更新,因此对已渲染页面进行替换,可以保证预设存储器中所存储的已渲染页面是最新的页面,或者可以将更新页面存储至预设存储器中,如此在后续的页面访问过程中,不仅可以请求访问到历史的页面,还可以请求访问到最新的页面。
下面,将说明本申请实施例在一个实际的应用场景中的示例性应用。
本申请实施例提供一种页面显示方法,使用Service Worker(对应上述的代理服务器)可以拦截Web请求的特点,将HTML的请求拦截,对于客户端渲染页面,在用户第一次请求时返回静态HTML文件,浏览器使用客户端渲染的方式通过与服务器交互获取数据并渲染到页面上,此时将浏览器渲染好的HTML通过与Service Worker通信的方式告知ServiceWorker,Service Worker在收到HTML片段后,将HTML片段组装为一个应答消息(Response)并缓存到Cache存储器(对应上述的预设存储器)中。在用户下次访问时,由于已经存储了上次页面渲染的结果,故先将已经缓存的上次渲染的HTML返回,以达到减少白屏时间的效果。
本申请实施例的方法,利用Service Worker,可以将上次访问客户端渲染而来的HTML返回给浏览器,可以做到在脚本执行前就能够展示出页面的效果。
本申请实施例的方法可以应用于客户端渲染的Web页面,图10是本申请实施例提供的页面显示方法的流程图,如图10所示,方法包括以下步骤:
步骤S101,客户端向服务器发送页面访问请求时,页面访问请求中包括页面标识。
本申请实施例中,页面访问请求可以是“*.html”文件。
步骤S102,判断是否已经缓存页面标识对应的页面。
如果判断结果为是,则执行步骤S103;如果判断结果为否,则执行步骤S105。
步骤S103,Service Worker向客户端返回已缓存资源。
步骤S104,在客户端展示已缓存资源对应的已渲染页面。
步骤S105,客户端向服务器请求静态资源。
步骤S106,客户端执行JS脚本。
步骤S107,客户端从服务器获取数据。
步骤S108,客户端对获取的数据进行渲染得到渲染页面,并展示渲染页面。
步骤S109,客户端将渲染页面的HTML通知Service Worker。
步骤S110,Service Worker缓存最新的HTML到Cache中。
本申请实施例中,浏览器访问任意客户端渲染的网页,Service Worker拦截到页面访问请求后查询Cache中是否已经缓存了所请求的HTML,如果没有缓存,则请求线上静态资源,此时由于没有数据则客户端的页面展示为白屏。然后,客户端执行JS脚本,并与服务器交互并获取静态数据,根据静态数据展示出对应的页面内容。最后,客户端将渲染好的HTML片段取出并通知给Service Worker,并由Service Worker将HTML片段组装为Response保存到Cache中。如果存在已经缓存的资源,则Service Worker直接将该缓存返回,由于该缓存为上次渲染的页面,所以可以直接展示出已经渲染过的页面,然后客户端会继续执行JS,并从服务器获取最新数据以更新缓存的HTML。
本申请实施例提供的方法,旨在基于Service Worker针对客户端渲染的Web页面优化白屏时间,提升用户体验。
在用户第一次访问页面时,由于没有注册Service Worker且Cache中没有缓存,所以会直接访问线上的静态资源。浏览器获取到静态资源后,加载静态资源,此时由于静态资源不包含数据信息,故展示结果仍为白屏。之后浏览器的客户端执行JS脚本,并与服务器交互获取数据,并根据返回结果把结果渲染到页面上,此时由于包含了数据,故展示结果为有内容的页面。
本申请实施例中,可以通过JS脚本注册Service Worker,待Service Worker注册成功后,将本次渲染好的HTML片段取出,通过postMessage消息告知Service Worker,Service Worker得到本次渲染的HTML片段后,将HTML片段包装为一个完整的HTML,并重新组装为一个可以直接返回给浏览器的Response,之后可以将本次的Response更新到Cache中以供下次访问时返回该结果。
在用户第二次访问页面时,由于第一次访问已经重新注册了Service Worker,因此本次请求可以被Service Worker拦截,在Service Worker拦截到该请求后,会根据本次请求的统一资源定位器(URL,Uniform Resource Locator)从Cache中匹配是否有缓存的内容,由于第一次请求保存了已经缓存了上次渲染的内容,故本次可以从Cache中匹配到上次缓存的内容,Service Worker在匹配到对应内容后,将该内容直接返回给浏览器。
浏览器在接收到对应的返回内容后,解析对应的内容,由于本次内容已经包含了上次渲染的HTML片段,故可以直接将上次的HTML片段渲染出来,用户到此就可以看到非白屏内容。之后,浏览器的客户端继续执行JS脚本,并与服务器进行交互获取最新的数据,并将最新的数据通过重新渲染的方式展示到页面上。而后,也会执行同第一次渲染相同的逻辑,取出本次渲染的HTML片段,并将其通过Service Worker更新到Cache中。
从上述方案可以看出,由于每次都是取的Cache中缓存的模板,当线上的静态资源更新时也必须要对Cache中缓存的内容进行更新。对于这种情况,本申请实施例提出了对应的解决方案:每次在静态资源构建后,在对应的HTML静态资源中注入对应资源的版本号,在Service Worker每次拦截到该请求时都会同步请求现网的资源,对比线上资源与本地Cache中的版本号。如果两者版本号相同,则返回Cache中内容,且不修改Cache内容;如果两者版本号不同,则返回Cache中内容,并修改Cache中内容,这样,用户在下次访问时就可以访问到最新版本的内容。
另外,由于获取到HTML后会继续执行JS脚本,但是因为JS脚本执行完成后仍然无法从服务器获取数据且本地未保存上次渲染的数据,所以从旧数据页面到新数据页面之间的时间仍然会存在白屏时间,造成闪动。对于这种情况,本申请实施例中,在获取对应的HTML片段之前,会将本次渲染用到的数据通过动态插入脚本的方式,将本次渲染用到的数据插入到当前渲染的HTML中,之后本次渲染所需要的数据就会跟随HTML片段被保存到Cache中。
图11是本申请实施例提供的第一次和第二次请求的流程图,如图11所示,方法包括以下步骤:
步骤S1101,浏览器请求页面,这里,浏览器的客户端可以向服务器发送页面访问请求来请求页面。
步骤S1102,Service Worker监听fetch函数,以实现对页面访问请求的拦截。
步骤S1103,判断是否存在与页面访问请求对应的缓存。
如果判断结果为否,则执行步骤S1104,如果判断结果为是,则执行步骤S1106。
步骤S1104,请求现网,以从现网中获取与页面访问请求对应的数据。
步骤S1105,将从现网中的获取的数据缓存到Cache中。
步骤S1106,Service Worker向客户端返回与页面访问请求对应的资源。
步骤S1107,客户端对获取到的HTML进行解析。
步骤S1108,客户端从全局变量获取状态(state)。
步骤S1109,客户端根据从全局变量获取的state,对解析的HTML进行页面初次渲染(first render),得到渲染页面。
步骤S1110,客户端获取公共网关接口(CGI,Common Gateway Interface)。
步骤S1111,通过所获取的CGI,对初次渲染得到的渲染页面进行更新存储(updatestore)。
步骤S1112,将获取的state存储在脚本(script)中。
步骤S1113,客户端获取当前图例分析(outerHTML)和state。
步骤S1114,通过图例分析获取HTML内容和文本,并将获取的HTML内容和文本发送给Service Worker(即SW)。
步骤S1115,Service Worker请求最新的HTML。
步骤S1116,判断所请求的HTML是否是最新的。
如果判断结果为是,则执行步骤S1117;如果判断结果为否,则执行步骤S1118。
步骤S1117,使用最新的Response。
步骤S1118,使用outerHTML更新Response。
步骤S1119,更新Cache中缓存的内容。
本申请实施例基于Service Worker可以拦截请求的特点,将每次请求的HTML通过Service Worker保存到Cache中,达到减少客户端渲染页面白屏时间的效果,增强用户体验。
图12是本申请实施例的页面显示方法的最终展示效果对比图,如图12所示,左图是没有使用本申请实施例的页面显示方法的显示效果,在客户端请求页面时会有长时间的白屏1201,右图是使用本申请实施例的页面显示方法的显示效果,在客户端请求页面后,会快速的展示出已渲染页面1202。也就是说,在相同时间内,接入本申请实施例提供的方法后的页面展示速度,要快于接入本申请实施例提供的方法前的页面展示速度。
需要说明的是,本申请实施例的方法除了可以应用于客户端渲染方式中,还可以应用于服务器渲染方式中,并且,本申请实施例的方法还可以应用于任意一种PWA应用中。
下面继续说明本申请实施例提供的页面显示装置354实施为软件模块的示例性结构,在一些实施例中,如图3所示,存储在存储器350的页面显示装置354中的软件模块可以是代理服务器400中的页面显示装置,包括:
第一获取模块3541,用于在客户端向服务器发送页面访问请求时,获取所述页面访问请求;其中,所述页面访问请求中包括页面标识;匹配模块3542,用于在预设存储器中匹配出与所述页面标识对应的已渲染页面;第一发送模块3543,用于将所述已渲染页面作为所述页面访问请求的访问结果,发送给所述客户端,以使得所述客户端显示所述已渲染页面。在一些实施例中,所述装置还包括:静态资源获取请求发送模块,用于如果在所述预设存储器中未匹配出与所述页面标识对应的已渲染页面时,向所述服务器发送静态资源获取请求,所述静态资源获取请求中包括所述页面标识;使得所述服务器将与所述页面标识对应的静态资源发送给所述客户端;其中,所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
在一些实施例中,所述装置还包括:第三获取模块,用于获取所述渲染页面和所述渲染页面的标识;关联模块,用于将所述渲染页面与所述渲染页面的标识进行关联;存储模块,用于将关联后的所述渲染页面和所述渲染页面的标识存储至所述预设存储器中。
在一些实施例中,所述关联模块还用于:获取与所述渲染页面对应的起始数据包;将所述起始数据包与所述渲染页面对应的数据包进行拼接,得到拼接数据包;根据所述拼接数据包确定出拼接后的渲染页面;将所述拼接后的渲染页面与所述渲染页面的标识进行关联;对应地,存储模块还用于:将关联后的所述拼接后的渲染页面和所述渲染页面的标识存储至所述预设存储器中。
在一些实施例中,所述装置还包括:第四获取模块,用于在所述客户端向所述服务器发送所述页面访问请求之前,如果所述代理服务器未对所实现的服务进行注册,获取服务注册请求;响应模块,用于响应于所述服务注册请求,通过JS脚本实现对所述代理服务器所实现的服务的注册;对应地,所述第一获取模块还用于:在客户端向服务器发送所述页面访问请求时,如果对所述代理服务器所实现的服务完成注册,则所述代理服务器获取所述页面访问请求。
在一些实施例中,所述装置还包括:第五获取模块,用于当检测到所述预设存储器中的任一已渲染页面发生更新时,获取所述客户端对所述已渲染页面进行更新渲染后的更新页面;替换模块,用于采用所述更新页面替换所述预设存储器中的所述已渲染页面;或者;存储模块还用于将所述更新页面与所述页面标识进行关联,并将关联后的所述更新页面存储至所述预设存储器中。
在一些实施例中,所述装置还包括:静态资源获取请求发送模块,还用于当获取到所述页面访问请求时,向所述服务器发送静态资源获取请求,所述静态资源获取请求中包括所述页面标识;第六获取模块,用于获取所述服务器返回的与所述页面标识对应的静态资源和所述静态资源的第一版本号;获取所述已渲染页面的第二版本号;修改模块,用于如果所述第一版本号与所述第二版本号不同,则采用所述静态资源修改所述预设存储器中的所述已渲染页面。
在一些实施例中,所述装置还包括:第七获取模块,用于从所述服务器获取所述页面标识对应的第一页面数据;获取所述已渲染页面对应的第二页面数据;目标数据段确定模块,用于将所述第一页面数据中与所述第二页面数据不同的数据段,确定为目标数据段;目标数据段发送模块,用于将所述目标数据段发送给所述客户端,以使得所述客户端将所述目标数据段渲染至所述已渲染页面中,以得到当前渲染页面并显示所述当前渲染页面。
在一些实施例中,所述装置还包括:第八获取模块,用于在所述客户端得到所述当前渲染页面之后,获取所述当前渲染页面;所述替换模块还用于采用所述当前渲染页面替换所述预设存储器中的所述已渲染页面;或者;所述关联模块还用于将所述当前渲染页面与所述页面标识进行关联,并将关联后的所述当前渲染页面存储至所述预设存储器中。
在另一些实施例中,上述服务器300可以具有与代理服务器400相同的结构,服务器300中的存储器中的页面显示装置可以是程序和插件等形式的软件,包括以下软件模块:确定模块,用于在接收客户端发送页面访问请求的过程中,如果代理服务器拦截到所述页面访问请求,确定所述代理服务器在预设存储器中是否匹配出与所述页面访问请求中的页面标识对应的已渲染页面;接收模块,用于如果所述代理服务器未匹配出所述已渲染页面,接收所述代理服务器发送的静态资源获取请求,所述静态资源获取请求中包括所述页面标识;第二获取模块,用于获取与所述页面标识对应的静态资源;第二发送模块,用于将所述静态资源发送给所述客户端,以使得所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
需要说明的是,本申请实施例装置的描述,与上述方法实施例的描述是类似的,具有同方法实施例相似的有益效果,因此不做赘述。对于本装置实施例中未披露的技术细节,请参照本申请方法实施例的描述而理解。
本申请实施例提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行本申请实施例上述的方法。
本申请实施例提供一种存储有可执行指令的存储介质,其中存储有可执行指令,当可执行指令被处理器执行时,将引起处理器执行本申请实施例提供的方法,例如,如图4示出的方法。
在一些实施例中,存储介质可以是计算机可读存储介质,例如,铁电存储器(FRAM,Ferromagnetic Random Access Memory)、只读存储器(ROM,Read Only Memory)、可编程只读存储器(PROM,Programmable Read Only Memory)、可擦除可编程只读存储器(EPROM,Erasable Programmable Read Only Memory)、带电可擦可编程只读存储器(EEPROM,Electrically Erasable Programmable Read Only Memory)、闪存、磁表面存储器、光盘、或光盘只读存储器(CD-ROM,Compact Disk-Read Only Memory)等存储器;也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中,可执行指令可以采用程序、软件、软件模块、脚本或代码的形式,按任意形式的编程语言(包括编译或解释语言,或者声明性或过程性语言)来编写,并且其可按任意形式部署,包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例,可执行指令可以但不一定对应于文件系统中的文件,可以可被存储在保存其它程序或数据的文件的一部分,例如,存储在超文本标记语言(HTML,Hyper TextMarkup Language)文档中的一个或多个脚本中,存储在专用于所讨论的程序的单个文件中,或者,存储在多个协同文件(例如,存储一个或多个模块、子程序或代码部分的文件)中。作为示例,可执行指令可被部署为在一个计算设备上执行,或者在位于一个地点的多个计算设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算设备上执行。
以上所述,仅为本申请的实施例而已,并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等,均包含在本申请的保护范围之内。
Claims (12)
1.一种页面显示方法,其特征在于,包括:
代理服务器获取渲染页面、与所述渲染页面对应的起始数据包和所述渲染页面的页面标识;
将所述起始数据包与所述渲染页面对应的数据包进行拼接,得到拼接数据包;
根据所述拼接数据包确定出拼接后的渲染页面;
将所述拼接后的渲染页面与所述渲染页面的页面标识进行关联;
将关联后的所述拼接后的渲染页面和所述渲染页面的页面标识存储至预设存储器中;
在客户端向服务器发送页面访问请求时,如果对所述代理服务器所实现的服务完成注册,则所述代理服务器获取所述页面访问请求;其中,通过JS脚本实现对所述代理服务器所实现的服务进行注册;所述页面访问请求中包括所述页面标识;
在所述预设存储器中匹配出与所述页面标识对应的已渲染页面,其中,所述已渲染页面是指在当前时刻之前的历史时间段内,所述客户端完成渲染后得到的所述拼接后的渲染页面;
将所述已渲染页面作为所述页面访问请求的访问结果,发送给所述客户端,其中,所述客户端在获取到所述已渲染页面之后,不进行再次渲染,且直接显示所述已渲染页面的页面内容。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
如果在所述预设存储器中未匹配出与所述页面标识对应的已渲染页面时,向所述服务器发送静态资源获取请求,所述静态资源获取请求中包括所述页面标识;
使得所述服务器将与所述页面标识对应的静态资源发送给所述客户端;其中,所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
3.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在所述客户端向所述服务器发送所述页面访问请求之前,如果所述代理服务器未对所实现的服务进行注册,获取服务注册请求;
响应于所述服务注册请求,通过JS脚本实现对所述代理服务器所实现的服务的注册。
4.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当检测到所述预设存储器中的任一已渲染页面发生更新时,获取所述客户端对所述已渲染页面进行更新渲染后的更新页面;
采用所述更新页面替换所述预设存储器中的所述已渲染页面;或者;
将所述更新页面与所述页面标识进行关联,并将关联后的所述更新页面存储至所述预设存储器中。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
当获取到所述页面访问请求时,向所述服务器发送静态资源获取请求,所述静态资源获取请求中包括所述页面标识;
获取所述服务器返回的与所述页面标识对应的静态资源和所述静态资源的第一版本号;
获取所述已渲染页面的第二版本号;
如果所述第一版本号与所述第二版本号不同,则采用所述静态资源修改所述预设存储器中的所述已渲染页面。
6.根据权利要求1至5任一项所述的方法,其特征在于,所述方法还包括:
所述代理服务器从所述服务器获取所述页面标识对应的第一页面数据;
获取所述已渲染页面对应的第二页面数据;
将所述第一页面数据中与所述第二页面数据不同的数据段,确定为目标数据段;
将所述目标数据段发送给所述客户端,以使得所述客户端将所述目标数据段渲染至所述已渲染页面中,以得到当前渲染页面并显示所述当前渲染页面。
7.根据权利要求6所述的方法,其特征在于,所述方法还包括:
在所述客户端得到所述当前渲染页面之后,所述代理服务器获取所述当前渲染页面;
采用所述当前渲染页面替换所述预设存储器中的所述已渲染页面;或者;
将所述当前渲染页面与所述页面标识进行关联,并将关联后的所述当前渲染页面存储至所述预设存储器中。
8.一种页面显示方法,其特征在于,包括:
服务器在接收客户端发送页面访问请求的过程中,如果对代理服务器所实现的服务完成注册,且如果代理服务器拦截到所述页面访问请求,确定所述代理服务器在预设存储器中是否匹配出与所述页面访问请求中的页面标识对应的已渲染页面,其中,所述已渲染页面是指在当前时刻之前的历史时间段内,所述客户端完成渲染后得到的拼接后的渲染页面,所述预设存储器中存储有关联后的所述拼接后的渲染页面和所述渲染页面的页面标识,所述拼接后的渲染页面,是通过所述渲染页面对应的数据包以及与所述渲染页面对应的起始数据包拼接得到拼接数据包所确定出来的;且通过JS脚本实现对所述代理服务器所实现的服务进行注册;
如果所述代理服务器未匹配出所述已渲染页面时,所述服务器接收所述代理服务器发送的静态资源获取请求,所述静态资源获取请求中包括所述页面标识;
获取与所述页面标识对应的静态资源;
将所述静态资源发送给所述客户端,以使得所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
9.一种页面显示装置,其特征在于,包括:
存储模块,用于通过代理服务器获取渲染页面、与所述渲染页面对应的起始数据包和所述渲染页面的页面标识;将所述起始数据包与所述渲染页面对应的数据包进行拼接,得到拼接数据包;根据所述拼接数据包确定出拼接后的渲染页面;将所述拼接后的渲染页面与所述渲染页面的页面标识进行关联;将关联后的所述拼接后的渲染页面和所述渲染页面的页面标识存储至预设存储器中;
第一获取模块,用于在客户端向服务器发送页面访问请求时,如果对所述代理服务器所实现的服务完成注册,则获取所述页面访问请求;其中,通过JS脚本实现对所述代理服务器所实现的服务进行注册;所述页面访问请求中包括所述页面标识;
匹配模块,用于在所述预设存储器中匹配出与所述页面标识对应的已渲染页面,其中,所述已渲染页面是指在当前时刻之前的历史时间段内,所述客户端完成渲染后得到的所述拼接后的渲染页面;
第一发送模块,用于将所述已渲染页面作为所述页面访问请求的访问结果,发送给所述客户端,所述客户端在获取到所述已渲染页面之后,不进行再次渲染,且直接显示所述已渲染页面的页面内容。
10.一种页面显示装置,其特征在于,包括:
确定模块,用于在接收客户端发送页面访问请求的过程中,如果对代理服务器所实现的服务完成注册,且如果代理服务器拦截到所述页面访问请求,确定所述代理服务器在预设存储器中是否匹配出与所述页面访问请求中的页面标识对应的已渲染页面,其中,通过JS脚本实现对所述代理服务器所实现的服务进行注册,所述已渲染页面是指在当前时刻之前的历史时间段内,所述客户端完成渲染后得到的拼接后的渲染页面,所述预设存储器中存储有关联后的所述拼接后的渲染页面和所述渲染页面的页面标识,所述拼接后的渲染页面,是通过所述渲染页面对应的数据包以及与所述渲染页面对应的起始数据包拼接得到拼接数据包所确定出来的;
接收模块,用于如果所述代理服务器未匹配出所述已渲染页面,接收所述代理服务器发送的静态资源获取请求,所述静态资源获取请求中包括所述页面标识;
第二获取模块,用于获取与所述页面标识对应的静态资源;
第二发送模块,用于将所述静态资源发送给所述客户端,以使得所述客户端通过执行JS脚本获取所述静态资源,并将所述静态资源对应的数据渲染至当前页面上,得到渲染页面并显示。
11.一种页面显示设备,其特征在于,包括:
存储器,用于存储可执行指令;处理器,用于执行所述存储器中存储的可执行指令时,实现权利要求1至7任一项,或者,权利要求8所述的方法。
12.一种计算机可读存储介质,其特征在于,存储有可执行指令,用于引起处理器执行所述可执行指令时,实现权利要求1至7任一项,或者,权利要求8所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010845037.XA CN111708600B (zh) | 2020-08-20 | 2020-08-20 | 页面显示方法、装置、设备及计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010845037.XA CN111708600B (zh) | 2020-08-20 | 2020-08-20 | 页面显示方法、装置、设备及计算机可读存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111708600A CN111708600A (zh) | 2020-09-25 |
CN111708600B true CN111708600B (zh) | 2021-06-11 |
Family
ID=72547408
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010845037.XA Active CN111708600B (zh) | 2020-08-20 | 2020-08-20 | 页面显示方法、装置、设备及计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111708600B (zh) |
Families Citing this family (22)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112433741B (zh) * | 2020-11-24 | 2024-05-17 | 北京奇艺世纪科技有限公司 | 页面处理方法、装置、系统、电子设备及存储介质 |
CN112417360B (zh) * | 2020-12-03 | 2023-02-07 | 武汉悦学帮网络技术有限公司 | 网页渲染方法和装置 |
CN112528274B (zh) * | 2020-12-24 | 2023-09-22 | 微医云(杭州)控股有限公司 | 数据处理方法、装置、电子设备及存储介质 |
CN112685667A (zh) * | 2020-12-29 | 2021-04-20 | 浪潮软件科技有限公司 | 数据交互方法、装置及计算机可读介质以及交互服务器 |
CN112765507B (zh) * | 2021-01-27 | 2023-12-26 | 上海淇玥信息技术有限公司 | 一种页面首屏渲染与资源加载方法、装置和电子设备 |
CN112784201B (zh) * | 2021-01-29 | 2024-05-14 | 游艺星际(北京)科技有限公司 | 网页显示方法、装置、终端及存储介质 |
CN112905175B (zh) * | 2021-02-08 | 2024-05-28 | 中国工商银行股份有限公司 | 一种页面生成方法、装置及设备 |
CN115379257B (zh) * | 2021-05-20 | 2024-05-14 | 阿里巴巴创新公司 | 一种渲染方法、装置、系统、存储介质及程序产品 |
CN113315822B (zh) * | 2021-05-21 | 2023-06-20 | 福建天泉教育科技有限公司 | 一种前后端分离架构下的页面静态化方法与系统 |
CN113536168B (zh) * | 2021-06-03 | 2023-11-14 | 中国联合网络通信集团有限公司 | 组件处理方法及设备 |
CN113326080B (zh) * | 2021-06-30 | 2023-08-15 | 中国平安人寿保险股份有限公司 | H5页面的加载方法、装置、设备及存储介质 |
CN113645062A (zh) * | 2021-07-13 | 2021-11-12 | 阿里巴巴新加坡控股有限公司 | 页面数据处理方法、装置及电子设备 |
CN113569551B (zh) * | 2021-07-16 | 2023-12-19 | 青岛海尔科技有限公司 | App页面配置的方法、设备、系统及存储介质 |
CN113626742A (zh) * | 2021-08-02 | 2021-11-09 | 维沃移动通信有限公司 | 网页生成方法、装置、电子设备及可读存储介质 |
CN113704648A (zh) * | 2021-08-31 | 2021-11-26 | 平安普惠企业管理有限公司 | 页面数据处理方法、装置、设备及存储介质 |
CN113805919B (zh) * | 2021-09-18 | 2023-08-18 | 北京百度网讯科技有限公司 | 渲染特效更新方法、装置、电子设备及存储介质 |
CN114329298B (zh) * | 2021-12-31 | 2022-11-18 | 北京海泰方圆科技股份有限公司 | 一种页面呈现方法、装置、电子设备及存储介质 |
CN114710314B (zh) * | 2022-02-21 | 2023-06-06 | 深圳腾银信息咨询有限责任公司 | 一种配置化的软件服务平台访问方法、装置、系统及介质 |
CN114581580A (zh) * | 2022-02-28 | 2022-06-03 | 维塔科技(北京)有限公司 | 渲染图像的方法、装置、存储介质及电子设备 |
CN115062255B (zh) * | 2022-06-29 | 2023-03-03 | 北京飞天经纬科技股份有限公司 | 网站适配的方法、装置、电子设备及计算机可读存储介质 |
CN115102895A (zh) * | 2022-07-14 | 2022-09-23 | 京东城市(北京)数字科技有限公司 | 页面渲染方法、装置、设备和存储介质 |
CN115033656B (zh) * | 2022-08-15 | 2023-08-08 | 海纳云物联科技有限公司 | 基于地图缓存技术的数据处理方法、装置及电子装置 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104573025A (zh) * | 2015-01-12 | 2015-04-29 | 北京京东尚科信息技术有限公司 | 一种提高页面加载速度的方法及系统 |
CN107196998A (zh) * | 2017-04-28 | 2017-09-22 | 华中科技大学 | 基于数据去重的移动Web请求处理方法、设备及系统 |
CN111367596A (zh) * | 2018-12-25 | 2020-07-03 | 阿里巴巴集团控股有限公司 | 一种实现业务数据处理的方法及装置和客户端 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
GB2507483A (en) * | 2012-10-30 | 2014-05-07 | Ibm | Hybrid server side and client side portal aggregation and rendering |
CN110309451B (zh) * | 2018-03-02 | 2021-07-23 | 拉扎斯网络科技(上海)有限公司 | 一种web预加载页面的生成方法及装置 |
CN110598135A (zh) * | 2018-05-24 | 2019-12-20 | 腾讯科技(深圳)有限公司 | 网络请求处理方法、装置、计算机可读介质及电子设备 |
CN110674435A (zh) * | 2019-09-27 | 2020-01-10 | 网易(杭州)网络有限公司 | 页面访问方法、服务器、终端、电子设备及可读存储介质 |
CN111224880A (zh) * | 2019-12-31 | 2020-06-02 | 北京健康之家科技有限公司 | 一种单页面应用的接口数据获取方法、装置及存储介质 |
-
2020
- 2020-08-20 CN CN202010845037.XA patent/CN111708600B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104573025A (zh) * | 2015-01-12 | 2015-04-29 | 北京京东尚科信息技术有限公司 | 一种提高页面加载速度的方法及系统 |
CN107196998A (zh) * | 2017-04-28 | 2017-09-22 | 华中科技大学 | 基于数据去重的移动Web请求处理方法、设备及系统 |
CN111367596A (zh) * | 2018-12-25 | 2020-07-03 | 阿里巴巴集团控股有限公司 | 一种实现业务数据处理的方法及装置和客户端 |
Also Published As
Publication number | Publication date |
---|---|
CN111708600A (zh) | 2020-09-25 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111708600B (zh) | 页面显示方法、装置、设备及计算机可读存储介质 | |
US7805670B2 (en) | Partial rendering of web pages | |
US8954589B2 (en) | Multi-process browser architecture | |
JP5805867B2 (ja) | 遠隔ブラウジングセッション管理 | |
US8612418B2 (en) | Mobile web browser for pre-loading web pages | |
US8732571B2 (en) | Methods and systems for generating and displaying a preview image of a content area | |
US9529784B2 (en) | Remote browsing and searching | |
US9646254B2 (en) | Predicting next web pages | |
CN108038134B (zh) | 页面展示的方法、装置和存储介质以及电子设备 | |
US8839087B1 (en) | Remote browsing and searching | |
US9582600B1 (en) | Cloud browser DOM-based client | |
US10002115B1 (en) | Hybrid rendering of a web page | |
US10521485B1 (en) | Measuring page value | |
US8527862B2 (en) | Methods for making ajax web applications bookmarkable and crawlable and devices thereof | |
CN111796823A (zh) | 页面更新、页面展示的方法、装置及页面维护系统 | |
US9336321B1 (en) | Remote browsing and searching | |
CN104981800A (zh) | 在页检索事件期间递送和显示页面预览 | |
US8516041B1 (en) | Pre-fetching asynchronously requested content | |
CN107590228B (zh) | 一种页面内容处理方法及移动终端 | |
US9740791B1 (en) | Browser as a service | |
US10223458B1 (en) | Automatic magazine generator for web content | |
JP2014529153A (ja) | 履歴上のブラウジングセッション管理 | |
US9092405B1 (en) | Remote browsing and searching | |
CN110249324B (zh) | 在多个网页上维护会话标识符以进行内容选择 | |
JP5937207B2 (ja) | 遠隔ブラウジングセッション管理 |
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 | ||
REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40028071 Country of ref document: HK |
|
GR01 | Patent grant | ||
GR01 | Patent grant |