关于前端:探索-CSS-的本质

CSS，全称为 Cascading Style Sheets，用于定制文档款式；CSS 使得网页的出现更加丰盛，这也是初学前端的人最感到离奇的中央；

然而随着对 CSS 的深刻应用才会发现：那些被咱们津津有味的“xx属性的奇淫技巧”这类货色都只不过是浮在 CSS 最表层的景象而已；这种对于 CSS 的应用形式在我看来无异于“盲人摸象”，即 只能通过观察表面现象来总结应用办法，而不是从实质登程寻找解决方案 ，因而就可能会陷入永远只能借助表面现象来解决问题的窘境。

在初步理解过浏览器对于网页渲染的机制和原理后，心里有个疑难变得更加突出了，那就是——“CSS在网页渲染中的定位是什么”；我联合了 webGL 这种单纯的图形渲染 API 中的图形渲染流程和 CSS 代码在浏览器中解析后在网页渲染中的作用，得出了一个本人的论断：

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

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

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

既然 CSS 只是辅助渲染的，那么 CSS 所携带的款式信息又是如何转化成底层的绘制语句呢？

这里就须要波及到更具体的浏览器渲染管线流程了，因为光从上图 ¹ 这种大略的 pipeline，咱们根本无法了解CSS 这种 字符串信息 是 如何在浏览器外部进行解析而后转换成具体的底层绘制命令 的。不过好在 Google 外部发表了一个 极为具体的演讲稿 来论述网页中的像素是在经验了一个怎么的pipeline 之后才显示的：Life of a Pixel（这篇演讲稿当然是极力推荐浏览的）；多亏了这个演讲稿，我终于不必去从 Chromium 我的项目源码中去一点点查找 CSS 渲染的蛛丝马迹了……

上图是我根据上述演讲 PPT 和本人的了解所总结的一个渲染 pipeline，看似很残缺，然而实际上并不是浏览器所有的渲染pipeline，这仅仅是一个初步的流程，后续的优化渲染流程还没波及；因为前面的优化渲染pipeline 和更新渲染 pipeline 比较复杂，当前再独自钻研， 这里总结的流程权当是一个简略的全量渲染pipeline；

如果真要模仿上述流程图中所有 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
  );
}

precision highp float; // 高精度
uniform vec2 u_Screen; // 屏幕尺寸
uniform vec4 u_Background; // 背景色

void main() {gl_FragColor = u_Background;}

因为模型自身很简略，因而对应的着色器也很简略；通过着色器代码不难看出，我所了解的底层着色器接管 Paint Operator 信息就是通过内置的属性来一一对应，是最原始的形式；

下面这个模仿思路其实很简略，所以我也很想去验证这种思路跟具体的 Chrome/Chromium 底层绘制有啥不同（单纯的感兴趣）；因为 Chromium 外部简直所有的图形绘制都交给了 Skia 图形库，所以只能去 Skia 源码去查找蛛丝马迹了；

不过看了一圈 Skia 我的项目源码之后，我发现 Skia 我的项目切实是太高度形象了，层层嵌套，从着色器代码外面压根找不出蛛丝马迹，因为着色器代码外面的信息看起来都是很形象 / 通用的数据，无奈间接分割到图元绘制；看来须要较长的工夫能力找出我想要的答案，尽管有点遗憾，然而也从 Skia 自身发现了一些不错的中央：

Skia外部设计了一个着色器语言，名为 SkSL (Skia Shading Language)；SkSL 实际上就是基于某一固定版本的 GLSL 语法进行设计的，其作用应该是抹去不同 GPU 驱动 API 着色器语法的差别，以便对于不同的 GPU 驱动能够进一步输入为指标着色器语言，因而 SkSL 能够看做是着色器预编译语言²；

Skia的 API 格调也很有意思，与 Canvas API 很类似，看一下官网的 Demo 就晓得了：

void draw(SkCanvas* canvas) {canvas->drawColor(SK_ColorWHITE);

    SkPaint paint;
    paint.setStyle(SkPaint::kFill_Style);
    paint.setAntiAlias(true);
    paint.setStrokeWidth(4);
    paint.setColor(0xff4285F4);
    
    SkRect rect = SkRect::MakeXYWH(10, 10, 100, 160);
    canvas->drawRect(rect, paint);

    SkRRect oval;
    oval.setOval(rect);
    oval.offset(40, 80);
    paint.setColor(0xffDB4437);
    canvas->drawRRect(oval, paint);

    paint.setColor(0xff0F9D58);
    canvas->drawCircle(180, 50, 25, paint);

    rect.offset(80, 50);
    paint.setColor(0xffF4B400);
    paint.setStyle(SkPaint::kStroke_Style);
    canvas->drawRoundRect(rect, 10, 10, paint);
}

相熟的命令式以及图元绘制命名；

Skia中有三大基类：SkCanvas、SkBitmap和SkPaint³；
- SkCanvas：治理绘制相干的 API；
- SkBitmap：治理 bit 数据；
- SkPaint：治理图元绘制格调相干的状态；

How Blink works – Google 文档：一个对于 Blink 渲染引擎的超强概述
Web IDL 简介 | 澪同学的博客
https://www.chromium.org/blink
再见，CSS Shader (CSS Custom Filter) | 花嫁達の部屋：无心中发现的一个被废除的标准
W3C CSS 标准主页
https://www.chromium.org/deve…：Chromium 我的项目对于 Skia 应用的概述
Skia Vulkan Performance – 知乎
着色器 – LearnOpenGL-CN

https://docs.google.com/docum… ↩
https://github.com/google/ski… ↩
https://www.chromium.org/deve… ↩

关于前端:探索-CSS-的本质

前言

对于 CSS 的定位

CSS 与绘制

模仿 CSS 渲染

模仿代码

对于 Skia

相干文档