作者:神说要有光zxg来源:申光编程秘籍
本文转载自微信微信官方账号《神之光编程秘籍》。作者说要有轻zxg。转载本文请联系申光编程秘籍微信官方账号。
有html+css，canvas，svg，webgl可用的前端渲染技术。我们将综合运用这些技术来绘制页面。你有没有想过这些技术之间的区别和联系，它们和图形有什么关系？
本文将谈谈网页渲染技术的计算机理论基础。
渲染的理论基础
人眼的视网膜具有视觉暂留机制，它看到的图像会保持大约0.1s的时间图形界面就是根据这个原理设计的逐帧刷新机制。需要保证1s至少渲染10帧，这样人眼图像才是连续的。
每帧显示一幅图像，图像由像素组成，是显示的基本单位。不同的显示器实现像素的原理不同。
我们想画各种形状，如矩形、圆形、椭圆形、曲线等。画好之后，我们需要把它们变成图像。关于图形绘制有一系列的理论，比如贝塞尔曲线就是曲线绘制的理论。将图形转换为图像的过程称为光栅化。绘制和栅格化这些图形的过程就是图形学研究的内容。
图形可以被缩放、平移、旋转等。这些都是通过矩阵计算来实现的，这也是图形学的内容。
除了2D图形，还应该绘制3D图形。3D的原理是将三维坐标的顶点连接起来，形成一个三角形，这就是建模的过程。然后，把每个三角形的面都贴上一张图，这叫纹理。这是一个三维图形，也称为三维模型。
3D图形也需要栅格化成二维图像，然后显示。这种三维图形的栅格化需要找一个角度来观察，就像拍照一样，所以这个概念一般被称为相机。
同时，为了让3D图形更加逼真，还引入了光的概念，即当一束光过来时，3D图形的表面会发生什么变化，会有怎样的反射等。不同的材料有不同的反射方式，比如漫反射和镜面反射，所以有不同的计算公式。一束光会击中一些物体，并反射这些物体。这个过程需要一系列的追踪计算，这就是光线追踪技术。
我们也能感觉到3D图形的运算量比2D大很多，用CPU的运算很可能达不到1s > 10帧，所以后面就出现了专门用于3D渲染的硬件，叫做GPU。它专门用于这种并行计算。它可以批量计算一堆顶点、三角形和像素的栅格化。这个渲染过程称为渲染管道。
现在的渲染管道都是可编程的，也就是顶点的位置和每个三角形的着色都是可以控制的。这两种类型分别称为顶点着色器和切片着色器。
总之，2D或3D图形被渲染和光栅化成帧并显示。
事实上，一些图像处理可以在它成为图像后进行，例如灰度、反色、高斯模糊等各种滤镜的实现。
所以前端渲染技术的理论基础是计算机图形学+图像处理。
基于的不同渲染技术的区别和联系
就前端和前端渲染技术而言，html+css、svg、canvas和webgl都是用于图形和图像渲染的技术，但各有侧重:
html + css
Html+css用于图形布局，即计算文字、图片、视频等的显示位置。它提供了很多计算规则，比如流式排版非常适合图形排版，弹性排版便于自适应排版。但是，它不适合更灵活的图形绘制，因此将使用其他几种技术。
帆布
Canvas就是在给定的画布区域内，在不同的位置绘制图形和图像。它没有布局规则，因此很灵活，经常用于可视化或游戏开发。但是canvas并不保留绘制图形的信息，生成的图像只能在固定的区域显示。当显示区域变大时，不能随之缩放，所以会失真。如果需要无失真缩放，将使用其他渲染技术。
挽救（saving的简写）
Svg会将绘制图形的信息保存在内存中，在显示区域改变后会重新计算。它是一个矢量图，通常用于绘制图标、字体等。
技术
以上三种技术都用于绘制2D图形图像。如果要画3D内容，就得用webgl。它提供了用于绘制3D图形的API，例如通过顶点构建3D模型，映射每个表面，设置光源，以及光栅化为图像。它通常用于增强网站、3D可视化、3D游戏等的交互效果。通过3D内容，然后在虚拟现实中进行3D交互。
所以虽然前端渲染技术的底层原理是图形+图像处理，但是顶层提供了4种不同侧重点的渲染技术。
然而，它们仍有许多相似之处:
位置、大小等的变化。都是用矩阵计算的。
都要经历图形到图像的过程，也就是光栅化。
都支持图像的进一步处理，比如各种滤镜。
Html+css渲染会分层计算，canvas会根据计算量由不同的canvas计算。
因为它们的基本图形原理还是一样的。
再说3D内容，也就是webgl内容，会用GPU计算，但是css也可以用GPU计算。这叫做css的硬件加速，有四个属性可以触发硬件加速:变换、不透明、滤镜、意志改变。
编译原理的应用
除了图形图像技术，html+css还使用了编译技术。因为html和css都是DSL，也就是专门为界面描述设计的语言。用html表示dom结构，用css给dom添加样式，只需要一点点代码，然后运行时解析html和css创建dom，添加样式。
DSL可以使特定领域的逻辑更容易表达。前端领域还有一些其他技术也使用DSL，比如graphql。
摘要
四种前端渲染技术:html+css、canvas、svg、webgl各有侧重，分别用于渲染不同的内容:
Html+ css用于布局
Canvas用于灵活的图形图像渲染。
用于矢量图形渲染的Svg
Webgl用于渲染3D图形。
但他们的理论基础是计算机图形学+图像处理。
这四种渲染技术看似差别很大，但在理论层面，很多东西是一样的。这就是为什么我们要学习计算机的基础知识，因为它能让我们对技术有更深更本质的理解。
