本文转载自微信公众号《神光的编程秘籍》，作者神说有光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。它专门用于这种并行计算。它可以批量计算一堆顶点、一堆三角形和一堆像素的光栅化。这个渲染过程称为渲染管线。目前的渲染管线都是可编程的，即可以控制顶点的位置和每个三角形的着色。这两个分别称为顶点着色器（shaders）和片段着色器。简而言之，2D或3D图形在绘制和光栅化后显示为逐帧图像。变成图像后，其实可以做一些图像处理，比如灰度、反色、高斯模糊等各种滤镜的实现。因此，前端渲染技术的理论基础是计算机图形学+图像处理。不同渲染技术的区别与联系具体到前端渲染技术，html+css、svg、canvas、webgl都是用于图形图像渲染的技术，但各有侧重：html+csshtml+css是用于图文排版，即计算文字、图片、视频等的显示位置。它提供了很多计算规则，比如fluidlayout很适合图文排版，elasticlayout很容易做自适应layout等。但是不适合比较灵活的图形绘制，此时又用到了其他几种技术。Canvascanvas就是给定一个画布区域，在不同的位置绘制图形和图像。它没有布局规则，因此非常灵活，常用于可视化或游戏开发。但是画布并没有保留绘制图形的信息。生成的图像只能显示在固定区域。当显示区域变大时，不能一起缩放，会变形。如果需要在不失真的情况下进行缩放，就该使用其他渲染技术了。svgsvg会将绘制图形的信息保存在内存中，显示区域变化后会重新计算。是矢量图，常用于绘制图标、字体等。webgl上面的三种技术用于绘制2D图形图像。如果要绘制3D内容，则必须使用webgl。它提供了绘制3D图形的api，比如通过顶点形成3D模型，映射每个表面，设置光源，然后光栅化成图像。常用于通过3D内容、3D可视化、3D游戏等增强网站的交互效果，进而在虚拟现实中进行3D交互。因此，虽然前端渲染技术的底层原理是图形+图像处理，但上层提供的四种渲染技术各有侧重。不过它们还是有很多共同点：位置、大小等的变化都是通过矩阵计算出来的，必须从图形转换为图像，即光栅化过程支持对图像进行进一步的处理，比如各种滤镜html+CSS渲染会在不同层单独计算，canvas也会根据计算量分成不同的canvas进行计算，因为它们的底层图形原理还是一样的。另外，3D的内容，也就是webgl的内容会被GPU计算出来，但是css也可以被GPU计算出来。这叫做css的硬件加速。有四个属性可以触发硬件加速：transform、opacity、filter、will-change。（更多GPU和css硬件加速可以看这篇文章：这一次，彻底搞懂GPU和css硬件加速。）除了图形图像技术，html+css对于编译原理的应用也使用了编译技术。因为html和css是一种DSL（dominspecificlanguage，领域特定语言），即专门用于界面描述的语言。使用html表达dom结构，使用css为dom添加样式只需要少量代码，然后在运行时解析html和css创建dom并添加样式。DSL可以让domain-specific的逻辑更容易表达，前端领域还有一些其他的技术也用到了DSL，比如graphql。总结一下前端领域的四种渲染技术：html+css、canvas、svg、webgl各有侧重，用于渲染不同的内容：html+css用于布局canvas，用于灵活的图形图像rendering，svg是用来渲染矢量图的，webgl是用来渲染3D图形的，不过他们的理论基础是计算机图形学+图像处理。（而且，html+css为了方便表达逻辑，还设计了DSL，使用了编译技术。）这四种渲染技术看似差别很大，但是在理论上，很多东西是相同的。这就是为什么我们要学习计算机的基础知识，因为它可以让我们对技术有更深入、更本质的理解。
