[[420130]]

從 cpu 聊

起cpu (central process) 是計算機的大腦，它提供了一套指令集，我們寫的程序最終會通過 cpu 指令來控制的計算機的運行。

cpu 會對指令進(jìn)行譯碼，然后通過邏輯電路執(zhí)行該指令。整個執(zhí)行的流程分為了多個階段，叫做流水線。指令流水線包括取指令、譯碼、執(zhí)行、取數(shù)、寫回五步，這是一個指令周期。cpu 會不斷的執(zhí)行指令周期來完成各種任務(wù)。

指令和數(shù)據(jù)都會首先加載到內(nèi)存中，在程序運行時依次取到 cpu 里。cpu 訪問內(nèi)存雖然比較快，但比起 cpu 執(zhí)行速度來說還是比較慢的，為了緩解這種速度矛盾，cpu 設(shè)計了 3 級緩存，也就是 L1、L2、L3 的緩存。

如圖，多核 cpu 各核心都有自有獨立的 L1、L2 緩存，然后共享 L3 緩存，這 3 級緩存容量是逐漸遞增的，但是速度是逐漸下降的，但是也會比訪問內(nèi)存快一些。

有了這 3 級緩存以后，cpu 執(zhí)行速度和訪問內(nèi)存速度的矛盾就可以得到緩解，不需要一直訪問內(nèi)存，cpu 每次會加載一個緩存行，也就是 64 字節(jié)大小的數(shù)據(jù)到緩存中。這樣訪問臨近的數(shù)據(jù)的時候就可以直接訪問緩存。

從內(nèi)存中把數(shù)據(jù)和指令加載到 cpu 的緩存中，然后通過控制器控制指令的譯碼、執(zhí)行，通過運算器進(jìn)行運算，之后把結(jié)果寫回內(nèi)存。這就是 cpu 的工作流程。

cpu 每個核只有一個線程，也就是單控制流、單數(shù)據(jù)流。這樣的架構(gòu)導(dǎo)致 cpu 在一些場景下效率是不高的，比如 3d 渲染的場景。

3d 渲染流程

3d 的渲染首先是建立 3d 的模型，它由一系列三維空間中的頂點構(gòu)成，3 個頂點構(gòu)成一個三角形，然后所有的頂點構(gòu)成的三角形拼接起來就是 3d 模型。

頂點、三角形，這是 3d 的基礎(chǔ)。3d 引擎首先要計算頂點數(shù)據(jù)，確定 3d 圖形的形狀。之后還要對每個面進(jìn)行貼圖，可以在每個三角形畫上不同的紋理。

3d 圖形要顯示在二維的屏幕上就要做投影，這個投影的過程叫做光柵化。(光柵是一種光學(xué)儀器，在這里就代表 3d 投影到 2d 屏幕的過程)

[[420132]]

光柵化要計算 3d 圖形投影到屏幕的每一個像素的顏色，計算完所有的像素之后會寫到顯存的幀緩沖區(qū)，完成了一幀的渲染，之后會繼續(xù)這樣計算下一幀。

也就是說，3d 渲染的流程是：

• 計算頂點數(shù)據(jù)，構(gòu)成 3d 的圖形
• 給每個三角形貼圖，畫上紋理
• 投影到二維的屏幕，計算每個像素的顏色(光柵化)
• 把一幀的數(shù)據(jù)寫入顯存的幀緩沖區(qū)

頂點的數(shù)量是非常龐大的，而 cpu 只能順序的一個個計算，所以處理這種 3d 渲染會特別費勁，于是就出現(xiàn)了專門用于這種 3d 數(shù)據(jù)的并行計算的硬件，也就是 GPU。

GPU 的構(gòu)成

和 cpu 的一個一個數(shù)據(jù)計算不同，gpu 是并行的，有成百上千個核心用于并行計算。

gpu 也是有著指令、譯碼、執(zhí)行的流程，只不過，每個指令會并行執(zhí)行 n 個計算，是單控制流多數(shù)據(jù)流的，而 cpu 是單控制流單數(shù)據(jù)流。

所以，對于 3d 渲染這種要計算成萬個頂點數(shù)據(jù)和像素點的場景，GPU 會比 CPU 高效很多。

但是，gpu 全是優(yōu)點么?也不是。

cpu 和 gpu 的區(qū)別

cpu 是通用的，能夠執(zhí)行各種邏輯和運算，而 gpu 則是主要是用于并行計算大批量的重復(fù)任務(wù)，不能處理復(fù)雜邏輯。

如上圖，cpu 中控制器和緩存占據(jù)了很大一部分，而 gpu 中這兩部分則很少，但是有更多的核心用于計算。

兩者對比的話，cpu 相當(dāng)于一個大學(xué)生，能夠解決各種難題，但是計算 1 萬個加法就沒那么快，而 gpu 就像一幫小學(xué)生，解決不了難題，但是計算加法這種就很快，因為人多。

也就是說如果邏輯復(fù)雜，那么只能用 cpu，如果只是計算量大，并且每個計算都比較重復(fù)，那就比較適合 gpu。

3d 的渲染中有大量這種重復(fù)卻簡單的計算，比如頂點數(shù)據(jù)和光柵化的像素數(shù)據(jù)，通過 gpu 就可以并發(fā)的一次計算成百上千個。

opengl、webgl、css 硬件加速

