演示webworker用法,以及其如何改善页面性能
打开index.html(在线),分别在左侧和右侧输入框输入44(取决于计算机性能),点击计算,等待结果,查看页面是否有卡顿。
在主脚本main.js及woker.js内都有一个递归版本的斐波那契数计算函数
const fib = (n) => {
if (n <= 2) {
return 1
} else {
return fib(n-1) + fib(n-2)
}
}在输入框内输入数字n,点击计算,将计算第斐波那契数列第n项,结果显示在下边,左右区别为,当输入数字较大时(以40-45为例):
注意点击计算后,上方标题有一个持续4s的transition,左侧将在transition进行1s时开始计算,可以看到开始计算时transition停止了。
点击计算后,标题transition能流畅运行
可以发现,不论是左边还是右边,有没有worker,下方小球的运动从来没有被阻塞,因为小球用的是animation,浏览器通常会将其运行在GPU线程上,因此不会被JS线程阻塞。