Rendering
렌더링 (시각적 출력 생성)
HTML과 CSS를 보이는 웹 페이지로, PDF 명령을 페이지 이미지로, 3D 모델을 화면 픽셀로 변환하는 것처럼 구조화된 데이터에서 시각적 또는 청각적 출력을 생성하는 과정입니다.
기술 세부사항
브라우저 렌더링은 파이프라인을 따릅니다: HTML 파싱이 DOM 트리를 구축하고, CSS 파싱이 CSSOM을 구축하며, 둘이 결합하여 렌더 트리가 되고, 레이아웃이 형상을 계산하고, 페인팅이 픽셀을 채우며, 합성이 결과를 레이어링합니다. PDF 렌더링은 콘텐츠 스트림 연산자(텍스트 배치, 그래픽 상태, 경로 그리기)를 해석하여 페이지 이미지를 생성합니다. 도구에서의 Canvas 기반 렌더링은 2D 컨텍스트 또는 하드웨어 가속 연산을 위한 WebGL을 사용합니다. OffscreenCanvas 또는 Web Worker를 통한 오프스크린 렌더링은 메인 스레드 차단을 피합니다.
예시
```javascript
// Rendering: file processing example
const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
console.log(`Loaded: ${file.name} (${file.size} bytes)`);
};
reader.readAsArrayBuffer(file);
```