docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: wiki-2026-0508-high-resolution-time
|
||||
title: High Resolution Time
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [performance.now, Monotonic Time, HR Time, Hi-Res Timer]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [web-api, performance, timing, security]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: JavaScript/C
|
||||
framework: W3C-HRTime/POSIX
|
||||
---
|
||||
|
||||
# High Resolution Time
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 sub-millisecond 정밀도의 매 monotonic clock"**. W3C High Resolution Time spec — `performance.now()` 가 매 `Date.now()` 의 ms 한계 + wall-clock jitter 를 매 해결. 매 Spectre 후 — 모든 brower 가 매 timer 정밀도를 매 100µs ~ 1ms 로 매 reduce + cross-origin isolation 으로 매 5µs 회복.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 vs Date.now
|
||||
- `Date.now()`: wall clock, ms 단위, NTP 으로 점프 가능 (음수 delta!).
|
||||
- `performance.now()`: monotonic, fractional ms, navigation start 기준.
|
||||
|
||||
### 매 timer attack mitigation
|
||||
- Spectre/Meltdown (2018) → 매 brower 가 timer fuzz/round.
|
||||
- Default: 100µs ~ 1ms rounding + jitter.
|
||||
- COOP+COEP (cross-origin isolated) 시 → 5µs 정밀 + `SharedArrayBuffer`.
|
||||
|
||||
### 매 응용
|
||||
1. Animation frame timing (`rAF` callback).
|
||||
2. Performance profiling (`User Timing API`).
|
||||
3. WebGL/WebGPU frame budget tracking.
|
||||
4. Audio scheduling (`AudioContext.currentTime` 동기).
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Basic timing
|
||||
```javascript
|
||||
const t0 = performance.now();
|
||||
heavyWork();
|
||||
const elapsed = performance.now() - t0;
|
||||
console.log(`took ${elapsed.toFixed(3)} ms`); // 12.345 ms
|
||||
```
|
||||
|
||||
### User Timing API (DevTools 표시)
|
||||
```javascript
|
||||
performance.mark('render-start');
|
||||
render();
|
||||
performance.mark('render-end');
|
||||
performance.measure('render', 'render-start', 'render-end');
|
||||
const [m] = performance.getEntriesByName('render');
|
||||
console.log(m.duration);
|
||||
// Visible in Chrome DevTools Performance panel.
|
||||
```
|
||||
|
||||
### Frame budget tracker
|
||||
```javascript
|
||||
let lastT = performance.now();
|
||||
function frame(now) {
|
||||
const dt = now - lastT;
|
||||
lastT = now;
|
||||
if (dt > 16.7) console.warn(`slow frame: ${dt.toFixed(1)}ms`);
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
```
|
||||
|
||||
### Cross-origin isolated (max precision)
|
||||
```http
|
||||
# Server response headers
|
||||
Cross-Origin-Opener-Policy: same-origin
|
||||
Cross-Origin-Embedder-Policy: require-corp
|
||||
```
|
||||
```javascript
|
||||
if (crossOriginIsolated) {
|
||||
// performance.now() granularity ~5µs
|
||||
// SharedArrayBuffer 가능
|
||||
}
|
||||
```
|
||||
|
||||
### POSIX equivalent (C)
|
||||
```c
|
||||
#include <time.h>
|
||||
struct timespec t0, t1;
|
||||
clock_gettime(CLOCK_MONOTONIC, &t0);
|
||||
do_work();
|
||||
clock_gettime(CLOCK_MONOTONIC, &t1);
|
||||
double elapsed_ns = (t1.tv_sec - t0.tv_sec) * 1e9 + (t1.tv_nsec - t0.tv_nsec);
|
||||
```
|
||||
|
||||
### Rust std (cross-platform)
|
||||
```rust
|
||||
use std::time::Instant;
|
||||
let t0 = Instant::now();
|
||||
heavy_work();
|
||||
println!("took {:?}", t0.elapsed()); // sub-ns precision on modern HW
|
||||
```
|
||||
|
||||
### Debounce slow timers
|
||||
```javascript
|
||||
// If you measure dt < 0.1ms repeatedly, you're in fuzzed timer mode.
|
||||
function isolatedPrecisionAvailable() {
|
||||
const samples = Array.from({length: 100}, () => {
|
||||
const a = performance.now(); const b = performance.now();
|
||||
return b - a;
|
||||
});
|
||||
return samples.some(d => d > 0 && d < 0.05); // sub-100µs visible
|
||||
}
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Wall-clock event log | `Date.now()` / `Date.toISOString()` |
|
||||
| Profile / micro-bench | `performance.now()` + User Timing |
|
||||
| Frame loop | rAF callback timestamp (매 monotonic) |
|
||||
| Audio sync | `AudioContext.currentTime` |
|
||||
| Cross-origin iframe | postMessage with monotonic delta |
|
||||
| Native (Linux/macOS) | `clock_gettime(CLOCK_MONOTONIC)` |
|
||||
| Native (Windows) | `QueryPerformanceCounter` |
|
||||
|
||||
**기본값**: Duration 측정엔 매 monotonic. 매 Date 는 user-facing timestamp 만.
|
||||
|
||||
## 🔗 Graph
|
||||
- 변형: [[Long Tasks]]
|
||||
- 응용: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core Web Vitals]]
|
||||
- Adjacent: [[Spectre]] · [[Cross-Origin Isolation]] · [[SharedArrayBuffer]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 성능 측정 코드 작성, profiling, frame budget 분석.
|
||||
**언제 X**: Persistent timestamp / event log 매 wall-clock 필요 시.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`Date.now()` for delta**: NTP step 시 음수 / 점프 가능.
|
||||
- **`new Date()` 매 hot loop**: allocation cost + ms 한계.
|
||||
- **Assuming sub-ms precision**: COOP/COEP 없으면 매 1ms rounded.
|
||||
- **Cross-origin worker timing**: postMessage 의 매 ms 단위 transmit overhead.
|
||||
- **`setTimeout` 으로 정밀 timing**: 매 4ms+ minimum, jittery.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (W3C HR Time Level 3, MDN performance.now, Chrome timer reduction notes).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — performance.now + Spectre mitigation + COOP/COEP 5µs |
|
||||
Reference in New Issue
Block a user