解决请求数据渲染时候，短暂闪烁问题

m0_hgl

已于 2024-05-08 16:52:59 修改

阅读量819

点赞数 6

文章标签：前端 javascript 开发语言

于 2024-01-11 17:38:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_62526603/article/details/135535187

版权

本文讲述了在使用原生HTML页面时遇到的刷新闪烁问题，原因是JavaScript操作DOM时需等待DOMReady。解决办法是在Vue组件中使用v-cloak指令配合CSS隐藏元素，直到Vue解析模板。对于快速浏览器如Chrome，这可能导致闪烁，而在IE7、8等较慢浏览器则较少见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我用的原生html文件写的页面，当刷新页面时候，会短暂闪烁如图

解决方法在el挂载的标签上绑定vue的v-cloak 指令并写对应的css样式

[v-clok]{

display:none !important

}

然后刷新页面，问题就迎刃而解了

出现这个问题的原因：由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，

所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。（别处借来的）

今天又是长脑子的一天，挺有意思的，不喜勿喷，谢谢

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_hgl

关注关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目页面一闪一闪的问题解决办法（v-if闪屏、花括号闪屏）

qq_37635012的博客

01-16

1738

今天遇到一个vue项目的问题，就是在一个弹窗里如果用了v-if与v-else造成页面一闪一闪的，如下视频所示：vue项目页面用了v-if与v-else后一闪一闪的代码如下所示：当弹窗显示时，前台调后端接口后根据后端返回值来确定isShowPreviewForm变量的值，最开始我是用的v-if与v-else就会导致页面一闪一闪的，这是因为销毁dom元素后导致的闪屏，于是换成v-show来解决了这个闪屏问题。

HTML5页面无缝闪开的问题及解决方案

11-20

HTML5页面无缝闪开的问题及解决方案主要关注于改善Web应用的性能和用户体验，尤其是在大型Web应用中，如何消除短暂的白屏现象并实现秒开。传统的优化方法包括压缩、拆包、动态加载来减小首屏资源大小，使用离线包和...

1 条评论您还未登录，请先登录后发表或查看评论

Vue3 防止页面闪烁 v-cloak

xiaowude_boke的博客

03-05

770

vue3防止页面闪烁

vue数据渲染页面数据展示出现闪烁问题

彳亍的博客

09-17

8264

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如 <div class="#app"> <p>{{value.name}}</p> </div> 在加载的时候会看到 {{value.name}} 原因：由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这...

Vue在页面初次渲染时出现一闪而过的模板变量问题

ruanhongbiao的专栏

04-15

3028

