Rendering
レンダリング(視覚出力の生成)
HTMLとCSSを目に見えるWebページに変換したり、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);
```