Web Workers HTML

Сложность: Продвинутый

Web Workers в HTML

Выполнение тяжелых вычислений в отдельном потоке.

Пример использования:

<!-- main.html -->
<div>
    <button onclick="startWorker()">Запустить Worker</button>
    <button onclick="stopWorker()">Остановить Worker</button>
</div>
<div id="result"></div>

<script>
let worker;

function startWorker() {
    if (typeof(Worker) !== "undefined") {
        if (typeof(worker) == "undefined") {
            worker = new Worker("worker.js");
        }
        
        worker.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
        
        worker.postMessage("start");
    } else {
        document.getElementById("result").innerHTML = 
            "Ваш браузер не поддерживает Web Workers.";
    }
}

function stopWorker() {
    if (worker) {
        worker.terminate();
        worker = undefined;
        document.getElementById("result").innerHTML = "Worker остановлен";
    }
}
</script>

<!-- worker.js -->
self.onmessage = function(event) {
    if (event.data === "start") {
        // Тяжелые вычисления
        let result = 0;
        for (let i = 0; i < 1000000000; i++) {
            result += i;
        }
        self.postMessage("Вычисления завершены: " + result);
    }
};