[[440188]]

本文轉載自微信公眾號「神光的編程秘籍」，作者神說要有光zxg  。轉載本文請聯系神光的編程秘籍公眾號。

前端可用的渲染技術有 html + css、canvas、svg、webgl，我們會綜合運用這些技術來繪制頁面。有沒有想過這些技術有什么區別和聯系，它們和圖形學有什么關系呢?

本文我們就來談一下網頁渲染技術的計算機理論基礎。

渲染的理論基礎

人眼的視網膜有視覺暫留機制，也就是看到的圖像會繼續保留 0.1s 左右，圖形界面就是根據這個原理來設計的一幀一幀刷新的機制，要保證 1s 至少要渲染 10 幀，這樣人眼看到畫面才是連續的。

每幀顯示的都是圖像，它是由像素組成的，是顯示的基本單位。不同顯示器實現像素的原理不同。

我們要繪制的目標是矩形、圓形、橢圓、曲線等各種圖形，繪制完之后要把它們轉成圖像。圖形的繪制有一系列的理論，比如貝塞爾曲線是畫曲線的理論。圖形轉圖像的過程叫做光柵化。這些圖形的繪制和光柵化的過程，都是圖形學研究的內容。

圖形可能做縮放、平移、旋轉等變化，這些是通過矩陣計算來實現的，也是圖形學的內容。

除了 2D 的圖形外，還要繪制 3D 的圖形。3D 的原理是把一個個三維坐標的頂點連起來，構成一個一個三角形，這是造型的過程。之后再把每一個三角形的面貼上圖，叫做紋理。這樣組成的就是一個 3D 圖形，也叫 3D 模型。

3D 圖形也同樣需要經歷光柵化變成二維的圖像，然后顯示出來。這種三維圖形的光柵化需要找一個角度去觀察，就像拍照一樣，所以一般把這個概念叫做相機。

同時，為了 3D 圖形更真實，還引入了光線的概念，也就是一束光照過來，3D 圖形的每個面都會有什么變化，怎么反射等。不同材質的物體反射的方式不同，比如漫反射、鏡面反射等，也就有不同的計算公式。一束光會照射到一些物體，到物體的反射，這個過程需要一系列跟蹤的計算，叫做光線追蹤技術。

我們也能感受出來，3D 圖形的計算量比 2D 圖形大太多了，用 CPU 計算很可能達不到 1s 大于 10 幀，所以后面出現了專門用于 3D 渲染加速的硬件，叫做 GPU。它是專門用于這種并行計算的，可以批量計算一堆頂點、一堆三角形、一堆像素的光柵化，這個渲染流程叫做渲染管線。

現在的渲染管線都是可編程的，也就是可以控制頂點的位置，每個三角形的著色，這兩種分別叫做頂點著色器(shader)、片元著色器。

總之，2D 或 3D 的圖形經過繪制和光柵化就變成了一幀幀的圖像顯示出來。

變成圖像之后其實還可以做一些圖像處理，比如灰度、反色、高斯模糊等各種濾鏡的實現。

所以，前端的渲染技術的理論基礎是計算機圖形學 + 圖像處理。

不同的渲染技術的區別和聯系

具體到前前端的渲染技術來說，html+css、svg、canvas、webgl 都是用于圖形和圖像渲染的技術，但是它們各有側重：

html + css

html + css 是用于圖文布局的，也就是計算文字、圖片、視頻等的顯示位置。它提供了很多計算規則，比如流式布局很適合做圖文排版，彈性布局易于做自適應的布局等。但是它不適合做更靈活的圖形繪制，這時就要用其他幾種技術了。

canvas

canvas 是給定一塊畫布區域，在不同的位置畫圖形和圖像，它沒有布局規則，所以很靈活，常用來做可視化或者游戲的開發。但是 canvas 并不會保留繪制的圖形的信息，生成的圖像只能顯示在固定的區域，當顯示區域變大的時候，它不能跟隨一起放縮，就會失真，如果有放縮不失真的需求就要用其他渲染技術了。

svg

svg 會在內存中保留繪制的圖形的信息，顯示區域變化后會重新計算，是一個矢量圖，常用于 icon、字體等的繪制。

webgl

上面的 3 種技術都是用于 2D 的圖形圖像的繪制，如果想繪制 3D 的內容，就要用 webgl 了。它提供了繪制 3D 圖形的 api，比如通過頂點構成 3D 的模型，給每一個面貼圖，設置光源，然后光柵化成圖像等的 api。它常用于通過 3D 內容增強網站的交互效果，3D 的可視化，3D 游戲等，再就是虛擬現實中的 3D 交互。

所以，雖然前端渲染技術的底層原理都是圖形學 + 圖像處理，但上層提供的 4 種渲染技術各有側重點。

不過，它們還是有很多相同的地方的：

• 位置、大小等的變化都是通過矩陣的計算
• 都要經過圖形轉圖像，也就是光柵化的過程
• 都支持對圖像做進一步處理，比如各種濾鏡
• html + css 渲染會分不同圖層分別做計算，canvas 也會根據計算量分成不同的 canvas 來做計算

因為他們底層的圖形學原理還是一致的。

除此以外，3D 內容，也就是 webgl 的內容會通過 GPU 來計算，但 css 其實也可以通過 GPU 計算，這叫做 css 的硬件加速，有四個屬性可以觸發硬件加速：transform、opacity、filter、will-change。(更多的 GPU 和 css 硬件加速的內容可以看這篇文章：這一次，徹底搞懂 GPU 和 css 硬件加速)

編譯原理的應用

除了圖形學和圖像技術外，html+css 還用到了編譯技術。因為 html、css 是一種 DSL( domin specific language，領域特定語言)，也就是專門為界面描述所設計的語言。用 html 來表達 dom 結構，用 css 來給 dom 添加樣式都只需要很少的代碼，然后運行時解析 html 和 css 來創建 dom、添加樣式。

DSL 可以讓特定領域的邏輯更容易表達，前端領域還有一些其他技術也用到了 DSL，比如 graphql。

總結

前端領域的四種渲染技術：html+css、canvas、svg、webgl 各有側重點，分別用于不同內容的渲染：

• html+ css 用于布局
• canvas 用于靈活的圖形圖像渲染
• svg 用于矢量圖渲染
• webgl 用于 3D 圖形的渲染

但他們的理論基礎都是計算機圖形學 + 圖像處理。(而且，html+css 為了方便邏輯的表達，還設計了 DSL，這用到了編譯技術)

這四種渲染技術看似差別很大，但在理論基礎層面，很多東西都是一樣的。這也是為什么我們要去學計算機基礎，因為它可以讓我們對技術有一個更深入的更本質的理解。