A4--王之轩--Lynx Starlight布局引擎的设计与实现.pdf

1、Starlight布局引擎：Lynx的布局引擎的设计和实现王之轩 字节跳动Lynx Starlight布局引擎主要贡献者王之轩字节跳动，Lynx Multiplaform组Leader本科毕业于浙江大学，硕士毕业于哥伦比亚大学。现任Lynx Multiplaform组Leader负责Lynx在多平台的接入与落地，同时负责Lynx的多平台架构与工程组织问题，为Lynx布局引擎Starlight的主要作者。01020304Lynx为什么需要自研布局引擎从Web布局规范到轻量引擎设计Web的布局逻辑与Starlight的实现布局能力的拓展Lynx为什么需要自研布局引擎Instant First-Fr

2、ame Rendering新的跨端框架融入WEB的庞大生态InCSS-In-JSIn从Web布局规范到轻量引擎设计HTML=Hyper Text Markup Language更丰富的块布局-Flexible Box&Griddisplay:flexdisplay:grid但是许多布局仍然用HTML+CSS的早期布局能力 能开发一个原生框架去完整对齐HTML+CSS语法么是否要轻量化No：可能Yes：不能文字布局驱动的Normal FlowFloatTable原生实现：StaticLayoutTextRunShaperCoreText能力不足自己实现：HarfBuzzIcuFreeType复杂

3、+代码体积过大Inline文本布局（Typesetting）：中文文本 English words：OpenType 通用文字构型模型$%&(+Lynx官网对Lynx布局特征的描述Lynx 支持的布局属性与 Web 中同名的属性在行为上表现一致。但两者设计思路存在差异：Web 的布局是以文本为主体 而 Lynx 的布局则是以元件（、等）作为基本布局单位 这意味着 Lynx 的布局元件都是块级元素 文字的布局由端元件承载HTML Tag:页面骨架的描述 orReplacement Element 原生跨端框架 Tag:一个真实的原生元件 Web的display 属性（Normal Flow 内）

4、display:inline-block=block|inline|run-in=flow|flow-root|table|flex|grid|ruby Starlight的display属性 display:flexflex|grid|linear|relativeLynx的默认display:“linear”Sarlight布局引擎Selector处理器CSS Parser响应式的单位解析器布局原子属性width:(100%-30px)display:flex padding-left/right/top/bottom:10pxWed CSS中的长度单位 绝对单位：px in pt 等7种

5、 百分比 相对单位：字体：em ex等14种 视窗：vw vmin等6大类 自然大小：max-content 等 表达式:calc()fit-content()等 绝对单位：px ppx 百分比 相对单位：em rem vw vhrpx自然大小：max-contentfit-content 表达式:calc()fit-content()Lynx CSS中的长度单位响应式单位处理器原生环境变化信号（vh=300px）DOM环境变化信号(rem=40px)信号监听(视窗 根节点字体)PX+Percentage+IntrinsicSize属性更新到Starlight布局引擎Web的布局逻辑与Star

6、light的实现Web布局的基本流程Box Sizing属性：width margin 等display：布局子元件的方式alignment：放置子元件的方式更深层的嵌套父元件大小父元件的布局子元件大小子元件的布局相互依赖Web 布局中的自动大小系统块元素本身的大小参数 Preferred size stretch-fit size max-content size min-content size fit-content size intrinsic size布局环境的限制(Constraint)Available Space min/maxSome long textSomeLongtex