Cách khác nhau để thực hiện đa luồng và không đồng bộ trong JavaScript
Trước HTML5 JavaScript chỉ cho phép thực thi một luồng trên mỗi trang.
Có một số cách hacky để mô phỏng một thực hiện không đồng bộ với năng suất , setTimeout(), setInterval(), XMLHttpRequesthoặc xử lý sự kiện (xem phần cuối của bài viết này cho một ví dụ với năng suất và setTimeout()).
Nhưng với HTML5, giờ đây chúng ta có thể sử dụng Chủ đề Công nhân để song song thực hiện các chức năng. Dưới đây là một ví dụ về việc sử dụng.
Đa luồng thực sự
Đa luồng: Chủ đề công nhân JavaScript
HTML5 đã giới thiệu Chủ đề Công nhân Web (xem: tính tương thích của trình duyệt )
Lưu ý: IE9 và các phiên bản trước đó không hỗ trợ.
Các luồng công nhân này là các luồng JavaScript chạy trong nền mà không ảnh hưởng đến hiệu suất của trang. Để biết thêm thông tin về Web Worker, hãy đọc tài liệu hoặc hướng dẫn này .
Dưới đây là một ví dụ đơn giản với 3 luồng Công nhân web được tính đến MAX_VALUE và hiển thị giá trị được tính hiện tại trong trang của chúng tôi:
//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }
var MAX_VALUE = 10000;
/*
* Here are the workers
*/
//Worker 1
var worker1 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
//We add a listener to the worker to get the response and show it in the page
worker1.addEventListener('message', function(e) {
document.getElementById("result1").innerHTML = e.data;
}, false);
//Worker 2
var worker2 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker2.addEventListener('message', function(e) {
document.getElementById("result2").innerHTML = e.data;
}, false);
//Worker 3
var worker3 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker3.addEventListener('message', function(e) {
document.getElementById("result3").innerHTML = e.data;
}, false);
// Start and send data to our worker.
worker1.postMessage(MAX_VALUE);
worker2.postMessage(MAX_VALUE);
worker3.postMessage(MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
Chúng ta có thể thấy rằng ba luồng được thực thi đồng thời và in giá trị hiện tại của chúng trong trang. Họ không đóng băng trang vì chúng được thực thi trong nền với các luồng riêng biệt.
Đa luồng: với nhiều iframe
Một cách khác để đạt được điều này là sử dụng nhiều iframe , mỗi cái sẽ thực thi một luồng. Chúng tôi có thể cung cấp cho iframe một số tham số bằng URL và iframe có thể giao tiếp với cha mẹ của anh ấy để lấy kết quả và in lại ( iframe phải nằm trong cùng một tên miền).
Ví dụ này không hoạt động trong tất cả các trình duyệt! iframes thường chạy trong cùng một luồng / tiến trình như trang chính (nhưng Firefox và Chromium dường như xử lý nó khác nhau).
Vì đoạn mã không hỗ trợ nhiều tệp HTML, tôi sẽ chỉ cung cấp các mã khác nhau ở đây:
index.html:
//The 3 iframes containing the code (take the thread id in param)
<iframe id="threadFrame1" src="thread.html?id=1"></iframe>
<iframe id="threadFrame2" src="thread.html?id=2"></iframe>
<iframe id="threadFrame3" src="thread.html?id=3"></iframe>
//Divs that shows the result
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
//This function is called by each iframe
function threadResult(threadId, result) {
document.getElementById("result" + threadId).innerHTML = result;
}
</script>
chủ đề.html:
//Get the parameters in the URL: http://stackoverflow.com/a/1099670/2576706
function getQueryParams(paramName) {
var qs = document.location.search.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params[paramName];
}
//The thread code (get the id from the URL, we can pass other parameters as needed)
var MAX_VALUE = 100000;
(function thread() {
var threadId = getQueryParams('id');
for(var i=0; i<MAX_VALUE; i++){
parent.threadResult(threadId, i);
}
})();
Mô phỏng đa luồng
Chuỗi đơn: mô phỏng đồng thời JavaScript với setTimeout ()
Cách 'ngây thơ' sẽ là thực thi chức năng setTimeout()lần lượt như thế này:
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Nhưng phương pháp này không hiệu quả vì mỗi tác vụ sẽ được thực hiện lần lượt.
Chúng ta có thể mô phỏng thực thi không đồng bộ bằng cách gọi hàm đệ quy như thế này:
var MAX_VALUE = 10000;
function thread1(value, maxValue){
var me = this;
document.getElementById("result1").innerHTML = value;
value++;
//Continue execution
if(value<=maxValue)
setTimeout(function () { me.thread1(value, maxValue); }, 0);
}
function thread2(value, maxValue){
var me = this;
document.getElementById("result2").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread2(value, maxValue); }, 0);
}
function thread3(value, maxValue){
var me = this;
document.getElementById("result3").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread3(value, maxValue); }, 0);
}
thread1(0, MAX_VALUE);
thread2(0, MAX_VALUE);
thread3(0, MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
Như bạn có thể thấy phương thức thứ hai này rất chậm và đóng băng trình duyệt vì nó sử dụng luồng chính để thực thi các chức năng.
Single-thread: mô phỏng đồng thời JavaScript với năng suất
Yield là một tính năng mới trong ECMAScript 6 , nó chỉ hoạt động trên phiên bản Firefox và Chrome cũ nhất (trong Chrome bạn cần kích hoạt JavaScript thử nghiệm xuất hiện trong chrome: // flags / # enable-javascript-hòa hợp ).
Từ khóa năng suất làm cho việc thực thi chức năng của trình tạo tạm dừng và giá trị của biểu thức theo từ khóa năng suất được trả về cho người gọi của trình tạo. Nó có thể được coi là một phiên bản dựa trên trình tạo của từ khóa return.
Một trình tạo cho phép bạn tạm dừng thực thi một chức năng và tiếp tục lại nó sau. Một máy phát điện có thể được sử dụng để lên lịch cho các chức năng của bạn với một kỹ thuật gọi là trampolining .
Dưới đây là ví dụ:
var MAX_VALUE = 10000;
Scheduler = {
_tasks: [],
add: function(func){
this._tasks.push(func);
},
start: function(){
var tasks = this._tasks;
var length = tasks.length;
while(length>0){
for(var i=0; i<length; i++){
var res = tasks[i].next();
if(res.done){
tasks.splice(i, 1);
length--;
i--;
}
}
}
}
}
function* updateUI(threadID, maxValue) {
var value = 0;
while(value<=maxValue){
yield document.getElementById("result" + threadID).innerHTML = value;
value++;
}
}
Scheduler.add(updateUI(1, MAX_VALUE));
Scheduler.add(updateUI(2, MAX_VALUE));
Scheduler.add(updateUI(3, MAX_VALUE));
Scheduler.start()
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>