🍋
Menu
General

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);
```

関連用語