一种小图片页面渲染方法技术

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

【技术实现步骤摘要】
一种小图片页面渲染方法
本专利技术涉及图片渲染领域，具体涉及一种小图片页面渲染方法。
技术介绍
网页页面中包含很多网页元素，例如图片，文字还有视频等。目前Chrome、android自带浏览器及第三方浏览器(如UC浏览器)等浏览器的渲染工作有两种执行方式，一种是在主线程完成，一种是在渲染线程完成。两种方式在网页渲染时执行方式类似。在页面渲染的过程中，如发现需要渲染的图片未进行图片解码，则首先需对该图片进行解码，解码完成后再对图片进行渲染，之后才能进行下一网页元素的处理。前端网页在渲染大量小图片时，会向服务器发起大量网络请求，导致以下缺陷：浏览器并发请求最大为6-10，因此图片不会同时显示，极大的占用网络开销，占用服务器并发连接数量，极大的占用服务器的磁盘读取开销，小图片将较大占用存储空间，碎文件难以管理。
技术实现思路
本专利技术的目的在于克服现有技术的不足，提供一种小图片页面渲染方法，服务器将多张小图片依次写入进一个文件，同时生成一个索引文件，记录每一张图片的开始字节数及字节长度等信息；前端渲染时，首先请求索引文件，解析出图片数量和所在位置，根据需要请求某一段的图片二进数据，解析这部分本文档来自技高网...

【技术保护点】
1.一种小图片页面渲染方法，其特征在于，该方法包括以下步骤：S1：服务器将一张小图追加写入新图.XXX，同时索引.XXX追加写该图片的名字、高宽、开始字节数及字节长度；S2：重复上一步骤写入需要的图片数量；S3：前端页面开始加载并解析索引文件，得到文件信息例表，包含每一张图片名字、高宽、开始字节数及总字节数；S4：前端页面找到文件信息例表内起始图片的开始字节数，并计算出索引文件总字节数，向服务器发起一次网络数据字节范围请求，一次性拿到索引文件的二进制数据；S5：前端页面利用已知的信息，将索引文件二进制图片数据分离出来，将每个数据块转成图片内存地址，交由图片标签显示出来。

【技术特征摘要】
1.一种小图片页面渲染方法，其特征在于，该方法包括以下步骤：S1：服务器将一张小图追加写入新图.XXX，同时索引.XXX追加写该图片的名字、高宽、开始字节数及字节长度；S2：重复上一步骤写入需要的图片数量；S3：前端页面开始加载并解析索引文件，得到文件信息例表，包含每一张图片名字、高宽、开始字节数及总字节数；S4：前端页面找到文件信息例表内起始图片的开始字节数，并计算出索引文件总字节数，向服务器发起一次网络数据字节范围请求，一次性拿到索引文件的二进制数据；S5：前端页面利用已知的信息，将索引文件二进制图片数据分离出来，将每个数据块转成图片内存地址，交由图片标签显示出来。2.根据权利要求1所述的一种小图片页面渲染方法，其特征在于，所述索引文件包括三种情况；索引文件是多张地址分离的图片；索引文件是多个地址连续的图片片段；索引文件是一个地址连续的图片集合。3.根据权...

【专利技术属性】
技术研发人员：颜涛，唐尚海，
申请(专利权)人：成都华栖云科技有限公司，
类型：发明
国别省市：四川,51