作者：京東物流 盧旭
大前端包括哪些技術棧
大前端指的是涵蓋所有與前端開發相關的技術和平臺，應用於各類裝置和作業系統上。大前端不僅包括Web開發，還包括移動端開發和跨平臺應用開發，具體包括：
•原生應用開發：Android、iOS、鴻蒙（HarmonyOS）等；
•Web前端框架：Vue、React、Angular等；
•小程式開發：微信小程式、京東小程式、支付寶小程式等；
•跨平臺解決方案：React Native、Flutter、Taro、Weex等。
什麼是渲染
•渲染：在計算機中，渲染是指將計算機程式中的圖形資料（三維模型、紋理、光源等）透過計算和圖形處理技術，最終轉化為影像的過程。這個過程不僅限於靜態影像的生成，也包括動畫和影片的渲染，以實現逼真的視覺效果。
•渲染原理：是指將程式碼轉換為使用者可以看到的UI介面的過程。如在Web前端領域，渲染原理主要涉及如何將HTML、CSS和JavaScript等程式碼轉化為使用者介面上的實際顯示效果。這個過程通常包括解析、佈局、繪製等步驟，具體根據不同的平臺有不同的實現方式，渲染引擎也有所不同。
Android渲染原理
Android的渲染引擎負責將應用程式的使用者介面渲染到螢幕上。其中的核心元件包括：
•SurfaceFlinger：負責合併來自不同應用程式的圖形輸出，並將其組合成一個螢幕影像。它管理著EventControlThread、DispSyncThread等執行緒，以及處理VSYNC訊號，確保UI的平滑顯示;
•Skia：Android的2D圖形庫，用於繪製應用程式的使用者介面；Skia實現了Canvas系統，可以處理向量圖形、文字和點陣圖等不同型別的繪圖需求。
•OpenGL ES/Vulkan： 兩種主要的圖形API，用於處理高效能的3D渲染；OpenGL ES是移動裝置上常用的圖形API標準，而Vulkan是較新的高效低開銷圖形API。
•Hardware Composer (HWC) ：HAL（Hardware Abstraction Layer）元件，可與GPU和顯示器直接互動；它處理來自SurfaceFlinger的圖層，並決定如何高效地組合這些圖層。
•Gralloc：圖形緩衝區分配器，它負責管理記憶體從不同的圖形元件（如SurfaceFlinger、應用程式）之間的共享和分配。透過Gralloc，多個圖形元件可以有效地在共享的緩衝區上進行繪製操作。
•RenderThread：這是UI渲染pipeline的一個重要部分，特別是對於繪製複雜UI的應用程式；它執行在一個獨立的執行緒上，以處理資源密集型的渲染任務，避免阻塞主執行緒。
•Choreographer：透過內部的FrameDisplayEventReceiver接收VSYNC訊號，統一處理InputEvent、Animation和Traversal等任務。它負責協調UI的繪製，確保在每個VSYNC訊號到達時執行必要的繪製操作
•GLSurfaceView： 提供一個OpenGL ES繪圖表面，並且可以將OpenGL的繪圖命令路由到相關的GL context中；通常用於實現高階別的3D圖形渲染。
•TextureView：可以在應用程式中作為一個UI元件來顯示內容，如影片和其他動畫，它內部使用Texture來高效管理。
•WebView： 用於處理H5頁面顯示的元件，它內部不僅涉及HTML渲染，還包含圖形渲染元件。
View和ViewGroup是應用框架層的核心元件，View是介面的基本元素，而ViewGroup是View的容器。渲染引擎透過遍歷View樹，計算每個View的大小和位置，並將其繪製到螢幕上。主要涉及以下幾個步驟：
•測量（Measurement） ：在這個階段，渲染引擎會遍歷View樹，並呼叫每個View的onMeasure方法來計算其大小。這個過程會從上到下（從根View到子View）進行，以確保每個View都根據其父View的大小約束來確定自己的大小。
•佈局（Layout） ：透過XML佈局檔案或者Java/Kotlin程式碼定義View層級，系統解析後會生成相應的View樹，在測量階段完成後，渲染引擎會進入佈局階段。在這個階段，它會呼叫每個View的onLayout方法來確定其在螢幕上的位置。這個過程同樣是從上到下進行的，以確保每個View都被放置在正確的位置上。
•繪製（Draw） ：渲染引擎會遍歷View樹，並呼叫每個View的onDraw方法來將其內容繪製到螢幕上。這個過程可能會使用到GPU加速來提高繪製效率。
•合併圖層（Layer Merge） ：將不同檢視的圖層合併為最終的顯示影像。
•顯示到螢幕（Display to Screen） ：將合併後的影像顯示到螢幕上。
Android的渲染過程是自上向下的遞迴測量和佈局過程，Android 系統的渲染管道充分利用了多執行緒、硬體加速和顯示同步技術，確保流暢的使用者體驗。從應用程式定義的介面，經過 View 系統層的繪製，到 GPU 硬體加速實現，再到最終合成顯示。這些元件共同承擔了將應用程式的圖形內容高效地顯示到裝置螢幕上的任務，確保圖形渲染的高效性和穩定性。
iOS渲染原理
iOS 的渲染原理是核心元件的共同協作，實現高效且流暢的介面顯示；主要核心元件包括：
•UIKit/Core Animation層：UIKit 中的所有介面元素都是基於 UIView 和 CALayer 的，它們共同起作用來描述並管理檢視的層級關係和屬性（例如背景顏色、邊框、陰影等）；DisplayLink是解決螢幕重新整理率問題，DisplayLink在每次螢幕重新整理前會呼叫回撥函式，保證整個渲染過程的重新整理頻率與螢幕重新整理頻率同步，確保幀率。
•Core Animation：Compositing是在程式碼執行修改介面的屬性之後，UIKit 會將這些修改提交給 Core Animation，後者會將這些屬性變化組合在一起，並生成一個光柵化的檢視影像。這些影像然後會被傳遞到合成器進行處理。Animation是Core Animation 負責處理動畫效果，透過離屏渲染和硬體加速來提高效能，這樣保證介面動畫的流暢性和穩定性。
•Render Server：Layer Tree是當應用程式將資訊提交給 Core Animation，Core Animation 會將這些資訊傳送到一個叫作 Render Server 的後臺程序。Render Server 會處理這個層級樹（Layer Tree），並對其進行必要的合成和繪製操作。打包成二進位制後設資料，傳送到GPU進行實際渲染，Render Server打包所有的Layer資訊併傳送到GPU進行實際的渲染處理。
•Metal/ OpenGL ES：繪製指令是Render Server 將合成後的層（Layer）提交給 Metal 或 OpenGL ES，這些渲染框架會根據指令排程圖形處理單元（GPU）進行實際的繪製操作。它們負責將高層次的繪圖指令轉換為低層次的 GPU 指令。
•GPU 渲染：GPU 負責執行這些繪圖指令，把每一幀繪製到螢幕緩衝區。GPU加速能夠顯著提高圖形的繪製效率和效能。
•VSync 和 Framebuffer：VSync（垂直同步）是為了避免螢幕撕裂現象，iOS 使用 VSync 機制。VSync 會在螢幕重新整理期間觸發通知，使應用程式和 Render Server 知道什麼時候該提交新的一幀資料。
•Framebuffer是GPU 完成渲染後，幀緩衝區 (Framebuffer) 中的內容被送到顯示控制器，最終顯示在螢幕上。
整個過程是 CPU 和 GPU 的協作工作，分階段地處理和最佳化每一幀的渲染，確保最終的顯示效果流暢、精美；此外，透過使用硬體加速和高效的渲染演算法，iOS 渲染系統能夠在保持高效能的同時節省裝置的電力消耗；而繪製流程主要包括佈局、繪製和渲染，如下：
•佈局階段：在iOS中，佈局是透過Auto Layout系統實現的，這是一個基於約束的佈局系統，它根據檢視及其子檢視的約束條件計算位置和大小。當約束條件發生變化時，Layout Engine會重新計算檢視的位置和大小，這個過程稱為佈局；佈局階段涉及到檢視的層級關係設定，包括檢視的位置、大小、背景色等屬性。這個階段還包括了計算和設定檢視的frame，這是透過約束的計算來確定的。
•繪製階段：繪製階段涉及到將檢視的內容繪製到螢幕上。這包括呼叫drawRect:和drawLayer:inContext:等方法，這些方法在檢視需要重繪時被呼叫。在這個階段，檢視會將其內容繪製到圖層上。每個UIView物件都有一個layer屬性，指向一個CALayer類的物件，檢視會將自己繪製到這個圖層上。
•渲染階段：渲染階段是將繪製好的圖層內容呈現到螢幕上。這個過程涉及到圖層的提交、核心動畫的處理、OpenGL幾何形狀的設定以及最終的螢幕渲染。渲染階段主要由GPU執行，而佈局和繪製階段主要由CPU處理。CPU和GPU的協同工作使得iOS裝置的圖形渲染高效且流暢。
鴻蒙渲染原理
鴻蒙系統（HarmonyOS）是華為開發的一種微核心作業系統，用於包括智慧手機、平板、智慧手錶、物聯網裝置等。鴻蒙系統的渲染原理涉及多個方面，主要包括UI渲染、圖形處理和硬體加速等。鴻蒙採用了分散式架構設計，可以實現一次開發，多端部署。
鴻蒙的渲染流程包括以下幾個步驟：
1.ArkUI宣告式UI：開發者使用ArkUI編寫介面描述檔案。
2.編譯生成Render Node樹：將ArkUI檔案編譯成中間表示形式Render Node樹。
3.生成VNode樹：將Render Node樹轉換為VNode樹，用於虛擬DOM的管理和更新。
4.渲染合成：根據VNode樹的資料結構和屬性資訊進行繪製操作，最終輸出到螢幕上。
鴻蒙的亮點在於提供了分散式UI能力，即可以在多個裝置上進行協同渲染，讓UI不僅侷限於一個裝置上執行，而是分散式地在多個終端裝置上共同執行，從而提升效能和使用者體驗。
Vue渲染原理
Vue.js是一款JavaScript框架，用於構建使用者介面；Vue的渲染原理基於虛擬DOM技術；當元件的狀態發生變化時，Vue會建立一個新的虛擬DOM樹來反映這些變化；然後，Vue會比較新老虛擬DOM樹的差異，並計算出最小的修改量來更新實際的DOM結構，其渲染流程包括以下主要步驟：
•初始化：當建立 Vue 例項時，Vue 會進行初始化，包括繫結資料、計算屬性、方法和偵聽器。響應式系統會將資料物件轉換為響應式物件，並初始化模板編譯器和渲染函式。
•解析模板：Vue首先會解析模板，並生成一個抽象語法樹（AST）。這個過程中，Vue會將模板中的指令和屬性轉換為對應的AST節點。
•生成渲染函式：Vue根據AST生成一個渲染函式，該函式用於生成虛擬DOM樹。渲染函式是一個JavaScript函式，用於生成VNode（Vue的虛擬DOM節點）並將其渲染到真實的DOM樹上。
•執行渲染函式：當元件的狀態發生變化時，Vue會重新執行渲染函式，生成一個新的虛擬DOM樹。
•對比新舊虛擬DOM樹：Vue會對比新舊虛擬DOM樹的差異，找出需要更新的部分。這個過程透過Vue內部的“diff”演算法實現，該演算法會對比新舊虛擬DOM樹的結構和屬性，找出差異。
•更新DOM：根據差異更新真實的DOM樹。Vue會最小化DOM操作的次數，只更新需要變化的部分，而不必重新渲染整個頁面。
Vue的渲染原理透過響應式系統和虛擬DOM協同工作，實現了高效的資料繫結和靈活的檢視更新策略。我們只需關注資料的變化，Vue會自動處理檢視的更新，大大提高了開發效率和使用者體驗。
React渲染原理
React的渲染原理有幾個核心概念：Virtual DOM（虛擬DOM）、Reconciliation（協調）。
•Virtual DOM：Virtual DOM是React用來描述真實DOM樹的一個JavaScript物件樹，其結構和真實的DOM樹一一對應。當元件的狀態（state）或屬性（props）發生變化時，React不是直接操作真實的DOM樹，而是在記憶體中建立一個新的Virtual DOM樹。
•Diffing 演算法：React透過比較新舊Virtual DOM樹的差異（使用Diff演算法），來確定哪些部分需要更新，並只對更新的部分進行對應的DOM操作，從而提高了渲染效率。
•Reconciliation：當元件狀態或屬性發生變化時，React需要呼叫Reconciliation演算法來決定哪些DOM節點需要更新以及如何更新。Reconciliation演算法的基本流程包括比較新舊Virtual DOM的根節點，判斷是否可以複用，以及根據節點的型別和屬性進行更新或替換。React採用遞迴遍歷的方式來比較新舊Virtual DOM，這也是為什麼更新操作不適合過於頻繁的原因，因為遞迴遍歷是一個高消耗的操作。
React的渲染流程可以大致分為兩個階段：render階段和commit階段。
•render階段：在這個階段，React會調合（reconcile）虛擬DOM，計算出最終要渲染出來的虛擬DOM。這個過程包括生成Fiber物件、收集副作用、找出哪些節點發生了變化，並打上不同的flags。Diff演算法也是在這個階段執行的。render階段的工作都是在記憶體中進行的，計算出更新後的Fiber樹，但在這個階段並沒有更新UI，檢視不會有任何更改。
•commit階段：在這個階段，React會根據上一步計算出來的虛擬DOM，同步地渲染具體的UI。渲染器（Renderer）會根據協調器（Reconciler）計算出來的虛擬DOM，同步地渲染節點到檢視上。這個過程是同步執行的，不可以被打斷。
React的渲染原理透過Virtual DOM和Reconciliation演算法，以及排程器、協調器和渲染器的協同工作，實現了高效、可靠的UI更新。
小程式渲染原理
小程式（這裡以微信小程式為例，其它大同小異）的渲染原理主要如下：
微信小程式採用了雙執行緒模型，將渲染和邏輯處理分離到不同的執行緒中，從而提高了渲染速度和效率。具體來說，渲染層負責頁面的渲染和繪製工作，而邏輯層則負責處理小程式的業務邏輯和資料處理。
•渲染層：負責將WXML模板和WXSS樣式解析並生成最終的頁面。渲染層會構建DOM樹和樣式表，並透過底層的圖形系統進行繪製和顯示；
•邏輯層：使用獨立的JSCore作為執行環境，執行小程式的JavaScript程式碼，處理使用者的輸入和事件，並更新頁面的狀態。邏輯層與渲染層之間透過特定的通訊機制進行資料傳輸和事件通知。
渲染流程主要包括解析和編譯、預載入、頁面渲染和繪製與顯示，具體如下：
•解析和編譯：當使用者開啟小程式時，小程式框架首先對小程式的程式碼進行解析和編譯。這一過程包括將小程式的程式碼轉換成可執行的指令，並生成對應的資料結構，如頁面樹和元件樹。解析和編譯過程需要消耗一定的時間，但在後續的頁面渲染中能夠大大提高效率。
•預載入：在解析和編譯完成後，小程式框架進行預載入。預載入是指在使用者進入具體頁面之前，提前載入可能需要使用的資源，如圖片、樣式檔案等。透過預載入，小程式能夠在使用者切換頁面時減少載入時間，提高渲染速度。
•頁面渲染：當使用者進入具體頁面時，小程式框架將頁面樹和元件樹渲染到螢幕上。渲染過程包括計算每個元件的位置和尺寸、應用樣式和佈局，並生成最終的繪製指令。
•繪製與顯示：小程式框架將渲染得到的繪製指令交給底層的圖形系統進行繪製。圖形系統會將指令轉換成影像，並顯示在螢幕上。
微信小程式的渲染原理是一個基於雙執行緒模型的高效渲染過程，透過渲染層和邏輯層的分離與協同工作，實現了頁面的快速渲染和流暢的使用者體驗。
ReactNative渲染原理
React Native是基於React技術棧開發跨平臺移動應用的一種框架；React Native的渲染原理主要涉及JavaScript執行緒與原生執行緒的互動，以及React的Virtual DOM（虛擬DOM）機制。其渲染原理如下：
•JavaScript執行緒與原生執行緒的互動：React Native在JavaScript執行緒中執行JavaScript程式碼，包括React元件的渲染邏輯；當JavaScript執行緒計算出需要進行UI更新時，這些更新會被序列化並透過一個叫做Bridge的機制傳送給原生執行緒；原生執行緒接收到更新後，會負責實際的UI繪製和更新操作，包括建立和更新原生UI元件。
•Virtual DOM機制：React Native利用React的Virtual DOM機制來最佳化UI的更新；當元件的狀態或屬性發生變化時，React Native會在JavaScript執行緒中建立一個新的Virtual DOM樹；然後，React Native會使用Diff演算法比較新舊Virtual DOM樹的差異，找出需要更新的部分；只有差異部分會被透過Bridge傳送給原生執行緒進行更新，從而減少了資料傳輸量，提高了效能。
React Native的渲染流程主要包括以下幾個步驟：
•元件渲染：在JavaScript執行緒中，React Native元件的render方法會被呼叫，生成對應的Virtual DOM描述。這個描述會被React的渲染系統用來構建元件樹。
•Diff演算法比較：當元件的狀態或屬性發生變化時，React Native會使用Diff演算法比較新舊Virtual DOM樹的差異。這個過程會找出需要更新的部分，並準備相應的更新指令。
•資料序列化與傳輸：更新指令會被序列化為原生執行緒可理解的資料格式。然後，這些資料會透過Bridge機制傳送給原生執行緒。
•原生UI更新：原生執行緒接收到更新指令後，會解析這些指令並應用到實際的UI控制元件上。這包括建立新的原生UI元件、更新現有元件的屬性或移除不再需要的元件等。
•渲染結果展示：經過原生執行緒的處理後，UI的更新會實時反映在移動裝置的螢幕上。使用者可以看到最新的介面效果，並根據需要進行進一步的互動。
React Native的渲染原理和主要流程透過JavaScript執行緒與原生執行緒的緊密協作，以及Virtual DOM和Diff演算法的最佳化，實現了在JavaScript中編寫UI程式碼並在App原生環境中高效渲染的能力。這種機制不僅提高了應用的效能，還降低了跨平臺開發的複雜性和成本。
Flutter渲染原理
Flutter是Google推出的開源UI框架，主要用於多平臺的應用開發。其渲染原理是構建跨平臺應用的關鍵部分，主要基於其獨特的三層樹結構：Widget樹、Element樹和RenderObject樹（或稱為渲染樹）。這三層結構的設計旨在最佳化效能，減少不必要的重繪和重建。
•Widget樹：Widget是Flutter中使用者介面的不可變描述，是構成Flutter應用程式的基本元素。Widget樹是存放渲染內容的配置資料結構，建立非常輕量，在頁面重新整理的過程中隨時會重建。
•Element樹：Element是Widget樹和RenderObject樹之間的中間層，負責將Widget樹的變化抽象化，並管理RenderObject的複用。Element持有Widget的引用，並可以對其屬性進行修改，而不是完全重建整個樹。
•RenderObject樹（渲染樹） ：RenderObject樹用於應用介面的佈局和繪製，儲存了元素的大小、佈局等資訊。RenderObject的建立和銷燬相對耗能，因此Element樹會快取RenderObject物件，以便在需要時複用。
Flutter的渲染流程主要包括以下幾個階段：
•構建（Build） ：Flutter框架根據Widget樹中的變化呼叫每個Widget的build方法；build方法返回一個新的Widget，表示當前Widget的最新狀態；此階段主要確定哪些Widget需要更新。
•佈局（Layout） ：在構建階段之後，Flutter框架執行佈局過程；為每個需要更新的Widget確定其在螢幕上的位置和大小；呼叫每個Widget的layout方法，根據其約束條件（如最大寬度、最小高度等）計算出最佳的位置和大小。
•繪製（Paint） ：佈局階段完成後，Flutter框架執行繪製過程；根據每個Widget的佈局資訊將其繪製到螢幕上；呼叫每個Widget的paint方法，將Widget的內容繪製到一個離屏的Canvas上。
•合成（Compositing） ：在繪製階段完成後，Flutter框架執行合成過程；將所有已繪製的Canvas組合成最終的顯示影像；呼叫每個Widget的compositing方法，將它們的繪製結果合併到一起。
•顯示（Display） ：合成階段完成後，Flutter框架將最終的顯示影像傳送給硬體，將其顯示在螢幕上。
綜上所述，Flutter的渲染原理透過三層樹結構的設計和最佳化，實現了高效、流暢的跨平臺應用介面渲染。
Taro渲染原理
Taro框架的核心思想是透過將Vue或React中編寫的程式碼進行抽象和統一規範，然後對映到不同的平臺上，透過元件化的方式實現統一程式碼覆蓋多個平臺。這種方式大大提高了程式碼的複用率和開發效率。主要如下：
•統一抽象規範：Taro框架定義了一套跨平臺的元件、事件、CSS樣式等規範，使得在編寫React程式碼時，能夠透過這些抽象出來的規範來編寫，從而實現跨平臺的相容性。
•程式碼轉換：Taro框架為不同的平臺提供對應的程式碼轉換工具，將抽象的React程式碼轉換為應該在目標平臺上執行的程式碼。這一步驟是Taro實現跨平臺渲染的關鍵。
•統一API：將不同平臺上的API進行相容性處理和封裝，使得在不同平臺上的開發人員都可以透過同樣的API進行開發。這樣做不僅降低了開發難度，還提高了開發效率。
•差異化處理：針對不同的平臺特性，Taro框架進行了特定平臺的定製化開發，充分利用不同平臺的特性，提供更多豐富的功能支援。這種差異化處理使得Taro框架在不同平臺上都能發揮出最佳的效能。
而渲染技術主要包括以下幾個方面：
•虛擬DOM：React或Vue使用虛擬DOM來提高頁面渲染的效能。虛擬DOM是在記憶體中維護的一個輕量級的JavaScript物件樹，它表示了真實的DOM結構。透過比較新舊虛擬DOM的差異，然後只更新實際DOM中需要改變的部分，從而避免不必要的DOM操作，提高渲染效率。
•事件處理：Taro框架對事件處理進行了跨平臺封裝，使得開發者可以使用統一的API來處理不同平臺上的事件。這種封裝方式簡化了事件處理的複雜度，提高了開發效率。
•Prerender技術：Prerender是由Taro CLI提供的一種技術，用於提高小程式頁面初始化的渲染速度。它透過將頁面初始化的狀態直接渲染為無狀態的wxml，在框架和業務邏輯執行之前執行渲染流程，從而提高頁面的載入速度。Prerender技術的實現原理與服務端渲染類似，但它是針對小程式端進行的最佳化。
Taro框架的渲染原理主要基於React或Vue的跨平臺渲染技術，透過統一抽象規範、程式碼轉換、統一API和差異化處理等手段實現程式碼的跨平臺複用和高效渲染；Taro還提供了Prerender等技術來最佳化頁面載入速度，提升使用者體驗。基於這些技術使得Taro框架成為了一個功能強大、易用、跨平臺相容的開發框架。
瀏覽器的渲染原理
瀏覽器的渲染原理是一個複雜的過程，涉及到多個元件和執行緒的協作，才能確保網頁能夠正確、快速地顯示在使用者面前。瀏覽器渲染原理主要如下：
•瀏覽器的主要元件
◦介面控制元件：包括位址列、前進後退按鈕、書籤選單等，這些是使用者與瀏覽器互動的介面部分。
◦瀏覽器引擎：它是瀏覽器的核心，負責協調各個元件的工作，處理使用者的請求和操作。
◦渲染引擎：它負責解析HTML、CSS，構建DOM樹和Render樹，最終將網頁內容呈現給使用者。
◦網路元件：它負責傳送HTTP請求，獲取網頁資源。
◦JS直譯器：它用於解析執行JavaScript程式碼，實現網頁的動態效果。
◦資料儲存持久層：它用於儲存cookies、localStorage等資料。
•瀏覽器的多程序架構
◦隔離性：每個標籤頁執行在獨立的程序中，避免了一個標籤頁崩潰影響到其他標籤頁。
◦安全性：不同程序之間不共享資源和地址空間，減少了安全隱患。
•瀏覽器的主要執行緒
◦GUI渲染執行緒：它負責渲染瀏覽器介面HTML元素，當介面需要重繪或迴流時，該執行緒會執行。
◦JavaScript引擎執行緒：它負責解析執行JavaScript程式碼，與GUI渲染執行緒互斥，確保DOM操作的安全。
◦定時觸發器執行緒：它負責計時並觸發定時事件。
◦事件觸發執行緒：它將事件新增到待處理佇列中，等待JS引擎處理。
◦非同步http請求執行緒：它負責處理XMLHttpRequest請求，將狀態變更事件放入JS引擎的處理佇列中。
•渲染流程
◦解析HTML，構建DOM樹： 當使用者輸入網址或點選連結時，瀏覽器會向伺服器傳送請求，獲取網頁的HTML檔案。瀏覽器開始解析HTML檔案，將其轉換為瀏覽器能夠理解和操作的文件物件模型（DOM）樹。DOM樹是由HTML標籤和它們的層級關係組成的樹狀結構，表示了網頁的結構和內容。
◦樣式計算（CSSOM樹構建與渲染樹生成） ：CSSOM樹構建，瀏覽器解析CSS檔案或<style>標籤中的樣式資訊，將其轉換為瀏覽器能夠理解的樣式表物件模型（CSSOM）樹。CSSOM樹表示了文件中所有元素的樣式資訊。渲染樹生成：瀏覽器將DOM樹和CSSOM樹合併，形成渲染樹（Render Tree）。渲染樹是DOM樹的一個視覺化表示，只包含需要顯示的節點和這些節點的樣式資訊。
◦佈局： 瀏覽器根據渲染樹中的資訊，計算每個節點的幾何資訊（如位置、大小等），並生成佈局樹（Layout Tree）。佈局階段會確定頁面上所有元素的位置和大小，確保它們能夠按照預期的方式排列。
◦分層： 為了更高效地渲染頁面，瀏覽器會對佈局樹進行分層處理，生成分層樹（LayerTree）。擁有層疊上下文屬性（如定位屬性、透明屬性、CSS濾鏡、z-index等）的元素會被提升為單獨的圖層。分層有助於瀏覽器進行並行繪製，減少重繪和重排的開銷。
◦繪製： 瀏覽器遍歷分層樹中的每個圖層，使用圖形庫將圖層的內容繪製成影像。繪製階段會生成一個繪製列表，該列表包含了繪製每個元素所需的指令和順序。繪製操作是由渲染引擎中的合成執行緒來完成的。
◦合成顯示： 合成執行緒將圖層劃分為圖塊（tile），並將圖塊轉換為點陣圖（透過柵格化操作）。柵格化操作通常使用GPU來加速生成點陣圖。一旦所有圖塊都被柵格化，合成執行緒就會生成一個繪製圖塊的命令（DrawQuad），並將該命令提交給瀏覽器程序。瀏覽器程序根據DrawQuad命令生成頁面，並將其顯示到螢幕上。
◦互動處理：當使用者與頁面進行互動（點選、滾動、輸入等）時，瀏覽器會更新渲染樹，並重新進行佈局和繪製。
瀏覽器的渲染原理是涉及資源的載入、解析、構建DOM和CSSOM樹、佈局、繪製、合成以及互動處理等多個步驟；涉及多執行緒處理、快取機制、DNS解析、TCP連線等，確保了網頁的快速、穩定、高效渲染。
它們的相同點與不同點
•相同點
◦層次結構：所有技術棧都基於某種形式的樹狀結構來管理UI元件。
◦測量和佈局：渲染過程通常包含測量、佈局、繪製階段。
◦更新機制：大多數框架都採用某種形式的Diff演算法來最佳化DOM更新，以提高效能。
•不同點
◦執行環境不同：APP執行在作業系統之上，具有更高的許可權和更豐富的系統資源；H5頁面是基於瀏覽器渲染，受到瀏覽器沙箱模型的限制；小程式受到宿主環境類瀏覽器環境的限制。
◦渲染機制不同：APP渲染通常涉及到底層的圖形渲染介面（如Skia、OpenGL等），可以直接與GPU互動；而瀏覽器渲染則主要依賴於HTML、CSS和JavaScript等前端技術，並透過瀏覽器引擎（如Blink、Gecko等）進行渲染。iOS和Android利用GPU進行硬體加速渲染，大大提升複雜UI的繪製效能。Web前端如Vue和React採用虛擬DOM和Diff演算法來更新UI。小程式等跨平臺框架通常需要在邏輯層與檢視層之間進行橋接通訊。Web和小程式通常依賴瀏覽器或宿主環境的渲染引擎。
◦效能最佳化不同：APP渲染可以利用作業系統的特性進行更深入的效能最佳化（如硬體加速、記憶體管理等）；而瀏覽器渲染則受到瀏覽器引擎和前端技術的限制，在效能最佳化上可能相對較弱。
◦跨平臺性不同：APP需要針對不同的作業系統和裝置進行開發和適配；而瀏覽器渲染則具有更好的跨平臺性，可以在不同的瀏覽器和裝置上執行。
◦協同渲染：鴻蒙OS的分散式UI能力允許跨裝置協同渲染，而其他框架通常只在單個裝置上進行渲染。
綜上所述，APP渲染、H5頁面渲染、小程式渲染在多個方面存在多個區別。這些區別源於它們不同的執行環境、渲染機制、效能最佳化和跨平臺性等因素。
隨著技術的發展，大前端的各種技術棧不斷湧現，各自發展出了適合自身特性的渲染機制。不同技術棧在各自的應用領域都有獨特的優勢和適用場景，我們根據專案需求和團隊情況選擇合適的技術棧，可以更高效地實現高效能的UI和良好的使用者體驗。