问题：使用VUE时，页面加载瞬间，会闪现模板语法，例如{{ liveInfo.liveName }}等解决办法： 1、可以通过在绑定模板变量的父元素添加VUE内置的指令v-cloak解决这个问题（推荐）具体实现： <div class="active_txt" v-cloak v-if="liveInfo.liveTextImgs!=''"> {{liveIn...

uniapp nvue页面数组过滤（遍历）/重新赋值时，数据循环渲染（v-for）出现数据闪烁的问题

自由&不束缚的博客

09-24

2534

问题描述 uniapp开发移动端时，在nvue页面中，需要对当前数组进行过滤(搜索),然后对该数组重新赋值的时候，页面重新渲染会把原来存在的数据一个一个的移除掉，比如说一个list数组原来有30条数据，然后我把list这个数组筛选10条数据，就会出现页面在那一直闪烁着移除数据的情况，看着就很不爽。废话就不多说了，经过几番挣扎，我是这样解决的。解决方案首先在data中声明一个变量 status 控制渲染数据盒子的显示隐藏，初始化 status = true；然后在数据渲染的地方使用 v-if = "sta

解决请求过快导致loading闪烁问题

m0_61790229的博客

02-27

1794

当我们在写项目发起请求时，我们可能会习惯于在请求过程中数据还未返回时展示一个loading组件，请求结束后就隐藏loading，渲染数据。这是没有问题的，不过目前网速越来越快，请求都十分迅速，经常会导致loading组件刚呈现数据就已经返回了，导致loading组件闪烁，十分影响用户体验，但若是不用loading若部分用户网速不行，也会导致请求的长时间白屏问题，同样影响用户体验。所以就需要一个两全其美的方法。

解决echarts地图闪烁问题及其省份数据获取方法

这种闪烁可能由多种因素引起，包括数据处理、渲染性能问题、浏览器兼容性等。知识点三：地图数据格式 ECharts中使用的地图数据通常是JSON格式，这种格式易于阅读和编辑。JSON数据中包含了地图的坐标点、边界以及...

iOS解决验证码发送时按钮闪烁问题（单按钮实现）

该文档提供了一种解决方案，即通过一个按钮实现发送验证码的功能，并且有效解决了按钮在发送请求期间可能出现的闪烁问题。在iOS的UIKit框架中，UIbutton是一个常用的交互控件，用于响应用户的点击操作。当按钮被...

页面最小窗口闪烁问题的源码与工具解决方案

在用户进行缩放操作时，浏览器可能需要重新计算元素位置和渲染新的视图，这个过程中可能会出现短暂的闪烁。解决方法可以是优化CSS选择器，减少DOM的深度，减少不必要的动画效果，以及使用硬件加速属性，如CSS3中的...

vue页面加载闪烁问题的解决方法

08-27

主要介绍了vue页面加载闪烁问题的解决方法,文中给大家提到了v-if 和 v-show 的区别，解决vue页面加载时出现{{message}}闪退的两种方法，感兴趣的朋友一起看看吧

html2canvas阻塞渲染问题

12-10

然而，由于其工作原理（遍历DOM树并绘制每个元素），在处理大量或复杂的网页内容时，可能会遇到阻塞浏览器渲染的问题，也就是所谓的“闪烁”或“白屏”。 1. **资源加载**：如果网页中包含大量的图片、视频或异步...

解决连续请求，显示loading导致页面闪烁问题

halo1416的博客

05-08

8116

一、背景在实际项目中，一般都会给页面添加 loading，从而提升用户体验。添加 loading 的方式有两种（基于vue+element）： 1.1 添加到table上这种方式是将 loading 主要添加到table组件上，并且在一些需要的地方进行单独处理，如给button添加loading效果。 1.2 全局添加这种方式是根据请求全局添加，只有请求就显示loading。一般在全局的ajax封装中处理。这里主要介绍的是全局添加的方式二、有什么问题根据请求显示loading（用elemen

vue异步数据切换闪烁

qq_24258617的博客

08-20

1406

vue异步数据切换闪烁

vue渲染时闪烁{{}}的问题及解决方法

weixin_33883178的博客

03-20

439

[v-cloak] { display: none }/* 隐藏Vue代码，所有的组件设置成隐藏 */ [v-cloak]:not(body) { display: none; }复制代码转载于:https://juejin.im/post/5c9252ccf265da60e9267bc5

el-table列表渲染时闪烁或者布局混乱的问题

weixin_54045596的博客

10-20

1540

element-ui提供了一个表格方法doLayout，可以使用该方法避免表格闪烁的情况。列表数据变化时，vue会重新计算列表高度宽度重新渲染，这个过程会导致列表闪烁。当列表数据发生变化时，例如刷新列表或者更改查询条件获取列表数据重新渲染列表。当列表数据发生变化时，下面的这个状态会一闪而过，然后恢复正常。

vue列表空状态在接口返回结果前会闪现一下

活宝小娜的博客

04-03

371

vue列表空状态在接口返回结果前会闪现一下，用户体验很不好，如何解决这个问题呢

vue img标签图片加载时闪烁

飞翔༒之翼

12-16

2192

加载时在图片正常显示之前还是会显示加载出错的默认图片。因为此时的img_url为空所以就在父元素加上。初次加载闪烁然后在父元素添加了v-cloak。

解决vue初始化数据时的闪烁问题

asdfgh0077的博客

08-26

354

解决vue初始化数据时的闪烁问题

uniapp 页面切换闪屏

最新发布

01-04

### 解决 UniApp 页面切换时的闪屏问题 #### 原因分析在 UniApp 开发过程中，页面切换时出现闪屏现象的原因主要有两个方面： 1. **NVue 页面背景设置不当**：当从 Vue 页面跳转到 NVue 页面时，如果 NVue 页面的初始背景颜色不是黑色或其他深色，则会短暂显示白色背景，造成视觉上的白屏效果[^1]。 2. **TabBar 页面渲染机制**：对于 TabBar 类型的应用，在切换至未缓存的新 Tab 页时，由于新页面尚未被加载和渲染完成，因此会产生一瞬间的空白状态，即所谓的“闪白”。这是因为 App 端处理多页面架构的方式所致——只有当前激活的页面才会立即呈现给用户；其他非活跃页面则需等待实际访问才开始初始化并绘制界面[^2]。 #### 解决方案针对上述两种情况，可采取以下措施来减少或消除闪屏现象： ##### 设置 NVue 页面默认背景色通过修改 `manifest.json` 文件中的配置项，指定 NVue 页面启动时使用的背景色为较暗的颜色（如黑色），从而避免过渡期间暴露白色的底层窗口。具体做法是在项目的根目录下找到该文件，并按如下方式调整路径对应的样式属性： ```json { "path": "pages/nvuePage/index", "style": { "app-plus": { "background": "#000" } } } ``` 此方法适用于所有类型的 NVue 组件，能够有效改善首次进入此类页面时可能出现的瞬态白屏状况。 ##### 预加载 TabBar 子页面为了防止频繁切换不同标签栏下的子页面引发不必要的重绘操作而导致的卡顿感以及伴随而来的短暂停滞感（表现为轻微的闪烁），建议启用预加载功能。这允许开发者提前准备好即将展示的内容，使得整个过程更加流畅自然。实现上可通过设置全局参数控制是否开启此项特性： ```javascript // main.js 中加入如下代码片段 import Vue from 'vue' Vue.config.productionTip = false; const appOptions = {}; if (process.env.NODE_ENV === 'production') { Object.assign(appOptions, { preloadPages: true, }); } new Vue(Vue.merge({ ...App, }, appOptions)).$mount(); ``` 另外还可以考虑利用 uni-app 提供的相关 API 对特定场景做进一步优化，比如监听 tab 切换事件并在适当时候触发异步数据请求等逻辑，确保每次交互都能获得最佳性能表现。