Skip to content

Commit 00fdad8

Browse files
PupilTongPupilTong
committed
chn gpt-5
1 parent 372aa7b commit 00fdad8

File tree

1 file changed

+79
-90
lines changed

1 file changed

+79
-90
lines changed

‎docs/zh/blog/lynx-intro-to-web-platform.mdx‎

Lines changed: 79 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -5,147 +5,136 @@ sidebar: false
55

66
import { BlogAvatar } from '@lynx';
77

8-
_July 11th, 2025_
8+
_2025 年 7 月 11 日_
99

10-
# Intro to the Lynx's Web Platform
10+
# Lynx Web 平台简介
1111

1212
<BlogAvatar list={['haoyang.wang', 'aihao']} />
1313

14-
## 全平台的 Lynx
14+
## Lynx 无处不在
1515

1616
![lynx-for-everywhere](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-banner.png)
1717

18-
Lynx 为 Web 平台提供了第一方浏览器支持.
18+
借助 Lynx，我们为开发者提供一流的浏览器支持。
1919

20-
我们立志为开发者提供一个“一次编写，随处运行”的跨平台基础设施, 并始终把Web看作Lynx生态系统中不可或缺目标平台。 我们希望通过对浏览器平台的支持, 能帮助开发者更加轻松地预览开发结果, 避免花费大量时间在重写和维护分离的代码库上，能更敏捷的方式交付功能, 并最终能够帮助开发者吸引更多用户。
20+
Lynx Web 平台现已进入 Beta 阶段。下面是一些平台亮点。
2121

22-
开发者的成功就是我们的成功。
22+
在 TikTok 内部已有诸多落地场景。这里给出一个简单示例。
2323

24-
我们在公司内部有许多 Lynx 在 Web 平台的业务成功案例。 这里有一个简单的展示。
24+
![tiktok-preview-demo](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-tiktok-demo.gif)
2525

26-
<div style={{ maxWidth: '30%', margin: '0 auto' }}>
26+
我们的 Web 平台——面向浏览器的 Lynx FFI 实现——在渲染与表现上与 Lynx 引擎保持一致。
2727

