html网页响应时间调试,HTML5 使用performance.now衡量Webworker的响应时间

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var worker, start, end,

send = document.querySelector('.send'),

receive = document.querySelector('.receive > span'),

bar = document.querySelector('.bar > span');

var sendMessage = function() {

start = performance.now();

worker.postMessage('My message');

console.log('Sending message to worker: ' + start + 'ms');

};

var receiveMessage = function(event) {

end = performance.now();

receive.innerHTML = event.data;

var delay = (end - start);

bar.textContent = delay + 'ms';

bar.style.transition = 'width ' + delay / 10 + 's';

bar.classList.add('complete');

console.log('Message received from worker: ' + end + 'ms');

};

var workerFunction = function(event) {

self.postMessage('Worker ► ' + event.data);

};

var createWorker = function() {

if (window.Worker && window.Blob && window.URL) {

var workerContent = "self.onmessage = " + workerFunction.toString();

var blob = new Blob([workerContent], {

type: 'application/javascript'

});

worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = receiveMessage;

}

};

window.addEventListener('load', createWorker);

send.addEventListener('click', sendMessage);