深入探讨:从CSS到晶体管

70年前,1947年12月16日,在威廉·肖克利(William Shockley)的指导下,约翰·巴丁(John Bardin)和沃尔特·布拉顿(Walter Brattain)在贝尔实验室(Bell Labs)实验室创建了第一个可操作的双极晶体管。12月23日,Brattain向他的同事展示了第一台晶体管放大器。因此,这一天通常称为晶体管日

巴丁(Bardin)站在左边,布拉顿(Brattain)站在右边,肖克利(Shockley)坐在

无需谈论此事件的重要性。晶体管被认为是20世纪最重要的发明之一,没有它,计算机仍然可以在灯和继电器上工作,并占据整个建筑物。肖克利,巴丁和布雷顿因其工作于1956年获得诺贝尔物理学奖。多年来,晶体管已小型化到只有几个原子。每个处理器都有数十亿个晶体管,因此该晶体管可以称为人类创造的最庞大的设备。

但是晶体管为我们做了什么工作?让我们进行一次心理之旅:我们将跟踪从一些高级指尖到我们生日的道路-晶体管。

以什么为起点?好吧,至少要画一个habrakat按钮。

HTML和CSS


按钮由背景像素,文本和边框组成。在代码中,由<a>标记设置,并对其应用CSS布局规则。例如,将CSS规则应用于边框到圆角:

border-radius: 3px;
诺帕

因此,边界由四个线段和四个弧(一个圆的“四分之一”)组成。

浏览器


