CN106339414A - 网页渲染方法及装置 - Google Patents

网页渲染方法及装置 Download PDF

Info

Publication number
CN106339414A
CN106339414A CN201610663637.8A CN201610663637A CN106339414A CN 106339414 A CN106339414 A CN 106339414A CN 201610663637 A CN201610663637 A CN 201610663637A CN 106339414 A CN106339414 A CN 106339414A
Authority
CN
China
Prior art keywords
dynamic data
request
target web
server
client
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
CN201610663637.8A
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.)
1Verge Internet Technology Beijing Co Ltd
Original Assignee
1Verge Internet Technology Beijing 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 1Verge Internet Technology Beijing Co Ltd filed Critical 1Verge Internet Technology Beijing Co Ltd
Priority to CN201610663637.8A priority Critical patent/CN106339414A/zh
Publication of CN106339414A publication Critical patent/CN106339414A/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
    • 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/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/972Access to data in other repository systems, e.g. legacy data or dynamic Web page generation

Abstract

本发明涉及一种网页渲染方法及装置。所述网页渲染方法,包括:在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接;在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染;将渲染后的静态模板呈现给所述用户;向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。本发明实施例的网页渲染方法,实现缩短第一次响应用户的时间。

Description

网页渲染方法及装置
技术领域
本发明涉及互联网领域,尤其涉及一种网页渲染方法及装置。
背景技术
目前,移动终端渲染网页的架构,采用的都是后端渲染技术。后渲染技术可以是当用户发起一个网页访问行为时,浏览器或者Webview(网络视图)发起的请求会通过DNS(Domain Name System,域名系统)解析直接到达后端服务器。然后,服务器会直接生成程序代码(例如PHP、Python、Java等)去数据库或者API(Application Programming Interface,应用程序编程接口)获取渲染网页所需要的所有动态数据。在组织好数据之后,服务器统一将数据返回给浏览器或者Webview进行页渲染。
但是采用上述网页渲染方法,对用户做出响应的时间是后端所有环节时间的总和,用户等待成本高。并且,在迟迟无法获得响应的情况下,用户往往会不停的刷新网页,这样可能会导致服务器一直积压无法处理的请求而导致宕机,引起雪崩效应,直至拖垮整个网站。
发明内容
技术问题
有鉴于此,本发明要解决的技术问题是,如何实现缩短第一次响应用户的时间。
解决方案
为了解决上述技术问题,根据本发明的一实施例,提供了一种网页渲染方法,包括:
在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接;
在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染;
将渲染后的静态模板呈现给所述用户;
向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。
对于上述方法,在一种可能的实现方式中,在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接,包括:
在接收到所述用户发起的访问所述目标网页的请求的情况下,对访问所述目标网页的请求进行DNS解析,以获取所述目标网页的IP地址;
根据解析获取的IP地址向所述服务器发送握手协议;
在接收到握手成功的响应的情况下,与所述服务器成功建立通信连接。
对于上述方法,在一种可能的实现方式中,向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据,包括:
向所述服务器发送获取所述目标网页的首屏动态数据的请求;
在接收到来自所述服务器的首屏动态数据的情况下,将所述首屏动态数据呈现给所述用户。
对于上述方法,在一种可能的实现方式中,向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据,还包括:
向所述服务器发送获取所述目标网页的非首屏动态数据的请求;
在接收到来自所述服务器的非首屏动态数据的情况下,将所述非首屏动态数据呈现给所述用户。
为了解决上述技术问题,根据本发明的另一实施例,提供了一种网页渲染方法,包括:
在接收到客户端根据用户发起的访问目标网页的请求发送的通信连接请求的情况下,与所述客户端建立通信连接;
在成功建立通信连接的情况下,向所述客户端返回所述目标网页的静态模板,以使得所述客户端能够对所述静态模板进行渲染;
在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据。
对于上述方法,在一种可能的实现方式中,在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据,包括:
在接收到来自所述客户端的获取所述目标网页的首屏动态数据的请求的情况下,向所述客户端返回首屏动态数据。
对于上述方法,在一种可能的实现方式中,在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据,包括:
在接收到来自所述客户端的获取所述目标网页的非首屏动态数据的请求的情况下,向所述客户端发送非首屏动态数据。
为了解决上述技术问题,根据本发明的另一实施例,提供了一种网页渲染装置,包括:
第一连接模块,用于在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接;
渲染模块,与所述第一连接模块连接,用于在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染;
呈现模块,与所述渲染模块连接,用于将渲染后的静态模板呈现给所述用户;
获取模块,用于向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。
对于上述装置,在一种可能的实现方式中,所述第一连接模块,包括:
DNS解析单元,用于在接收到所述用户发起的访问所述目标网页的请求的情况下,对访问所述目标网页的请求进行DNS解析,以获取所述目标网页的IP地址;
握手请求单元,与所述DNS解析单元连接,用于根据解析获取的IP地址向所述服务器发送握手协议;
通信连接单元,与所述握手请求单元连接,用于在接收到握手成功的响应的情况下,与所述服务器成功建立通信连接。
对于上述装置,在一种可能的实现方式中,所述获取模块,包括:
首屏动态数据获取单元,用于向所述服务器发送获取所述目标网页的首屏动态数据的请求;
第一呈现单元,与所述首屏动态数据获取单元连接,用于在接收到来自所述服务器的首屏动态数据的情况下,将所述首屏动态数据呈现给所述用户。
对于上述装置,在一种可能的实现方式中,所述获取模块,还包括:
非首屏动态数据获取单元,用于向所述服务器发送获取所述目标网页的非首屏动态数据的请求;
第二呈现单元,与所述非首屏动态数据获取单元连接,用于在接收到来自所述服务器的非首屏动态数据的情况下,将所述非首屏动态数据呈现给所述用户。
为了解决上述技术问题,根据本发明的另一实施例,提供了一种网页渲染装置,包括:
第二连接模块,用于在接收到客户端根据用户发起的访问目标网页的请求发送的通信连接请求的情况下,与所述客户端建立通信连接;
静态模板发送模块,与所述第二连接模块连接,用于在成功建立通信连接的情况下,向所述客户端返回所述目标网页的静态模板,以使得所述客户端能够对所述静态模板进行渲染;
动态数据发送模块,用于在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据。
对于上述装置,在一种可能的实现方式中,所述动态数据发送模块,包括:
首屏动态数据发送单元,用于在接收到来自所述客户端的获取所述目标网页的首屏动态数据的请求的情况下,向所述客户端返回首屏动态数据。
对于上述装置,在一种可能的实现方式中,所述动态数据发送模块,还包括:
非首屏动态数据发送单元,用于在接收到来自所述客户端的获取所述目标网页的非首屏动态数据的请求的情况下,向所述客户端发送非首屏动态数据。
有益效果
本发明实施例的网页渲染方法,在用户发起访问目标网页的请求的情况下,通过浏览器接收来自服务器的目标网页的静态模板,并将渲染后的静态模板呈现给所述用户,实现缩短第一次响应用户的时间。
进一步地,采用异步的方式,分别获取首屏动态数据和非首屏动态数据,减少服务器的串行工作,使得渲染首屏或非首屏所需要的时间是最长的一个请求的时间,提高网页渲染的速度。
进一步地,通过浏览器接收来自服务器的首屏动态数据,实现首屏页面的快速展现,以减少用户刷新页面情况的出现,从而实现降低服务器的阻塞风险,提高服务器的健壮性。
根据下面参考附图对示例性实施例的详细说明,本发明的其它特征及方面将变得清楚。
附图说明
包括在说明书中并且构成说明书的一部分的附图与说明书一起示出了本发明的示例性实施例、特征和方面,并且用于解释本发明的原理。
图1示出根据本发明一实施例的一种网页渲染方法的流程图;
图2示出根据本发明一实施例的一种网页渲染方法的另一流程图;
图3示出根据本发明一实施例的一种网页渲染方法的另一流程图;
图4示出根据本发明一实施例的一种网页渲染方法的另一流程图;
图5示出根据本发明另一实施例的一种网页渲染方法的流程图;
图6示出根据本发明另一实施例的一种网页渲染方法的另一流程图;
图7示出根据本发明另一实施例的一种网页渲染方法的另一流程图;
图8示出根据本发明另一实施例的一种网页渲染方法的另一流程图;
图9示出根据本发明另一实施例的一种网页渲染装置的结构框图;
图10示出根据本发明另一实施例的一种网页渲染装置的另一结构框图;
图11示出根据本发明另一实施例的一种网页渲染装置的另一结构框图;
图12示出根据本发明另一实施例的一种网页渲染装置的另一结构框图;
图13示出根据本发明另一实施例的一种网页渲染装置的结构框图;
图14示出根据本发明另一实施例的一种网页渲染装置的另一结构框图;
图15示出根据本发明另一实施例的一种网页渲染设备的结构框图。
具体实施方式
以下将参考附图详细说明本发明的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面,但是除非特别指出,不必按比例绘制附图。
在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。
另外,为了更好的说明本发明,在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解,没有某些具体细节,本发明同样可以实施。在一些实例中,对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述,以便于凸显本发明的主旨。
实施例1
图1示出根据本发明一实施例的一种网页渲染方法的流程图。如图1所示,所述网页渲染方法,主要可以包括:
步骤101、在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接;
步骤102、在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染;
步骤103、将渲染后的静态模板呈现给所述用户;
步骤104、向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。
本发明实施例的网页渲染方法可以应用于各种类型的终端,包括计算机终端、移动终端等,在此不做限定。其中,移动终端可以包括例如手机、笔记本、平板电脑、车载电脑等。
在本发明实施例中,步骤101至步骤104主要由客户端执行,例如在浏览器侧完成。其中,浏览器可以包括例如IE、Safari等原生类型的浏览器,也可以包括例如Chrome、Firefox、360、QQ、猎豹、百度、搜狗等衍生类型的浏览器,或者其他类型的浏览器,在此不做限定。本发明实施例的目标网页可以包括用户发起访问请求或浏览器自动发起访问请求的各类网页。例如,用户在浏览器的地址栏中输入http://m.youku.com,则该域名对应的网页为目标网页。
本发明实施例的静态模板可以包括各种类型的html(Hypertext MarkupLanguage,超文本标记语言)静态模板,后缀可以包括.htm、.html、.shtml、.xml等。静态模板可以包括例如文本、图像、声音、Flash动画、客户端脚本和ActiveX控件及Java小程序等,其无需通过服务器的编译,可以通过浏览器渲染后而直接在浏览器上呈现。具体地,可以预先在服务器中存储用于生成目标网页所需要的各种类型的静态模板,例如,可以针对网站首页设置对应的静态模板,也可以针对不同栏目包括的多个网页设置对应的静态模板,还可以针对每个网页设置对应的静态模板。
本发明实施例的渲染可以包括将服务器响应浏览器请求返回的页面资源例如文本、图像、动画、视频和音频等,基于一定的规则例如CSS(Cascading Style Sheets,层叠样式表)语句、JS(JavaScript)语句以及浏览器自身的一些规则等,完成页面布局及绘制的过程。具体地,对静态模板进行渲染,可以包括浏览器将服务器返回的静态模板包括的页面资源例如文本、图像等,基于一定的规则例如CSS语句,完成页面布局及绘制的过程。
进一步地,浏览器第一次响应用户,呈现渲染后的静态模板,用户可以看到网页的静态结构。此外,还可以通过设置,使浏览器显示动态数据加载中的提示,例如“正在努力加载,请稍等待”。采用上述的网页渲染方法,可以缩短浏览器首次响应用户的时间。此外,减少了用户因为长时间收不到浏览器的响应而不断刷新网页的情况的出现,降低了服务器的阻塞风险,提高了服务器的健壮性。
本发明实施例的动态数据可以包括浏览器从服务器包括的数据库或API(Application Programming Interface,应用程序编程接口)获取的用于网页渲染的页面资源例如文本、图像、动画、视频和音频等,在此不做限定。具体地,浏览器的性能可以从数据的下载速度、内核的处理速度以及页面的渲染速度来进行考虑。数据的下载速度越快,内核的处理速度越快以及页面的渲染速度越快,则网页显示的越快,用户浏览网页感觉越流畅。
在一种可能的实现方式中,如图2所示,在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接(步骤101),具体可以包括:
步骤201、在接收到所述用户发起的访问所述目标网页的请求的情况下,对访问所述目标网页的请求进行DNS解析,以获取所述目标网页的IP地址;
步骤202、根据解析获取的IP地址向所述服务器发送握手协议;
步骤203、在接收到握手成功的响应的情况下,与所述服务器成功建立通信连接。
本发明实施例的DNS(域名系统,Domain Name System)解析可以是通过域名最终得到该域名对应的IP(Internet Protocol,网络之间互连的协议)地址的过程。例如,用户在浏览器的地址栏中输入http://m.youku.com,确定后浏览器把该域名发送给DNS服务器,然后由DNS服务器解析得到该域名对应的IP地址,并将该IP地址返回给浏览器。其中,每个IP地址都可以对应一个域名,域名可以表示某台计算机或计算机组的名称,由一串用点分隔的名字组成。
本发明实施例的握手协议可以包括能够使浏览器和服务器之间建立通信连接的各种规定或规则,例如HTTP协议、SSL协议等,在此不做限定。按照既定的通讯协议工作,浏览器和服务器之间能够将应用信息安全、可靠、高效地传送给彼此。
在一种可能的实现方式中,如图3所示,向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据(步骤104),具体可以包括:
步骤301、向所述服务器发送获取所述目标网页的首屏动态数据的请求;
步骤302、在接收到来自所述服务器的首屏动态数据的情况下,将所述首屏动态数据呈现给所述用户。
需要说明的是,首屏的大小与终端的显示设备相关。举例而言,对于屏幕大小为100*300的手机终端,首屏往往为浏览器例如IE窗口上部100*300的区域。首屏时间可以是加载完成首屏所需要的时间,首屏时间是网站衡量用户体验的重要指标。网页打开时,总加载时间通常比首屏时间长,而首屏时间是用户对网站体验好坏的重要因素。在首屏加载完成例如充满100*300区域的情况,用户可以看到网页内容并点击链接。
服务器在接收到来自浏览器的获取目标网页的首屏动态数据的请求的情况下,首先需要从数据库或者API获取首屏动态数据。具体地,本发明实施例的首屏动态数据和用户发起访问的目标网页相关。对于不同的网页,首屏的内容通常不相同。一般而言,首屏往往包括网页最想向用户展现的内容,在此不做限定。例如,对于视频网站首页,首屏动态数据可以包括例如热门视频的链接、不同栏目的链接、用户登录界面等内容;对于视频播放网页,首屏动态数据可以包括例如视频的播放界面、视频应用程序的推荐下载链接、视频选集栏等内容。
服务器获取首屏动态数据的过程可能成功也可能失败。在服务器获取首屏动态数据成功之后,则将该动态数据发送给浏览器,由浏览器下载后,在静态模板的基础上完成首屏渲染,并将首屏呈现给用户。在服务器获取首屏动态数据失败之后,则将获取失败的信息发送给浏览器,由浏览器向用户做出网页打开失败的体现,以便用户及时做出新的选择,例如刷新网页、离开网页等。
在一种可能的实现方式中,如图4所示,向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据(步骤104),具体可以包括:
步骤401、向所述服务器发送获取所述目标网页的非首屏动态数据的请求;
步骤402、在接收到来自所述服务器的非首屏动态数据的情况下,将所述非首屏动态数据呈现给所述用户。
本发明实施例的非首屏可以包括整个网页除了首屏以外其他的部分,首屏和非首屏一起构成了整个网页。具体地,打开整个网页所需要的时间主要包括发送静态模板的时间、首屏加载的时间以及非首屏加载的时间。在首屏加载完成之后,用户可以看到网页内容并点击链接。在用户浏览首屏的这段时间内,如果完成了部分或全部非首屏的加载,则基本不会影响用户对于整个网页内容的浏览。
需要说明的是,本领域技术人员应当理解,现有技术中有各种方式可以实现动态数据(包括首屏动态数据和非首屏动态数据)的获取,例如,可以采用串行的获取方式,也可以采用并行的获取方式,在此不做限定。采用并行的获取方式,先返回的动态数据被优先渲染,渲染的总时间可以是最长的一个请求的时间,提高网页渲染的速度。
非首屏动态数据与首屏动态数据都属于动态数据,首屏动态数据加载后呈现在首屏,非首屏动态数据加载后呈现在首屏以外其他位置。获取非首屏动态数据的过程与获取首屏动态数据的过程类似,在此不再赘述。
进一步地,本发明实施例并不限定首屏和非首屏的加载顺序,可以先加载首屏,也可以先加载非首屏,还可以同时加载首屏和非首屏。例如,用户在发起打开目标网页请求之后没有进行其他操作,此时浏览器可以先向服务器请求首屏动态数据,并优先完成首屏的加载。再例如,用户在发起打开目标网页请求之后,又将滚动栏拖拽至非首屏的位置,此时浏览器可以先向服务器请求非首屏动态数据,并优先完成非首屏的加载。
本发明实施例的网页渲染方法,在用户发起访问目标网页的请求的情况下,通过浏览器接收来自服务器的目标网页的静态模板,并将渲染后的静态模板呈现给所述用户,实现缩短第一次响应用户的时间。
进一步地,采用异步的方式,分别获取首屏动态数据和非首屏动态数据,减少服务器的串行工作,使得渲染首屏或非首屏所需要的时间是最长的一个请求的时间,提高网页渲染的速度。
进一步地,通过浏览器接收来自服务器的首屏动态数据,实现首屏页面的快速展现,以减少用户刷新页面情况的出现,从而实现降低服务器的阻塞风险,提高服务器的健壮性。
实施例2
图5示出根据本发明一实施例的一种网页渲染方法的流程图。如图5所示,所述网页渲染方法,主要可以包括:
步骤501、在接收到客户端根据用户发起的访问目标网页的请求发送的通信连接请求的情况下,与所述客户端建立通信连接;
步骤502、在成功建立通信连接的情况下,向所述客户端返回所述目标网页的静态模板,以使得所述客户端能够对所述静态模板进行渲染;
步骤503、在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据。
在本发明实施例中,步骤501至步骤503主要在服务器,例如网页服务器侧完成。其中,网页服务器可以包括例如Nginx、Apache、Lighttpd、Tomcat等类型,在此不做限定。进一步地,本发明实施例不限定服务器的数目,可以是单台服务器,也可以是集群服务器。
在一种可能的实现方式中,如图6所示,在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据(步骤503),具体可以包括:
步骤601、在接收到来自所述客户端的获取所述目标网页的首屏动态数据的请求的情况下,向所述客户端返回首屏动态数据。
在一种可能的实现方式中,如图7所示,在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据(步骤603),具体可以包括:
步骤701、在接收到来自所述客户端的获取所述目标网页的非首屏动态数据的请求的情况下,向所述客户端发送非首屏动态数据。
作为本发明的一个示例,如图8所示,网页渲染方法的具体流程如下:
S1、用户发起访问目标页面请求,或浏览器自动发起访问目标页面请求。例如,用户在浏览器的地址栏中输入http://m.youku.com。
S2、浏览器可以先将接收到的域名通过DNS解析出真正的服务器IP,然后向该服务器发起握手协议并建立连接。
S3、服务器接到浏览器握手协议后,不再是往程序代码转发,而是在握手成功后直接将事先部署在服务器上的html静态模板直接返回给浏览器。该步骤能够大大的加快首次响应用户的时间,为接下来的优化奠定了基础。
S4、浏览器接收到html静态模板后,开始渲染模板中的html内容。
S5、html静态模板可能包括文本、图像等内容,在浏览器渲染html静态模板的过程中,用户在这一步开始感受到页面的渲染行为,并且已经可以看到模板的内容,比如在浏览器的界面显示加载提示,或者一些静态结构等。
S6、步骤S6可以通过JavaScript程序实现的,采用异步的方式向服务器API发起获取数据的请求。进一步地,可以通过代码避免串行的风险。而且,可以同时并行获取所需的首屏动态数据,并给每一个请求设置毫秒级别的超时,这样不会导致服务器的阻塞,能够及时响应用户。
S7、通过步骤S6的异步加载功能,首先加载肉眼可见的第一屏模块的数据,给用户一个快速可见的首屏页面,提升用户的体验。
S8、首屏加载完之后,可以异步的加载首屏以外的模块,完成整个页面的渲染。
在上述步骤S1至步骤S8中,可以看出,步骤S3为本系统的关键。其中,静态模板可以是标准的html代码。采用上述方式相对于传统的转发给程序处理的方式的好处是:响应时间快、出错概率低、无阻塞风险。步骤S3可以采用不同的服务器进行优化,只要返回的静态模板这一结果一致就可以。
步骤S6中的前端渲染系统,同样可以由JavaScript程序,通过不同的逻辑来实现,但是最终的实质都是采用异步的方式向服务器发起多个数据获取请求。这些请求是并行的,谁先返回就先渲染谁,渲染的总时间是最长的一个请求的时间,而不是所有请求时间的总和。
本发明实施例的网页渲染方法,在用户发起访问目标网页的请求的情况下,通过浏览器接收来自服务器的目标网页的静态模板,并将渲染后的静态模板呈现给所述用户,实现缩短第一次响应用户的时间。
进一步地,采用异步的方式,分别获取首屏动态数据和非首屏动态数据,减少服务器的串行工作,使得渲染首屏或非首屏所需要的时间是最长的一个请求的时间,提高网页渲染的速度。
进一步地,通过浏览器接收来自服务器的首屏动态数据,实现首屏页面的快速展现,以减少用户刷新页面情况的出现,从而实现降低服务器的阻塞风险,提高服务器的健壮性。
实施例3
图9示出根据本发明一实施例的一种网页渲染装置的结构框图。如图9所示,所述网页渲染装置,主要可以包括:第一连接模块11,用于在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接。渲染模块13,与所述第一连接模块11连接,用于在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染。呈现模块15,与所述渲染模块13连接,用于将渲染后的静态模板呈现给所述用户。获取模块17,用于向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。具体原理和示例可以参见实施例1以及图1的相关描述。
在一种可能的实现方式中,如图10所示,所述第一连接模块11,包括:DNS解析单元111,用于在接收到所述用户发起的访问所述目标网页的请求的情况下,对访问所述目标网页的请求进行DNS解析,以获取所述目标网页的IP地址。握手请求单元113,与所述DNS解析单元111连接,用于根据解析获取的IP地址向所述服务器发送握手协议。通信连接单元115,与所述握手请求单元113连接,用于在接收到握手成功的响应的情况下,与所述服务器成功建立通信连接。具体原理和示例可以参见实施例1以及图2的相关描述。
在一种可能的实现方式中,如图11所示,所述获取模块17,包括:首屏动态数据获取单元171,用于向所述服务器发送获取所述目标网页的首屏动态数据的请求。第一呈现单元173,与所述首屏动态数据获取单元171连接,用于在接收到来自所述服务器的首屏动态数据的情况下,将所述首屏动态数据呈现给所述用户。具体原理和示例可以参见实施例1以及图3的相关描述。
在一种可能的实现方式中,如图12所示,所述获取模块,还包括:非首屏动态数据获取单元175,用于向所述服务器发送获取所述目标网页的非首屏动态数据的请求。第二呈现单元177,与所述非首屏动态数据获取单元175连接,用于在接收到来自所述服务器的非首屏动态数据的情况下,将所述非首屏动态数据呈现给所述用户。具体原理和示例可以参见实施例1以及图4的相关描述。
本发明实施例的网页渲染装置,在用户发起访问目标网页的请求的情况下,通过浏览器接收来自服务器的目标网页的静态模板,并将渲染后的静态模板呈现给所述用户,实现缩短第一次响应用户的时间。
进一步地,采用异步的方式,分别获取首屏动态数据和非首屏动态数据,减少服务器的串行工作,使得渲染首屏或非首屏所需要的时间是最长的一个请求的时间,提高网页渲染的速度。
进一步地,通过浏览器接收来自服务器的首屏动态数据,实现首屏页面的快速展现,以减少用户刷新页面情况的出现,从而实现降低服务器的阻塞风险,提高服务器的健壮性。
实施例4
图13示出根据本发明一实施例的一种网页渲染装置的结构框图。如图13所示,所述网页渲染装置,主要可以包括:第二连接模块21,用于在接收到客户端根据用户发起的访问目标网页的请求发送的通信连接请求的情况下,与所述客户端建立通信连接。静态模板发送模块23,与所述第二连接模块21连接,用于在成功建立通信连接的情况下,向所述客户端返回所述目标网页的静态模板,以使得所述客户端能够对所述静态模板进行渲染。动态数据发送模块25,用于在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据。具体原理和示例可以参见实施例2以及图5的相关描述。
在一种可能的实现方式中,如图14所示,所述动态数据发送模块25,包括:首屏动态数据发送单元251,用于在接收到来自所述客户端的获取所述目标网页的首屏动态数据的请求的情况下,向所述客户端返回首屏动态数据。具体原理和示例可以参见实施例2以及图6的相关描述。
在一种可能的实现方式中,如图14所示,所述动态数据发送模块25,还包括:非首屏动态数据发送单元253,用于在接收到来自所述客户端的获取所述目标网页的非首屏动态数据的请求的情况下,向所述客户端发送非首屏动态数据。具体原理和示例可以参见实施例2以及图7的相关描述。
本发明实施例的网页渲染装置,在用户发起访问目标网页的请求的情况下,通过浏览器接收来自服务器的目标网页的静态模板,并将渲染后的静态模板呈现给所述用户,实现缩短第一次响应用户的时间。
进一步地,采用异步的方式,分别获取首屏动态数据和非首屏动态数据,减少服务器的串行工作,使得渲染首屏或非首屏所需要的时间是最长的一个请求的时间,提高网页渲染的速度。
进一步地,通过浏览器接收来自服务器的首屏动态数据,实现首屏页面的快速展现,以减少用户刷新页面情况的出现,从而实现降低服务器的阻塞风险,提高服务器的健壮性。
实施例5
图15示出了本发明的另一个实施例的一种网页渲染设备的结构框图。所述网页渲染设备1100可以是具备计算能力的主机服务器、个人计算机PC、或者可携带的便携式计算机或终端等。本发明具体实施例并不对计算节点的具体实现做限定。
所述网页渲染设备1100包括处理器(processor)1110、通信接口(CommunicationsInterface)1120、存储器(memory)1130和总线1140。其中,处理器1110、通信接口1120、以及存储器1130通过总线1140完成相互间的通信。
通信接口1120用于与网络设备通信,其中网络设备包括例如虚拟机管理中心、共享存储等。
处理器1110用于执行程序。处理器1110可能是一个中央处理器CPU,或者是专用集成电路ASIC(Application Specific Integrated Circuit),或者是被配置成实施本发明实施例的一个或多个集成电路。
存储器1130用于存放文件。存储器1130可能包括高速RAM存储器,也可能还包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。存储器1130也可以是存储器阵列。存储器1130还可能被分块,并且所述块可按一定的规则组合成虚拟卷。
在一种可能的实施方式中,上述程序可为包括计算机操作指令的程序代码。该程序具体可用于:实现实施例1、实施例2中各步骤的操作。
本领域普通技术人员可以意识到,本文所描述的实施例中的各示例性单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件形式来实现,取决于技术方案的特定应用和设计约束条件。专业技术人员可以针对特定的应用选择不同的方法来实现所描述的功能,但是这种实现不应认为超出本发明的范围。
如果以计算机软件的形式来实现所述功能并作为独立的产品销售或使用时,则在一定程度上可认为本发明的技术方案的全部或部分(例如对现有技术做出贡献的部分)是以计算机软件产品的形式体现的。该计算机软件产品通常存储在计算机可读取的非易失性存储介质中,包括若干指令用以使得计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本发明各实施例方法的全部或部分步骤。而前述的存储介质包括U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以所述权利要求的保护范围为准。

