1# 优化跳转至新Web组件过程中的页面闪烁现象
2当应用采用Navigation等路由策略导航至Web组件页面时，在网页加载过程中，页面底部可能会出现闪烁现象，这有损用户体验。
3
4## 闪烁原因
5
6当应用采用Navigation等路由策略导航至Web组件页面时，通常会依据网页端的回调通知来判断是否应隐藏应用侧的原生导航栏。若决定隐藏原生导航栏，Web组件的布局将随即进行调整。这一布局调整过程可简化为如下四个阶段：
7![web-router-flash-optimization.png](figures/web-router-flash-optimization.png)
8图中四个状态的说明（从左至右）。
9
101. 将应用路由至Web页面，页面顶部为原生导航栏，底部则是Web组件，在此情况下，网页能够正常加载。
11
122. 在网页加载过程中，系统会回调通知应用侧隐藏原生导航栏，以便切换至网页端的导航栏。此时，原生导航栏被隐藏，Web组件的布局随即进行调整。页面底部最初会显露出Web组件的背景色，假设这一颜色为灰色。
13
143. 网页继续根据新的尺寸加载并显示，首先呈现的是HTML网页的背景色，此处假设为白色。
15
164. 最后，网页内容完全加载，展现出完整的HTML网页内容。
17
18在以上流程中，如果Web组件的背景色与网页的背景色有差异，在这种跳转过程中就有概率闪烁，闪烁产生的概率大小取决于网页的复杂程度与网络条件。
19
20## 优化方法
21
22应用可以通过设置Web组件的背景颜色，使其与网页背景颜色保持一致，从而避免视觉闪烁，提升用户体验（如上图示例，可将Web组件的背景色设置为白色）。
23
24在其他类似情况下，例如Web组件默认背景为白色，若网页背景为灰色，则在导航至新的Web页面时可能会出现白色闪烁，将Web组件背景色设置为灰色即可解决此问题。
25
26以下为设置Web组件背景色的接口示例（示例中将Web组件背景色设置为灰色，若不设置，Web组件背景色默认为白色）：
27  ```ts
28      Web({ src: $rawfile('xxx.html'),  controller: this.webController})
29        .backgroundColor(Color.Gray)
30  ```
31