#javascript #html
#javascript #HTML
Вопрос:
Я смущен использованием и преимуществами web workers. Я смог создать две кнопки, которые запускают два счетчика, и значения обоих счетчиков отображаются на экране. Также я создал движение мяча для создания анимации. Код выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ballmovement {
0% {
left: 0px;
top: 0px;
background-color: yellow;
}
33% {
margin-left: 100px;
margin-top: 160px;
}
66% {
margin-left: 200px;
margin-top: 0px;
}
100% {
margin-left: 300px;
margin-top: 160px;
background-color: purple;
}
}
.animate {
animation-name: ballmovement;
animation-duration: 3s;
animation-iteration-count: 40;
animation-direction: alternate;
}
#ball {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-style: solid;
border-radius: 50%;
}
#container {
float: left;
height: 500px;
width: 50%;
}
#bus {
display: inline;
}
</style>
<script>
function startWorker1() {
i = 0;
timedCount1();
}
function startWorker2() {
j = 0;
timedCount2();
}
function timedCount1() {
i = i 1;
document.getElementById("result1").innerHTML = i;
setTimeout("timedCount1()", 500);
}
function timedCount2() {
j = j 1;
document.getElementById("result2").innerHTML = j;
setTimeout("timedCount2()", 500);
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</head>
<body>
<div id="container">
<div id="ball" class="animate"></div>
</div>
<div id="bus">
<button onclick="startWorker1()">Start Worker 1</button>
<button onclick="startWorker2()">Start Worker 2</button>
<button onclick="stopWorker()">Stop Worker</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>
Код работал действительно гладко, и ни один процесс не нарушал другой процесс.
Поскольку я создал в приведенном выше коде три процесса, которые работают параллельно, зачем нам нужны web worker?
Комментарии:
1. Для выполнения более сложных вычислений, не связанных с пользовательским интерфейсом?
2. веб-воркеры полезны для кода, требующего веб-воркеров
3. Вы используете асинхронные функции setTimeout. На самом деле в вашем коде нет веб-воркеров. Веб-работники работают в фоновом режиме и не имеют доступа к DOM. Подробнее — Использование Web Workers
4. @ThisClark: В этом его суть: его код гладкий, и он не использовал web workers, так в чем же смысл web workers.
5. @ThisClark Рассмотрим этот сценарий. У меня есть кнопка, при нажатии на которую будет реализован бесконечный цикл javascript. Как вы думаете, это приведет к зависанию страницы?
Ответ №1:
Весь JavaScript, не относящийся к Web worker, в одном документе является однопоточным: он может использовать только один процессор на компьютере, и любая значительная непрерывная обработка приведет к засорению вкладки, препятствуя не только другим процессам JavaScript (*), но даже обновлению отображения, даже GIF-анимации. В вашем коде нет длительно работающих функций, поэтому вы не можете увидеть эффект.
Например, попробуйте это:
function naiveFibonacci(n) {
if (n <= 2) return 1;
return naiveFibonacci(n - 1) naiveFibonacci(n - 2);
}
s.addEventListener('click', evt => r.textContent = `is ${naiveFibonacci(parseInt(n.value))}`); Naive Fibonacci of: <input id="n"><button id="s">Go</button> <span id="r"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif"> На моем компьютере naiveFibonacci(42) занимает около 2 секунд. Не набирайте слишком много, иначе панель вашего браузера выйдет из строя; если вы опуститесь слишком низко, вы просто можете пропустить эффект. Вы заметите, что вращающийся GIF-файл будет приостановлен во время выполнения вычисления.
Замена непрерывных вычислений на тайм-ауты, чтобы они могли дать браузеру некоторую передышку, хотя и тривиальна в данном случае, не тривиальна в общем случае, поэтому, хотя это было необходимо до Web worker, это не идеально. Выгрузка длинных вычислений веб-воркерам — это сценарий, для которого они предназначены.
*) общие «процессы», как в «материале, который должен выполняться», а не технические «процессы», как в «экземплярах выполняемой компьютерной программы»
Комментарии:
1. Немного странно говорить «весь Javascript однопоточный» в вопросе, в котором говорится о веб-разработчиках, которые явно являются дополнительными потоками выполнения. Вы могли бы улучшить эту формулировку. Существует несколько потоков. Вам просто нужно жить в рамках ограничений WebWorker, чтобы иметь дополнительные потоки.
2. Тогда почему мой код в теле моего вопроса не заморозил домашнюю страницу? Считается ли вычисление счетчика длительным, потому что он будет продолжать подсчет?
3. Увеличение переменной, изменение текста в DOM и планирование новой задачи занимает очень мало времени. Нет, они не работают долго. У вас нет ни одной задачи, которая продолжает выполняться: у вас есть большое количество очень коротких задач, каждая из которых завершается почти немедленно. Это то, с чем обычный JavaScript справляется очень хорошо, веб-воркеры не нужны.
4. март 2018 — Chrome v.65 — GIF не зависает. вы, сэр, обманщик. 1.