前端可用的渲染技术是HTML + CSS，帆布，SVG，WebGL，我们将全面使用这些技术绘制页面。您是否曾经考虑过这些技术之间的差异和联系，以及它们之间的关系是什么？
在本文中，让我们谈谈Web渲染技术的计算机理论基础。
人眼视网膜具有视觉保留机制，即您看到的图像将继续保留约0.1。图形界面是基于此原理设计的框架刷新机制。查看图片是连续的。
显示每个帧，由像素组成，是显示的基本单元。不同的显示器实现了不同的像素原理。
我们要绘制的目标是各种图形，例如矩形，圆圈，椭圆，曲线等。在绘图之后，我们必须将它们变成图像。图形的绘制具有一系列理论，例如Bessel曲线是理论的理论。图形旋转图像的过程称为光栅。这些图形的绘图和光栅过程是图形研究的内容。
图形可以更改，翻译，旋转等，这些图形由矩阵计算实现，也是图形的内容。
除2D图形外，还需要3D图形。3D的原理是将每个三维坐标的顶点连接到形成三角形的顶点，这是形状的过程。在图片上，每个三角形表面都张贴在图片上，称为纹理。这是一个3D图形，也称为3D模型。
3D图形还需要将光栅转换为两个维图的图像，然后显示它。这三个维度的重大化需要找到一个观察角度，就像拍照一样，因此这个概念通常称为相机。
同时，对于3D图形，还介绍了光的概念，即一束光束，3D图形的每一侧都会改变哪些变化以及如何反思。不同的反射方法不同材料的物体，例如人反射，镜像反射等，有不同的计算公式。一束光束将被照射到某些物体和物体的反射。此过程需要一系列的跟踪计算，称为光跟踪技术。
我们还可以感觉到，3D图形的计算量比2D图形的计算量大得多。CPU计算可能大于10帧大于1帧。它专门用于此并行计算，并且可以计算一堆顶点，一堆三角形和批次的像素架。这个渲染过程称为渲染管道。
当前的渲染管道是可编程的，即可以控制顶点的位置，每个三角形都是彩色的。这两个分别称为vermilims。
简而言之，2D或3D的图形已通过绘图和光栅通过图像框架显示。
成为图像后，您实际上可以进行一些图像处理，例如实现各种过滤器，例如灰色，反色和高斯模糊。
因此，前端渲染技术的理论基础是计算机图形 +图像处理。
前端和前端的特定渲染技术，HTML+CSS，SVG，画布和WebGL都用于图形和图像渲染，但它们具有自己的焦点：
html + css用于图形布局，即计算文本，图片，视频等的显示位置。它提供了许多计算规则，例如流式布局非常适合图形键入，易弹性布局易于制作自适应布局，等等。但是它不适合更灵活的图形绘图，目前有必要使用其他几种技术。
画布是给定的画布区域。在不同位置绘制图形和图像。它没有布局规则，因此非常灵活。它通常用于进行视觉或游戏开发。但是，画布没有保留图形图形的信息。生成的图像只能显示在固定区域中。当显示区域变大时，它不能与之签约。有必要使用其他渲染技术。
SVG将保留图形的图形中的记忆中，这表明区域变化将被重新计算。它是一个矢量图，通常用于图标和字体的绘制。
以上三种技术全部用于2D图形图像的绘图。如果要绘制3D内容，则需要使用webGl。它提供绘制3D图形的API，例如3D模型，by Vertices，将图粘贴到每个表面，设置光源，然后将光粘合到光源图像的图像通常用于通过3D内容，3D，3D游戏等的可视化以及虚拟现实中的3D交互来增强网站的交互作用。
因此，尽管前端渲染技术的基本原理是图形 +图像处理，但上层提供的四种渲染技术具有其自己的重点。
但是，他们仍然有很多相同的地方：
因为底层的图形原理仍然相同。
另外，3D内容的内容，即WebGL的内容是通过GPU计算的，但是CSS实际上可以通过GPU计算。这称为CSS硬件加速度。有四个可以触发硬件加速的属性：变换，不透明度，过滤器，换挡。
除了图形和图像技术外，HTML+CSS还使用编译技术。由于HTML和CSS是DSL（Domentem语言（现场中的特定语言），即设计为接口设计的语言。DOM结构。使用CSS向DOM添加样式，仅需要很少的代码，然后在运行以创建DOM和添加样式时解析HTML和CSS。
DSL可以使特定字段的逻辑更容易表达。前端字段中还有其他一些技术也使用了DSL，例如GraphQL。
因为人眼的视觉保留机制，只要图形不超过每个框架的0.1秒，人们看到的图片是连续的，这是显示的原理。每个框架的绘图必须通过重力绘制图形和图形。2D和3D图形分别具有不同的绘图和光栅算法。此外，可以在变成图像后进行进一步的图像处理。
前端字段中的四个渲染技术：HTML+CSS，Canvas，SVG和WebGL各自都有自己的焦点，用于渲染不同的内容：
但是他们的理论基础是计算机图形 +图像处理。（此外，HTML + CSS还设计了DSL，以促进逻辑的表达，它使用编译技术）
这四种渲染技术似乎大不相同，但是从理论上讲，许多事情都是相同的。这就是为什么我们必须学习计算机基础，因为它使我们能够对技术有了更深入的基本理解。