Claims (14)

1.一种网页渲染方法,其特征在于,包括:
在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接;
在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染;
将渲染后的静态模板呈现给所述用户;
向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。
2.根据权利要求1所述的方法,其特征在于,在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接,包括:
在接收到所述用户发起的访问所述目标网页的请求的情况下,对访问所述目标网页的请求进行DNS解析,以获取所述目标网页的IP地址;
根据解析获取的IP地址向所述服务器发送握手协议;
在接收到握手成功的响应的情况下,与所述服务器成功建立通信连接。
3.根据权利要求1或2所述的方法,其特征在于,向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据,包括:
向所述服务器发送获取所述目标网页的首屏动态数据的请求;
在接收到来自所述服务器的首屏动态数据的情况下,将所述首屏动态数据呈现给所述用户。
4.根据权利要求1至3中任一项所述的方法,其特征在于,向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据,还包括:
向所述服务器发送获取所述目标网页的非首屏动态数据的请求;
在接收到来自所述服务器的非首屏动态数据的情况下,将所述非首屏动态数据呈现给所述用户。
5.一种网页渲染方法,其特征在于,包括:
在接收到客户端根据用户发起的访问目标网页的请求发送的通信连接请求的情况下,与所述客户端建立通信连接;
在成功建立通信连接的情况下,向所述客户端返回所述目标网页的静态模板,以使得所述客户端能够对所述静态模板进行渲染;
在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据。
6.根据权利要求5所述的方法,其特征在于,在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据,包括:
在接收到来自所述客户端的获取所述目标网页的首屏动态数据的请求的情况下,向所述客户端返回首屏动态数据。
7.根据权利要求5或6所述的方法,其特征在于,在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据,包括:
在接收到来自所述客户端的获取所述目标网页的非首屏动态数据的请求的情况下,向所述客户端发送非首屏动态数据。
8.一种网页渲染装置,其特征在于,包括:
第一连接模块,用于在接收到用户发起的访问目标网页的请求的情况下,与所述目标网页所归属的服务器建立通信连接;
渲染模块,与所述第一连接模块连接,用于在成功建立通信连接的情况下,接收来自所述服务器的所述目标网页的静态模板,并对所述静态模板进行渲染;
呈现模块,与所述渲染模块连接,用于将渲染后的静态模板呈现给所述用户;
获取模块,用于向所述服务器发送获取所述目标网页的动态数据的请求,以从所述服务器获取所述目标网页的动态数据。
9.根据权利要求8所述的装置,其特征在于,所述第一连接模块,包括:
DNS解析单元,用于在接收到所述用户发起的访问所述目标网页的请求的情况下,对访问所述目标网页的请求进行DNS解析,以获取所述目标网页的IP地址;
握手请求单元,与所述DNS解析单元连接,用于根据解析获取的IP地址向所述服务器发送握手协议;
通信连接单元,与所述握手请求单元连接,用于在接收到握手成功的响应的情况下,与所述服务器成功建立通信连接。
10.根据权利要求8或9所述的装置,其特征在于,所述获取模块,包括:
首屏动态数据获取单元,用于向所述服务器发送获取所述目标网页的首屏动态数据的请求;
第一呈现单元,与所述首屏动态数据获取单元连接,用于在接收到来自所述服务器的首屏动态数据的情况下,将所述首屏动态数据呈现给所述用户。
11.根据权利要求8至10中任一项所述的装置,其特征在于,所述获取模块,还包括:
非首屏动态数据获取单元,用于向所述服务器发送获取所述目标网页的非首屏动态数据的请求;
第二呈现单元,与所述非首屏动态数据获取单元连接,用于在接收到来自所述服务器的非首屏动态数据的情况下,将所述非首屏动态数据呈现给所述用户。
12.一种网页渲染装置,其特征在于,包括:
第二连接模块,用于在接收到客户端根据用户发起的访问目标网页的请求发送的通信连接请求的情况下,与所述客户端建立通信连接;
静态模板发送模块,与所述第二连接模块连接,用于在成功建立通信连接的情况下,向所述客户端返回所述目标网页的静态模板,以使得所述客户端能够对所述静态模板进行渲染;
动态数据发送模块,用于在接收到来自所述客户端的获取所述目标网页的动态数据的请求的情况下,向所述客户端返回所述目标网页的动态数据。
13.根据权利要求12所述的装置,其特征在于,所述动态数据发送模块,包括:
首屏动态数据发送单元,用于在接收到来自所述客户端的获取所述目标网页的首屏动态数据的请求的情况下,向所述客户端返回首屏动态数据。
14.根据权利要求12或13所述的装置,其特征在于,所述动态数据发送模块,还包括:
非首屏动态数据发送单元,用于在接收到来自所述客户端的获取所述目标网页的非首屏动态数据的请求的情况下,向所述客户端发送非首屏动态数据。
CN201610663637.8A 2016-08-12 2016-08-12 网页渲染方法及装置 Pending CN106339414A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610663637.8A CN106339414A (zh) 2016-08-12 2016-08-12 网页渲染方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610663637.8A CN106339414A (zh) 2016-08-12 2016-08-12 网页渲染方法及装置

