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

本发明专利技术提供了一种基于图片流的前端加速方法。所述方法包括：将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求，其中第一次图片URL请求为原始图片的请求，第二次图片URL请求为所述原始图片的URL经页面数据处理客户端改写后的图片URL请求；所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应；其中，针对第一次图片URL请求的响应只包含图片的第一部分数据。

【技术实现步骤摘要】
一种基于图片流的前端加速方法
本专利技术涉及前端优化技术。
技术介绍
随着CDN（内容分发网络）发展越发成熟，内容缓存和分发网络给网站建设者提供了更好的服务，更好、更快捷地提供网站源内容给用户则是网站建设不变的目标。目前，常采用前端优化技术来优化网站性能。如图1所示，前端优化技术在后端源站服务器添加一个优化模块101。该优化模块101针对源站的各式资源（包括HTML、CSS、JS、图片等）进行优化加速，包括图片压缩、请求合并等等技术，减少服务器带宽压力，减少资源请求数目，降低传输的内容大小，从而提升了用户浏览网站的体验。前端优化技术可以有效地减少网页的整体加载时间。随着互联网的发展，用户需求更为交互式、动态化以及高清质量的图片，这样网页设计者就得建设更大更复杂的网页应用。而同时用户也需求网页应用的下载和运行速度能够越来越快，这是一对互相矛盾的需求，使得前端优化加速更为复杂和困难，尤其体现在无线领域等带宽不足的网络环境下。而现有的CDN和其他网页分发优化技术并不能很好的解决这个冲突矛盾。对于那些以留住用户为首要目的的网站，首页的加载显示速度显得尤为重要。用户在使用浏览器打开网页时，浏览器加载忙指示器是一项非常重要的指标。要想更快的网页加载速度，缩短用户等待时间，更为智能地流式过程化处理显得十分重要。
技术实现思路
为了解决用户需求更优质丰富的前端网页内容体验与更快的网页加载显示速度互相矛盾的问题，本专利技术提出一种基于图片流处理的加速方法。所述基于图片流的前端加速方法包括：将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求；页面数据处理客户端改写所述图片的URL并在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应；其中，第二次图片URL请求为经所述页面数据处理客户端改写后的图片URL请求；并且，针对第一次图片URL请求的响应只包含图片的第一部分数据。在一个实施例中，所述将一个图片的URL请求分多次请求发送的步骤包括以下步骤：浏览器客户端发起第一次图片URL请求；服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应，其中，在针对第一次图片URL请求的响应中插入页面数据处理代码的URL；所述浏览器客户端收到所述针对第一次图片URL请求的响应，并在页面中加载所述响应所对应的图片的第一部分数据，同时解析页面并根据所插入页面数据处理代码的URL发送页面数据处理的请求；服务器端根据服务器端配置提供的动态页面数据处理接口自动生成页面数据处理响应；浏览器客户端解析并执行所述页面数据处理响应。在一个实施例中，所述页面数据处理响应包括静态页面数据处理代码文件和所述动态页面数据处理接口，所述动态页面数据处理接口是根据所述服务器端的配置信息自动生成的，所述动态页面数据处理接口包含要进行第二次图片URL请求处理的域名。在一个实施例中，服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应的步骤包括：服务器端根据所述动态页面数据处理接口获取的信息来决定是否进行图片流处理，如果满足图片流处理条件，则所述服务器端将图片响应传送至图片格式转换装置，将图片转换成渐进式的扫描显示格式，并对转换后的图片进行切割以生成所述图片的第一部分数据。在一个实施例中，所述图片流处理条件包括：请求域名是否加速、请求用户－代理（User-Agent）是否支持图片流、请求Referer是否是加速页面。在一个实施例中，所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应的步骤包括：所述页面数据处理客户端对所述图片的URL进行改写，并在后台向服务器端发起第二次图片URL请求；所述服务器收到所述第二次图片URL请求后，经分析发现是改写后的图片URL请求，则将所述第二次图片URL请求与原始请求对应并生成针对第二次图片URL请求的响应；所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应；所述页面数据处理客户端将所述针对第二次图片URL请求的响应所对应的图片替换页面中针对第一次图片URL请求的响应所对应的图片。在一个实施例中，所述页面数据处理客户端对所述图片的URL进行改写的步骤之前包括：所述页面数据处理客户端监听浏览器客户端的下载完成事件，如果所述下载完成事件发生，则所述页面数据处理客户端对所述图片的URL进行改写。在一个实施例中，所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应后，所述方法还包括：所述页面数据处理客户端将针对第二次图片URL请求的响应所对应的图片转化为base64编码格式。在一个实施例中，所述页面数据处理代码为JavaScript代码，所述页面数据处理客户端为JavaScript客户端。在一个实施例中，所述针对第二次图片URL请求的响应包含完整的原始图片数据。本专利技术的基于图片流的前端加速方法即使在带宽不足的网络环境下仍然能提高网页加载速度，同时还能保证网页中图片的高清质量，极大改善了客户体验。附图说明本专利技术的以上
技术实现思路
以及下面的具体实施方式在结合附图阅读时会得到更好的理解。需要说明的是，附图仅作为所请求保护的专利技术的示例。在附图中，相同的附图标记代表相同或类似的元素。图1示出现有技术的网络优化技术示意图；图2示出根据本专利技术的一实施例的图片流处理流程图；图3A示出根据本专利技术的实施例的第一次图片URL请求的处理流程；图3B示出根据本专利技术的实施例的第二次图片URL请求的处理流程；以及图3C示出根据本专利技术的实施例的针对第一次图片URL请求以及第二次图片URL请求的控制与处理流程。具体实施方式以下在具体实施方式中详细叙述本专利技术的详细特征以及优点，其内容足以使任何本领域技术人员了解本专利技术的
技术实现思路
并据以实施，且根据本说明书所揭露的说明书、权利要求及附图，本领域技术人员可轻易地理解本专利技术相关的目的及优点。本专利技术的图片流处理分发方法提供了图片分层式处理和响应的方法。一方面，浏览器端不必等待显示网页内容中所需的所有完整图片数据传送并加载显示完，而是只需要一部分关键的图片数据内容，就足以满足用户下一步的交互需求，这样用户感受上就可以获得一个更快的浏览器加载体验，缩短等待时间。另一方面，完整的图像质量数据则在后台继续下载，直至最后图片显示清晰。图片流处理方法同时提供了一种特殊的图片转换装置，可以将JPEG类型的图片转化为渐进式的扫描显示格式，即progressivejpeg格式。采用渐进式的JPEG图片格式一方面支持图片进行分层显示；另一方面保证了图片渐进式的扫描显示过程。本专利技术的技术方案主要从以下两个方面来实施：（1）云端服务器来控制处理来自客户端（例如，浏览器）的图片请求。一个图片的URL（统一资源定位符）分两次请求。第一次请求是页面原始的URL请求，服务器处理请求并响应图片关键的一部分数据；第二次请求由页面数据处理客户端（例如，JavaScript客户端，简称JS客户端）控制改写原始URL，服务器处理请求并响应图片完整的质量数据。（2）页面数据处理客户端解析网页页面里需要进行图片流式处理的图片URL并保存，然后监听浏览器窗口的下载完本文档来自技高网...

