这是一个创建于 906 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前是用 vue 开发 spa ，当下在用 vue2 ，尝试在往 3 迁移。
想问一下页面载入有没有什么最佳实践推荐，希望达到的效果是，网页 html 加载第一时间就进入一个 css 渲染的等待页面，然后后台依次载入 vue 、以及 css 和 js 静态资源依赖，这时候 vue 判断全部加载完了，就把等待页面取消掉，显示正常内容。
目前 vue2 的做法，想了想感觉上似乎是把 loading 的内容写在 index.html 里？但是往这里写业务相关的内容感觉不太对呀
 |
1
ChefIsAwesome 2022-05-31 18:52:10 +08:00
loading 写在 html 里，用最简单的 css 和 svg 实现，相当于原生 app 的 splash screen 。js 加载完了之后隐藏这个 splash screen 。
做按路由动态加载 js 的时候，把请求页面数据和加载 js 写在一起，并行下载。而不是等 js 加载完了，在那个 js 里头再去请求数据。要充分利用异步的特性。 |
 |
2
Richard14 OP @ChefIsAwesome vue 是默认加载完 js 和 css 才会执行 mount 事件吗，如果不是的话如何判断 js 和 css 加载完再触发删除 splash screen 呢
|
|
3
Richard14 OP @ChefIsAwesome 而且还有一个疑惑是，写在 html 里的话，每次刷新页面都会不受控制地默认显示那个加载页面吧。这样的话用户就算不是第一次打开，那个加载页面也会闪一下，感觉不太优雅啊
|
 |
4
ch2 2022-05-31 19:29:37 +08:00
@Richard14 #3 "不是第一次打开"这个概念是上了 PWA 才有的，没有上 PWA 的话没法严格监测 js 、css 文件的缓存与否。上了 PWA 你就用 service-worker 控制播放不播放动画就是了，最简单的是监听 fetch 的 url 是不是 js 文件，如果是而且 js 不在缓存里就播动画
|
|
5
ChefIsAwesome 2022-05-31 20:19:41 +08:00 via Android
@Richard14 你用 vue 有个初始化执行 new Vue 什么的文件，那里的代码跑起来了，不就代表 js 加载好了。
这个闪一下不是加载 HTML 这里独有的。任何有 loading 的地方都可能因为加载太快，导致闪一下。 所以 loading 一般都做个延时，等待超过 n 毫秒之后才显示。 |
 |
6
TMaize 2022-05-31 23:41:05 +08:00
结合上面的的，可以 Mutation Observer 监听某个特定元素的出现来代表完全渲染好了
|
Select Language