Web Worker是HTML5中的一项技术,可以在后台运行JavaScript代码,以提高Web应用程序的性能并改善用户体验。它允许在独立的线程中执行耗时的操作,而不会阻塞主线程。
主线程是浏览器用来渲染页面、处理用户交互和执行JavaScript代码的线程。然而,在执行一些复杂的任务时,主线程可能会被占用并导致页面变得卡顿或不响应。
Web Worker通过将任务分配给后台线程来解决这个问题。后台线程是独立于主线程的,它可以同时执行多个任务(js脚本)而不会阻塞页面的渲染和用户交互。
使用Web Worker的基本步骤如下:
-
在主线程中创建一个Web Worker对象,并指定要执行的JavaScript文件。
-
在Web Worker脚本文件中编写逻辑代码,该文件将在后台线程中执行。
-
通过Web Worker对象与后台线程进行通信。主线程可以向后台线程发送消息,后台线程也可以向主线程发送消息。
-
后台线程执行完任务后,将结果发送回主线程,主线程可以捕获并处理这些结果。
实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<script>
const worker1 = new Worker('worker1.js');
const worker2 = new Worker('worker2.js');
const worker3 = new Worker('worker3.js');
worker1.onmessage = e => {
console.log(e);
}
worker2.onmessage = e => {
console.log(e.data);
}
worker3.onmessage = e => {
console.log(e.data);
}
</script>
</body>
</html>
// worker1.js
function fb(n) {
if (n ==1 || n == 2) {
return 1
}
return fb(n-1) + fb(n-2)
}
console.time('fb执行时间1')
const result = fb(42)
console.timeEnd('fb执行时间1')
self.postMessage('worker1')
// worker2.js 和 worker3.js 同理
执行时间非常接近,可以看出是同时执行多个任务。
console.time()
和 console.timeEnd
console.time()
和console.timeEnd()
是JavaScript中的控制台方法,可以用来测量代码的执行时间。
console.time()
用于开始计时,它接受一个字符串作为参数,该字符串是一个标识符,用于标记计时器。
console.timeEnd()
用于结束计时,它接受一个与之前开始计时时使用的标识符相同的字符串作为参数。
使用这两个方法的步骤如下:
-
在代码的起始位置,使用
console.time()
方法开始计时,传入一个标识符字符串,用于标记计时器。 -
在代码的结束位置,使用
console.timeEnd()
方法结束计时,传入与之前开始计时时使用的标识符相同的字符串作为参数。 -
在控制台中,会输出经过的时间(以毫秒为单位)。
console.time()
和console.timeEnd()
对于测试代码的性能和优化非常有用,可以帮助你找到代码中耗时的部分,并进行针对性的优化。