30:T1055,md` # Web Worker를 이용한 Fetch 벤치마킹 - [sungryeolp@gmail.com](mailto:sungryeolp@gmail.com) ## 이유 웹에서 대부분의 병목현상은 통신에서 발생합니다. 특히 앱의 크기가 커질수록 여러개의 분산된 엔드포인트에서 자료를 가져오게 되는 경우가 많습니다. 여러개의 요청을 시도하게 될 경우, 지연이 중첩되어 더욱 큰 지연현상이 발생하게 됩니다. 따라서 \`Promise.all\`을 이용해 하나의 통신이 다른 통신에 영향을 주지 않도록 하는 방법을 고려하는 경우가 흔합니다. 걸리는 시간을 비교하면 아래와 같이 될 것으로 추측할 수 있습니다. \`\`\` for await (하나의 요청 in 여러개의 요청) {} > await Promise.all(여러개의 요청) \`\`\` **문제는 자바스크립트가 본질적으로 싱글 스레드 기반**이라는 것입니다. 따라서 여러개의 요청을 거의 동시에 발생시키더라도, 하나의 요청이 전부 수행되기 이전에 다른 요청이 수행되어 다른 요청에 영향을 주게 됩니다.

통신 요청을 보내고 대기하는 상황만 발생한다면 지연이 발생할리 없습니다. 하지만 보통 하나의 통신 요청은 값을 집어넣거나 파싱하는 등, 연산을 함께 수행해야 합니다. 하나의 통신 요청을 처리하는 과정이 완료되기 직전에 다른 요청을 처리해야하는 상황이 발생하면 자연스럽게 싱글 스레드는 두 가지 일을 동시에 처리해야하는 상황에 됩니다. 따라서 [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)사용을 고려해볼 수 있습니다. web worker는 자연스럽게 특정 function을 멀티쓰레드로 처리해줍니다. 이론적으로 멀티쓰레드를 사용하는 web worker가 싱글 스레드 기반의 병렬처리보다 빠르다고 누구나 예상할 수 있습니다. 그러나 중요한 것은 **얼마나 빠른가** 입니다. 웹은 애자일한 개발도 무척 중요하기 때문에, micro-optimization이라면 안하느니만 못할 수 있습니다. 따라서 테스트를 만들어 병렬로 web worker를 사용한 요청과 web worker를 사용하지 않은 일반적인 요청을 처리하는데 걸리는 시간을 비교해 보았습니다. 테스트는 반드시 \`Promise.all()\`을 통하여 묶음으로 진행됩니다. 개별 요청 처리 시간은 마킹하지 않습니다. 이론상 병목현상은 여러개의 요청이 싱글스레드에서 동시에 진행될 때에만 발생되기 때문입니다.

처음 테스트를 만들고 진행했을 때, 예상하지 못한 이상치들이 발견되었습니다. 이유는 여러가지일 수 있습니다. 잦은 통신 요청으로 목표 url에서 쓰로틀링을 걸었을 수도 있고, 이전 테스트 내역이 heap메모리에 쌓이면서 퍼포먼스에 영향을 주고 있는 것일수도 있습니다. 따라서 이상치들을 제외하기 위해 표준편차값을 구하여 2표준편차만 사용한 비교 메시지를 차트 하단에 아래와 같이 표기합니다. \`\`\` 요청 ***가 2표준편차 기준으로 *배 느립니다. \`\`\` - \`다운로드 및 벤치마킹\` 버튼을 클릭하면 샘플링을 ${sampling} × ${sampleTry} 회 실시합니다. - 테스트 시도를 여러번 할 경우, 다운로드 결과는 누적됩니다. - 목표 서버에 지나치게 부하를 주지 않도록, 하나의 샘플링간 약간의 시간차를 두고 연속으로 테스트하며, 테스트 버튼을 누르기 전까지 테스트는 진행되지 않습니다. - 아래의 코드를 수정하여 목표 서버나 테스트 내용을 변경할 수 있습니다. `31:T548,chart = { const svg = d3 .create('svg') .attr('class', 'fetch-chart') .call(setSize, width, config.height); const gNormal = svg.append('g'); const gWorker = svg.append('g'); const chartBand = d3 .scaleBand() .domain(['normal', 'worker']) .range([config.marginX, width - config.marginX * 2]) .paddingInner(0.1); gNormal.attr('transform', trans2d(chartBand('normal'), config.marginY)); gWorker.attr('transform', trans2d(chartBand('worker'), config.marginY)); const scaleY = d3.scaleLinear(); const scaleMarginY = d3.scaleLinear(); const [colorNormal, colorWorker] = d3.schemeCategory10; const scaleX = {normal:d3.scaleBand(), worker:d3.scaleBand()} function update({ normalEntries, workerEntries }) { const dataAll = [...normalEntries, ...workerEntries]; renderChart({ tag: 'normal', g: gNormal, dataAll, data: normalEntries, w: chartBand.bandwidth(), h: config.height - config.marginY * 2, scaleY, scaleMarginY, color: colorNormal }); renderChart({ tag: 'worker', g: gWorker, dataAll, data: workerEntries, w: chartBand.bandwidth(), h: config.height - config.marginY * 2, scaleY, scaleMarginY, color: colorWorker }); } return Object.assign(svg.node(), { update }); }32:Tc7f,renderChart = ({ g, tag, data, dataAll, w, h, scaleY, scaleMarginY, color }) => { const minY = d3.min(dataAll); const maxY = d3.max(dataAll); scaleY.domain([0, maxY]).range([0, h]); scaleMarginY.domain([maxY, 0]).range([0, h]); const scaleX = d3 .scaleBand() .domain(d3.range(data.length).map((_, i) => i)) .range([0, w]) .paddingInner(0.2); const updateBarSize = bar => bar .attr('transform', (d, i) => trans2d(scaleX(i), scaleMarginY(d))) .attr('height', scaleY); const setTooltip = bar => bar .on("mouseover", function(ev, d) { // change the selection style d3.select(this) .attr('stroke-width', '1') .attr("stroke", "black"); // make the tooltip visible and update its text tooltip.style("visibility", "visible").text(formatMs(d)); }) .on("mousemove", function(ev) { tooltip .style("top", ev.pageY - 10 + "px") .style("left", ev.pageX + 10 + "px"); }) .on("mouseout", function() { // change the selection style d3.select(this).attr('stroke-width', '0'); tooltip.style("visibility", "hidden"); }); const enterBar = node => node .append('rect') .attr('class', `bar-${tag}`) .attr('width', scaleX.bandwidth()) .call(bar => bar .attr('transform', (_, i) => trans2d(scaleX(i), h)) .attr('height', 0) .transition(800) .delay((_, i) => i * 200) .call(updateBarSize) ) .attr('fill', color) .call(setTooltip); const updateBar = node => node .attr('transform', (d, i) => trans2d(scaleX(i), scaleMarginY(d))) .attr('height', scaleY) .call(bar => bar.transition(800).call(updateBarSize)) .call(setTooltip); g.selectAll(`.bar-${tag}`) .data(data) .join(enterBar, updateBar); if (g.select('.gAxis').empty()) { g.append('g').attr('class', 'gAxis'); } const axis = d3.axisLeft(scaleMarginY); g.select('.gAxis').call(axis); if (g.select('.label-title').empty()) { g.append('text') .attr('class', 'label-title') .call(setCoords, () => [10, 0]) .text(tag); } if (g.select('.label-legend').empty()) { g.append('text') .attr('class', 'label-legend mean') .call(setCoords, () => [10, 20]); g.append('text') .attr('class', 'label-legend median') .call(setCoords, () => [10, 35]); g.append('text') .attr('class', 'label-legend delta') .call(setCoords, () => [10, 50]); } g.select('.label-legend.mean').text(`평균값 ${formatMs(d3.mean(data) || 0)}`); g.select('.label-legend.median').text( `중위값 ${formatMs(d3.median(data) || 0)}` ); g.select('.label-legend.delta').text( `표준편차 ${(d3.deviation(data) || 0).toFixed(2)}` ); if (g.select('.line-average').empty()) { g.append('path').attr('class', 'line-average'); } const mean = d3.mean(data); const meanPos = scaleMarginY(mean); console.log(meanPos, mean); const lineGen = d3.line(); g.select('.line-average').attr('path', lineGen([[0, meanPos], [w, meanPos]])); }33:[{"id":"b639e180297a9755f4186c50e88d894287eb6149d464ce6ea73a0f105d03c52fb24af53fd90dadd761ef208f60c1fec36d0b47b19710f5e3feaf527319d892cc","href":"https://static.observableusercontent.com/files/b639e180297a9755f4186c50e88d894287eb6149d464ce6ea73a0f105d03c52fb24af53fd90dadd761ef208f60c1fec36d0b47b19710f5e3feaf527319d892cc","name":"Notes_210303_111734.jpg","type":"image/jpeg","lastModified":1614737946603.846,"size":56059},{"id":"c49f47352b30b6f09e08a2508d05c714ee65976103107e75ee392d2948c84ed9885f6853445e62ded18603416a77b7cf333a06f1ab4d2787050e9c292ba4c4cd","href":"https://static.observableusercontent.com/files/c49f47352b30b6f09e08a2508d05c714ee65976103107e75ee392d2948c84ed9885f6853445e62ded18603416a77b7cf333a06f1ab4d2787050e9c292ba4c4cd","name":"outlier.png","type":"image/png","lastModified":1614738852978.807,"size":75975}] 2e:{"title":"Web Worker를 이용한 Fetch 벤치마킹","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"sampling = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"sampleTry = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"// the target url can be changed for a better comparison\ngetUrl = i => `https://jsonplaceholder.typicode.com/posts/${i}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"button = {\n const elBtn = html``;\n elBtn.addEventListener('click', startWork);\n return elBtn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"{\n const elBtn = html``;\n elBtn.addEventListener('click', sortResult);\n return elBtn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"{\n if (!jobStarted) return md`- 다운로드가 아직 시작되지 않았습니다`;\n if (!jobFinished) return md`- 다운로드 중입니다(벤치마킹 하고 있습니다)`;\n const workerMean =\n d3.mean(result.workerEntries) + d3.deviation(result.workerEntries) * 2;\n const normalMean =\n d3.mean(result.normalEntries) + d3.deviation(result.normalEntries) * 2;\n const fracDiff =\n d3.max([workerMean, normalMean]) / d3.min([workerMean, normalMean]);\n if (workerMean > normalMean)\n return md`web worker fetch 가 2표준편차 기준으로 ${fracDiff.toFixed(\n 2\n )} 배 느립니다.`;\n return md`일반 fetch 요청이 2표준편차 기준으로 ${fracDiff.toFixed(\n 2\n )} 배 느립니다.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"chart.update(result)","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"config = ({\n height: 300,\n marginX: 50,\n marginY: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"formatMs = x => `${x.toFixed(0)}ms`","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"mutable result = ({ normalEntries: [], workerEntries: [] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"sortResult = () => {\n const normalEntries = d3.sort(result.normalEntries);\n const workerEntries = d3.sort(result.workerEntries);\n mutable result = { normalEntries, workerEntries };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"makeBatchUrl = () => {\n return d3\n .range(sampling)\n .map((_, i) => d3.range(sampleTry).map((_, i) => getUrl(i + 1)));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"async function startWork() {\n mutable jobFinished = false;\n mutable jobStarted = true;\n let normalEntries = [];\n let workerEntries = [];\n mutable result = { normalEntries, workerEntries };\n console.log('started downloading!');\n\n const batchUrls = makeBatchUrl();\n\n normalEntries = [\n ...result.normalEntries,\n ...(await Promise.all(batchUrls.map(fetchNormal)))\n ];\n mutable result = { normalEntries, workerEntries };\n\n const _batchUrls = makeBatchUrl();\n const worker = new Worker(workerScript);\n workerEntries = [\n ...result.workerEntries,\n ...(await Promise.all(_batchUrls.map(urls => fetchWorker(worker, urls))))\n ];\n worker.terminate();\n\n console.log('started worker downloading!');\n mutable result = { normalEntries, workerEntries };\n mutable jobFinished = true;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"function asleep(_time = 300) {\n return new Promise((resolve, reject) => {\n setTimeout(resolve, _time);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"async function fetchNormal(urls) {\n const startTime = performance.now();\n const normalFetches = urls.map(normalFetcher);\n await Promise.all(normalFetches);\n const endTime = performance.now();\n await asleep(500);\n return endTime - startTime;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"async function fetchWorker(worker, urls) {\n const startTime = performance.now();\n const workerFetches = urls.map(url => workerFetcher(worker, url));\n await Promise.all(workerFetches);\n const endTime = performance.now();\n await asleep(500);\n return endTime - startTime;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"mutable jobStarted = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"mutable jobFinished = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"normalFetcher = async url => {\n const req = await fetch(url);\n const json = await req.json();\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"workerFetcher = (worker, url) => {\n return new Promise((resolve, reject) => {\n worker.addEventListener('message', ({ data }) => {\n resolve(data);\n });\n worker.postMessage(url);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"workerScript = makeWorkerScript(`\n onmessage = async function({data}) {\n const req = await fetch(data);\n const json = await req.json();\n postMessage(json);\n }\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"makeWorkerScript = _script => {\n const blob = new Blob([_script], { type: 'text/javascript' });\n const script = URL.createObjectURL(blob);\n invalidation.then(() => URL.revokeObjectURL(script));\n return script;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"d3 = require('d3@v6.5.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"import { setCoords, setSize, trans2d } from '@rabelais/tree-utils'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}