# WebF 异步渲染 > **注意**：WebF 开发与 Web 开发几乎相同 - 您使用相同的工具（Vite、npm、Vitest）、相同的框架（React、Vue、Svelte）和相同的部署服务（Vercel、Netlify）。此技能涵盖 **3 个关键差异之一**：WebF 的异步渲染模型。另外两个区别是 API 兼容性和路由。 **这是从浏览器开发转向 WebF 时需要理解的第一重要概念。** ## 根本区别 ### 在浏览器中（同步布局）当你修改 DOM 时，浏览器**立即**执行布局计算： // 浏览器行为 const div = document.createElement('div'); document.body.appendChild(div); console.log(div.getBoundingClientRect()); // ✅ 返回真实尺寸布局**同步** \-您立即获得尺寸，但这可能会导致性能问题（布局抖动）。 ### 在 WebF 中（异步布局）当您修改 DOM 时，WebF **批处理**更改并在下一个渲染帧中处理它们： // WebF 行为 const div = document.createElement('div'); document.body.appendChild(div); console.log(div.getBoundingClientRect()); // ❌ 返回零！还没有布置好。布局**异步** \- 元素存在于 DOM 树中，但尚未被测量/定位。 ## 为什么要异步渲染？ **性能**：WebF 的异步渲染比浏览器同步布局**便宜**20 倍**！ * DOM更新是批量的 * 在一次优化过程中处理多项更改 * 消除布局抖动 * 无需“DocumentFragment”优化 **权衡**：在测量元素之前，您必须明确等待布局完成。 ## 解决方案：屏幕上/屏幕外事件 WebF 提供了两个非标准事件来处理异步生命周期：活动 |当它开火时 |目的 ---|---|--- `屏幕上` |元素已布局并渲染 |安全测量尺寸，获取计算样式 `屏幕外` |元素从渲染树中移除 |清理和资源管理 **将它们视为“IntersectionObserver”，但用于布局生命周期，而不是视口可见性。** ## 如何正确测量元素 ### ❌错误：立即测量 // 不要这样做 - 将返回 0 或不正确的值 const div = document.createElement('div'); div.textContent = '你好WebF'; document.body.appendChild(div); const rect = div.getBoundingClientRect(); // ❌ 返回零！ console.log(矩形宽度); // 0 console.log(矩形高度); // 0 ### ✅ 正确：等待屏幕上的事件 // 执行此操作 - 等待布局完成 const div = document.createElement('div'); div.textContent = '你好WebF'; div.addEventListener('屏幕上', () => { // 元素现已布局 - 可以安全测量！ const rect = div.getBoundingClientRect(); // ✅ 真实尺寸 console.log(`宽度：${rect.width}，高度：${rect.height}`); }); document.body.appendChild(div); ## React: 使用FlutterAttached Hook 对于 React 开发者来说，WebF 提供了一个方便的钩子： ### ❌错误：使用 useEffect 从 'react' 导入 { useEffect, useRef }; 函数 MyComponent() { const ref = useRef(null); 使用效果（（）=> { // ❌ 元素尚未布局！ const rect = ref.current.getBoundingClientRect(); 控制台.log(矩形); // 将为零 }, []); 返回

内容

; } ### ✅ 正确：使用 useFlutterAttached 从'@openwebf/react-core-ui'导入{useFlutterAttached}；函数 MyComponent() { const ref = useFlutterAttached( () => { // ✅ onAttached 回调 - 元素已布局！ const rect = ref.current.getBoundingClientRect(); console.log(`宽度：${rect.width}，高度：${rect.height}`); }, () => { // onDetached 回调（可选） console.log('从渲染树中删除组件'); } ）；返回

内容

