全新的 Render Tree

Famo.us 提供了一個全新的 Render Tree 的作法，用來避開舊有 HTML Elements 在元素操作上的諸多缺點。也提供了一個全新的 Render Engine 來渲染自己所產生的樹狀結構。

這裡用一個簡易的表達方式來說明 Render Tree 的結構，

這樣的結構，在 HTML 當中，我們可以這樣來解釋，

<div class="context">
    <div class="famous-surface" style="background-color: white;">
        <span>Hello World</span>
    </div>
</div>

你或許會想問，那個 Modifier 怎麼不見了？是，這個 Modifier 並不是一個真正的元素，他是用來產生 style 這個屬性的元件。所以，如果我們看最右邊的那個 Render Tree，他就會像是這個樣子，

<div class="context">
    <div class="famous-surface-container">
        <div class="famous-group">
            <div class="famous-surface">
                <span>Hello World</span>
            </div>
            <div class="famous-surface">
                <span>Hello World</span>
            </div>
        </div>
    </div>
</div>

這樣可以看到，這個 ScrollView 提供了兩層的容器，來包住底下所有的 Surface 元件。全部的 Famo.us 的元件，最多都只有兩層，除了你自行組合之外，整個 Famo.us 元件中，最多僅提供了兩層的 DOM Tree 來使用。

所以，由於只有兩層的關係，所以這整個 DOM 在瀏覽器中的渲染效能就相當不錯。當然，這樣的結構就會造成語意上的缺陷。是，如果你完全依照 Famo.us 的結構來產生 DOM 的話，很抱歉，他是不符合 HTML5 語意標籤的規則的。

但，他也能利用 ElementAllocate 來做到更複雜的事情，這就有機會再說了。