بیایید به ساختارهای داده کلیدی نگاه کنیم، که ورودی و خروجی خط لوله رندر هستند.
این ساختارهای داده عبارتند از:
- درختان فریم از گره های محلی و راه دور تشکیل شده اند که نشان می دهد کدام اسناد وب در کدام فرآیند رندر و کدام رندر Blink هستند.
- درخت قطعه تغییرناپذیر خروجی (و ورودی به) الگوریتم محدودیت طرح را نشان می دهد.
- درخت های ویژگی نشان دهنده سلسله مراتب تبدیل، کلیپ، افکت و اسکرول یک سند وب هستند. اینها در سراسر خط لوله استفاده می شوند.
- لیست های نمایش و تکه های رنگ ورودی الگوریتم های شطرنجی و لایه بندی هستند.
- فریم های کامپوزیتور سطوح، سطوح رندر و کاشی های بافت گرافیکی را که برای ترسیم با استفاده از GPU استفاده می شوند، محصور می کنند.
قبل از قدم زدن در میان این ساختارهای داده، مثال زیر بر روی یکی از بررسی معماری بنا شده است. این مثال در سراسر این سند با نمایش نحوه اعمال ساختارهای داده در آن استفاده می شود.
<!-- Example code -->
<html>
<div style="overflow: hidden; width: 100px; height: 100px;">
<iframe style="filter: blur(3px);
transform: rotateZ(1deg);
width: 100px; height: 300px"
id="one" src="foo.com/etc"></iframe>
</div>
<iframe style="top:200px;
transform: scale(1.1) translateX(200px)"
id="two" src="bar.com"></iframe>
</html>
درختان قاب
Chrome ممکن است گاهی اوقات انتخاب کند که یک فریم با منشاء متقاطع را در یک فرآیند رندر متفاوت از قاب اصلی خود ارائه دهد.
در کد مثال، سه فریم وجود دارد: