對應一個客戶端開發來說，平時做的的最多的就是寫頁面，所以有必要了解從檢視程式碼到影像顯示到螢幕上的整個過程和原理。
下面以從檢視程式碼到顯示器影像的中間產物幀緩衝區影像點陣圖為目標，分析從檢視程式碼到幀緩衝區點陣圖和從幀緩衝區點陣圖到顯示器影像這2個過程。 這裡把這2個過程命名為：幀緩衝區資料怎麼來的、幀緩衝區資料怎麼用的。
幀資料怎麼來的
幀資料產生主要分為2個階段：把檢視佈局程式碼生成影像3D資料模型、把影像3D資料模型轉成點陣圖。
把檢視佈局程式碼生成影像3D資料模型
CPU建立檢視物件，計算佈局，生成影像3D資料模型，並將這個影像3D資料模型交給GPU影像處理器將它加工成頁面展示的點陣圖。
把影像3D資料模型轉成點陣圖
根據GPU的渲染流水線把這個步驟可分為六個步驟
第一步驟：頂點著色器（Vertex Shader）
GPU收到影像3D資料模型後，首先透過頂點著色器將3D影像模型計算成螢幕上展示的2D影像模型，並對頂點資料做一些處理。
第二步驟：形狀裝配（Shape Assembly），又稱 圖元裝配
然後使用圖元裝配器將這些2D Vertex轉成基本的圖元資訊，圖元指螢幕中影像的基本表示單位（點，線，三角形）。
第三步驟：幾何著色器（Geometry Shader）
然後將這些圖元元素陣列傳遞給幾何著色器，由幾何著色器根據影像效果生成更細微的圖元資訊，來表現影像效果。
第四步驟：光柵化（Rasterization）
然後使用光柵化將達到展示效果的圖元資訊轉換成一系列的畫素。轉換成畫素的規則是以三角形圖元覆蓋在螢幕畫素圖層上，按照每個畫素中心是否在圖元三角形的內層，在內側的都被選中的成為影像畫素，根據畫素生成片段模型，每個片段模型儲存了一個畫素渲染所需要的所有資訊。
第五步驟：片段著色器（Fragment Shader）
然後將這些片段資料傳遞給片段著色器，片段著色器會計算每個畫素所在的座標是否超出了螢幕展示之外，對於螢幕之外的畫素直接剪裁掉，只留下對展示有用的片段，提示渲染效率。
第六步驟：測試與混合（Tests and Blending）
測試與混合，在一個UI頁面中用兩套對應關係的樹，一個是檢視樹，一個圖層樹。對應稍微複雜一點的檢視如：按鈕，它裡面可以設定背景色，標題，這兩種屬性在顯示時是有上下級關係的。而GPU在往幀緩衝區透過畫家演算法做深度優先遍歷不斷繪製圖形時，是以與檢視樹對應的圖層樹中的圖層為單位的，所以再將圖層繪製到幀緩衝區之前要把圖層內的多層屬性進行測試與混合。
測試與混合階段的操作內容是根據每個畫素片段的深度和alpha值進行計算，畫素深度Z在上面的顯示，下面的忽略。畫素alpha值小於1的則會對應上下兩個深度的畫素進行混合計算，得出要展示的畫素效果。
經過這2個階段，GPU得到了整棵圖層樹的點陣圖，為後面往幀緩衝區做畫家演算法深度優先繪製提供了點陣圖資料。
幀資料怎麼用的
幀緩衝區中資料的使用對應的就是螢幕影像顯示原理了，螢幕影像顯示的原理是和CRT 顯示器原理一樣的。
CRT 顯示器原理
CRT電子槍從上到下進行逐行掃描，當一行畫素掃描完後電子槍換行到下一行等待顯示器時鐘傳送水平同步訊號HSync,等收到HSync訊號後開始掃描，掃描完成後換行到下一個行，繼續等待水平同步訊號。當一幀頁面顯示完成後，掃描槍會回到螢幕開始的位置等待顯示器時鐘傳送垂直同步訊號VSync, 等收到垂直同步訊號後先進行雙幀緩衝區互動，然後通知CPU，GPU開始渲染下一幀資料，然後再開始新一輪的幀畫面的掃描。HSync水平同步訊號和VSync垂直同步訊號是為了同步顯示器的顯示過程和系統影片控制器的讀取過程的。
顯示器以固定的頻率進行重新整理，這個固定頻率就是VSync垂直同步訊號的頻率。
CPU，GPU，顯示器協調工作模式
CPU透過檢視建立，佈局計算，文字渲染生成影像3D資料模型傳給GPU。GPU將這些3D影像模型資料轉成螢幕2D影像模型，然後經過GPU渲染流程生成點陣圖放入幀緩衝區。影片控制器讀取幀緩衝區的資料，透過數模轉換顯示到螢幕上。
雙快取機制
在螢幕影像顯示機制中最簡單的是使用一個幀緩衝區，但會有效能問題，顯示器讀完一幀點陣圖後，GPU才能渲染下一幀點陣圖資料往幀緩衝區裡放。這裡引入雙緩衝區機制，GPU先往第一緩衝區中寫入一幀點陣圖，等顯示器讀完第一個緩衝區資料時，GPU開始渲染下一幀資料往第二緩衝區寫入，等第一幀影像渲染完成，影片控制器會直接互動指標，將指標指向第二緩衝區，然後重複這一個過程。
影像撕裂問題
引入了雙快取區後，影像顯示效率提升了，但是又帶來了一個新問題：影像撕裂。
當影片控制器讀取到第一個幀緩衝區資料一半時，此時GPU寫入第二幀緩衝區點陣圖資料結束，並進行了緩衝區指標互動。此時螢幕的下半部分就顯示的第二幀的圖片，造成了影像上下部分不一致。為了解決這個問題，採用了時鐘垂直訊號機制，當影片控制器完成一幀掃描後回到初始位置，此時要等待VSync垂直訊號，只有收到VSyn訊號後，才會進行幀緩衝區指標的互動，然後開始顯示下一幀資料同時GPU開始渲染後面一幀的點陣圖資料。
參考文章：