28-
![tiktok-preview-demo](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-tiktok-demo.gif)
28+
## 并发能力：来自 Lynx 的启发
29+
30+
在 Lynx Web 平台上，我们将 Lynx 的双线程模型带到 Web 社区。
31+
32+
我们希望向 Web 社区展示多线程 Web 应用的样貌。
33+
基于 Lynx 的双线程架构，我们利用 [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 实现 Lynx 的多线程渲染。
34+
在 Lynx Web 平台上，开发者可以轻松将 ReactLynx 页面渲染到 HTML 文档中。
35+
使用 ReactLynx，你的代码会被自动且优雅地拆分为两个线程。
36+
得益于更快的 FMP（First Meaningful Paint，首次有效绘制）以及非阻塞的 effect 执行，我们帮助你的内容尽快抓住用户的注意力。
2937

30-
</div>
3138

32-
我们的 Web 平台是 Lynx FFI 在浏览器上的一个实现。通过提供了与Lynx引擎相同的API, 来实现让Lynx代码能在手机端和浏览器上有相同的外观和行为。
39+
众所周知，过去十年里，多线程性能在现代硬件上的提升速度已超过单线程性能。
40+
在单线程模型中，应用只能顺序处理任务。
41+
一旦遇到计算密集型场景，界面可能无响应甚至卡死，严重影响用户体验。
3342

34-
## 同一份代码, 同一个表现, 同一个Lynx
43+
下面这个示例展示了：即便有复杂的特效，也不会阻塞主线程。
3544

36-
Lynx Web Platform的核心目标是为开发者提供一个解决方案, 让开发者们能以高性能和低成本在浏览器中渲染 Lynx 页面。
45+
| ReactLynx | React |
46+
| --- | --- |
47+
| ![web-platform-demo](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/60.webp) | ![react-demo](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/react-single-thread-5hz.webp) |
3748

38-
因此, 我们通过 Rspeedy 提供了内置支持, 并重用了整个 JavaScript 编译管道来支持Web平台。但对于Web平台, 我们简单跳过了 Primjs 的 AOT 优化, 这也是产物文件不同的原因。
49+
在该示例中，我们模拟了一个需要用 JavaScript 解码 HEIC 图片的场景。
50+
解码属于 CPU 密集型任务。即使将解码逻辑放入 useEffect，主线程仍会被占用。
51+
这会导致 CSS 动画出现卡顿。
52+
在 Lynx 中，effects 不会等待渲染结束，也不会阻塞渲染。
53+
这种设计会优先保障高优先级的渲染任务，同时让 effects 得以快速执行。
3954

40-
![lynx-web-compile-time-graph-show-diff](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-compile-chunk-diff.png)
55+
![lynx-web-all-on-ui-thread-model](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/dual-thread-heic-image-update.jpeg)
4156

42-
所以对于开发者以及 Rspeedy(Rsbuild) 插件作者来说, 不需要额外的工作来支持 Web 平台。 你的Lynx代码不需要为不同的平台提供不同的变体/入口/文件。
4357

44-
**我们是同一个 Lynx!**
58+
## 一套代码，一个 Lynx
4559

46-
在 ReactLynx 内部, Preact 运行时通过调用 Lynx 的 [PAPIs](https://lynxjs.org/api/engine/element-api.html)来更新页面，这些 PAPIs 类似于 DOM API 。为了确保架构的一致性，我们在Web平台上重新封装了基于浏览器的 DOM API ，提供与 PAPI 一致的 API 。下面是一个简单的代码实现帮助理解。
60+
我们的 Web 平台核心目标是：以尽可能低的成本，让开发者在浏览器中以高性能渲染 Lynx 页面。
61+
62+
因此，我们在浏览器端提供了 Lynx 引擎 API 的实现。
63+
64+
![lynx-web-arch](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/arch-web-colorful-1.jpeg)
65+
66+
**__SetAttribute（Web 平台）**
4767

48-
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: '20px' }}>
49-
<div style={{display: 'flex', justifyContent:'center'}}>**__SetAttribute on Web Platform**</div>
50-
<div style={{display: 'flex', justifyContent:'center',}}>**__SetAttribute on Lynx Engine**</div>
51-
<div>
5268
```js
5369
// lynx/runtime/papi.ts
5470
const __SetAttribute: SetAttributePAPI = (
55-
element,
56-
key,
57-
value,
71+
element,
72+
key,
73+
value,
5874
) => {
59-
if (value == null) {
60-
element.removeAttribute(key)
61-
} else {
62-
element.setAttribute(key, value + '')
63-
}
75+
if (value == null) {
76+
element.removeAttribute(key)
77+
} else {
78+
element.setAttribute(key, value + '')
79+
}
6480
};
6581
```
66-
</div>
67-
```cpp
68-
RENDERER_FUNCTION_CC(FiberSetAttribute) {
69-
CONVERT_ARG_AND_CHECK_FOR_ELEMENT_API(arg0, 0, RefCounted, FiberSetAttribute);
70-
auto element = fml::static_ref_ptr_cast<FiberElement>(arg0->RefCounted());
71-
CONVERT_ARG(arg1, 1);
72-
CONVERT_ARG(arg2, 2);
73-
auto string_type = arg1->StringView();
74-
CHECK_ILLEGAL_ATTRIBUTE_CONFIG(element, FiberSetAttribute);
75-
element->SetAttribute(arg1->String(), arg2->ToLepusValue());
76-
ON_NODE_MODIFIED(element);
77-
RETURN_UNDEFINED();
78-
}
79-
```
80-
<div>
81-
</div>
82-
</div>
8382

84-
> https://lynxjs.org/api/engine/element-api/__SetAttribute.html
83+
这意味着开发者与 Rspeedy（Rsbuild）插件作者无需为 Web 平台做额外适配。
84+
你的代码无需针对不同平台维护多套变体。
85+
唯一的差异在于：面向 Web 平台的产物会跳过 AOT 优化。
86+
One Lynx!
8587

