工人代码

Question

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

查询可能返回较大的结果，导致页面在加载提取时冻结，因此我想使用网络工作者来分隔线程并添加加载轮，以使用户知道网站没有崩溃

我目前的网络工作者使用以下代码：

工人代码

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处理时，({ data }) =>在没有通过ref进行数据访问的情况下会变成_ref.data，并且{ {1}}用于返回数组。

我的代码在Web worker类中实现，例如：

工人构造者

_ref

我这样称呼网络工作者为另一个班级：

创建Web Worker

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

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

我是Web工作者的新手，所以我缺少一些可以使它正常工作的东西吗，或者是否有另一种方式将Web工作者与提取一起使用？

Answer 1

如果页面变得无响应，则表明主处理线程正受到CPU绑定操作的影响。与I / O绑定的操作（例如，从URL提取）不会影响页面的响应能力，只是会从响应中解析出一些开销。因此，工作程序的最佳用法是在不同的线程上执行CPU密集型操作。将I / O操作转移给工作人员，您获得的性能很少（如果有的话）。

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

Answer 2

您首先需要确定问题所在。 API的响应可能很好，但是如果您要对成千上万个对象进行“填充”（循环，排序，映射等）（或渲染成千上万个元素），则页面性能可能会受到严重影响。

诸如分页之类的简单操作可能是所有问题的答案。

使用React

工人代码

工人构造者

创建Web Worker

2 个答案: