Principal Web Developer at Freedom of the Press Foundation
cellName = measurePerformance(
'Standard Measurement',
() => {
const timestamp = Date.now()
while (Date.now() < timestamp + 1000) {}
return 'Tada! 🎉'
}
)
md`**Result:** ${cellName}`
asyncResult = measurePerformanceAsync(
'Async Measurement',
async () => await new Promise(
resolve => setTimeout(x => resolve('Tada! 🐢 🎉'), 2000)
)
)
md`**Result:** ${asyncResult}`
performanceResults()
mutable performanceEntries = []
measurePerformance = (name, fn) => {
performance.mark(`obperf-start-${name}`)
const returnVal = fn()
performance.mark(`obperf-end-${name}`)
performance.measure(`obperf-${name}`, `obperf-start-${name}`, `obperf-end-${name}`)
const entries = performance.getEntriesByType('measure')
.filter(e => e.name.startsWith('obperf-'))
.map(e => ({ 'Name': e.name.replace('obperf-', ''), 'Duration (ms)': e.duration, 'Measured at (ms after page load)': e.startTime }))
.sort((a, b) => a - b)
mutable performanceEntries = entries
return returnVal
}
measurePerformanceAsync = async (name, fn) => {
performance.mark(`obperf-start-${name}`)
const returnVal = await fn()
performance.mark(`obperf-end-${name}`)
performance.measure(`obperf-${name}`, `obperf-start-${name}`, `obperf-end-${name}`)
const entries = performance.getEntriesByType('measure')
.filter(e => e.name.startsWith('obperf-'))
.map(e => ({ 'Name': e.name.replace('obperf-', ''), 'Duration (ms)': e.duration, 'Measured at (ms after page load)': e.startTime }))
.sort((a, b) => a - b)
mutable performanceEntries = entries
return returnVal
}
performanceResults = () => {
const clearEntriesButton = html`<button>Clear Entries</button>`
clearEntriesButton.addEventListener('click', e => {
mutable performanceEntries = []
performance.clearMarks()
})
return html`
${table(performanceEntries, { title: 'Performance Measurements' })}
${clearEntriesButton}
`
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
