web前端CSS的本质

前言
CSS，全称为Cascading Style Sheets，用于定制文档样式；CSS使得网页的呈现更加丰富，这也是初学前端的人最感到新奇的地方；
但是随着对CSS的深入使用才会发现：那些被我们津津乐道的“xx属性的奇淫技巧”这类东西都只不过是浮在CSS最表层的现象而已；这种对于CSS的使用方式在我看来无异于“盲人摸象”，即只能通过观察表面现象来总结使用方法，而不是从本质出发寻找解决方案，因此就可能会陷入永远只能借助表面现象来解决问题的困境。
关于CSS的定位
在初步了解过浏览器关于网页渲染的机制和原理后，心里有个疑问变得更加突出了，那就是——“CSS在网页渲染中的定位是什么”；我结合了webGL这种单纯的图形渲染API中的图形渲染流程和CSS代码在浏览器中解析后在网页渲染中的作用，得出了一个自己的结论：

CSS是一个用于结构化描述渲染信息的辅助性DSL。

得出这么一个结论主要是基于以下理由：

结构化描述：CSS代码可以解析成CSSOM，然后依附于DOM上，这个得益于CSS语法本身就是键值对式的对象描述这一特性；
辅助性：单独的CSS代码并不能绘制出任何有效的图形，它必须结合HTML解析得到的布局、位置等结点信息才能进行绘制；即CSS代码在渲染过程中并不充当着骨架的作用，更多地是基于骨架赋予更多样的绘制；
DSL：这个就无需多说了，CSS语言本身就不是一门通用性编程语言，它仅仅是针对网页文档的渲染而已，其作用范围与GLSL/HLSL这类着色器编程语言相比简直就是专一得不能再专一了。

模拟CSS渲染
如果真要模拟上述流程图中所有pipeline，即HTMl + CSS → 像素，那真是一个巨大的工程，实在是有心无力；我最感兴趣的部分实际上是光栅化的部分，即Paint Operator → 像素，因此基于webGL。
可以看到这个渲染pipeline是十足的简单，IMGUI + 全量式绘制；因为我只想验证所谓的Paint Operator携带的绘制信息到底是如何传入到真正的底层——即着色器内的，我想知道着色器内部是如何消化和理解Paint Operator的；所以上面这个模型只是我个人根据Life of a Pixel一文所想到的一种底层交互模型；
以下是代码片段：
import { PaintOperator } from ‘@/types/css-gl’
import { vec2, vec4 } from ‘gl-matrix’

(() => {
const { CSSGL } = WebGLEngine // WebGLEngine是自己手写的一个webGL渲染库
const ops: PaintOperator[] = new Array(50).fill(0).map((val, idx) => {
const randomPos: vec2 = [
Math.random() * window.innerWidth,
Math.random() * window.innerHeight
]
const randomSize = vec2.create()
const randomBg: vec4 = [
Math.random(),
Math.random(),
Math.random(),
1.0
]
vec2.random(randomSize, 200)

return {
  id: idx,
  shape: {
    pos: randomPos,
    size: randomSize
  },
  flags: {
    background: randomBg
  }
}

}) // 随机构建50个PaintOperator对象
const gl = new CSSGL(‘test’, ops) // 解析PaintOperator数据
gl.paint() // 执行绘制
})()
解析代码就是上面这些，由于底层代码做了抽象，所以大部分代码都是生成PaintOperator对象的；可以看下预设的着色器代码：
precision highp float; // 高精度
uniform vec2 u_Screen; // 屏幕尺寸
attribute vec2 a_Pos; // 顶点坐标

vec2 widthRange = vec2(0.0, u_Screen.x);
vec2 heightRange = vec2(0.0, u_Screen.y);
vec2 outputRange = vec2(-1.0, 1.0); // NDC坐标范围为[-1, 1]

// 将一个值从原来的范围等比映射到另一个范围
float rangeMap (float source, vec2 sourceRange, vec2 targetRange) {
float bais = source / (sourceRange.y - sourceRange.x); // 在范围长度中的占比
float target = bais * (targetRange.y - targetRange.x) + targetRange.x;
return target;
}

void main() {
gl_Position = vec4(
rangeMap(a_Pos.x, widthRange, outputRange),
rangeMap(a_Pos.y, heightRange, outputRange) * -1.0, // 转换成NDC时y轴需要翻转
1.0,
1.0
);
}