LayoutUnit & Subpixel Layout

引言

为了更好的支持移动端和 PC 端的缩放，WebKit 增加了subpixel layout（次像素/亚像素布局）为此他们还改变了 rendering tree。一个次像素单元在 WebKit 内被称为 LayoutUnit 用于取代之前使用整数来布局一个元素在页面中位置和大小。从 2013 年开始 WebKit 就已经开启了这个 flag。

LayoutUnit

LayoutUnit 是逻辑像素的一种抽象表示，在 WebKit 的实现中它是一个像素的 1/64，这样我们就可以使用整数来进行布局计算，避免了使用浮点数计算而丢失精度的问题。

虽然我们现在在布局计算时使用了 LayoutUnit，但是在最终将计算值渲染对应到设备上时仍然会出现计算值不能与物理像素对齐的情况。因为计算出的值可能是一个小数而 1 个物理像素已经不能再进行切割。所以出现了这样一个问题，次像素如何与物理像素进行对齐？

回到我们实际的编程过程中，我们会有很多场景遇到次像素的问题，只是很多人不会关注，或者会忽略掉这些细节。比如如果一个 box 的宽度是 10px，我们把它平均分成 3 份，那么里面的三个盒子的宽度分别是多少呢，3.3333px？再比如我们在使用 rem 布局的时候有时候会发现一个正方形设置了 border-raduis 预期让它展示成一个圆形，在一些设备上却并不那么圆，在整体比较小的时候可能会被渲染成一个椭圆形。以及这种时候这个元素还设置了一个 background-size 覆盖整个容器但是背景却被切掉了一小块。这些问题不是那么容易被发现，但是确实是存在的。