[ js ] 可否用多线程的思路，解决大数量数据的性能问题？
生活随笔
收集整理的這篇文章主要介紹了
[ js ] 可否用多线程的思路，解决大数量数据的性能问题？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js中也是有線程概念的，setTimeout，setInterval和ajax都是這樣的例子，另起一個線程，時間上似乎是并行處理的。于是，我想是不是可以利用這個多線程的機制，優化一下大數量數據遍歷時的性能問題呢？
寫了個demo如下：
====================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿當制作</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<p>方法1耗時：<span id="time1"></span>微秒</p>
<p>方法2耗時：<span id="time2"></span>微秒</p>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");
var box6 = document.getElementById("box6");
var box7 = document.getElementById("box7");
var box8 = document.getElementById("box8");
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
function addItems(box,str,color,callback){
function addItem(){
var node = document.createElement("span");???
node.innerHTML = str;
node.style.color = color;
box.appendChild(node);
}
for(var i=0;i<9999;i++){
addItem();
}
if(callback) callback();
}
function testFun(){
var t = new Date().getTime();
addItems(box1,"1","blue");
addItems(box2,"2","green");
addItems(box3,"3","red");
addItems(box4,"4","yellow");
var t2 = new Date().getTime();
time1.innerHTML = t2 - t;
}
function testFun2(){
var t2,n = 0,t = new Date().getTime();
setTimeout(function(){addItems(box5,"1","blue",callback);},0);
setTimeout(function(){addItems(box6,"2","green",callback);},0);
setTimeout(function(){addItems(box7,"3","red",callback);},0);
setTimeout(function(){addItems(box8,"4","yellow",callback);},0);
function callback(){
n++;
if(n==4){
t2 = new Date().getTime();
time2.innerHTML = t2 - t;
}
}
}
testFun();
testFun2();
</script>
</body>
</html>
====================================================
思路很簡單，我有8個div容器，想給每個容器里填入9999個span元素。4個一組，想看看一個線程串行處理的速度快，還是分4個線程并行處理的速度快。
結果很意外：
=====================
在firefox下
在chrome下
在opera下
在ie8下
除了在opera這個怪胎下多線程的方式快了一點兒，別的瀏覽器下都是單線程更快。（可是，opera怎么把我的輸出輸了三遍啊？這何解啊？+_+）
我猜js所謂的“多線程”，其實還是單線程，只是cpu把任務時間分成了一小段一小段，然后分別去處理這多個線程，同一時間只有一個線程可以被處理。如果線程越多，反而越讓cpu頻于在多個任務間切換，反而影響了速度。
寫了個demo如下：
====================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿當制作</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<p>方法1耗時：<span id="time1"></span>微秒</p>
<p>方法2耗時：<span id="time2"></span>微秒</p>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");
var box6 = document.getElementById("box6");
var box7 = document.getElementById("box7");
var box8 = document.getElementById("box8");
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
function addItems(box,str,color,callback){
function addItem(){
var node = document.createElement("span");???
node.innerHTML = str;
node.style.color = color;
box.appendChild(node);
}
for(var i=0;i<9999;i++){
addItem();
}
if(callback) callback();
}
function testFun(){
var t = new Date().getTime();
addItems(box1,"1","blue");
addItems(box2,"2","green");
addItems(box3,"3","red");
addItems(box4,"4","yellow");
var t2 = new Date().getTime();
time1.innerHTML = t2 - t;
}
function testFun2(){
var t2,n = 0,t = new Date().getTime();
setTimeout(function(){addItems(box5,"1","blue",callback);},0);
setTimeout(function(){addItems(box6,"2","green",callback);},0);
setTimeout(function(){addItems(box7,"3","red",callback);},0);
setTimeout(function(){addItems(box8,"4","yellow",callback);},0);
function callback(){
n++;
if(n==4){
t2 = new Date().getTime();
time2.innerHTML = t2 - t;
}
}
}
testFun();
testFun2();
</script>
</body>
</html>
====================================================
思路很簡單，我有8個div容器，想給每個容器里填入9999個span元素。4個一組，想看看一個線程串行處理的速度快，還是分4個線程并行處理的速度快。
結果很意外：
=====================
在firefox下
在chrome下
在opera下
在ie8下
除了在opera這個怪胎下多線程的方式快了一點兒，別的瀏覽器下都是單線程更快。（可是，opera怎么把我的輸出輸了三遍啊？這何解啊？+_+）
我猜js所謂的“多線程”，其實還是單線程，只是cpu把任務時間分成了一小段一小段，然后分別去處理這多個線程，同一時間只有一個線程可以被處理。如果線程越多，反而越讓cpu頻于在多個任務間切換，反而影響了速度。
轉載于:https://www.cnblogs.com/cly84920/archive/2010/07/15/4426733.html
總結
以上是生活随笔為你收集整理的[ js ] 可否用多线程的思路，解决大数量数据的性能问题？的全部內容，希望文章能夠幫你解決所遇到的問題。
