1. 程式人生 > >精確控制js程式執行時間

精確控制js程式執行時間

//遇到問執行耗時js
//精確控制執行時長
console.time("count1");  //計時開始
  var start = new Date().getTime();
do{
  var end = new Date().getTime();
}while(end-start<=2000);
console.timeEnd("count1");//計時結束
postMessage("執行結束");//worker執行緒向UI傳送資料

chrom:中執行緒模型:請求資源執行緒—多個
執行js程式碼,渲染頁面內容-1個

<button>按鈕1</button>
<script src=”1.js”></script>
<button>按鈕2</button>

解決方案:
1.將執行耗時的js程式放在底部進行執行
2.建立一個併發新執行緒,讓它來執行耗時js任務。
程式碼:

//var w1=new Worker(引數執行js地址);
<script>
	var w1=new Worker("**.js");
</script>

#瀏覽器不允許Worker執行緒中操作(程式碼)不能有任何DOM和BOM物件.
原因:瀏覽器只允許UI執行緒操作DOM/BOM,若多個執行緒同時來操作DOM和BOM頁面混亂.所以類似JQUERY也不能使用Worker中.

(1)UI執行緒傳送資料給Worker

  woker(收)
  onmessage = function(e){e.data}
  ui(發)
  var w6 = new Worker(“6.js”);
  w6.postMessage(stringmsg);

(2)Worker執行緒傳送資料UI

UI(收資料)
   var w6 = new Woker(“6.js”);
   w6.onmessage = function(e){
    e.data..
}

Woker(發資料)
 postMessage(執行結束);