前端原生WebComponent组件样式加载闪烁问题

未知的动力

最近用原生的WebComponent开发一些简单的项目，出现了这样一个问题页面加载的时候，组件元素会显示出默认的样式，然后闪烁一下，才变成组件定义中的样式


然而代码块中 我将样式引用写在了元素之前了，这个问题不知道如何解决...


出现的问题就是 浏览器加载页面的时候 会显示出元素的默认样式，然后闪烁了一下，才显示出自定义样式
这是啥情况，发现问题并没有好的解决方案。。。

未知的动力

我现在有一个被动的解决方案是通过window的load事件来进行控制显示，在此事件触发之前使用一个蒙版遮罩避免用户看到这个闪烁的问题，但是这个方式很水，并不是真正的解决方案... 想问问论坛里的大佬是否遇到过这种问题，如何解决的说...

lcmystery

那一闪而过的是没有样式的时候？设置样式是通过css来的还是js也参与了？（如果是js也参与了，可以先隐藏，在处理完毕后再显示）

未知的动力

lcmystery 发表于 2022-3-8 15:50
那一闪而过的是没有样式的时候？设置样式是通过css来的还是js也参与了？（如果是js也参与了，可以先隐藏， ...

1. 一闪而过的时候是元素的默认样式
2. 设置样式是通过css默认执行的，js代码中并没有参与样式控制

lcmystery

未知的动力 发表于 2022-3-8 16:06
1. 一闪而过的时候是元素的默认样式
2. 设置样式是通过css默认执行的，js代码中并没有参与样式控制

用Google的Performance（F12里面）来看看呢。

wei125483

骨架屏  会好很多

未知的动力

lcmystery 发表于 2022-3-8 17:07
用Google的Performance（F12里面）来看看呢。

感谢兄弟，我通过观察性能窗口分析出了问题所在:
组件的js文件在组件的css文件之前加载了，虽然我将项目入口文件放在了body最后面，但是js先产生了DOM挂载了，css才姗姗来迟，导致的这个问题
所以最初一刻肯定是没有样式的，就闪了一下

详细说就是，原来我一直有思维误区:
在js代码中获取template元素的时候，肯定并不会加载里面的样式，这个大家都知道，但是浏览器生成webComponent组件实例的时候
我猜测，由于css不会阻塞DOM解析，一定是置入DOM之后，css才完成的加载完成，导致显示默认样式后，才将默认样式切换成了正常的样式
我之前的思维误区是以为，我编写的的组件template标签中，是css在前，元素在后，肯定会先加载css的，就像整个页面head标签那样
实际上，网上一些css加载会阻塞DOM树渲染的结论并不适合shadowDOM中，或者说chromium中关于ShadowDOM中的css加载是否会阻碍后续的元素另有说法
我在MDN中并没有找到相关的说明

我尝试在小项目中测试 有效，但是数据大的项目中我似乎又无法解决 不知道问题在哪 ，得继续耐心调试区了...

未知的动力

lcmystery 发表于 2022-3-8 17:07
用Google的Performance（F12里面）来看看呢。

我将所有的css的link索引标签拷贝一份到head中 但是发现两个项目表现截然不同，一个样式可以被缓存，加载自定义组件的时候不会再二次请求css
另外一个会重复发请求，然后我测试出来了，异步请求的话，会无视本地缓存，这我就不知道怎样才能在最开始先让各个组件的样式加载出来并且不被异步破坏掉...
我有个项目需要先异步读取数据之后才能根据数据判断情况生成界面UI的... 这我暂时就没有法子了...

未知的动力

现在知道两种方式可以选择，一种是将css写在template中，这样就不会导致js发异步请求了，
另外一种是 设计组件的时候，默认添加一个页面通用的class样式 用来隐藏元素，然后给所有的组件中关键的link标签添加绑定load事件，当组件的css加载完毕移除该样式，这是一种方案...