【技术保护点】
一种基于图片流的前端加速方法，其特征在于，所述方法包括：将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求，其中第一次图片URL请求为原始图片的请求，第二次图片URL请求为所述原始图片的URL经页面数据处理客户端改写后的图片URL请求；所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应；其中，针对第一次图片URL请求的响应只包含图片的第一部分数据；其中，所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应的步骤包括：所述页面数据处理客户端对所述图片的URL进行改写，并在后台向服务器端发起第二次图片URL请求；所述服务器收到所述第二次图片URL请求后，经分析发现是改写后的图片URL请求，则将所述第二次图片URL请求与原始请求对应并生成针对第二次图片URL请求的响应；所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应；所述页面数据处理客户端将所述针对第二次图片URL请求的响应所对应的图片替换页面中针对第一次图片URL请求的响应所对应的图片。...

【技术特征摘要】
1.一种基于图片流的前端加速方法，其特征在于，所述方法包括：将一个图片的URL请求分多次请求发送，所述多次请求至少包括第一次图片URL请求和第二次图片URL请求，其中第一次图片URL请求为原始图片的请求，第二次图片URL请求为所述原始图片的URL经页面数据处理客户端改写后的图片URL请求；所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应；其中，针对第一次图片URL请求的响应只包含图片的第一部分数据；其中，所述页面数据处理客户端在后台控制所述多次请求，将针对第二次图片URL请求的响应覆盖替换针对第一次图片URL请求的响应的步骤包括：所述页面数据处理客户端对所述图片的URL进行改写，并在后台向服务器端发起第二次图片URL请求；所述服务器收到所述第二次图片URL请求后，经分析发现是改写后的图片URL请求，则将所述第二次图片URL请求与原始请求对应并生成针对第二次图片URL请求的响应；所述页面数据处理客户端获得所述服务器端返回的针对第二次图片URL请求的响应；所述页面数据处理客户端将所述针对第二次图片URL请求的响应所对应的图片替换页面中针对第一次图片URL请求的响应所对应的图片。2.如权利要求1所述的方法，其特征在于，所述将一个图片的URL请求分多次请求发送的步骤包括：浏览器客户端发起第一次图片URL请求；服务器端收到第一次图片URL请求并生成针对第一次图片URL请求的响应，其中，在针对第一次图片URL请求的响应中插入页面数据处理代码的URL；所述浏览器客户端收到所述针对第一次图片URL请求的响应，并在页面中加载所述响应所对应的图片的第一部分数据，同时解析页面并根据所插入页面数据处理代码的URL发送页面数据处理的请求；服务器端根据服务器端配置提供的动态页面数据...

【专利技术属性】
技术研发人员：洪珂，谢玉燕，林俊男，
申请(专利权)人：网宿科技股份有限公司，
类型：发明
国别省市：上海,31