31:T462,{ let examples = [ { file: FileAttachment("chrome@1.png"), caption: htl.html`Chrome on Linux` }, { file: FileAttachment("edge.png"), caption: htl.html`Edge on Linux` }, { file: FileAttachment("firefox-coarse.png"), caption: htl.html` Firefox on Linux
with privacy.reduceTimerPrecision=true (default) ` }, { file: FileAttachment("firefox-fine.png"), caption: htl.html` Firefox on Linux
with privacy.reduceTimerPrecision=false ` }, { file: FileAttachment("safari.png"), caption: htl.html`Safari on macOS
` } ]; return htl.html`

${await Promise.all( examples.map( async ({ file, caption }) => htl.html`

${await file.image()}

${caption}

` ) )}

`; }32:[{"id":"8f63e95d07c953a8087d4960ce8c98b7d0532f6bf7106837a2779dd61d910fab10636a277e7eafec0d1ec9ff4d382c63af4eca389c3d5a2d7e8aba6bd2b56ad3","href":"https://static.observableusercontent.com/files/8f63e95d07c953a8087d4960ce8c98b7d0532f6bf7106837a2779dd61d910fab10636a277e7eafec0d1ec9ff4d382c63af4eca389c3d5a2d7e8aba6bd2b56ad3","name":"chrome@1.png","type":"image/png","lastModified":1658939916198.871,"size":18963},{"id":"57a09d0cef1918307799249986e9c852cf48d1512e28b32f9d29f39316dcaf6a15c8b09ad4ddb57d134395f6c56a2ff7a990f2f54f532df1f2c9b801292788d0","href":"https://static.observableusercontent.com/files/57a09d0cef1918307799249986e9c852cf48d1512e28b32f9d29f39316dcaf6a15c8b09ad4ddb57d134395f6c56a2ff7a990f2f54f532df1f2c9b801292788d0","name":"edge.png","type":"image/png","lastModified":1658939816305.569,"size":19087},{"id":"504f7f5a1362539a0aa1f7572445fd1ee12f2fc363742e6954861096435d87c53dbc0fae875efc198dd78552da9ae2ae97113eee6ace20338da19b919ba58097","href":"https://static.observableusercontent.com/files/504f7f5a1362539a0aa1f7572445fd1ee12f2fc363742e6954861096435d87c53dbc0fae875efc198dd78552da9ae2ae97113eee6ace20338da19b919ba58097","name":"firefox-coarse.png","type":"image/png","lastModified":1658939474098.072,"size":16613},{"id":"b2736c1dc7fa239bad9826ea17aa24e5303330cf6a0c17d93c2261264b17d742f304bf354d84541a854256b4803c972ed5eb69bc02b95df87324efcd3c84f8e9","href":"https://static.observableusercontent.com/files/b2736c1dc7fa239bad9826ea17aa24e5303330cf6a0c17d93c2261264b17d742f304bf354d84541a854256b4803c972ed5eb69bc02b95df87324efcd3c84f8e9","name":"firefox-fine.png","type":"image/png","lastModified":1658939474095.726,"size":22284},{"id":"a739511e1a2b5ad3480a21d7f2ebce30a024392e12fae7875e0686ea26c1876a20304f22b5de5ee019b83bc5addf2d067a045d20e902b3918954fd4b756c72d3","href":"https://static.observableusercontent.com/files/a739511e1a2b5ad3480a21d7f2ebce30a024392e12fae7875e0686ea26c1876a20304f22b5de5ee019b83bc5addf2d067a045d20e902b3918954fd4b756c72d3","name":"safari.png","type":"image/png","lastModified":1658946535146.03,"size":55601}] 2f:{"title":"performance.now() vs +new Date()","cells":[{"id":0,"value":"# `performance.now()` vs `+new Date()`\n\nExploring how different browsers handle `new Date()` and `performance.now()`, in terms of throughput and step size. The data sets below were generated by running the timing functions in a loop, producing new values continuously for 10 milliseconds.\n\nNote the chart axes: the time since start is on the x axis, and the number of iterations is on the y axis. Steeper lines represent the loops running faster, and smoother lines represent more fine grained times being returned.\n\nThis behavior varies greatly by browser. Try a few!","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"## Independent\nThis chart uses data where the two time generation functions ran separately, so we can compare the overhead of calling each.","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"Plot.plot({\n x: { label: \"Δt (ms)\" },\n y: { label: \"array index\", tickFormat: \"s\" },\n color,\n marks: [\n Plot.lineY(perf, {\n y: (d, i) => i,\n x: (d) => d - perf[0],\n stroke: (d) => \"performance.now()\"\n }),\n Plot.lineY(date, {\n y: (d, i) => i,\n x: (d) => d - date[0],\n stroke: (d) => \"new Date()\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"## Combined\nThis chart uses data where each function was called once per loop iteration, and ran until `performance.now()` produced a value 10ms later than it's first call. This emphasizes the relative precision of the two methods.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"Plot.plot({\n color,\n x: { label: \"Δt (ms)\" },\n y: { label: \"array index\", tickFormat: \"s\" },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(combined, { x: \"value\", y: (d, i) => i, stroke: \"type\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"---\n## Examples\n\nHere are some samples of the above charts in various browsers.","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"perf = {\n let ds = [performance.now()];\n while (ds.at(-1) - ds[0] < 10) {\n ds.push(performance.now());\n }\n return ds;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"date = {\n let ds = [+new Date()];\n while (ds.at(-1) - ds[0] < 10) {\n ds.push(+new Date());\n }\n return ds;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"combined = {\n let startPerf = performance.now();\n let startDate = +new Date();\n let ds = [\n { type: \"performance.now()\", value: 0 },\n { type: \"new Date()\", value: 0 }\n ];\n while (ds.at(-2).value < 10) {\n ds.push({\n type: \"performance.now()\",\n value: performance.now() - startPerf\n });\n ds.push({ type: \"new Date()\", value: +new Date() - startDate });\n }\n return ds;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"color = ({\n domain: [\"performance.now()\", \"new Date()\"],\n range: [\"blue\", \"red\"],\n legend: true\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}