一种基于图片流的前端加速方法

一种基于图片流的前端加速方法
【专利摘要】本发明提供了一种基于图片流的前端加速方法。所述方法包括：将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求，其中第一次图片URL请求为原始图片的请求，第二次图片URL请求为所述原始图片的URL经页面数据处理客户端改写后的图片URL请求；所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应；其中，针对第一次图片URL请求的响应只包含图片的第一部分数据。
【专利说明】一种基于图片流的前端加速方法
【技术领域】
[0001 ] 本发明涉及前端优化技术。
【背景技术】
[0002]随着CDN (内容分发网络)发展越发成熟，内容缓存和分发网络给网站建设者提供了更好的服务，更好、更快捷地提供网站源内容给用户则是网站建设不变的目标。
[0003]目前，常采用前端优化技术来优化网站性能。如图1所示，前端优化技术在后端源站服务器添加一个优化模块101。该优化模块101针对源站的各式资源(包括HTML、CSS、JS、图片等)进行优化加速，包括图片压缩、请求合并等等技术，减少服务器带宽压力，减少资源请求数目，降低传输的内容大小，从而提升了用户浏览网站的体验。
[0004]前端优化技术可以有效地减少网页的整体加载时间。随着互联网的发展，用户需求更为交互式、动态化以及高清质量的图片，这样网页设计者就得建设更大更复杂的网页应用。而同时用户也需求网页应用的下载和运行速度能够越来越快，这是一对互相矛盾的需求，使得前端优化加速更为复杂和困难，尤其体现在无线领域等带宽不足的网络环境下。
[0005]而现有的⑶N和其他网页分发优化技术并不能很好的解决这个冲突矛盾。
[0006]对于那些以留住用户为首要目的的网站，首页的加载显示速度显得尤为重要。用户在使用浏览器打开网页时，浏览器加载忙指示器是一项非常重要的指标。要想更快的网页加载速度，缩短用户等待时间，更为智能地流式过程化处理显得十分重要。

【发明内容】

[0007]为了解决用户需求更优质丰富的前端网页内容体验与更快的网页加载显示速度互相矛盾的问题，本发明提出一种基于图片流处理的加速方法。
[0008]所述基于图片流的前端加速方法包括:
[0009]将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求；
[0010]页面数据处理客户端改写所述图片的URL并在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应；
[0011]其中，第二次图片URL请求为经所述页面数据处理客户端改写后的图片URL请求；并且，针对第一次图片URL请求的响应只包含图片的第一部分数据。
[0012]在一个实施例中，所述将一个图片的URL请求分多次请求发送的步骤包括以下步骤:
[0013]浏览器客户端发起第一次图片URL请求；
[0014]服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应，其中，在针对第一次图片URL请求的响应中插入页面数据处理代码的URL ；
[0015]所述浏览器客户端收到所述针对第一次图片URL请求的响应，并在页面中加载所述响应所对应的图片的第一部分数据，同时解析页面并根据所插入页面数据处理代码的URL发送页面数据处理的请求；
[0016]服务器端根据服务器端配置提供的动态页面数据处理接口自动生成页面数据处理响应；
[0017]浏览器客户端解析并执行所述页面数据处理响应。
[0018]在一个实施例中，所述页面数据处理响应包括静态页面数据处理代码文件和所述动态页面数据处理接口，所述动态页面数据处理接口是根据所述服务器端的配置信息自动生成的，所述动态页面数据处理接口包含要进行第二次图片URL请求处理的域名。
[0019]在一个实施例中，服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应的步骤包括:
[0020]服务器端根据所述动态页面数据处理接口获取的信息来决定是否进行图片流处理，如果满足图片流处理条件，则所述服务器端将图片响应传送至图片格式转换装置，将图片转换成渐进式的扫描显示格式，并对转换后的图片进行切割以生成所述图片的第一部分数据。
[0021]在一个实施例中，所述图片流处理条件包括:请求域名是否加速、请求用户一代理(User-Agent)是否支持图片流、请求Referer是否是加速页面。
[0022]在一个实施例中，所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应的步骤包括:
[0023]所述页面数据处理客户端对所述图片的URL进行改写，并在后台向服务器端发起第二次图片URL请求；
[0024]所述服务器收到所述第二次图片URL请求后，经分析发现是改写后的图片URL请求，则将所述第二次图片URL请求与原始请求对应并生成针对第二次图片URL请求的响应；
[0025]所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应；
[0026]所述页面数据处理客户端将所述针对第二次图片URL请求的响应所对应的图片替换页面中针对第一次图片URL请求的响应所对应的图片。
[0027]在一个实施例中，所述页面数据处理客户端对所述图片的URL进行改写的步骤之前包括:
[0028]所述页面数据处理客户端监听浏览器客户端的下载完成事件，如果所述下载完成事件发生，则所述页面数据处理客户端对所述图片的URL进行改写。
[0029]在一个实施例中，所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应后,所述方法还包括:
[0030]所述页面数据处理客户端将针对第二次图片URL请求的响应所对应的图片转化为base64编码格式。
[0031]在一个实施例中，所述页面数据处理代码为JavaScript代码,所述页面数据处理客户端为JavaScript客户端。
[0032]在一个实施例中，所述针对第二次图片URL请求的响应包含完整的原始图片数据。
[0033]本发明的基于图片流的前端加速方法即使在带宽不足的网络环境下仍然能提高网页加载速度，同时还能保证网页中图片的高清质量，极大改善了客户体验。
【专利附图】

