LayoutUnit&SubpixelLayout简介为了更好的支持移动端和PC端的缩放，WebKit加入了subpixel布局（sub-pixel/sub-pixellayout）。为此，他们还更改了渲染树。WebKit中称为LayoutUnit的子像素单元取代了以前使用整数来布局元素在页面上的位置和大小。WebKit自2013年起启用此标志。LayoutUnitLayoutUnit是逻辑像素的抽象表示。在WebKit的实现中，它是一个像素的1/64，这样我们就可以使用整数来进行布局计算，避免使用浮点数计算时丢失精度的问题。虽然我们现在在布局计算中使用了LayoutUnit，但是当计算出的值最终渲染出来并对应到设备上时，仍然会出现计算出的值无法与物理像素对齐的情况。因为计算出来的值可能是小数，1个物理像素就不能再切了。那么问题来了，子像素如何与物理像素对齐？回到我们实际的编程过程中，我们在很多场景中都会遇到亚像素的问题，但是很多人不会去关注，或者会忽略这些细节。比如一个盒子的宽度是10px，我们把它分成3份，那么里面的三个盒子的宽度是多少，3.3333px？再比如，我们在使用rem布局的时候，有时候会发现一个正方形设置了border-raduis，期望显示成圆形，但是在某些设备上却不是那么圆，可能会渲染成一个整体当它相对较小时呈椭圆形。而这个时候这个元素也设置了一个background-size来覆盖整个容器，只是背景被裁掉了一小块。这些问题并不那么容易发现，但它们确实存在。场景现在我们有一个50px的容器（DPR为1）并将它分成3部分。必须有小数。查看屏幕上呈现的每个部分的宽度有多少。
