使用React获取Web Worker

Question

我有一个React页面，询问用户输入的一些信息，并从API返回一个JSON对象数组。

查询可以返回一个大的结果，导致页面在加载fetch时冻结，所以我想使用web worker分离线程并添加一个加载轮以允许用户知道站点没有崩溃。

我目前有我的网络工作者使用此代码：

Worker Code

const self = this;

export default () => {
    self.addEventListener('message', e => {
        if (!e) return;
        let query = e.data;
        let res = null;

        fetch(`https://statsapi.web.nhl.com/api/v1/schedule?startDate=${query}&endDate=${query}`)
        .then(response => {
            return response.json();
        })
        .then(function(_ref) {
            postMessage(_ref);
        });
    });
}; 

这只是一个示例API，但真正的API结果会更大，需要更长的时间才能加载。

我也使用function(_ref)而不是({ data }) =>，因为当通过babel处理时，当没有数据访问器通过ref时({ data }) =>将变成_ref.data，并且_ref在返回数组时起作用。

我在web worker类中实现了我的代码，如下所示：

Worker Constructor

export default class WebWorker {
    constructor(worker) {
        const code = worker.toString();
        const blob = new Blob(['(' + code + ')()'], { type: 'text/javascript' });
        return new Worker(URL.createObjectURL(blob));
    }
}

我在另一个类中调用webworker：

Web Worker Creation

componentDidMount = () => {
    this.worker = new WebWorker(worker);
}

getInfo = () => {
    this.worker.postMessage(this.state.query);

    this.setState(prevState => ({
        ...prevState,
        open: true
    }), () => {
        this.worker.addEventListener('message', (event) => {
            const res = event.data;
            this.setState({
                results: res,
                open: false
            });
        });
    });
}

我遇到的问题是当我尝试像我一样调用它时，Web工作者似乎没有在另一个线程上处理。即使Web工作者正在获取数据，页面仍会冻结，因为它仍然在冻结后正确设置状态。

我是网络工作者的新手，所以有什么我想念的东西可以让它工作，还是会有一种不同的方式来使用带有fetch的web工作者？

Answer 1

如果您的页面没有响应，则表明主处理线程受到CPU绑定操作的影响。 I / O绑定操作（如从URL获取）不会影响页面的响应速度，除非从响应中解析一些开销。因此，worker的最佳用法是在不同的线程上执行CPU密集型操作。您获得很少（如果有的话）性能方面的I / O操作给工人。

最有可能的是，渲染逻辑或数据处理是导致事物挂起的原因，而不是网络请求处理。

Answer 2

您首先需要确定问题所在。来自API的响应可能很好，但是如果你正在对成千上万个对象进行“处理” - 循环，排序，映射等 - （或渲染数千个元素）那么你的页面性能可能会受到很大影响。

像分页一样简单的东西可能是一切的答案。