Tree and View Systems Across Web, Android, iOS, and Flutter

Introduction – This article series is divided into two parts and introduces tree‑related technologies on Web, Android, iOS, and Flutter platforms. It compares similarities and differences to help front‑end developers understand each platform’s characteristics.

Web – DOM Tree – A web page consists of HTML, CSS, and JavaScript. HTML is parsed into a DOM tree, CSS into a style‑rule tree; the two are merged into a render tree that drives layout and painting. The DOM construction steps are: reading bytes, tokenization, lexical analysis, and building the tree based on parent‑child relationships.

Web – Virtual DOM – Because direct DOM manipulation is costly, modern frameworks use a Virtual DOM – a lightweight JavaScript object that mimics the real DOM. The article shows a typical Virtual DOM object and explains the diff algorithm, which compares two trees, calculates minimal changes (often linear time O(max(M,N))) and updates the real DOM by applying insert, delete, or move operations.

Android – View Tree – Android layout resources (XML) are analogous to HTML. An example LinearLayout XML is provided:

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" />
</LinearLayout>

Layout resources are immutable; after inflation they become a mutable view tree. The view hierarchy (View and ViewGroup) determines layout and rendering.

Android – Styles and Themes – Styles and themes group view attributes similarly to CSS. Example style definition and usage are shown:

<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

<TextView style="@style/GreenText" android:text="Hello" />

Android – Rendering Process – The view tree is built by LayoutInflater, then measured, laid out, and drawn. Developers can trigger re‑layout or redraw via requestLayout() and invalidate() . Performance optimizations include AsyncLayoutInflater (asynchronous inflation) and X2C (pre‑generated Java code from XML).

The article concludes with references to further reading on DOM construction, Virtual DOM internals, and Android layout optimization.