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

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n