; } ## 布局相关的 API **仅在屏幕回调或 useFlutterAttached 中调用这些：** * `element.getBoundingClientRect()` * `window.getCompulatedStyle(element)` * `element.offsetWidth` / `element.offsetHeight` * `element.clientWidth` / `element.clientHeight` * `element.scrollWidth` / `element.scrollHeight` * `element.offsetTop` / `element.offsetLeft` * 任何依赖于元素位置或大小的逻辑 ## 常见场景 ### 场景 1：风格更改后进行测量 const div = document.getElementById('myDiv'); // ❌ 错误 div.style.width = '500px'; const rect = div.getBoundingClientRect(); // 旧尺寸！ // ✅ 正确 div.style.width = '500px'; div.addEventListener('屏幕上', () => { const rect = div.getBoundingClientRect(); // 新维度！ }, { 一次: true }); // 在第一次调用后使用“once”删除侦听器 ### 场景 2：定位工具提示/弹出框函数 showTooltip(targetElement) { const tooltip = document.createElement('div'); tooltip.className = '工具提示'; tooltip.textContent = '工具提示文本'; tooltip.addEventListener('屏幕上', () => { // 现在我们可以安全地定位工具提示 const targetRect = targetElement.getBoundingClientRect(); const tooltipRect = tooltip.getBoundingClientRect(); tooltip.style.left = `${targetRect.left}px`; tooltip.style.top = `${targetRect.bottom + 5}px`; }, { 一次: true }); document.body.appendChild(工具提示); } ### 场景 3：使用测量来响应组件从'@openwebf/react-core-ui'导入{useFlutterAttached}；从'react'导入{useState}；函数测量框() { const [dimensions, setDimensions] = useState({ 宽度: 0, 高度: 0 }); const ref = useFlutterAttached(() => { const rect = ref.current.getBoundingClientRect(); 设置尺寸（{ 宽度：矩形宽度，高度：矩形高度 }); }); 返回（

此框的宽度为 {dimensions.width}px

和 {dimensions.height}px 高

）； } ## 性能优势 WebF 的异步渲染提供了显着的优势： 1. **批量更新**：多个 DOM 更改一起处理 2. **无布局抖动**：消除读-写-读-写模式 3. **优化渲染**：单遍渲染树 4. **不需要 DocumentFragment** ：批处理是自动的与需要仔细批处理操作的浏览器相比： // 浏览器优化（WebF 中不需要！） const 片段 = document.createDocumentFragment(); for (令 i = 0; i < 100; i++) { const div = document.createElement('div'); 片段.appendChild(div); } document.body.appendChild(片段); // 单一布局在 WebF 中，只需直接附加 - 它会自动优化！ ## 常见错误 ### 错误 1：忘记等待 // ❌ 错误 const div = document.createElement('div'); document.body.appendChild(div); 初始化Widget(div); // 假设 div 已布局 - 将失败！ // ✅ 正确 const div = document.createElement('div'); div.addEventListener('屏幕上', () => { 初始化Widget(div); // 现在安全了！ }, { 一次: true }); document.body.appendChild(div); ### 错误 2：没有清理监听器 // ❌ 错误 - 内存泄漏 element.addEventListener('onscreen',handleLayout); // 监听器从未被移除！ // ✅ 正确 element.addEventListener('onscreen',handleLayout,{once: true }); // 或 element.addEventListener('onscreen',handleLayout); // 稍后... element.removeEventListener('onscreen',handleLayout); ### 错误 3：使用 IntersectionObserver 进行布局 // ❌ 错误 - IntersectionObserver 用于视口可见性，而不是布局 const 观察者 = new IntersectionObserver((entries) => { // 这基于视口触发，而不是布局完成！ }); // ✅ 正确 - 在屏幕上使用布局生命周期 element.addEventListener('onscreen', () => { // 元素已布局 }); ## 调试技巧如果您得到的尺寸为零或不正确： 1. **检查您是否在屏幕上等待**：最常见的问题 2. **验证元素是否确实添加到 DOM** ：必须位于文档树中 3. **确认元素具有显示样式** : `display: none` 元素不布局 4. **在屏幕回调中使用 console.log** ：验证回调是否触发 element.addEventListener('onscreen', () => { console.log('✅ 屏幕上已触发'); console.log(element.getBoundingClientRect()); }, { 一次: true }); ## 资源 * **核心概念 - 异步渲染** : * **调试和性能**： * **@openwebf/react-core-ui** : 使用 `npm install @openwebf/react-core-ui` 安装 ## 要点 ✅ **做**： * 使用`onscreen`事件或`useFlutterAttached`钩子 * 在测量元素之前等待布局 * 使用“{once: true}”进行一次性测量 ❌ **不要**： * 在appendChild()之后立即测量 * 像浏览器一样依赖同步布局 * 使用IntersectionObserver进行布局检测 * 忘记清理事件监听器

Webf 异步渲染

包含技能