javascript單線程
JavaScript的單線程，與它的用途有關。作為浏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時浏覽器應該以哪個線程為准？所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。
隊列任務
單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行後一個任務。如果前一個任務耗時很長，後一個任務就不得不一直等著。
異步事件驅動
浏覽器中很多行為是異步（Asynchronized）的，例如：鼠標點擊事件、窗口大小拖拉事件、定時器觸發事件、XMLHttpRequest完成回調等。當一個異步事件發生的時候，它就進入事件隊列。浏覽器有一個內部大消息循環，Event Loop（事件循環），會輪詢大的事件隊列並處理事件。例如，浏覽器當前正在忙於處理onclick事件，這時另外一個事件發生了（如：window onSize），這個異步事件就被放入事件隊列等待處理，只有前面的處理完畢了，空閒了才會執行這個事件。
Event Loop
JavaScript是單線程的,但浏覽器不是單線程的
浏覽器至少會有以下一些進程
1.浏覽器 GUI 渲染線程
2.JavaScript 引擎線程
3.浏覽器定時觸發器線程
4.浏覽器事件觸發線程
5.浏覽器 http 異步請求線程
因為 JavaScript 引擎是單線程的，所以代碼都是先壓到隊列，然後由引擎采用先進先出的方式運行。事件處理函數、timer 執行函數也會排到這個隊列中，然後利用一個無窮回圈，不斷從隊頭取出函數執行，這個就是Event Loop。
總結一句話,js是單線程的,但是浏覽器是多線程的,遇到異步的東西都是由浏覽器把異步的回調放到Event Loop中，js線程不繁忙的時候,再去讀取Event Loop
定時器原理
定時器的用法
setTimeout(fn, delay)
setInterval(fn, delay)
fn是函數也可以是字符串,delay是延遲的時間,單位是毫秒
有以下要注意的
1.fn雖然可以是字符串,但是一直都不推薦這麼使用
2.fn裡面的函數如果有this，執行的時候this會指向到window上面去
如果理解好了js單線程和Event loop,定時器的原理也很好理解了
如果設置了定時器,當到了延遲時間,浏覽器會把延遲執行的事件放到Event loop裡面,當時間到了,如果js線程空閒就會執行了(所以定時器的精度不准啊)
看有文章介紹說setTimeout和setInterval對函數一直輪詢的區別,代碼如下
復制代碼 代碼如下:
setTimeout(function(){
setTimeout(arguments.callee,100)
},100)
setInterval(function(){},1000)
文章大概的意思是setTimeout是在回調函數執行後才啟動下一次定時器,所以肯定是有間隔的執行,而setInterval是一直都在執行,如果碰到了js線程一直執行,可能就會在Event loop裡面加多個回調,當js線程不忙的時候,會一下子執行多個
經過測試發現無論在ie,ff,chrome,Opera,Safari下,setInterval都是按一定間隔來的
測試代碼如下
復制代碼 代碼如下:
setInterval(function(){
xx.innerHTML=xx.innerHTML+1;
},100);
for(var i=0;i<6000000;i++){
xx.offsetWidth
}
setTimeout(function(){
debugger;
},10)
斷點的時候還是只打印出了1個1
定時器的精度問題
因為js單線程原因,如果遇到繁忙,定時器肯定不准,而且肯定是越來越長的,這個好像無解啊,無解啊
還有一個精度問題就是最小間隔setTimeout(fun,0)
在js線程不忙的時候,也不可能0秒後馬上執行,總有個最小間隔,每個浏覽器還各不一樣,這個未做測試
我看一篇文章中說的是w3c的標准,定時器的最小時間執行是4ms,找不到出處無從考證呀！！！
定時器相關的一些優化
在做定時器的時候還是可以有一些優化的
1.比如如果綁定window.onresize,在浏覽器縮放的時候,該觸發的非常頻繁,所以可以延遲執行,當下次執行到的時候clear掉,減少頻繁執行
偽代碼如下
復制代碼 代碼如下:
var timer;
function r(){
clearTimeout(timer);
timer = setTimeout(function(){
//do something
},150);
}
2.在滾動條往下拉的時候也是一下,比如圖片的lazyload,也應該有一個定時器,避免過多的計算
3.當有多個地方需要定時器的時候,可以合並成一個定時器,時間間隔以最小的那個為准,然後需要執行的回調函數往數組裡面塞,當到了時間間隔,遍歷數組執行即可
一個小demo
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.wrap{width:80%; margin: 30px auto; border: 1px solid #ccc; padding: 20px;}
.c{border: 1px solid #ccc; height: 30px;margin-bottom: 20px;}
</style>
</head>
<body>
<div id="xx"></div>
<div class="wrap" >
<div id="a1" class="c">0</div>
<div id="a2" class="c">0</div>
<div id="a3" class="c">0</div>
<div id="a4" class="c">0</div>
</div>
<script src="http://static.paipaiimg.com/paipai_h5/js/ttj/zepto.min.js"></script>
<script type="text/javascript">
var runTime = {
options : {
step : 1000
},
callbacks:[],
addCallbacks : [],
start : false,
timer : null,
extend : function(){
var target = arguments[0] || {}, i = 1, length = arguments.length, options;
if ( typeof target != "object" && typeof target != "function" )
target = {};
for ( ; i < length; i++ )
if ( (options = arguments[ i ]) != null )
for ( var name in options ) {
var copy = options[ name ];
if ( target === copy )
continue;
if ( copy !== undefined )
target[ name ] = copy;
}
return target;
},
init : function(options){
$.extend(this,this.options,options||{});
},
add : function(fun,options){
options = options ||{};
this.addCallbacks.push({
fun : fun,
startTime : new Date().getTime(),
step : options.step || this.step,
i : 1
});
var self = this;
if(!this.start){
this.callbacks = [fun];
this.start = true;
this.startTime = new Date().getTime();
this.timer = setInterval(function(){
self.done();
},this.step);
}
},
done : function(){
var callbacks = this.callbacks,
self = this,
newArr = [];
$.each(callbacks,function(i,obj){
if(obj.step == self.step){
obj.fun();
}else{
if(obj.i == obj.step/self.step){
if((new Date().getTime())-obj.startTime>obj.step*2/3){
obj.fun();
}
obj.i = 1;
}else{
obj.i = obj.i + 1;
}
}
});
$.each(this.addCallbacks,function(i,obj){
if(obj.step == self.step){
if((new Date().getTime())-obj.startTime>obj.step*2/3){
obj.fun();
callbacks.push(obj);
}else{
newArr.push(obj);
}
}else{
obj.i = obj.i + 1;
callbacks.push(obj);
}
});
this.addCallbacks = newArr;
},
clear : function(){
clearInterval(this.timer);
}
}
runTime.init();
runTime.add(function(){
a1.innerHTML = ~~a1.innerHTML+1;
});
runTime.add(function(){
a2.innerHTML = ~~a2.innerHTML+1;
},{step:2000});
runTime.add(function(){
a3.innerHTML = ~~a3.innerHTML+1;
},{step:4000});
runTime.add(function(){
a4.innerHTML = ~~a4.innerHTML+1;
},{step:8000});
</script>
</body>
</html>
小伙伴們是否對javascript定時器有所了解了呢，如有疑問給我留言吧。