顯卡中集成了 gpu，提供了驅(qū)動，使用 gpu 能力需要使用驅(qū)動的 api。gpu 的 api 有一套開源標(biāo)準(zhǔn)叫做 opengl，有三百多個函數(shù)，用于各種圖形的繪制。(在 windows 下有一套自己的標(biāo)準(zhǔn)叫做 DirectX)

我們在網(wǎng)頁中繪制 3d 圖形是使用 webgl 的 api，而瀏覽器在實現(xiàn) webgl 的時候也是基于 opengl 的 api，最終會驅(qū)動 gpu 進(jìn)行渲染。

css 大部分樣式還是通過 cpu 來計算的，但 css 中也有一些 3d 的樣式和動畫的樣式，計算這些樣式同樣有很多重復(fù)且大量的計算任務(wù)，可以交給 gpu 來跑。

瀏覽器在處理下面的 css 的時候，會使用 gpu 渲染：

• transform
• opacity
• filter
• will-change

瀏覽器是把內(nèi)容分到不同的圖層分別渲染的，最后合并到一起，而觸發(fā) gpu 渲染會新建一個圖層，把該元素樣式的計算交給 gpu。

opacity 需要改變每個像素的值，符合重復(fù)且大量的特點，會新建圖層，交給 gpu 渲染。transform 是動畫，每個樣式值的計算也符合重復(fù)且大量的特點，也默認(rèn)會使用 gpu 加速。同理 fiter 也是一樣。

這里要注意的是 gpu 硬件加速是需要新建圖層的，而把該元素移動到新圖層是個耗時操作，界面可能會閃一下，所以最好提前做。will-change 就是提前告訴瀏覽器在一開始就把元素放到新的圖層，方便后面用 gpu 渲染的時候，不需要做圖層的新建。

當(dāng)然，有的時候我們想強制觸發(fā)硬件渲染，就可以通過上面的屬性，比如

will-change: transform;  

或者

transform:translate3d(0, 0, 0); 

chrome devtools 可以看到是 cpu 渲染還是 gpu 渲染，打開 rendering 面板，勾選 layer borders，會發(fā)現(xiàn)藍(lán)色和黃色的框。藍(lán)色的是 cpu 渲染的，而黃色的是 gpu 渲染的。

比如這段文字，現(xiàn)在沒有單獨一個圖層：

添加一個 will-change: transform 的屬性，瀏覽器會新建圖層來渲染該元素，然后使用 gpu 渲染：

gpu 硬件加速能減輕 cpu 壓力，使得渲染更流暢，但是也會增加內(nèi)存的占用，對于 transform、opacity、filter 默認(rèn)會開啟硬件加速。其余情況，建議只在必要的時候用。

opencl 和神經(jīng)網(wǎng)絡(luò)

重復(fù)且大量的計算任務(wù)只有 3d 渲染一種場景么?

不是的，AI 領(lǐng)域的機器學(xué)習(xí)也很典型，它的特點是大量的神經(jīng)元需要計算，但是每個計算都比較簡單，也很適合用 gpu 來跑。

現(xiàn)在的 gpu 不只是能跑圖形渲染，也提供了一些編程能力，這部分 api 有 opencl 標(biāo)準(zhǔn)?？梢酝ㄟ^ gpu 的并行計算能力來跑一些有大量計算但是沒有很多邏輯的的任務(wù)，會比 cpu 效率更高。

總結(jié)

cpu 提供了指令集，會不斷的執(zhí)行取指令、譯碼、執(zhí)行、取數(shù)、寫回的指令周期，控制著計算機的運轉(zhuǎn)。

cpu 計算的速度比較快，而訪問內(nèi)存比較慢，為了緩和兩者的矛盾，引入了 L1、L2、L3 的多級緩存體系，L1、L2、L3 是容器逐漸變大，訪問速度逐漸變慢的關(guān)系，但還是比訪問內(nèi)存快。內(nèi)存會通過一個緩存行(64 字節(jié))的大小為單位來讀入緩存，供 cpu 訪問。

3d 渲染的流程是計算每一個頂點的數(shù)據(jù)，連成一個個三角形，然后進(jìn)行紋理貼圖，之后計算投影到二維屏幕的每一個像素的顏色，也就是光柵化，最后寫入顯存幀緩沖區(qū)，這樣進(jìn)行一幀幀的渲染。

cpu 的計算是一個個串行執(zhí)行的，對于 3d 渲染這種涉及大量頂點、像素要計算的場景就不太合適，于是出現(xiàn)了 gpu。

gpu 可以并行執(zhí)行大量重復(fù)的計算，有成百上千個計算單元，相比 cpu 雖然執(zhí)行不了復(fù)雜邏輯，但是卻能執(zhí)行大量重復(fù)的運算。提供了 opengl 的標(biāo)準(zhǔn) api。

css 中可以使用 gpu 加速渲染來減輕 cpu 壓力，使得頁面體驗更流暢，默認(rèn) transform、opacity、filter 都會新建新的圖層，交給 gpu 渲染。對于這樣的元素可以使用 will-change: 屬性名; 來告訴瀏覽器在最開始就把該元素放到新圖層渲染。

gpu 的并行計算能力不只是 3d 渲染可以用，機器學(xué)習(xí)也有類似的場景，可以通過 opencl 的 api 來控制 gpu 進(jìn)行計算。

gpu 和前端的關(guān)系還是挺密切的，不管是 webgl，還是 css 硬件加速，或者網(wǎng)頁的性能都與之相關(guān)。希望這篇文章能夠幫大家了解 gpu 的原理和應(yīng)用。