SOURCE

// 点击按钮，显示时间
const btnDate = document.querySelector('.btn-date');
btnDate.addEventListener('click', () => {
    let myDate = '';
    for(let i = 0; i < 10000000; i++) {
        const date = new Date();
        myDate = date;
    }
    let domP = document.createElement('p');
    domP.textContent = 'date is over' + myDate;
    document.body.appendChild(domP);
})

// 点击按钮生成cavans
const btnFill = document.querySelector('.btn-fill');
btnFill.addEventListener('click', expensiveOperation);
function random(min, max) {
    return Math.floor(Math.random() * (max - min) + min) + min;
}
function degToRad(num) {
    return (num / 180) * 2 * Math.PI;
}
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function expensiveOperation() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    for(let i = 0; i < 1000000; i++) {
        ctx.beginPath();
        ctx.fillStyle = 'rgba(0,0,255, 0.2)';
        ctx.arc(
            random(0, canvas.width), 
            random(0, canvas.height), 
            1, 
            degToRad(0), 
            degToRad(360)
        );
        ctx.fill()
    }
}

// 点击弹出文字
const btnAlert = document.querySelector('.btn-alert');
btnAlert.addEventListener('click', alertText);
function alertText() {
    alert('You Clicked me!');
}

//
const btnWorker = document.querySelector('.btn-worker');
const worker = new Worker('worker.js');

btnWorker.addEventListener('click', () => {
    worker.postMessage('Go!');

    let pElem = document.createElement('p');
    pElem.textContent = 'This is a newly-added paragraph.';
    document.body.appendChild(pElem);
});

worker.onmessage = function(e) {
    console.log(e.data);
}

<button class="btn-date">click me show date</button>
<button class="btn-fill">click me fill canvas</button>
<button class="btn-alert">click me alert text</button>
<button class="btn-worker">click me show date</button>
<canvas></canvas>