Chapter · 02
第 2 章 · 界面是怎么画出来的
How Pixels Happen · 一帧画面的诞生
你按下一个按钮，它变了颜色。这中间发生了什么？屏幕上的一切，最终都是几百万个小方格各自被赋予一个颜色值的结果——而这个过程每秒要重复 60 次甚至 120 次。这一章分五节，从最小的像素讲到 GPU 合成，拆开"画面是怎么出现的"这个黑盒。
本章要回答什么
同一张图为什么在手机上清晰、在老显示器上发虚？为什么设计师给的图要准备 @2x、@3x 三份？PNG 放大就糊、SVG 放到多大都清晰，差别在哪？浏览器从拿到 HTML 到你看见页面，中间走了哪几步？以及最实用的一条——为什么用 transform 做动画比改 top 流畅得多？
Analogy · 譬喻
画界面就像十字绣。屏幕是一块布，横竖都是格子（像素）；你要做的事，就是决定每一格绣什么颜色的线。
位图像已经绣好的成品——放大只能把格子拉大，所以会糊。
矢量图像绣花图纸——记录的是"这里画一个半径 5 的圆"，无论布多大都能重新绣一遍，永远清晰。
而渲染管线就是"从图纸到成品"的那套流水线工序。
本章的五节
§ 2.1
像素与分辨率
像素、DPI、逻辑像素 vs 物理像素、@2x 图为什么存在。
§ 2.2
位图 vs 矢量
PNG/JPG 放大就糊，SVG 无限放大不糊——差在哪。
§ 2.3
颜色与色彩空间
RGB、HSL、sRGB vs P3、透明度与混色。
§ 2.4
渲染管线
解析 → 布局 → 绘制 → 合成——一帧画面的四步流水线。
§ 2.5
GPU 合成与 60fps
为什么动画会卡、为什么 transform 比 top 快。
一帧画面的四道工序
1. 解析 Parse
把 HTML/CSS 或界面描述文件读成程序内部的树形结构。
2. 布局 Layout
算出每个元素的确切位置和尺寸——谁在哪、多大。
3. 绘制 Paint
按顺序把背景、边框、文字、阴影画到若干图层上。
4. 合成 Composite
GPU 把所有图层叠成最终一张图，送去屏幕显示。
学之前先记住这一点
- 一切都是像素再复杂的界面，最后都归结为"给每个格子填一个颜色"。
- 16.7 毫秒是硬底线60fps 意味着每帧只有 16.7ms——超了就掉帧、就是"卡"。
- 越靠后的工序越便宜只触发"合成"的动画最快，触发"布局"的最贵——这是所有性能优化的总纲。
- 矢量优先图标、logo、插画能用 SVG 就别用 PNG——清晰、体积小、还能改颜色。
学海无涯 · 界面篇 · 第 2 章