JS | 一些优化罢了

动画被JS阻塞了怎么办

参考 https://juejin.im/post/6844903971295854600#heading-7

1.webworker

 <div id="box"></div>
 
 #box {
  width: 100px;
   height: 100px;
   background: green;
   position: absolute;
   animation: myfirst 5s;
 }

 @keyframes myfirst
 {
   from {left: 0}
   to {left: 2000px}
 }
 
setTimeout(()=>{
  console.log('long mission start')

  // 开始执行长任务
  const worker = new Worker('./handleLongMission.js');
  worker.onmessage = function(e) {
    console.log(e.data)
  };
},500)

handleLongMission.js：

 // 模拟2秒的长任务
 var now = performance.now();
 while (now + 2000 > performance.now()) {}

 // 长任务结束
 self.postMessage('long misson done')

2.时间分片