Nuxt2 渲染时html比css加载快,导致闪屏/CSS样式迟滞/抖动问题记录

本文主要是介绍Nuxt2 渲染时html比css加载快,导致闪屏/CSS样式迟滞/抖动问题记录,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题场景:

最近在用Nuxt2重写公司官网,但因为笔者不是专业前端,之前虽然也用vue2来写前端,但是用nuxt2来写项目还是第一次。在开发过程中虽然也磕磕碰碰,但因为开发的是官网,偏CMS型的网站,所以没有太多JS层面的问题,主要是CSS问题比较多要慢慢调。然而在我开发完成部署预发环境时,发现在刷新页面时会出现严重的闪屏或称为页面CSS样式抖动现象

具体表现:

在刷新页面时先加载出HTML代码,此时页面就是一个完全没样式的很丑的纯html页面,要等0.5秒-1秒后才加载出CSS样式并渲染出最终带样式的页面。这一闪而过的纯html就很难受了,也非常影响用户体验

尝试解决:

第一次尝试

开始时我怀疑是首屏性能问题,在vue的开发中也遇过,但是主要的异常现象表现是白屏,白屏1-3秒才出现页面。我尝试把asyncData中的全部请求都注释掉,然后重新打包运行,刷新页面时,通过F12查看页面加载时间从500ms降低到150ms了,但是发现依然存在上述的闪屏现象。所以判断并不是因为asyncData中请求太多/太慢导致的。

第二次尝试

既然不是页面的asyncData中的请求导致的。我就开始检查是否配置问题导致,因为我公司刚好有另外一个也是用nuxt2写的项目(不是我开发的),所以就参照着来检查nuxt.config.js文件,发现几乎没什么差别,连package.json的依赖都差不多。我后面甚至把package.json的依赖和nuxt.config.js文件的关键配置都改成一样,还是不行。所以判断不是package.json的依赖和nuxt.config.js文件配置问题

第三次尝试

经过上面的尝试后,实在搞不明白,所以就尝试面向百度编程,在百度搜索了一轮发现的确有几个相关的技术博客,提到的解决方案都差不多,都是说配置extractCSS,在此列举一下我能找到的几个关于这个问题的技术博客:
https://blog.csdn.net/weixin_42224055/article/details/106053404
https://juejin.cn/post/6946080450330755102
但因为我比对过我正在写的项目和公司另外一个nuxt项目的文件的配置文件,认为不是这个问题,但是这时也只能死马当活马医,就尝试了一下,发现依然是不行,所以判断不是extractCSS的原因。

最终解决方案

最后实在没有办法,只能创建一个新的空白的nuxt2项目,然后把我的项目目录、文件、代码一部分一部分的复制过来,看看是从哪一步开始出问题。幸亏我的代码不多,最后终于找到问题的原因! 问题是出在根目录的app.html文件中,根据nuxt2的官方手册,app.html一般不需要手动创建的,nuxt在运行时会自动创建,而且通常这个文件也不需要改动的。

关于app.html的描述详见官方手册的这个章节
在这里插入图片描述

如需引入额外的js或css文件,可以通过nuxt.config.js来配置(官方也推荐这样配置),而需要模板也可以通过layouts目录中自定义模板实现,完全不需要手动在根目录创建或者修改app.html的。而我是因为最开始的时候不熟悉nuxt2,看了官方手册关于介绍目录结构的章节后,自己理解错误,套用了vue的开发理念,所以就手多在根目录创建了app.html。在我删除app.html后,终于解决了闪屏问题。

结语

所以开发nuxt2时如遇同样出现闪屏现象的同学可以检查一下自己是不是在根目录下创建了app.html这个文件。写这篇文章主要是这个坑可能太小众了(大部分人都不会这么闲,手多在根目录手动创建一个app.html),我找遍了百度和bing,都没找到解决方案,最后只能通过创建一个新nuxt项目的方式一点点排查,花了几小时才最终排查出问题。所以在此记录一下,也希望能帮到其他遇到同样问题的同学。但本人因为不是专业前端,对nuxt也不熟悉,只查到是app.html文件的问题,最终也无法查出底层原理是什么,如果有知道的同学也欢迎告诉我,谢谢!

这篇关于Nuxt2 渲染时html比css加载快,导致闪屏/CSS样式迟滞/抖动问题记录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/854736

相关文章

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解

pip无法安装osgeo失败的问题解决

《pip无法安装osgeo失败的问题解决》本文主要介绍了pip无法安装osgeo失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 进入官方提供的扩展包下载网站寻找版本适配的whl文件注意:要选择cp(python版本)和你py