[发明专利]一种小图片页面渲染方法

说明书

本发明涉及一种小图片页面渲染方法，首先，服务器将一张小图追加写入新图.XXX，同时索引.XXX追加写该图片的信息；重复上一步骤写入需要的图片数量；前端页面开始加载并解析索引文件，得到文件信息例表，包含每一张图片名字、高宽、开始字节数及总字节数；前端页面找到文件信息例表内起始图片的开始字节数计算出索引文件总字节数，向服务器发起一次网络数据字节范围请求拿到索引文件的二进制数据，前端页面将索引文件二进制图片数据分离出来，将每个数据块转成图片内存地址，交由图片标签显示出来。本发明减少浏览器请求，只对要显示的多张图片发起一次请求，减少网络开销，减小服务器连接压力、读取压力，解决存储空间占用及管理的麻烦。

技术领域

本发明涉及图片渲染领域，具体涉及一种小图片页面渲染方法。

背景技术

网页页面中包含很多网页元素，例如图片，文字还有视频等。目前Chrome、android自带浏览器及第三方浏览器(如UC浏览器)等浏览器的渲染工作有两种执行方式，一种是在主线程完成，一种是在渲染线程完成。两种方式在网页渲染时执行方式类似。在页面渲染的过程中，如发现需要渲染的图片未进行图片解码，则首先需对该图片进行解码，解码完成后再对图片进行渲染，之后才能进行下一网页元素的处理。

前端网页在渲染大量小图片时，会向服务器发起大量网络请求，导致以下缺陷：浏览器并发请求最大为6-10，因此图片不会同时显示，极大的占用网络开销，占用服务器并发连接数量，极大的占用服务器的磁盘读取开销，小图片将较大占用存储空间，碎文件难以管理。

发明内容

本发明的目的在于克服现有技术的不足，提供一种小图片页面渲染方法，服务器将多张小图片依次写入进一个文件，同时生成一个索引文件，记录每一张图片的开始字节数及字节长度等信息；前端渲染时，首先请求索引文件，解析出图片数量和所在位置，根据需要请求某一段的图片二进数据，解析这部分二进制并渲染在前端页面。

本发明的目的是通过以下技术方案来实现的：

一种小图片页面渲染方法，该方法包括以下步骤：

S1：服务器将一张小图追加写入新图.XXX，同时索引.XXX追加写该图片的名字、高宽、开始字节数及字节长度；

S2：重复上一步骤写入需要的图片数量；

S3：前端页面开始加载并解析索引文件，得到文件信息例表，包含每一张图片名字、高宽、开始字节数及总字节数；

S4：前端页面找到文件信息例表内起始图片的开始字节数，并计算出索引文件总字节数，向服务器发起一次网络数据字节范围请求，一次性拿到索引文件的二进制数据；

S5：前端页面利用已知的信息，将索引文件二进制图片数据分离出来，将每个数据块转成图片内存地址，交由图片标签显示出来。

所述索引文件包括三种情况；

索引文件是多张地址分离的图片；

索引文件是多个地址连续的图片片段；

索引文件是一个地址连续的图片集合。

进一步的，当所述索引文件是多张地址分离的图片时，前端页面根据每个图片的开始字节数和该图片的总字节数自动计算出该图片的网络数据字节范围，从而一次性同时发起多个网络数据字节范围，获得每张图片的二进制数据。

进一步的，当所述索引文件是多个地址连续的图片片段时，前端页面找到每段图片片段的起始文件的开始字节数并结合该段图片片段的总字节数，计算出每段图片片段的网络数据字节范围，从而一次性同时发起多个网络数据字节范围，获得每每段图片片段的二进制数据。