Blazor RichTextEditor 未在 Azure 中显示内容。在本地主机上工作
Blazor RichTextEditor not showing contents in Azure. Works in Localhost
在我的 XAF 21.2.4 Entity Framework Blazor 应用程序中（使用 Office 选项）
有一个业务对象 属性 标记为
[EditorAlias(EditorAliases.RichTextPropertyEditor)]
public string Info { get; set; }
当我 运行 本地主机中的应用程序时，富文本编辑器可以正确显示内容。
但是当我部署到 Azure 应用程序时 (Windows) 没有显示任何内容。
我注意到 Chrome 浏览器工具中有一条消息
[Violation] Forced reflow while executing JavaScript took 43ms
[Violation] Forced reflow while executing JavaScript took 43ms
- Chrome 只是说你的代码 is blocking the UI too much.
Javascript 代码导致浏览器在 运行 期间启动样式和布局计算。
此外，我们可能 运行 两次昂贵的样式和布局计算 – 我们的 javascript 现在需要更长的时间才能 运行。
然而，它们值得研究和修复以提高应用程序的质量。这样做的方法是注意消息出现的情况，并进行性能测试以缩小问题发生的范围。开始性能测试的最简单方法是插入一些这样的代码：
function someMethodIThinkMightBeSlow() {
const startTime = performance.now();
// Do the normal stuff for this function
const duration = performance.now() - startTime;
console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}
如果你想更高级，你也可以使用Chrome's profiler, or make use of a benchmarking library like this one。
一旦您发现一些耗时较长的代码（50 毫秒是 Chrome 的阈值），您有几个选择：
- 删除 some/all 可能不必要的任务
- 弄清楚如何更快地完成相同的任务
- 将代码分成多个异步步骤
(1) 和 (2) 可能很难或不可能，但有时真的很容易，应该是您的第一次尝试。如果需要，应该始终可以执行 (3)。为此，您将使用类似的东西：
setTimeout(functionToRunVerySoonButNotNow);
或
// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);
您可以阅读有关 JavaScript here 的异步性质的更多信息。
如何解决强制回流？
您只需要避免在同一 CRP 中发生 DOM 突变后进行 DOM 测量。
详情请参考Blazored TextEditor and this。
在我的 XAF 21.2.4 Entity Framework Blazor 应用程序中（使用 Office 选项）
有一个业务对象 属性 标记为
[EditorAlias(EditorAliases.RichTextPropertyEditor)]
public string Info { get; set; }
当我 运行 本地主机中的应用程序时，富文本编辑器可以正确显示内容。
但是当我部署到 Azure 应用程序时 (Windows) 没有显示任何内容。
我注意到 Chrome 浏览器工具中有一条消息
[Violation] Forced reflow while executing JavaScript took 43ms
[Violation] Forced reflow while executing JavaScript took 43ms
- Chrome 只是说你的代码 is blocking the UI too much.
Javascript 代码导致浏览器在 运行 期间启动样式和布局计算。
此外，我们可能 运行 两次昂贵的样式和布局计算 – 我们的 javascript 现在需要更长的时间才能 运行。
然而，它们值得研究和修复以提高应用程序的质量。这样做的方法是注意消息出现的情况，并进行性能测试以缩小问题发生的范围。开始性能测试的最简单方法是插入一些这样的代码：
function someMethodIThinkMightBeSlow() {
const startTime = performance.now();
// Do the normal stuff for this function
const duration = performance.now() - startTime;
console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}
如果你想更高级，你也可以使用Chrome's profiler, or make use of a benchmarking library like this one。
一旦您发现一些耗时较长的代码（50 毫秒是 Chrome 的阈值），您有几个选择：
- 删除 some/all 可能不必要的任务
- 弄清楚如何更快地完成相同的任务
- 将代码分成多个异步步骤
(1) 和 (2) 可能很难或不可能，但有时真的很容易，应该是您的第一次尝试。如果需要，应该始终可以执行 (3)。为此，您将使用类似的东西：
setTimeout(functionToRunVerySoonButNotNow);
或
// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);
您可以阅读有关 JavaScript here 的异步性质的更多信息。
如何解决强制回流？
您只需要避免在同一 CRP 中发生 DOM 突变后进行 DOM 测量。
详情请参考Blazored TextEditor and this。