Web Worker

Mia Yang

隨著 Web Application 的演化，以往需要在 server 端處理的事情都慢慢搬到前端來處理

但 javascript 是單執行緒

即便 JavaScript 大量使用並行（Concurrency）機制，像是各種 Event Handler，依舊還是只有一個執行緒

所以就產生了前端的效能瓶頸

『 UI Blocking 』

Web Worker

  • 同源限制

  • 作用域（Scope）限制

  • 通訊關係

  • 腳本限制

Functions and classes available to Web Workers

// index.js

const worker = new Worker('./worker.js')

worker.onmessage = (event) => {
  console.log(event)
}

worker.postMessage('Hello Worker Thread')

console.log('Main')
// worker.js

self.onmessage = (event) => {
  console.log(event)
}

self.postMessage('Hi Main Thread')

console.log('Worker')
// index.js

const worker = new Worker('./worker.js')

worker.onmessage = (event) => {
  console.log(event)
}

worker.postMessage('Hello Worker Thread')

console.log('Main')
// worker.js

self.onmessage = (event) => {
  console.log(event)
}

self.postMessage('Hi Main Thread')

console.log('Worker')

  • Prefetching and/or caching data for later use

  • Polling and processing data from web services

  • Processing and display of large data sets

  • Computations related to moves in a game

  • Image processing and filtering

Using web workers for safe, concurrent JavaScript

1. Demo: Game collision detection

2. Demo: Thresholding images

XMLHttpRequest

// worker.js

export default 'worker'
// index.js

const worker = new Worker('./worker.js')

// ... make a request
// worker.js
// index.js

import wb from './worker.js'

// ... make a request
// worker.js

function reqListener () {
  const res = JSON.parse(this.responseText)
  self.postMessage(res)
}

const xhr = new XMLHttpRequest()

self.onmessage = () => {
  xhr.addEventListener("loadend", reqListener)

  xhr.open("GET", "https://h79v58r6mk.execute-api.ap-northeast-1.amazonaws.com/staging/api/user")

  xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI5YTZlZGY2MC02MGExLTExZWEtODQ3My1jMzI3YzZiNmMwOTIiLCJpYXQiOjE1ODM2MDU3Nzh9.8f03D-wlbGl6F8PeI-OqOZc_bnRK1CUTGuIEOaNxrOk');
  xhr.setRequestHeader('x-api-key', 'srOpzgACYODv9UiBN4D38Q6pgzI2pAXa2ItFnfl8');

  xhr.send()
}
// index.js

const worker = new Worker('./worker.js')

worker.onmessage = (event) => {
  console.log(event)
}

const app = new Vue({
  el: "#app",
  data: {
    name: ''
  },
  created () {
    setTimeout(() => {
      worker.postMessage(null)
      axios('https://h79v58r6mk.execute-api.ap-northeast-1.amazonaws.com/staging/api/user', {
        headers: {
          'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI5YTZlZGY2MC02MGExLTExZWEtODQ3My1jMzI3YzZiNmMwOTIiLCJpYXQiOjE1ODM2MDU3Nzh9.8f03D-wlbGl6F8PeI-OqOZc_bnRK1CUTGuIEOaNxrOk',
          'x-api-key': 'srOpzgACYODv9UiBN4D38Q6pgzI2pAXa2ItFnfl8'
        },
        method: 'GET'
      })
    }, 5000)
  },
  methods: {
    clickHandler () {
      console.log('click')
      this.name = 'Mia'
    }
  }
});

// worker.js

function reqListener () {
  const res = JSON.parse(this.responseText)
  self.postMessage(res)
}

const xhr = new XMLHttpRequest()

self.onmessage = () => {
  xhr.addEventListener("loadend", reqListener)

  xhr.open("GET", "https://h79v58r6mk.execute-api.ap-northeast-1.amazonaws.com/staging/api/user")

  xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI5YTZlZGY2MC02MGExLTExZWEtODQ3My1jMzI3YzZiNmMwOTIiLCJpYXQiOjE1ODM2MDU3Nzh9.8f03D-wlbGl6F8PeI-OqOZc_bnRK1CUTGuIEOaNxrOk');
  xhr.setRequestHeader('x-api-key', 'srOpzgACYODv9UiBN4D38Q6pgzI2pAXa2ItFnfl8');

  xhr.send()
}
// index.js

const worker = new Worker('./worker.js')

worker.onmessage = (event) => {
  console.log(event)
}

const app = new Vue({
  el: "#app",
  data: {
    name: ''
  },
  created () {
    setTimeout(() => {
      worker.postMessage(null)
      axios('https://h79v58r6mk.execute-api.ap-northeast-1.amazonaws.com/staging/api/user', {
        headers: {
          'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI5YTZlZGY2MC02MGExLTExZWEtODQ3My1jMzI3YzZiNmMwOTIiLCJpYXQiOjE1ODM2MDU3Nzh9.8f03D-wlbGl6F8PeI-OqOZc_bnRK1CUTGuIEOaNxrOk',
          'x-api-key': 'srOpzgACYODv9UiBN4D38Q6pgzI2pAXa2ItFnfl8'
        },
        method: 'GET'
      })
    }, 5000)
  },
  methods: {
    clickHandler () {
      console.log('click')
      this.name = 'Mia'
    }
  }
});
Made with Slides.com