为了进行研究,我选择了我最喜欢的Firefox。在FF开始绘制按钮之前,他需要做很多工作来解析和计算元素的位置:

  • 通过网络下载HTML,解析并编写DOM树
  • 通过CSS网络下载,进行词法分析,解析
  • 将基于优先级和继承的规则绑定到页面元素
  • 对于所有可见的DOM节点,组成其矩形区域的树-框架。
  • 对于框架,请计算尺寸和位置(请参阅视频
  • 考虑到z索引和内容类型(<画布>,SVG,<视频>),从框架组成图层。
  • 按以下顺序创建图形列表:背景颜色,背景图像,边框,后代,轮廓。


我们不会详细介绍这些步骤。在它们之后是必要元素的实际图纸。

下载源代码以了解发生了什么,
Mozilla Firefox. Firefox Mercurial Visual Studio C++. VS symbols.mozilla.org. - /layout/.

, , , Firefox. c , , — FF.

nsCSSRenderingBorders.cpp 文件负责绘制边框绘制边框的一般功能称为(会想到的):DrawBorders()该功能为各种情况选择最佳渲染方法。我们有一个相对简单的例子:存在边界半径,但是所有边上的边界都是实心且具有相同的颜色。

如果我们
if (allBordersSame &&
      mCompositeColors[0] == nullptr &&
      mBorderStyles[0] == NS_STYLE_BORDER_STYLE_SOLID &&
      !mAvoidStroke &&
      !mNoBorderRadius)
  {
    // Relatively simple case.
    gfxRect outerRect = ThebesRect(mOuterRect);
    RoundedRect borderInnerRect(outerRect, mBorderRadii);
    borderInnerRect.Deflate(mBorderWidths[eSideTop],
                            mBorderWidths[eSideBottom],
                            mBorderWidths[eSideLeft],
                            mBorderWidths[eSideRight]);

    // Instead of stroking we just use two paths: an inner and an outer.
    // This allows us to draw borders that we couldn't when stroking. For example,
    // borders with a border width >= the border radius. (i.e. when there are
    // square corners on the inside)
    //
    // Further, this approach can be more efficient because the backend
    // doesn't need to compute an offset curve to stroke the path. We know that
    // the rounded parts are elipses we can offset exactly and can just compute
    // a new cubic approximation.
    RefPtr<PathBuilder> builder = mDrawTarget->CreatePathBuilder();
    AppendRoundedRectToPath(builder, mOuterRect, mBorderRadii, true);
    AppendRoundedRectToPath(builder, ToRect(borderInnerRect.rect), borderInnerRect.corners, false);
    RefPtr<Path> path = builder->Finish();
    mDrawTarget->Fill(path, color);
    return;
  }


还有很多更复杂的选项,例如停靠在具有不同类型的虚线和虚线边框的边框半径的角落中,请参见DrawDashedOrDottedCorner()完全在代码中
很棒的评论
    //      radius.width
    // |<----------------->|
    // |                   |
    // |             ___---+-------------
    // |         __--     #|#       ###
    // |       _-        ##|##     #####
    // |     /           ##+##     ##+##
    // |   /             # P #     #####
    // |  |               #|#       ###
    // | |             __--+-------------
    // ||            _-    ^
    // ||          /       |
    // |         /        first dot is filled
    // |        |
    // |       |
    // |      |
    // |      |
    // |      |
    // +------+
    // |##  ##|
    // |##  ##|
    // |##  ##|


但是回到我们的前提。从注释中我们了解到,在这种情况下,边框是使用内部和外部两个矩形绘制的,然后用所需的颜色填充创建的路径(路径)。

AppendRoundedRectToPath(builder, mOuterRect, mBorderRadii, true);
AppendRoundedRectToPath(builder, ToRect(borderInnerRect.rect), borderInnerRect.corners, false);
RefPtr<Path> path = builder->Finish();
mDrawTarget->Fill(path, color);

转到gfx / 2d / PathHelpers.cpp中的AppendRoundedRectToPath()

同样,我们设置断点
a9430-clip-21kb

从函数的注释中我们得知,贝塞尔曲线在四个控制点上绘制了拐角。贝塞尔曲线通常用在计算机图形学中,包括绘制圆弧和椭圆弧。当我们从注释中进一步学习时,有很多选择用于选择控制点以构建曲线的选项。在这种情况下,我们需要点0和3属于矩形的边,点0、1和C在一条直线上,点3、2和C在另一条直线上。参见下图:

Mozilla圆形边界贝塞尔曲线

我们仍然需要计算段01 / 0C和32 / 3C的长度之比。在这里,作者使用近似计算并获得魔术常数alpha:

const Float alpha = Float(0.55191497064665766025);

不幸的是,带有注释引用的检查点选择算法的文章不在公共领域。但通常应注意,在计算机图形学中,算法通常使用近似值来提高性能。例如,Brezenham算法允许您通过求解方程y = f(x)来绘制“不是在额头上”的段和圆,而是使用更多狡猾的整数运算。填充等相同的东西

在该循环中,我们从一个拐角到另一个拐角,使用alpha来计算控制点的坐标,最后调用绘制边界线和拐角弧的函数:

aPathBuilder->LineTo(p0);
aPathBuilder->BezierTo(p1, p2, p3); 

添加。阅读材料

完整的AppendRoundedRectToPath()代码
void
AppendRoundedRectToPath(PathBuilder* aPathBuilder,
                        const Rect& aRect,
                        const RectCornerRadii& aRadii,
                        bool aDrawClockwise)
{
  // For CW drawing, this looks like:
  //
  //  ...******0**      1    C
  //              ****
  //                  ***    2
  //                     **
  //                       *
  //                        *
  //                         3
  //                         *
  //                         *
  //
  // Where 0, 1, 2, 3 are the control points of the Bezier curve for
  // the corner, and C is the actual corner point.
  //
  // At the start of the loop, the current point is assumed to be
  // the point adjacent to the top left corner on the top
  // horizontal.  Note that corner indices start at the top left and
  // continue clockwise, whereas in our loop i = 0 refers to the top
  // right corner.
  //
  // When going CCW, the control points are swapped, and the first
  // corner that's drawn is the top left (along with the top segment).
  //
  // There is considerable latitude in how one chooses the four
  // control points for a Bezier curve approximation to an ellipse.
  // For the overall path to be continuous and show no corner at the
  // endpoints of the arc, points 0 and 3 must be at the ends of the
  // straight segments of the rectangle; points 0, 1, and C must be
  // collinear; and points 3, 2, and C must also be collinear.  This
  // leaves only two free parameters: the ratio of the line segments
  // 01 and 0C, and the ratio of the line segments 32 and 3C.  See
  // the following papers for extensive discussion of how to choose
  // these ratios:
  //
  //   Dokken, Tor, et al. "Good approximation of circles by
  //      curvature-continuous Bezier curves."  Computer-Aided
  //      Geometric Design 7(1990) 33--41.
  //   Goldapp, Michael. "Approximation of circular arcs by cubic
  //      polynomials." Computer-Aided Geometric Design 8(1991) 227--238.
  //   Maisonobe, Luc. "Drawing an elliptical arc using polylines,
  //      quadratic, or cubic Bezier curves."
  //      http://www.spaceroots.org/documents/ellipse/elliptical-arc.pdf
  //
  // We follow the approach in section 2 of Goldapp (least-error,
  // Hermite-type approximation) and make both ratios equal to
  //
  //          2   2 + n - sqrt(2n + 28)
  //  alpha = - * ---------------------
  //          3           n - 4
  //
  // where n = 3( cbrt(sqrt(2)+1) - cbrt(sqrt(2)-1) ).
  //
  // This is the result of Goldapp's equation (10b) when the angle
  // swept out by the arc is pi/2, and the parameter "a-bar" is the
  // expression given immediately below equation (21).
  //
  // Using this value, the maximum radial error for a circle, as a
  // fraction of the radius, is on the order of 0.2 x 10^-3.
  // Neither Dokken nor Goldapp discusses error for a general
  // ellipse; Maisonobe does, but his choice of control points
  // follows different constraints, and Goldapp's expression for
  // 'alpha' gives much smaller radial error, even for very flat
  // ellipses, than Maisonobe's equivalent.
  //
  // For the various corners and for each axis, the sign of this
  // constant changes, or it might be 0 -- it's multiplied by the
  // appropriate multiplier from the list before using.

  const Float alpha = Float(0.55191497064665766025);

  typedef struct { Float a, b; } twoFloats;

  twoFloats cwCornerMults[4] = { { -1,  0 },    // cc == clockwise
                                 {  0, -1 },
                                 { +1,  0 },
                                 {  0, +1 } };
  twoFloats ccwCornerMults[4] = { { +1,  0 },   // ccw == counter-clockwise
                                  {  0, -1 },
                                  { -1,  0 },
                                  {  0, +1 } };

  twoFloats *cornerMults = aDrawClockwise ? cwCornerMults : ccwCornerMults;

  Point cornerCoords[] = { aRect.TopLeft(), aRect.TopRight(),
                           aRect.BottomRight(), aRect.BottomLeft() };

  Point pc, p0, p1, p2, p3;

  if (aDrawClockwise) {
    aPathBuilder->MoveTo(Point(aRect.X() + aRadii[RectCorner::TopLeft].width,
                               aRect.Y()));
  } else {
    aPathBuilder->MoveTo(Point(aRect.X() + aRect.Width() - aRadii[RectCorner::TopRight].width,
                               aRect.Y()));
  }

  for (int i = 0; i < 4; ++i) {
    // the corner index -- either 1 2 3 0 (cw) or 0 3 2 1 (ccw)
    int c = aDrawClockwise ? ((i+1) % 4) : ((4-i) % 4);

    // i+2 and i+3 respectively.  These are used to index into the corner
    // multiplier table, and were deduced by calculating out the long form
    // of each corner and finding a pattern in the signs and values.
    int i2 = (i+2) % 4;
    int i3 = (i+3) % 4;

    pc = cornerCoords[c];

    if (aRadii[c].width > 0.0 && aRadii[c].height > 0.0) {
      p0.x = pc.x + cornerMults[i].a * aRadii[c].width;
      p0.y = pc.y + cornerMults[i].b * aRadii[c].height;

      p3.x = pc.x + cornerMults[i3].a * aRadii[c].width;
      p3.y = pc.y + cornerMults[i3].b * aRadii[c].height;

      p1.x = p0.x + alpha * cornerMults[i2].a * aRadii[c].width;
      p1.y = p0.y + alpha * cornerMults[i2].b * aRadii[c].height;

      p2.x = p3.x - alpha * cornerMults[i3].a * aRadii[c].width;
      p2.y = p3.y - alpha * cornerMults[i3].b * aRadii[c].height;

      aPathBuilder->LineTo(p0);
      aPathBuilder->BezierTo(p1, p2, p3);
    } else {
      aPathBuilder->LineTo(pc);
    }
  }

  aPathBuilder->Close();
}


但是,这一切都取决于Mozilla使用的2D图形的后端。

图形引擎


Gecko使用与平台无关的Moz2D库,而该库又可以使用后端之一:Cairo,Skia,Direct2D,Quartz和NV Path。例如,Windows可使用Direct2D,Cairo,Skia。Skia也是Chromium后端。您可以在about:config中更改后端。后端又可以读取CPU上的所有内容,或者可以在某种程度上使用GPU硬件加速。例如,Skia有自己的OpenGL后端-Ganesh。

Direct2D代码已关闭,因此我们最好打开Skia并查看其作用。调用绘制三次曲线SkPath :: cubeTo的函数。要构建曲线,可通过de Casteljo算法将其划分为多个直线段,并进行实际绘制(请参见core / SkGeometry.cpp)。


机器码


老实说,我并没有完全了解Skia的内部原理,所以我退后了一步-回到AppendRoundedRectToPath(),在其中所有操作都对整数执行-会更容易吗?

打开反汇编代码后,我们必须在其中找到加法运算。

...
142B1863 00 00                add         byte ptr [eax],al  
142B1865 00 8D 43 FF 0F 84    add         byte ptr [ebp-7BF000BDh],cl  
142B186B 67 01 00             add         dword ptr [bx+si],eax  
142B186E 00 99 0F 57 C9 F7    add         byte ptr [ecx-836A8F1h],bl  
142B1874 F9                   stc  
142B1875 8B C3                mov         eax,ebx  
142B1877 8B CA                mov         ecx,edx  
142B1879 99                   cdq  
142B187A F7 7C 24 28          idiv        eax,dword ptr [esp+28h]  
...

是的我什至很容易就猜到,即使ADD远离ASM的人也要负责添加操作。采取的第一步:

142B1863 00 00 add byte ptr [eax],al
0x142B1863 -地址在存储器中
为0x00 - 操作码 - CPU指令代码。此Mozilla在x86下编译,并打开x86指令表,我们将看到代码00表示对ADD助记符进行8位加法运算。第一个操作数可以是寄存器或随机存取存储单元,第二个可以是寄存器。第一个操作数被添加到第二个操作数,结果被写入第一个。为了以防万一,我将说明该寄存器是处理器内部的超高速RAM存储器,例如,用于存储中间计算结果。

第二个字节也是0x00,称为MOD-REG-R / M其位指定操作数和寻址方法。



MOD = 00b结合R / M = 000b表示使用间接寻址
REG = 000b表示使用AL寄存器(EAX寄存器的低8位)
[eax]-表示添加是与RAM单元相加的,其地址在EAX寄存器中。

处理器如何处理ADD命令?

中央处理器


基于对Skylake微体系结构的描述,我编译了一个(极其简化的)步骤列表:

  1. X86指令从32KB L1指令高速缓存中提取到16字节预编码缓冲区中
  2. 预编码的命令组织在指令队列中(大小为2x25),并进入解码器
  3. x86 1-4 (µOPs). ADD 1 µOP ALU (- ) 2 µOP AGU ( ) (., ). 86 .
  4. Allocation Queue (IDQ). , Loop Stream Detector — .
  5. : , . . .
  6. 微操作由Unified Scheduler管理器执行,该管理器决定在何时何地发送操作以不按接收顺序进行执行。每个端口的后面是一个执行器。我们的微操作将转到ALU和AGU。


SkyLake的核心。图片来自en.wikichip.org

我再说一遍,这是我非常简化的描述,并不假装是准确和完整的。要获得更多参考,我建议阅读通过处理器的计算管道进行的“旅途之旅”“英特尔酷睿i7的处理器”一文。

ALU


现在,了解ALU中发生的事情将很有趣:这些数字是如何累加的?不幸的是,有关微体系结构和ALU具体实施的信息是Intel的商业秘密,因此我们稍后再讨论理论。

用于将两个二进制位(即一位)相加的设备称为加法器。输出是总和进位。


资料来源:维基百科

自在现实生活中,我们需要将由数位组成的数字相加,加法器还必须接受前一位的进位位作为输入。这样的加法器称为full


来源:维基百科

从图中可以看出,加法器由逻辑元素组成:XOR,AND,OR。而每个逻辑元素可以使用多个晶体管来实现。甚至是继电器CMOS晶体管

Mattausch,CMOS设计,H20 / 6/6
上全加法器的示例实现来源

因此,我们到了晶体管!当然,尽管不仅ALU在晶体管上起作用,而且在其他处理器单元上也起作用,但是大多数晶体管都在高速缓存中用作其单元。

实际上,我们处理器中的加法器电路可以以不同的方式构建,并且要复杂得多。例如,早在45年前的Intel 8008就已经能够预先计算所有进位,以便并行执行加法(所谓的具有并行进位的加法器)。谁在乎,请在博客中阅读有关逆向工程ALU Intel 8008的有趣博客文章Ken Shirriff。使用了各种优化:例如,不“正面”进行乘法也是有益的

结论:我们学到了什么?


  • 很复杂
  • 清楚地表明:为了解决过于复杂的问题,工程师使用了将复杂系统划分为多个级别(层)的方法。
  • 多级体系结构提供了可移植性:例如,Firefox可以在各种操作系统和不同的硬件上运行。
  • 各个级别之间的交互是由于接口,服务和数据格式(例如HTML和CSS,C ++,x86指令集等)的规范的开放性。
  • 我们今天的英雄在最底层-一个晶体管工作

聚苯乙烯 我是一个业余爱好者(网络开发人员),并且我相当了解C ++,ASM,BT架构-从学院课程中,我可能会弄乱一些东西。请随时发表评论。

Source: https://habr.com/ru/post/zh-CN400363/


All Articles