[[440188]]

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

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

本文我們就來談一下網(wǎng)頁渲染技術(shù)的計算機理論基礎(chǔ)。

渲染的理論基礎(chǔ)

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

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

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

圖形可能做縮放、平移、旋轉(zhuǎn)等變化，這些是通過矩陣計算來實現(xiàn)的，也是圖形學的內(nèi)容。

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

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

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

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

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

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

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

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

不同的渲染技術(shù)的區(qū)別和聯(lián)系

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

html + css

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

canvas

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

svg

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

webgl

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

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

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

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

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

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

編譯原理的應(yīng)用

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

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

總結(jié)

前端領(lǐng)域的四種渲染技術(shù)：html+css、canvas、svg、webgl 各有側(cè)重點，分別用于不同內(nèi)容的渲染：

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

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

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