最后的步骤，就是根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置。
本文中出现的“渲染”一词，统一指的是它在图形学的意义，也就是把模型变成位图的过程。
这里的位图就是在内存里建立一张二维表格，把一张图片的每个像素对应的颜色保存进去（位图信息也是 DOM 树中占据浏览器内存最多的信息，我们在做内存占用优化时，主要就是考虑这一部分）。
位图不是图片哦，终于 get 到这个点，位图就是每个像素对应的颜色值
这个渲染过程是非常复杂的，但是总体来说，可以分成两个大类：图形和文字。
盒的背景、边框、SVG 元素、阴影等特性，都是需要绘制的图形类。这就像我们实现 HTTP 协议必须要基于 TCP 库一样，这一部分，我们需要一个底层库来支持。
一般的操作系统会提供一个底层库，比如在 Android 中，有大名鼎鼎的 Skia，而 Windows 平台则有 GDI，一般的浏览器会做一个兼容层来处理掉平台差异。
这些盒的特性如何绘制，每一个都有对应的标准规定，而每一个的实现都可以作为一个独立的课题来研究，当年圆角 + 虚线边框，可是难倒了各个浏览器的工程师。考虑到这些知识互相都比较独立，对前端工程师来说也不是特别重要的细节，我们这里就不详细探究了。
iOS好像是CoreGraphics，这个值得看看：https://www.stephenw.cc/2018/11/06/gui-framework-inside/
逆风
浏览器渲染出的结果如果是位图，请问输入框是怎么实现的？
👍2 2019-02-20
作者回复: 这个问到点子上啦，这块太复杂我故意没讲，实际上渲染过程除了位图，最终绘制上去还产生一个"热区"，这个“热区”不但跟你说的input相关，还跟用户选择、鼠标事件和scroll等交互相关。