Skip to content

Instantly share code, notes, and snippets.

@ynifamily3

ynifamily3/heavy-main-thread.html

Last active February 6, 2023 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ynifamily3/00fa56902be2811fe49bb4ff761883f4 to your computer and use it in GitHub Desktop.
Save ynifamily3/00fa56902be2811fe49bb4ff761883f4 to your computer and use it in GitHub Desktop.
Download ZIP
worker example
Raw
heavy-main-thread.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>무거운 계산</title>
</head>
<body>
<p>무거운 계산</p>
<button id="btn">실행</button>
<br />
<br />
<strong id="result">결과: </strong>
<p>타이머</p>
<strong id="timer">0</strong>
<button id="counter-stop">초기화</button>
<br />
<br />
<img src="https://http.cat/100" />
<br />
<img src="https://http.cat/101" />
<br />
<img src="https://http.cat/102" />
<br />
<img src="https://http.cat/103" />
<br />
<img src="https://http.cat/200" />
<br />
<img src="https://http.cat/201" />
<br />
<img src="https://http.cat/202" />
<br />
<img src="https://http.cat/203" />
<br />
<img src="https://http.cat/204" />
<br />
<img src="https://http.cat/206" />
<br />
<img src="https://http.cat/404" />
<br />
<img src="https://http.cat/500" />
<br />
<script>
const $btn = document.getElementById('btn');
const $result = document.getElementById('result');
const $timer = document.getElementById('timer');
const $counterStop = document.getElementById('counter-stop');
let id = setInterval(function () {
const n = Number($timer.textContent) + 1;
$timer.textContent = n < 1000 ? n : 0;
}, 100);
$counterStop.onclick = function () {
$timer.textContent = 0;
};
function heavyTask() {
for (let i = 0; i < 2_500_000_000; i++) {
// ...
}
return Math.round(Math.random() * 1_000_000);
}
$btn.onclick = function (e) {
const result = heavyTask();
$result.textContent = result.toLocaleString('ko-KR');
};
</script>
</body>
</html>
Raw
using-worker.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>워커 사용됨</title>
</head>
<body>
<p>무거운 계산</p>
<button id="btn">실행</button>
<br />
<br />
<strong id="result">결과: </strong>
<p>타이머</p>
<strong id="timer">0</strong>
<button id="counter-stop">초기화</button>
<br />
<br />
<img src="https://http.cat/100" />
<br />
<img src="https://http.cat/101" />
<br />
<img src="https://http.cat/102" />
<br />
<img src="https://http.cat/103" />
<br />
<img src="https://http.cat/200" />
<br />
<img src="https://http.cat/201" />
<br />
<img src="https://http.cat/202" />
<br />
<img src="https://http.cat/203" />
<br />
<img src="https://http.cat/204" />
<br />
<img src="https://http.cat/206" />
<br />
<img src="https://http.cat/404" />
<br />
<img src="https://http.cat/500" />
<br />
<script>
const $btn = document.getElementById('btn');
const $result = document.getElementById('result');
const $timer = document.getElementById('timer');
const $counterStop = document.getElementById('counter-stop');
// using worker
const worker = new Worker('worker.js');
let id = setInterval(function () {
const n = Number($timer.textContent) + 1;
$timer.textContent = n < 1000 ? n : 0;
}, 100);
$counterStop.onclick = function () {
$timer.textContent = 0;
};
function sendHeavyTask() {
worker.postMessage('do-heavy-job');
}
worker.onmessage = function (e) {
$result.textContent = e.data.toLocaleString('ko-KR');
};
$btn.onclick = function (e) {
sendHeavyTask();
};
</script>
</body>
</html>
Raw
worker.js
function heavyTask() {
for (let i = 0; i < 2_500_000_000; i++) {
// ...
}
return Math.round(Math.random() * 1_000_000);
}
onmessage = function (e) {
if (e.data === "do-heavy-job") {
this.postMessage(heavyTask());
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment