SaveText.Ru

webworkers
  1. <!doctype html>
  2. <html lang="en">
  3.   <meta charset="UTF-8">
  4.   <meta name="viewport"
  5.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8. </head>
  9.   function work() {
  10.     // let result = window.points
  11.     //   .map(n=>{
  12.     //     // return  n*.3
  13.     //     return  window.points.filter(p => Math.abs(p-n)<.01).length*.3
  14.     //   })
  15.     //   .reduce((acc, n) => acc + n, 0)
  16.     let result = 0
  17.     for (let i = 0; i < 2000000000; i++) {
  18.       result += i % 21 === 0? 1 : 0;
  19.     }
  20.  
  21.     console.log('[email protected]# simple.html:14 ', result)
  22.   }
  23.  
  24.   console.time('simple')
  25.   work()
  26.   console.timeEnd('simple')
  27.   // console.log('[email protected]# simple.html:27 ', )
  28.   // console.time('simple')
  29.   // work()
  30.   // console.timeEnd('simple')
  31.  
  32. </script>
  33.  
  34. </body>
  35. </html>
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49. <!doctype html>
  50. <html lang="en">
  51.   <meta charset="UTF-8">
  52.   <meta name="viewport"
  53.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  54.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  55.   <title>Document</title>
  56. </head>
  57.  
  58. <script id="worker1">
  59.   onmessage = function (e) {
  60.     // let {threadIdx, points} = e.data;
  61.     // let quarter = ~~(points.length / 4);
  62.     // console.log('[email protected]# worker.js:4 ', threadIdx, threadIdx * quarter, (threadIdx + 1) * quarter);
  63.     // let segment = points.slice(threadIdx * quarter, (threadIdx + 1) * quarter);
  64.     // let result = segment.map((n) => {
  65.     //   // return n * .3
  66.     //   return points.filter(p => Math.abs(p - n) < .01).length * .3
  67.     // }).reduce((acc, n) => acc + n, 0)
  68.     let result = 0
  69.     for (let i = 0; i < 500000000; i++) {
  70.       result += i % 21 === 0? 1 : 0;
  71.     }
  72.     postMessage(result)
  73.   };
  74. </script>
  75.   let last = false
  76.   let blob = new Blob([
  77.     document.querySelector('#worker1').textContent
  78.   ], { type: "text/javascript" })
  79.  
  80.   let results = []
  81.   let workers = []
  82.   function work() {
  83.     console.log('[email protected]# parallel.html:17 ', )
  84.     for (let i = 0; i < 4; i++) {
  85.       console.log('[email protected]# parallel.html:19 ', )
  86.       let worker = new Worker(window.URL.createObjectURL(blob));
  87.       worker.onmessage = e => {
  88.         results.push(e.data);
  89.         checkEnd()
  90.       }
  91.       workers.push(worker)
  92.  
  93.     }
  94.  
  95.     console.time('worker')
  96.     workers.forEach((worker,idx) => worker.postMessage({}))
  97.     // workers.forEach((worker,idx) => worker.postMessage({threadIdx:idx, points: window.points}))
  98.   }
  99.   function checkEnd() {
  100.     console.log('[email protected]# parallel.html:28 ', results.length)
  101.     if (results.length === 4) {
  102.       console.log('[email protected]# parallel.html:29 ', results.reduce((acc, n) => acc + n, 0))
  103.       console.timeEnd('worker')
  104.       console.log('[email protected]# parallel.html:56 ', )
  105.  
  106.       // repeat()
  107.     }
  108.   }
  109.  
  110.   function repeat() {
  111.     if (last) {
  112.       return
  113.     }
  114.     console.log('[email protected]# parallel.html:64 ', );
  115.     results=[]
  116.     last=true
  117.     console.time('worker')
  118.     workers.forEach((worker,idx) => worker.postMessage({threadIdx:idx, points: window.points}))
  119.   }
  120.  
  121.   work()
  122. </script>
  123. </body>
  124. </html>
  125.  

Share with your friends:

Print