Publications (1)

Publication Number Publication Date
CN106339414A true CN106339414A (zh) 2017-01-18

Family

ID=57825306

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610663637.8A Pending CN106339414A (zh) 2016-08-12 2016-08-12 网页渲染方法及装置

Country Status (1)

Country Link
CN (1) CN106339414A (zh)

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106991154A (zh) * 2017-03-29 2017-07-28 百度在线网络技术(北京)有限公司 网页渲染方法、装置、终端及服务器
CN107066430A (zh) * 2017-04-21 2017-08-18 广州爱九游信息技术有限公司 图片处理方法、装置、服务端及客户端
CN109902247A (zh) * 2019-02-14 2019-06-18 北京奇艺世纪科技有限公司 一种页面渲染的方法、装置及电子设备
CN109960552A (zh) * 2017-12-26 2019-07-02 浙江宇视科技有限公司 一种网页界面差异化渲染方法及装置
CN110020304A (zh) * 2017-11-29 2019-07-16 北京京东尚科信息技术有限公司 一种加载页面的方法和装置
CN110442811A (zh) * 2019-08-14 2019-11-12 广州虎牙科技有限公司 一种页面的处理方法、装置、计算机设备和存储介质
CN110753098A (zh) * 2019-10-12 2020-02-04 北京达佳互联信息技术有限公司 下载请求执行方法及装置、服务器和存储介质
CN110795195A (zh) * 2019-10-31 2020-02-14 百度在线网络技术(北京)有限公司 一种网页渲染方法、装置、电子设备及存储介质
CN110866204A (zh) * 2018-08-10 2020-03-06 阿里巴巴集团控股有限公司 一种页面处理方法及装置
CN110989878A (zh) * 2019-11-01 2020-04-10 百度在线网络技术(北京)有限公司 小程序中的动画展示方法、装置、电子设备及存储介质
CN111143725A (zh) * 2019-11-15 2020-05-12 北京字节跳动网络技术有限公司 页面生成方法、装置和电子设备
CN111339455A (zh) * 2018-12-18 2020-06-26 阿里巴巴集团控股有限公司 浏览器应用加载页面首屏的方法和装置
CN113158100A (zh) * 2020-01-22 2021-07-23 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置
CN113158100B (zh) * 2020-01-22 2024-05-03 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102760133A (zh) * 2011-04-28 2012-10-31 腾讯科技(深圳)有限公司 网页加载方法、系统、浏览器、终端及服务器
CN102938776A (zh) * 2012-09-28 2013-02-20 方正国际软件有限公司 基于ajax技术的动态页面处理系统
CN104468852A (zh) * 2013-09-18 2015-03-25 腾讯科技(北京)有限公司 客户端选择ip链接地址的方法、装置及系统
CN105007309A (zh) * 2015-06-29 2015-10-28 上海瀚之友信息技术服务有限公司 一种动态数据与静态界面的分离控制系统及方法
CN107526751A (zh) * 2016-06-22 2017-12-29 广州市动景计算机科技有限公司 网页的加载方法、客户端、网页服务器及可编程设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102760133A (zh) * 2011-04-28 2012-10-31 腾讯科技(深圳)有限公司 网页加载方法、系统、浏览器、终端及服务器
CN102938776A (zh) * 2012-09-28 2013-02-20 方正国际软件有限公司 基于ajax技术的动态页面处理系统
CN104468852A (zh) * 2013-09-18 2015-03-25 腾讯科技(北京)有限公司 客户端选择ip链接地址的方法、装置及系统
CN105007309A (zh) * 2015-06-29 2015-10-28 上海瀚之友信息技术服务有限公司 一种动态数据与静态界面的分离控制系统及方法
CN107526751A (zh) * 2016-06-22 2017-12-29 广州市动景计算机科技有限公司 网页的加载方法、客户端、网页服务器及可编程设备