86-
而且, 作为 Web 平台作为Lynx官方支持的一个平台, 我们非常重视它的性能。借助现代 Web API 和现代 ECMAScript API, 如[CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model), [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), [Scroll Driven Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)等, 我们能够为Web渲染提供更好的性能。我们专注于那些被广泛使用的现代浏览器, 确保在这些浏览器上提供最佳的性能体验。
88+
### 同一份 CSS 规范 —— Web CSS 规范
8789

88-
### 同样的CSS标准: W3C CSS标准
90+
对于大多数 Lynx 支持的 CSS 属性以及全部选择器，Lynx 引擎遵循 W3C 规范或其子集。
91+
这使我们可以将这些声明原样输出到文档中。
8992

90-
对于Lynx本身, 它的绝大多数支持遵循 W3C CSS 规范。Lynx 引擎的 CSS 实现几乎都是基于W3C规范或其子集。因此，在大部分情况下, 在 Web 平台上我们只需要透传这些 CSS。
93+
![lynx-web-height-transform](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/style-transform-web.jpeg)
9194

92-
![lynx-web-height-transform](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-height-property.png)
95+
当然，也有一些为性能而生的属性与取值。
96+
因此，Web 平台内置了一个 CSS 转换器，会将某些取值转换为 CSS 自定义属性；
97+
随后再通过一些 CSS 技巧在 HTML 元素上切换与应用不同的属性。
98+
这让我们在保持高性能的同时，实现最大化的兼容性。
9399

94-
然而, 出于原生渲染的性能考虑, Lynx 引擎会提供一些特殊的属性和取值, 来为原生渲染提供性能捷径。这就是为什么我们的Web平台实现了一个CSS转换器来将一些值转换为 CSS 自定义属性。
95-
然后我们使用一些 CSS tricks 来把 Lynx 取值转换为表现一致的W3C标准CSS取值, 并设置到 HTML 元素上。这种设计使我们能够实现对于客户端原生渲染的最大兼容性和 Web 平台中更快的渲染速度。
100+
![lynx-web-display-linear-transform](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/web-rust-transformer.jpeg)
96101

97-
![lynx-web-display-linear-transform](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-css-polyfill.png)
98-
99-
> https://lea.verou.me/blog/2024/css-conditionals-now/
100-
101-
### 同样是原生组件: Web 平台的 Web Components
102+
### 原生组件，Web Components
102103

103104
![native-elements-on-different-platform](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-native-element.png)
104105

105106
> https://lynxjs.org/zh/guide/ui/elements-components.html
106107
107-
Lynx的基因是使用原生渲染实现"一次编写，随处运行"的开发模式。也就是说，在每个平台上，我们都有一个对应的原生组件实现，提供相同的行为。
108-
就像是Lynx在iOS/Android上的元素一样，在 Web 平台上我们使用原生的[Web Component技术](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)提供了一系列符合 Lynx 标准定义的自定义元素。
109-
我们直接使用浏览器提供的生命周期来实现这些元素，不需要依赖任何 JavaScript 框架, 这帮助我们最小化接入 Lynx 的 Web 应用的 IO 开销。
110-
111-
## Lynx 为您带来 Javascript 上的并发渲染
112-
113-
Lynx的 Web 平台不仅仅是一个简单的浏览器支持, 我们还希望能够抛砖引玉, 能够启发 Web 开发者社区引入多线程模型。
114-
115-
我们在 Web 平台上也实现了基于 Web Worker 的双线程架构设计。 通过 ReactLynx 已经设计好的双线程编程范式，用户代码会被自动优雅地拆分到两个线程。
116-
117-
我们希望能够提供尽可能快的 FMP 并且并行执行副作用(effects), 来帮助使用 Lynx 的产品尽快为用户展示内容。
118-
119-
这里我们构造了一个 Demo, 来模拟常见的具有复杂副作用的页面。 在 Lynx 上这些副作用会和主线程的渲染并发执行。
120-
121-
![demo-for-page-with-complex-effects](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-compare-lynx-web-with-react.webp)
108+
Lynx 的一个核心理念是：基于原生 UI 组件进行渲染。这意味着在每个平台上，我们都会提供一组行为相近的 UI 组件实现。
109+
就像 iOS/Android 上的 Lynx 元素一样，在浏览器中我们提供了一系列基于 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) 的自定义元素。
110+
借助浏览器原生提供的生命周期，我们无需依赖任何 JavaScript 框架。这有助于将 I/O 开销降至最低。
122111

