批量事件处理加载速度太慢，怎么解决
1个回答
展开全部
方案1：针对支持html5 webworker的现代浏览器方案:。
代码1.你的大量计算，放到一个js文件中。如下：
12345
//job.jsonmessage =function (evt){ //do massive job.在这里你进行大量耗时的计算过程。 postMessage( data );//将计算结果的数据发送会主线程}
你的页面代码：
123456789101112131415
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript">//WEB页主线程var worker =new Worker("job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL worker.postMessage('开始计算'); worker.onmessage =function(evt){//接收worker传过来的数据函数 console.log(evt.data);//输出worker发送来的数据，这里就获取到了大量计算的结果。 } </script> </head> <body></body></html>
方案2：对于不支持WebWorker线程的浏览器。
可以考虑分批处理。即是说创造一个间隔定时器setInterval。
每隔一小段时间，处理大量数据中的一部分。
这样就可以避免大量计算导致浏览器卡死。
大致代码如下(这里是简单的例子。具体情况具体分析。)：
假设我们要计算1000万个数据的和。
12345678910111213141516
var jobData = [];//假设是一个数组。里面有1000万个数据。function sliceJob(){ var num = (jobData.length / 100) + 1;//把任务数据划分为100份。 var portion = 100000;//每份有10万个数字。 var addition = 0;//这里用来保存最后的结果。一开始是0； var intv = setInterval(function(){ if(num--){ //然后每一份结果。 additoin += every; } else { 计算最后一份，然后输出结果。 alert('最终结果是:', addition); window.clearInterval(intv); } }, 50);}
此外。jQuery的deferred对象无法实现你的要求。
因为deferred对象的目的是为了串行处理异步过程。
但是异步过程在执行的过程中，如果耗时过长，仍然会阻塞浏览器线程，导致浏览器不可操作（卡死）。
唯一的一个例外是$.ajax。$.ajax方法也会返回一个Deferred对象。但是由于该异步过程是用的XMLHttpRequest。而xhr默认是异步执行的，相当于另起一个线程，因此不会阻塞浏览器县城。
代码1.你的大量计算，放到一个js文件中。如下：
12345
//job.jsonmessage =function (evt){ //do massive job.在这里你进行大量耗时的计算过程。 postMessage( data );//将计算结果的数据发送会主线程}
你的页面代码：
123456789101112131415
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript">//WEB页主线程var worker =new Worker("job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL worker.postMessage('开始计算'); worker.onmessage =function(evt){//接收worker传过来的数据函数 console.log(evt.data);//输出worker发送来的数据，这里就获取到了大量计算的结果。 } </script> </head> <body></body></html>
方案2：对于不支持WebWorker线程的浏览器。
可以考虑分批处理。即是说创造一个间隔定时器setInterval。
每隔一小段时间，处理大量数据中的一部分。
这样就可以避免大量计算导致浏览器卡死。
大致代码如下(这里是简单的例子。具体情况具体分析。)：
假设我们要计算1000万个数据的和。
12345678910111213141516
var jobData = [];//假设是一个数组。里面有1000万个数据。function sliceJob(){ var num = (jobData.length / 100) + 1;//把任务数据划分为100份。 var portion = 100000;//每份有10万个数字。 var addition = 0;//这里用来保存最后的结果。一开始是0； var intv = setInterval(function(){ if(num--){ //然后每一份结果。 additoin += every; } else { 计算最后一份，然后输出结果。 alert('最终结果是:', addition); window.clearInterval(intv); } }, 50);}
此外。jQuery的deferred对象无法实现你的要求。
因为deferred对象的目的是为了串行处理异步过程。
但是异步过程在执行的过程中，如果耗时过长，仍然会阻塞浏览器线程，导致浏览器不可操作（卡死）。
唯一的一个例外是$.ajax。$.ajax方法也会返回一个Deferred对象。但是由于该异步过程是用的XMLHttpRequest。而xhr默认是异步执行的，相当于另起一个线程，因此不会阻塞浏览器县城。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
