値の変更をトリガーにwebWorkerに処理をさせる。

Proxyはデータを監視できる。

let ob =new Proxy({},{ 
 set:function(o,p,v){
  w.postMessage({[p]:v});
  o[p]=v;//default;
 } 
})

URL.createObjectURLで生成するメモリURLは今の所、同一ドメイン。 そこからworkerを作る。

fn.worker=(src)=>{
 //inner.js or text or element
 let is={},f=(d=>URL.createObjectURL(new Blob( [d], {type:"text\/javascript"} )));
 is.element=function(o){return !!(o && o.nodeType === 1)};
 is.url=(d=>!/\n|;/.test(d));
 return new Worker( is.element(src)?f(src.textContent):is.url(src)?src:f(src) );
}

let w =fn.worker(fn.q('[data-worker="1"]'));//same new Woker...

フロント側はProxyにデータを詰める。

fn.q('input').oninput=function(ev){ ob.value1 = this.value}

全部

<input></input>
<output></output>
<script type="text/plain" data-worker="1">
console.log('worker boot');
function calc(data){
 console.log(data) 
 return data;
}
onmessage=function(e){postMessage(calc(e.data))}
onerror=function(e){console.log(e)} 
</script>

var fn={}
fn.worker=(src)=>{
 //inner.js or text or element
 let is={},f=(d=>URL.createObjectURL(new Blob( [d], {type:"text\/javascript"} )));
 is.element=function(o){return !!(o && o.nodeType === 1)};
 is.url=(d=>!/\n|;/.test(d));
 return new Worker( is.element(src)?f(src.textContent):is.url(src)?src:f(src) );
}
fn.q=(s)=>{return document.querySelector(s)};
fn.jsy=(d)=>{return JSON.stringify(d,null,2)}
;
let w =fn.worker(fn.q('[data-worker="1"]'));//same new Woker...
let ob =new Proxy({},{ 
 set:function(o,p,v){
  w.postMessage({[p]:v});
  o[p]=v;//default;
 } 
})
fn.q('input').oninput=function(ev){ ob.value1 = this.value}
w.onmessage=function(e){ fn.q('output').textContent = fn.jsy(e.data)}
;