发明内容
有鉴于此,本申请提供了一种基于浏览器的图片资源下载方法及装置,旨在高效地在浏览器环境中下载图片资源。
第一方面,本申请提供了一种基于浏览器的图片资源下载方法,所述方法包括:
在浏览器的主线程中生成工作者线程,所述工作者线程用于将目标数组分为多个目标子数组,所述目标数组用于存储多个图片下载地址;
根据所述多个目标子数组生成对应的多个工作者分线程;
利用所述多个工作者分线程下载图片资源,所述图片资源为所述多个目标子数组存储的图片下载地址对应的图片;
将所述图片资源返回工作者线程,以便通过所述工作者线程将所述图片资源返回给所述主线程。
可选地,所述根据所述多个目标子数组生成对应的多个工作者分线程前,还包括:
在所述工作者线程中生成可转换流,所述可转换流包括可读端和可写端;
其中,所述可写端用于接收多个工作者分线程中下载并返回的所述图片资源,并将所述图片资源分批写入所述工作者线程的可转换流中。
可选地,在所述图片资源全部下载完成后,所述将所述图片资源返回工作者线程,以便通过所述工作者线程将所述图片资源返回给所述主线程,包括:
通过所述可写端将所述图片资源写入所述工作者线程的可转换流中;
通过所述可读端读取所述工作者线程的可转换流中的所述图片资源,得到一个二进制文件;
将所述二进制文件的地址返回给所述主线程,以便所述主线程将所述二进制文件中的图片资源导出。
可选地,所述方法还包括:
在所述主线程中注册监听器,所述监听器用于监听所述工作者线程的运行状况,以便在所述监听器检测到所述工作者线程返回所述二进制文件的地址时,所述主线程根据所述二进制文件地址导出所述图片资源的压缩包。
可选地,所述多个工作者分线程包括第一工作者分线程,所述利用所述多个工作者分线程下载图片资源,还包括:
所述第一工作者分线程下载出现错误时,定义一个定时器,所述定时器用于以限定的时间间隔连续重复运行发送下载请求的代码;
利用所述定时器向第一目标子数组对应的图片下载地址重新发送图片下载请求,所述第一目标子数组为所述第一工作者分线程对应的目标子数组;
在所述定时器运行超过预先限定的次数时,则将所述第一工作者分线程设置为失败并跳过执行。
可选地,所述目标数组由浏览器主线程采用如下方式获得:
接收到图片导出指令后,向目标服务器发起图片地址获取请求;
接收目标服务器返回的目标数组。
可选地,所述多个目标子数组由所述工作者线程采用如下方式得到:
获取所述目标数组中存储的图片下载地址的总数量;
获取所述目标子数组的数量范围;
根据所述总数量和所述数量范围确定所述多个目标子数组中每个目标子数组对应的图片下载地址数量;
根据所述每个目标子数组对应的图片下载地址数量将所述目标数组分为多个目标子数组。
第二方面,本申请提供了一种基于浏览器的图片资源下载装置,所述装置包括:线程生成模块、分线程生成模块、图片资源下载模块和图片资源返回模块;
所述线程生成模块,用于在浏览器的主线程中生成工作者线程,所述工作者线程用于将目标数组分为多个目标子数组,所述目标数组用于存储多个图片下载地址;
所述分线程生成模块,用于根据所述多个目标子数组生成对应的多个工作者分线程;
所述图片资源下载模块,用于利用所述多个工作者分线程下载图片资源,所述图片资源为所述多个目标子数组存储的图片下载地址对应的图片;
所述图片资源返回模块,用于将所述图片资源返回工作者线程,以便通过所述工作者线程将所述图片资源返回给所述主线程。
可选地,所述装置还包括可转换流生成模块;
所述可转换流生成模块,用于在所述工作者线程中生成可转换流,所述可转换流包括可读端和可写端;
其中,所述可写端用于接收多个工作者分线程中下载并返回的所述图片资源,并将所述图片资源分批写入所述工作者线程的可转换流中。
可选地,所述多个工作者分线程包括第一工作者分线程,所述图片资源下载模块还用于在所述第一工作者分线程下载出现错误时,定义一个定时器,所述定时器用于以限定的时间间隔连续重复运行发送下载请求的代码;利用所述定时器向第一目标子数组对应的图片下载地址重新发送图片下载请求,所述第一目标子数组为所述第一工作者分线程对应的目标子数组;在所述定时器运行超过预先限定的次数时,则将所述第一工作者分线程设置为失败并跳过执行。
本申请提供了一种基于浏览器的图片资源下载方法及装置。该方法包括:先在浏览器的主线程中生成工作者线程,该工作者线程用于将目标数组分为多个目标子数组,该目标数组用于存储多个图片下载地址。然后,根据目标子数组生成对应的多个工作者分线程。再利用多个工作者分线程下载图片资源,该图片资源为工作者分线程对应的目标子数组存储的图片下载地址对应的图片。最后,将图片资源返回工作者线程,以便通过工作者线程将图片资源返回给主线程。这样,通过目标数组分为多个目标子数组,利用多个工作者分线程下载目标子数组对应的图片资源,实现了对图片资源进行并行下载,充分利用浏览器带宽和性能,加快了浏览器环境中的图片资源的下载速度。并且,工作者线程可以采用流模式的形式将图片资源导出,节省了浏览器的内存空间,从而提升用户体验。
具体实施方式
正如前文所述,在浏览器环境中下载并导出图片资源,传统的方法一般是在浏览器网页端接收到图片下载指令后,浏览器主线程向服务器发出请求来获取多个图片的下载地址,根据下载地址进行图片的逐一下载。同时,引用固定长度的连续内存空间来存放下载的多个图片,以便将全部下载到的图片压缩,得到最终压缩包进行导出。
然而,这种方法具有很多弊端。例如,浏览器主线程只能同时处理一种任务,当主线程在执行图片下载、打包以及导出的操作的同时,页面需要同时执行其他操作或重新渲染,则页面容易发生卡顿甚至无响应的现象。同时,由于主线程单次下载的图片数据需要连续的内存空间。在图片总数较多、总体积较大,超过了内存空间限制的情况下,容易导致下载失败或页面崩溃。并且,在主线程下载图片的过程中一旦出现错误,下载进程会被终止,用户必须从头重新开始下载。实际上,下载操作并不是只能在主线程内逐一执行的,各个文件之间的下载在互不影响的情况下,可以并行。逐一执行图片下载操作无法充分利用网络带宽,会使得图片的下载速度缓慢,从而会导致用户的使用体验不佳。
有鉴于此,本申请提供了一种基于浏览器的图片资源下载方法及装置。该方法包括:先在浏览器的主线程中生成工作者线程,该工作者线程用于将目标数组分为多个目标子数组,该目标数组用于存储多个图片下载地址。然后,根据目标子数组生成对应的多个工作者分线程。再利用多个工作者分线程下载图片资源,该图片资源为工作者分线程对应的目标子数组存储的图片下载地址对应的图片。最后,将图片资源返回工作者线程,以便通过工作者线程将图片资源返回给主线程。这样,通过目标数组分为多个目标子数组,利用多个工作者分线程下载目标子数组对应的图片资源,实现了对图片资源进行并行下载,达到了充分利用浏览器带宽和性能的效果。如此,可以加快浏览器环境中的图片资源的下载速度,从而提升用户体验。
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
参见图1,图1为本申请实施例提供的基于浏览器的图片资源下载方法的一种方法流程图,包括:
S101:在浏览器的主线程中生成工作者线程。
其中,主线程是浏览器运行大多数任务的地方。主线程用于浏览器处理用户事件和页面绘制等。默认情况下,浏览器在主线程中运行一个页面中的所有JavaScript脚本,以及呈现布局、回流、垃圾回收、渲染工作和其他执行任务,但是,由于主线程只是一个线程,所以各个工作不能同时执行,只能按照一定的先后次序执行。
其中,由于每个线程只能一次执行一个任务,因此工作者线程是主线程生成的用于下载图片资源的独立线程。其中,工作者线程为Web浏览器中的一种Worker线程,是一种独立于浏览器主线程的后台进程,可以独立地执行脚本代码。
可选地,在接收到图片资源下载指令后,浏览器主线程可以触发到预设脚本中的代码,以便自动生成或启动多个线程,作为工作者线程或工作者分线程。其中,本申请实施例中提到的“工作者线程”、“工作者分线程”等名称中的“线程”、“分线程”只是用来作为名字标识,并不代表两者之间存在先后关系。
其中,工作者线程(即Worker线程)主要起分发待下载图片资源以及图片资源的导出等作用。该工作者线程还可以用于将根据目标数组中存储的图片下载地址的数量将目标数组分为多个目标子数组。其中,目标数组为浏览器主线程获取的用于存储多个需要导出的图片的下载地址数组。
可选地,目标数组可以由浏览器主线程采用如下方式获得:接收到图片导出指令后,向目标服务器发起图片地址获取请求。接收目标服务器返回的目标数组。而目标服务器会在接收到图片地址获取请求后,通过查询用户所关联的图片地址数据,将该图片地址数据返回给浏览器主线程。在一些可能的实现方式中,也可以采用其他方式获取目标数组,均不影响本申请实施例的正常实现。
可选地,各个目标子数组中存储的图片下载地址的数量可以相同也可以不同。在一些可能的实现方式中,可以将目标数组中的图片下载地址,按照图片下载地址的数量平均分为多个目标子数组,例如,可以按照100个图片下载地址一组将目标数组拆分为多个目标子数组,均不影响本申请实施例的正式实现。
S102:根据工作者线程得到的多个目标子数组生成对应的多个工作者分线程。
其中,生成的工作者分线程为工作者线程的多个分线程,用于根据每个目标子数组中的图片下载地址请求图片资源。每个工作者分线程对应一个目标子数组。工作者分线程与工作者线程相同,都为Web浏览器中的Worker线程。工作者分线程(即Worker分线程)适用于执行费时的处理任务,可以生成多个Worker分线程并行执行费时的处理任务,从而允许浏览器主线程不会因此出现阻塞、卡顿,能够提高网页的响应速度。在一些可能的实现方式中,为了识别不同的目标子数组,可以在生成目标子数组时,给每个目标子数组添加序号标记,然后将带有序号标记的目标子数组发送给对应的工作者分线程。如此,在工作者分线程完成对图片资源的下载后,能够按照序号标记的顺序将图片资源有序地返回给工作者线程。
可选地,为了避免图片总量过大,目标子数组的数量过多,以及生成的工作者分线程的数量过多,可以人为设定目标子数组或工作者分线程的最大数量。作为举例,可以由工作者线程采用如下方式得到目标子数组:首先,获取目标数组中存储的图片下载地址的总数量。同时,获取目标子数组的数量范围。根据总数量和数量范围确定每个目标子数组对应的图片下载地址数量。根据每个目标子数组对应的图片下载地址数量将目标数组分为多个目标子数组。如此,可以根据目标数组中需要下载的图片的数量动态拆分成多个目标子数组,以此来动态决定生成的工作者分线程的数量,从而充分利用浏览器带宽的同时,也不会无限制地生成分线程从而过度耗费浏览器的资源导致浏览器崩溃。在一些可能的实现方式中,也可以采用其他方式得到目标子数组及限制工作者分线程的数量,均不影响本申请实施例的正常实现。
S103:利用多个工作者分线程下载图片资源。
其中,图片资源为目标子数组存储的图片下载地址对应的图片。图片资源包括图片下载地址中的图片数据。其中,图片资源可以包括的图片的格式有:JPEG、PSD、PNG和TIFF等等。
可选地,在第一工作者分线程下载出现错误时,可以定义一个定时器。该定时器用于以限定的时间间隔连续重复运行发送下载请求的代码。利用定时器向第一目标子数组对应的图片下载地址重新发送图片下载请求,该第一目标子数组为第一工作者分线程对应的目标子数组。如果定时器的运行次数未超过预先设定的次数,完成目标子数组对应的图片资源的下载,则第一工作者分线程下载成功。如果定时器运行超过预先限定的次数,则将第一工作者分线程设置为失败并跳过执行。如此,下载发生错误的工作者分线程不会影响其他工作者分线程,避免了一旦图片下载出现错误,下载进程就会终止的问题,用户无需重新下载全部图片,而是只可以针对下载错误的图片资源进行再次请求下载,节省了下载时间和用户等待的时间。
S104:将图片资源返回工作者线程,以便通过工作者线程将图片资源返回给主线程。
可选地,可以在全部工作者分线程完全下载完图片资源后,再将图片资源整体返回给工作者线程。可选地,可以根据各个工作者分线程对应的目标子数组的序号标识,按顺序将图片资源返回给工作者线程。
可选地,工作者线程还可以将接收到的图片资源进行打包,得到一个压缩包,将该压缩包导出。
可选地,生成多个工作者分线程前,还可以在工作者线程中生成可转换流,该可转换流可以包括可读端和可写端。该可写端可以从多个工作者分线程中读取下载的图片资源,并将图片资源分批返回工作者线程的可转换流中。在一些可能的实现方式中,可以采用如下方式将图片资源返回工作者线程后进行压缩打包,并传送给浏览器主线程:首先,通过可写端将图片资源写入工作者线程的可转换流中,后通过可读端读取工作者线程的可转换流中的图片资源,得到一个二进制文件。将二进制文件的地址返回给主线程,以便主线程将二进制文件中的图片资源导出。如此,将图片资源以流模式进行传输,不受连续内存空间的限制,可以无需在连续的内存空间存放全部的图片资源,避免了因为图片资源的数量或体积过大以及浏览器的内存空间不足导致图片资源导出失败的问题。当然,也可以采用其他方式压缩图片资源,均不影响本申请实施例的正常实现。
在一些可能的实现方式中,还可以在主线程中注册监听器,该监听器用于监听工作者线程的运行状况,以便在监听器检测到工作者线程返回二进制文件的地址时,主线程根据二进制文件地址导出图片资源的压缩包。
本申请实施例通过目标数组分为多个目标子数组,利用多个工作者分线程下载目标子数组对应的图片资源,实现了对图片资源进行并行下载,达到了充分利用浏览器带宽和性能的效果。如此,可以加快浏览器环境中的图片资源的下载速度,从而提升用户体验。
上面介绍了本申请实施例提供的基于浏览器的图片资源下载方法,下面结合具体的应用场景,对该基于浏览器的图片资源下载方法做示例性的说明。
参见图2,该图为本申请实施例提供的基于浏览器的图片资源下载方法的一种方法流程图,该方法包括:
S201:主线程向服务器发起获取图片地址数组的请求。
其中,主线程在本实施例中用于响应用户的图片导出操作、获取图片地址数组和导出最终压缩包。
其中,服务器为网络环境下为客户机提供某种服务的专用计算机。服务器安装有网络操作系统和各种服务器应用系统软件的计算机。服务器具有高速CPU运算能力、长时间可靠运行、强大I/O外部数据吞吐能力以及更好的扩展性。在实际应用场景中,可以分为多类服务器。例如,在购房报名系统,置业顾问在报名系统后台对购房者上传的相关图片进行审核需要导出大量图片时,此时的服务器为购房报名系统后台服务器,在一些可能的实现方式中,也可以为其他服务器,都不影响本申请实施例的正常实现。
S202:主线程获得图片地址数组。
S203:主线程生成总Worker线程。
其中,Web Worker可以为JavaScript创造多线程环境,允许主线程生成其他Worker线程,将一些任务分配给后者运行。在主线程运行的同时,生成的Worker线程可以在后台运行,两者互不干扰。等到Worker线程完成计算任务,再把结果返回给主线程。
S204:主线程将图片地址数组发送给总Worker线程。
可选地,主线程可以同时注册一个监听器,来实时监听总Worker线程的状态。其中,监听器是一种用于捕获或响应特定事件、监听特定对象的状态变化的代码实现。通过注册监听器,我们可以指定在事件触发或特定对象的状态发生变化时,执行特定代码。
S205:总Worker线程将得到的图片地址数组分为多个带有序号标记的小数组。
可选地,总Worker线程可以生成一个可转换流(Transform Stream)的对象,可以在总Worker线程读取和写入数据时对其进行转换,能够更有效地处理数据,可以减少内存消耗,提高性能。然后,在总Worker线程内,用转换流的可读端为参数生成一个Response对象,该Response返回的Blob对象即为导出的最终二进制文件。
其中Blob对象表示一个不可变的,原始数据的类似文件对象,里面可以储存大量的二进制编码格式的数据。
S206:在总Worker线程中生成多个与小数组对应的分Worker线程。
其中,可以人为限定分Worker线程的数量的上限,以避免图片数量过多造成生成的分Worker线程过多,例如可以设定同时存在的分Worker线程不超过5个。
参见图3,图3为主线程、总Worker线程和分Worker线程之间的交互关系图。图中,主线程可以与总Worker线程进行交互,总Worker线程可以与多个分Worker线程同时进行交互。
S207:总Worker线程将小数组分别传递给分Worker线程。
S208:分Worker线程根据小数组内的图片地址请求图片资源。
S209:在全部图片资源下载完成后,将图片资源返回到总Worker线程。
S210:总Worker线程将全部图片资源进行压缩,得到二进制文件。
其中,可以采用如下方式进行压缩:首先,总Worker线程将图片资源按照小数组的序号标记写入转换流的可写端。然后,在所有图片资源的数据写入完成后,通过转换流的Response对象的可读端读取数据,得到Blob对象。然后将Blob对象转化为可供下载的本地blob地址。该blob地址就是以blob:开头的一段地址,表示指向的是一个二进制数据,可以直接被访问。在一些可能的实现方式中,也可以采用其他方式对图片资源进行压缩,都不影响本申请实施例的正常实现。
S211:总Worker线程将二进制文件的地址返回给主线程。
S212:主线程按照该二进制文件的地址导出最终压缩包。
本申请实施例通过将图片资源的下载任务动态分布在若干个Worker线程内执行,可以达到充分利用浏览器带宽,减少下载任务的总耗时的效果。而且,由于图片资源的下载、打包和导出等操作在独立于主线程的Worker线程中执行,不影响浏览器主线程内的代码执行,可以避免浏览器页面卡顿或无响应现象的发生,提升用户体验。本申请实施例还采用了流模式处理二进制数据,生成压缩包。在压缩包的总体积较大的情况下,流模式相对于现有技术更加节省内存空间,不受连续内存空间的限制,避免了发生内存崩溃而导致的下载失败问题。
以上为本申请实施例提供的基于浏览器的图片资源下载方法的一些具体实现方式,基于此,本申请还提供了对应的装置。下面将从功能模块化的角度对本申请实施例提供的装置进行介绍。
参见图4所示的基于浏览器的图片资源下载装置300的结构示意图,该装置300包括线程生成模块301、分线程生成模块302、图片资源下载模块303和图片资源返回模块304;
线程生成模块301,用于在浏览器的主线程中生成工作者线程。
其中,该工作者线程用于将目标数组分为多个目标子数组,该目标数组用于存储多个图片下载地址;
分线程生成模块302,用于根据工作者线程得到的多个目标子数组生成对应的多个工作者分线程;
图片资源下载模块303,用于利用多个工作者分线程下载图片资源。
其中,图片资源为多个目标子数组存储的图片下载地址对应的图片;
图片资源返回模块304,用于将图片资源返回工作者线程,以便通过工作者线程对图片资源返回给主线程。
可选地,所述装置还包括可转换流生成模块。
可转换流生成模块,用于在工作者线程中生成可转换流,可转换流包括可读端和可写端。
其中,可写端用于接收多个工作者分线程中下载并返回的图片资源,并将图片资源分批写入工作者线程的可转换流中。可选地,多个工作者分线程包括第一工作者分线程时,图片资源下载模块303还用于在第一工作者分线程下载出现错误时,定义一个定时器。该定时器用于以限定的时间间隔连续重复运行发送下载请求的代码。并利用定时器向第一目标子数组对应的图片下载地址重新发送图片下载请求。该第一目标子数组为第一工作者分线程对应的目标子数组。在定时器运行超过预先限定的次数时,则将第一工作者分线程设置为失败并跳过执行。
本申请实施例中提到的“第一”、“第二”等名称中的“第一”、“第二”只是用来作为名字标识,并不代表顺序上的第一、第二。
通过以上的实施方式的描述可知,本领域的技术人员可以清楚地了解到上述实施例方法中的全部或部分步骤可借助软件加通用硬件平台的方式来实现。基于这样的理解,本申请的技术方案可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如只读存储器(英文:read-only memory,ROM)/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者诸如路由器等网络通信设备)执行本申请各个实施例或者实施例的某些部分所述的方法。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于装置实施例而言,由于其基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上所述仅是本申请示例性的实施方式,并非用于限定本申请的保护范围。