Lynx让字节跨端跳动--黄玄.pdf

1、119TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会2025/huxpro19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会2025/huxpro19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会201419TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会2025201419TH D2 TERMINA

2、L TECHNOLOGY CONFERENCE第十九届D2终端技术大会19TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会/huxpro2025201419TH D2 TERMINAL TECHNOLOGY CONFERENCE第十九届D2终端技术大会/huxpro让字节跨端跳动Lynx /huxpro/huxpro揭幕Lynx Openning次编写，多端渲染Write Once,Render Anywhere单列/多列/瀑布流吸顶到底加载更多分滚动:CSS 选择器CSS 变量现代 CSS 视效CSS 继承CSS 动画colorradial-g

3、radientlinear-gradient+mask-imagemask-imageclip-pathbackground-image原界 CSS ReactNative UI with CSS in ReactWeb 启发Web-inspired Design前端技术的使命就是交付设计。At its core,UI technologies exist to deliver exceptional product design./huxpro性能Performance帧只是感知性能？First-Frame帧直出（IFR）Instant First-Frame Rendering0.3x s

4、lowdown250-75%vs.Webvs.Others(on Android)Launch TimeUI“Rendering”UIBytecodePre-Faster Scripting:“AOT”(Hermes)UIBytecodeFaster Scripting:FFIPrimjsElement PAPI(Lynx)Pre-UI“Rendering”HTMLLess Scripting:Pre-renderingUIPre-(SSR)HTMLPre-UI(defer/non-blocking)Less Scripting:Non-blocking!UI(defer/non-blocki

5、ng)Pre-(Inspired by SSR)Less Scripting:Partial Pre-rendering&StrippingUI(defer/non-blocking)Pre-(ReactLynx)Less Scripting:Partial Pre-rendering&Stripping(Incomplete)UI(defer/non-blocking)Pre-Less Scripting:Partial Pre-renderingMTSBTSBackground ThreadMain ThreadTwo-Tier Pre-processingPre-UI(defer/non

6、-blocking)BytecodePre-(ReactLynx)MTSBTSBackground ThreadMain Thread双线程，双运时架构Dual-threaded,dual-runtimesTwo-Tier Pre-processingPre-UI(defer/non-blocking)BytecodePre-(ReactLynx)BTSBackground ThreadMTSMain Thread专享同步 UI 操作权限privileged,sync UI accessTwo-Tier Pre-processingPre-UI(defer/non-blocking)Bytec