Cited By (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106991154A (zh) * 2017-03-29 2017-07-28 百度在线网络技术(北京)有限公司 网页渲染方法、装置、终端及服务器
CN106991154B (zh) * 2017-03-29 2022-04-05 百度在线网络技术(北京)有限公司 网页渲染方法、装置、终端及服务器
CN107066430A (zh) * 2017-04-21 2017-08-18 广州爱九游信息技术有限公司 图片处理方法、装置、服务端及客户端
CN107066430B (zh) * 2017-04-21 2021-02-26 阿里巴巴(中国)有限公司 图片处理方法、装置、服务端及客户端
CN110020304A (zh) * 2017-11-29 2019-07-16 北京京东尚科信息技术有限公司 一种加载页面的方法和装置
CN109960552A (zh) * 2017-12-26 2019-07-02 浙江宇视科技有限公司 一种网页界面差异化渲染方法及装置
CN110866204A (zh) * 2018-08-10 2020-03-06 阿里巴巴集团控股有限公司 一种页面处理方法及装置
CN110866204B (zh) * 2018-08-10 2023-04-11 阿里巴巴集团控股有限公司 一种页面处理方法及装置
CN111339455A (zh) * 2018-12-18 2020-06-26 阿里巴巴集团控股有限公司 浏览器应用加载页面首屏的方法和装置
CN111339455B (zh) * 2018-12-18 2024-02-23 阿里巴巴集团控股有限公司 浏览器应用加载页面首屏的方法和装置
CN109902247A (zh) * 2019-02-14 2019-06-18 北京奇艺世纪科技有限公司 一种页面渲染的方法、装置及电子设备
CN110442811A (zh) * 2019-08-14 2019-11-12 广州虎牙科技有限公司 一种页面的处理方法、装置、计算机设备和存储介质
CN110753098A (zh) * 2019-10-12 2020-02-04 北京达佳互联信息技术有限公司 下载请求执行方法及装置、服务器和存储介质
CN110795195B (zh) * 2019-10-31 2023-09-26 百度在线网络技术(北京)有限公司 一种网页渲染方法、装置、电子设备及存储介质
CN110795195A (zh) * 2019-10-31 2020-02-14 百度在线网络技术(北京)有限公司 一种网页渲染方法、装置、电子设备及存储介质
EP3816823A1 (en) * 2019-10-31 2021-05-05 Baidu Online Network Technology (Beijing) Co., Ltd. Webpage rendering method, device, electronic apparatus and storage medium
US11144711B2 (en) 2019-10-31 2021-10-12 Baidu Online Network Technology (Beijing) Co., Ltd. Webpage rendering method, device, electronic apparatus and storage medium
CN110989878A (zh) * 2019-11-01 2020-04-10 百度在线网络技术(北京)有限公司 小程序中的动画展示方法、装置、电子设备及存储介质
CN110989878B (zh) * 2019-11-01 2021-07-20 百度在线网络技术(北京)有限公司 小程序中的动画展示方法、装置、电子设备及存储介质
CN111143725A (zh) * 2019-11-15 2020-05-12 北京字节跳动网络技术有限公司 页面生成方法、装置和电子设备
CN113158100A (zh) * 2020-01-22 2021-07-23 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置
CN113158100B (zh) * 2020-01-22 2024-05-03 阿里巴巴集团控股有限公司 页面显示方法和页面显示装置

Similar Documents

Publication Publication Date Title
CN106339414A (zh) 网页渲染方法及装置
US10956531B2 (en) Dynamic generation of mobile web experience
US10936179B2 (en) Methods and systems for web content generation
US10592319B2 (en) API notebook tool
US9645977B2 (en) Systems and methods for configuring a header and layout of a mobile version of a conventional website
JP6051337B2 (ja) クライアント側ページ処理
EP3518124A1 (en) Webpage rendering method and related device
US10909304B2 (en) Methods and systems for WYSIWYG web content generation
US8527504B1 (en) Data network content filtering using categorized filtering parameters
CN101122921B (zh) 基于ajax与html标记形成树形显示结构的方法
US10437570B2 (en) Systems, method, and non-transitory computer-readable storage media for generating code for displaying a webpage
US10542123B2 (en) System and method for generating and monitoring feedback of a published webpage as implemented on a remote client
CN104426925B (zh) 网页资源获取方法及装置
CN104035753A (zh) 一种双WebView展示定制页面的方法及系统
CN103412890A (zh) 一种网页加载方法和装置
CN103838558B (zh) 网站建站系统及方法、访问网站的方法及网页适配系统
TW201723897A (zh) 資訊顯示方法、裝置及智能終端
US10943063B1 (en) Apparatus and method to automate website user interface navigation
CN107229760B (zh) 存储介质、电子装置、网页内容的显示方法和装置
CN106936727A (zh) 一种网页显示方法及装置
CN108319474B (zh) 一种页面信息生成方法、装置和设备
CN103440340A (zh) 一种导航网页内容显示方法及装置
CN103885988A (zh) 输出内容的方法及装置、内容输出系统
US11770437B1 (en) Techniques for integrating server-side and client-side rendered content
KR101372580B1 (ko) 브라우저 ui를 제공하기 위한 방법, 단말 장치, 서버 및 컴퓨터 판독 가능한 기록 매체

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20170118

RJ01 Rejection of invention patent application after publication