【附图说明】
[0034]本发明的以上
【发明内容】
以及下面的【具体实施方式】在结合附图阅读时会得到更好的理解。需要说明的是，附图仅作为所请求保护的发明的示例。在附图中，相同的附图标记代表相同或类似的元素。
[0035]图1示出现有技术的网络优化技术示意图；
[0036]图2示出根据本发明的一实施例的图片流处理流程图；
[0037]图3A示出根据本发明的实施例的第一次图片URL请求的处理流程；
[0038]图3B示出根据本发明的实施例的第二次图片URL请求的处理流程；以及
[0039]图3C示出根据本发明的实施例的针对第一次图片URL请求以及第二次图片URL请求的控制与处理流程。
【具体实施方式】
[0040]以下在【具体实施方式】中详细叙述本发明的详细特征以及优点，其内容足以使任何本领域技术人员了解本发明的技术内容并据以实施，且根据本说明书所揭露的说明书、权利要求及附图，本领域技术人员可轻易地理解本发明相关的目的及优点。
[0041]本发明的图片流处理分发方法提供了图片分层式处理和响应的方法。一方面，浏览器端不必等待显示网页内容中所需的所有完整图片数据传送并加载显示完，而是只需要一部分关键的图片数据内容，就足以满足用户下一步的交互需求，这样用户感受上就可以获得一个更快的浏览器加载体验，缩短等待时间。另一方面，完整的图像质量数据则在后台继续下载，直至最后图片显示清晰。
[0042]图片流处理方法同时提供了一种特殊的图片转换装置，可以将JPEG类型的图片转化为渐进式的扫描显示格式，即progressive jpeg格式。采用渐进式的JPEG图片格式一方面支持图片进行分层显示；另一方面保证了图片渐进式的扫描显示过程。
[0043]本发明的技术方案主要从以下两个方面来实施:
[0044](I)云端服务器来控制处理来自客户端(例如，浏览器)的图片请求。一个图片的URL (统一资源定位符)分两次请求。第一次请求是页面原始的URL请求，服务器处理请求并响应图片关键的一部分数据；第二次请求由页面数据处理客户端(例如，JavaScript客户端，简称JS客户端)控制改写原始URL，服务器处理请求并响应图片完整的质量数据。
[0045](2)页面数据处理客户端解析网页页面里需要进行图片流式处理的图片URL并保存，然后监听浏览器窗口的下载完成事件(即load事件)，如果load事件发生，则表明页面关键数据加载结束，于是控制发起后台XHR(XmlHttpRequest)请求——改写原始图片URL，然后发起请求。
[0046]网页页面中的图片只需要其完整响应的一部分内容就可以初步显示出来，这样减少了加载页面需要传输的数据量，加快了页面加载速度。浏览器指示页面加载完毕，然后在后台发起第二次请求，获取完整图片响应。页面数据处理客户端获得完整图片响应并覆盖第一次请求得到的部分图片响应。页面图片的显示效果变得更为完整清晰。
[0047]需要指出的是，本文中提到的JS代表JavaScript。另外，本发明可应用于JavaScript语言环境，但也可以应用于其他能进行页面数据处理的语言代码环境。
[0048]图2示出根据本发明的一实施例的图片流处理流程图。为了控制图片请求，需要在页面内插入一段页面数据处理代码。在一个实施例中，该页面数据处理代码包括，但不限于，JavaScript代码，即JS代码。页面数据处理客户端和云端服务器交互，控制图片请求和处理响应。在一个实施例中，页面数据处理客户端可以是JavaScript客户端，即JS客户端。采用外联JS代码，为JS代码提供一个URL。服务器端(即云端)根据不同客户需求，控制插入JS代码。JS代码根据服务端配置提供的接口自动生成。区分不同的客户，接口部分包含要进行图片二次请求处理的域名。浏览器获取到页面，解析JS代码并执行。JS客户端分析网页页面的内容，并监听页面load事件，控制发起二次请求，并控制请求得到的完整图片数据覆盖部分图片数据。下面依据图2的流程图进行逐步说明。
[0049]在步骤201中，在浏览器客户端地址栏输入页面URL。
[0050]在步骤202中，浏览器根据输入的页面URL发起HTTP请求。
[0051]在步骤203中，服务器端收到HTTP请求，并处理该请求并产生响应。在一个实施例中，该响应可以是一索引页面。其中，该处理包括分析配置并在响应的索引页面中插入一行〈script〉代码(JS代码),该代码中包含一个可访问的JavaScript代码的URL (参见步骤 204)。
[0052]在步骤205中，服务器端返回该响应给浏览器。
[0053]在步骤206中，浏览器端获得有关索引页面的响应，解析HTML并发起JS请求。
[0054]在步骤207中，服务端读取该JS请求，获取云端的静态JS文件，确定动态JS接口，自动生成JS响应。在一个实施例中，JS响应包括静态JS文件和动态JS接口。该静态JS文件的内容包括解析页面情况、收集页面URL、发起请求等动作。动态JS接口则涉及具体收集哪些URL、发起何种请求等。具体而言，服务器端读取云端配置(例如，页面中哪些图片需要进行处理等配置信息)，自动动态生成作为通讯接口的JS接口部分，并结合该静态JS文件，一同作为发送给客户端的JS响应。
[0055]在步骤208中，发送JS响应给客户端。
[0056]在步骤209中，浏览器客户端接收到JS客户端响应并执行。
[0057]图3示出根据本发明的实施例的整个图片流处理和分发方法的流程图。如果满足所需条件，图片流功能开启，那么一个图片URL的请求将会分为两次，一次是该图片原始URL的请求，一次是对应于原始请求的XHR请求。两次请求获得的响应构成一个图片完整的加载显示，并由JS客户端控制第二次请求的响应覆盖替换第一次请求的显示。图3A、图3B、图3C分别示出各个具体步骤并说明如下。
[0058]图3A示出根据本发明的实施例的第一次图片URL请求的处理流程。
[0059]在步骤311中，浏览器客户端发起第一次图片URL请求。该第一次图片URL请求为页面中原始的图片URL请求。
[0060]在步骤312中，服务器端收到该第一次图片URL请求并获取到响应。
[0061]在步骤313中，服务器端根据本地配置消息(即服务器端的配置)来决定是否进行图片流处理，包括请求域名是否加速、请求User-Agent是否支持图片流、请求Referer是否是加速页面。
[0062]在步骤314中，如果都满足图片流要求的条件，那么将图片响应传送至图片格式转换装置。图片格式转换装置把图片转化成渐进式的扫描显示格式，即progressive jpeg格式。
[0063]在步骤315中，服务器端将获得的图片进行分层切割，其中图片被分割为多个部分。服务器获取切割后的图片中的第一部分数据，即图片的前面一部分响应，并更新响应消
肩、O
[0064]在步骤316中，服务器端发送针对该第一次图片URL请求的响应。
[0065]图3B示出根据本发明的实施例的第二次图片URL请求的处理流程。
[0066]在步骤321中，浏览器执行的JS客户端发起URL改写后的图片的XHR请求，即第二次图片URL请求。
[0067]在步骤322中，服务器端收到该请求，通过分析发现该请求是改写后的图片XHR请求。
[0068]在步骤323中，服务器端将该请求与原始请求(第一次图片URL请求)对应并获取到响应。
[0069]在步骤324中，服务器端将图片传入格式转换装置获取progressive jpeg图片。
[0070]在步骤325中，发送完整响应。
[0071]图3C示出根据本发明的实施例的JS客户端的针对第一次图片URL请求以及第二次图片URL请求的控制与处理流程。
[0072]在步骤331中，在浏览器客户端，浏览器发起页面中的图片原始请求(即第一次图片URL请求)，JS客户端分析页面中要加速的所有图片URL。
[0073]在步骤332中，浏览器获得服务端发来的图片部分响应，即前述的切割后的图片中的第一部分数据。
[0074]在步骤333中，浏览器加载并渲染页面中的显示第一部分图片。等第一部分图片加载完毕后，触发浏览器窗口 load事件。
[0075]在步骤334中，JS客户端根据从JS接口收集分析的图片URL进行改写，即改写原始图片的URL。然后在后台发起改写原始图片URL的XHR请求(即第二次图片URL请求)。
[0076]在步骤335中，浏览器获得完整响应(即完整图像数据)，JS客户端将图片响应转化为base64编码格式。
[0077]在步骤336中，JS客户端将base64编码的图片替换页面中原始URL对应的图片。
[0078]至此，整个图片流处理的流程结束。
[0079]这里采用的术语和表述方式只是用于描述，本发明并不应局限于这些术语和表述。使用这些术语和表述并不意味着排除任何示意和描述(或其中部分)的等效特征，应认识到可能存在的各种修改也应包含在权利要求范围内。其他修改、变化和替换也可能存在。相应的，权利要求应视为覆盖所有这些等效物。
[0080]同样，需要指出的是，虽然本发明已参照当前的具体实施例来描述，但是本【技术领域】中的普通技术人员应当认识到，以上的实施例仅是用来说明本发明，在没有脱离本发明精神的情况下还可做出各种等效的变化或替换，因此，只要在本发明的实质精神范围内对上述实施例的变化、变型都将落在本申请的权利要求书的范围内。
【权利要求】
1.一种基于图片流的前端加速方法，其特征在于，所述方法包括: 将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求，其中第一次图片URL请求为原始图片的请求，第二次图片URL请求为所述原始图片的URL经页面数据处理客户端改写后的图片URL请求； 所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应； 其中，针对第一次图片URL请求的响应只包含图片的第一部分数据。
2.如权利要求1所述的方法，其特征在于，所述将一个图片的URL请求分多次请求发送的步骤包括: 浏览器客户端发起第一次图片URL请求； 服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应，其中，在针对第一次图片URL请求的响应中插入页面数据处理代码的URL ； 所述浏览器客户端收到所述针对第一次图片URL请求的响应，并在页面中加载所述响应所对应的图片的第一部分数据，同时解析页面并根据所插入页面数据处理代码的URL发送页面数据处理的请求； 服务器端根据服务器端配置提供的动态页面数据处理接口自动生成页面数据处理响应； 浏览器客户端解析并执行所述页面数据处理响应。
3.如权利要求2所述的方法，其特征在于，所述页面数据处理响应包括静态页面数据处理代码文件和所述动态页面数据处理接口，所述动态页面数据处理接口是根据所述服务器端的配置信息自动生成的，所述动态页面数据处理接口包含要进行第二次图片URL请求处理的域名。
4.如权利要求3所述的方法，其特征在于，服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应的步骤包括: 服务器端根据所述动态页面数据处理接口获取的信息来决定是否进行图片流处理，如果满足图片流处理条件，则所述服务器端将图片响应传送至图片格式转换装置，将图片转换成渐进式的扫描显示格式，并对转换后的图片进行切割以生成所述图片的第一部分数据。
5.如权利要求4所述的方法，其特征在于，所述图片流处理条件包括:请求域名是否加速、请求用户一代理(User-Agent)是否支持图片流、请求Referer是否是加速页面。
6.如权利要求1所述的方法，其特征在于，所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应的步骤包括: 所述页面数据处理客户端对所述图片的URL进行改写，并在后台向服务器端发起第二次图片URL请求； 所述服务器收到所述第二次图片URL请求后，经分析发现是改写后的图片URL请求，则将所述第二次图片URL请求与原始请求对应并生成针对第二次图片URL请求的响应； 所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应； 所述页面数据处理客户端将所述针对第二次图片URL请求的响应所对应的图片替换页面中针对第一次图片URL请求的响应所对应的图片。
7.如权利要求6所述的方法，其特征在于，所述页面数据处理客户端对所述图片的URL进行改写的步骤之前包括: 所述页面数据处理客户端监听浏览器客户端的下载完成事件，如果所述下载完成事件发生，则所述页面数据处理客户端对所述图片的URL进行改写。
8.如权利要求6所述的方法，其特征在于，所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应后，所述方法还包括: 所述页面数据处理客户端将针对第二次图片URL请求的响应所对应的图片转化为base64编码格式。
9.如权利要求2所述的方法，其特征在于，所述页面数据处理代码为JavaScript代码，所述页面数据处理客户端为JavaScript客户端。
10.如权利要求1所述的方法，其特征在于，所述针对第二次图片URL请求的响应包含完整的原始图片数 据。
【文档编号】G06F17/30GK103942307SQ201410157372
【公开日】2014年7月23日 申请日期:2014年4月18日 优先权日:2014年4月18日
【发明者】洪珂, 谢玉燕, 林俊男 申请人:网宿科技股份有限公司