前端優化之快速響應頁面(二）

情景

當咱們解析一個很大的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)
}
複製代碼