Web Workers 在React项目中应用/Web Workers 性能优化

最新推荐文章于 2024-08-16 09:10:12 发布

置顶

red_heel

最新推荐文章于 2024-08-16 09:10:12 发布

阅读量1k

点赞数 1

分类专栏： JavaScript React ES6 文章标签：前端

本文链接：https://blog.csdn.net/red_heel/article/details/100051164

版权

本文探讨了在React项目中遇到的性能问题，当请求数据导致页面卡顿时，通过引入Web Workers创建额外线程来处理耗时任务，从而优化性能。通过示例解释了Web Workers的工作原理和在项目中的应用，显著减少了scripting执行时间。

摘要由CSDN通过智能技术生成

通过这篇文章你将会知道Worker的应用场景以及如何在项目中使用。

在国庆期间小编懒得出去浪，十一就想着研究一下项目中遇到的一个场景：

1. button1: 请求相关region数据并渲染

2. button2:跳转

由于我们后端数据是请求第三方数据库，每次请求数据时间大概话费6s(小编也哭诉过，但是并没有什么卵用)，所以每次当我点击button2,页面就像卡死了一样并没有起到任何作用。

于是打开devTool中的performance, 发现scripting占总的话费时间的90%。所以这个时候就想到了是不是可以使用webWorker新建一个线程，专门处理数据请求。

1. 模拟阻塞交互的场景

这个例子中我们有两个计时器，点击一个按钮，计时器加一，点击另外一个按钮，会有一个循环，这个while会阻塞用户交互。

const Worker = () => {
  const [counter1, setCounter1] = useState(0),
    [counter2, setCounter2] = useState(0),
    initialApp = () => {
      const start = Date.now()

      while (Date.now() < start + 5000) {}
      setCounter1(counter1 + 1)
    }

  return (
    <div>
      <p>
        {counter1} |||{counter2}
      </p>
      <button onClick={() => initialApp()}>Counter1</button>
      <but