123-
这个 Demo 中, 我们有一个 useEffect 来加载当前页面的详细信息。 在 Lynx上, 这个副作用不会等待渲染完成, 也不会阻塞渲染。这样的设计提升了高优先级的渲染任务，还能够让副作用能够快速执行。
112+
![web-components](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/web-shadow-tree-web-c.jpeg)
124113

125-
![lynx-web-all-on-ui-thread-model](https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/lynx-web-all-on-ui-thread-strategy.png)
114+
## 更快，更易，用 Rust 驱动的未来
126115

127-
近十年来, 现代 CPU 的核心数和线程数大幅增加, 硬件的多线程性能增长速度远远超过了单线程性能的增长。然而，许多 Web 应用仍然依赖于单线程模型，这限制了它们的性能和响应能力。
128-
在单线称模型上, 所有副作用都在主线程上执行，这意味着在处理复杂的副作用时，渲染会被阻塞，导致用户界面出现卡顿。
116+
### 由 Rust 与 WebAssembly 驱动
129117

130-
## 更快, 更易用
118+
我们正在引入一个由 Rust 实现的 WebAssembly 模块。内部基准测试显示：将样式转换器用 Rust 重写后，渲染时间可降低约 30–40%。
131119

132-
### WASM 接入
120+
### 已为 [PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) 做好准备
133121

134-
我们正在推进WASM模块接入到 Lynx Web Platform 中。通过 WASM，我们可以在浏览器中高性能地实现部分热点代码。 目前我们的内部测试使用 Rust 重写了 CSS 转换模块, 带来了30%~40%的渲染性能提升。
122+
我们将进一步探索 PWA 技术（如推送通知与 Service Worker），以提升用户体验。
123+
想象一下：无需单独的 SSR 服务器，也能实现非阻塞的内容流式输出。让我们用 workers 把它变为现实！
135124

136-
### 为[PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)提供原生支持
125+
### [SSR](https://developer.mozilla.org/en-US/docs/Glossary/SSR) 支持
137126

138-
我们正在积极探索PWA技术的更多可能性，例如推送通知和服务工作者，以改善用户体验。想象一下，在没有SSR服务器的情况下进行 HTML 直出渲染？ 让我们来试试!
127+
我们深知 SSR 是提升用户体验的重要方式。Web 平台将提供内置的「零 JavaScript 可就绪」SSR 输出，并与基于 [HTML template 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template) 的方案集成。
139128

140-
### [SSR](https://developer.mozilla.org/en-US/docs/Glossary/SSR) support
129+
## 观看我们在 [React Universe Conf 2025](https://www.youtube.com/watch?v=-uUcYrl51JM) 的演讲
141130

142-
我们也意识到SSR是提升用户体验的重要方式之一。Web 平台的 SSR 支持将使用[Template](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template), 提供内置的“零 JavaScript”SSR输出.
131+
[![React Universe Conf 2025](https://img.youtube.com/vi/Z4JHjv1gk0o/0.jpg)](https://www.youtube.com/watch?v=-uUcYrl51JM)
143132

144-
## 现在接入
133+
## 立即与你的 Web 应用集成
145134

146-
[See Here](https://lynxjs.org/guide/start/integrate-with-existing-apps.html#platform=web)
135+
[了解更多](https://lynxjs.org/guide/start/integrate-with-existing-apps.html#platform=web)
147136

148-
## 当前开发状态
137+
## 当前状态
149138

150-
我们的 Web 平台目前处于活跃开发阶段。我们的团队正在紧密合作，致力于完善和扩展这个平台。因此，有一些功能仍在开发中，尚未完全实现。例如，热模块替换（HMR）是我们正在积极开发但仍未交付的一个特性.
151-
我们将会砥砺前行, 努力为开发者提供更大的价值。
139+
我们仍处于密集开发阶段——团队正持续打磨并扩展平台能力。
140+
因此，仍有少数能力在排期中，尚未完全落地。例如，热更新（HMR）正在积极开发，尚未对外发布。我们也会持续改进，尽快与大家见面。

0 commit comments

Comments
 (0)