最近在尝试了新的传输方式。不过对QModel而言，影响不是很大，因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。

首先，把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包，现在改为在服务端拆解为N份，根据构件数量每500个压缩为一个包，同时把数据转换为utf8array.然后生成一个索引文件A。

前端首先请求索引文件A。得到数据包的数量，然后进入本文重点。

主线程根据解析索引文件，知道了一共有N个数据包，然后开始启用worker下载。如下

主线程代码：

 

	
	

		
		

			
			

				
			

		

		

			
			

				var worker = new Worker("worker.js");
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				worker.postMessage({m: 模型N}); //向worker发送数据 
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				worker.onmessage = function(evt) { //接收worker传过来的数据函数 
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				var resulti = JSON.parse(evt.data);
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				//开始解析resulti 
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				}
			

		

	

然后创建一个worker.js，多线程进行传输并解压。

 

	
	

		
		

			
			

				
			

		

		

			
			

				onmessage = function(evt) {
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				JSZipUtils.getBinaryContent( "数据包N.zip", {
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				callback: function(err, data) {
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				var zipdata = new JSZip(data);
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				var filei = zipdata.file("数据包N.json");
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				postMessage(filei.asText());
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				}
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				});
			

		

	

	

		
		

			
			

				
			

		

		

			
			

				}
			

		

	

实际效果如下图

 总结：

1、由于个人服务器原因，带宽就那么大，一个线程跑满和10个线程同时下载，完全没有效率的差异。所以下载起来是一样的。需要硬件支持才体现出传输的优化。

2、数据解析放到线程里面，确实会提升一些效率。

3、下一步优化，可以考虑在worker里面直接把数据转换成Utf8Array或者ArrayBuffer，PostMessage是可以移交这一类对象的控制权的。

原文https://blog.csdn.net/ztz87