前端优化之快速响应页面(二）

情景

当我们解析一个很大的JSON字符串的时候，如果需要500ms才能解析完，这个时候就会影响用户体验，在这段时间内什么也做不了，这个时候webWorker是最理想的解决办法

webWorker

• 它有自己的运行环境，不会可以在后台运行，不会影响页面的内容，不会影响用户对页面的操作
• 可以用webWorker去处理一些纯数据(获取到大量数据后进行排序等)

使用方法

• 主线程(main.js)

// 创建一个新的线程
let worker = new Worker('worker.js');
let children = {}
// 请求数据
let xml = new XMLHttpRequest();
xml.open('get', 'tsconfig.json');
xml.onreadystatechange = function() {
    if(xml.readyState === 4 && xml.status === 200){
        children = xml.responseText;
        // 传给webWorker，让他进行处理
        worker.postMessage(children)
    }
}
xml.send()

// 拿到worker的结果，进行接下来的操作
worker.onmessage = function (event) {
    let children = event.data;
    for(let item in children) {
        let p = document.createElement('p');
        p.innerHTML = children[item].id;
        document.body.appendChild(p)
    }
}
复制代码

• 在webWorker中接受信息(worker.js)

self.onmessage = function(event) {
    // 得到传过来的值进行处理
    let data = event.data;
    ...  // 处理信息
    // 把处理好的内容传递给主线程
    self.postMessage(data)
}
复制代码

转载于:https://juejin.im/post/5bdc1ca2e51d452498408464