Question

问题：

Angular会在显示应用前几秒钟加载白屏。只有六次尝试加载网站的情况才会发生这种情况，主要是在我关闭浏览器并重新打开浏览器然后进入我的网站时。

预期结果：

网站/应用本身最多可在1.6秒内加载。我基本上希望白屏随机停止显示6-8秒。这几乎就像网站无法入睡，但我确实获得了不错的网站访问量。

技术：Angular版本7，AngularCLI，Cloudflare和Firebase托管。

信息：

我在控制台中收到这4条奇怪的黄色警告消息。我不确定是否会造成麻烦。

下面的屏幕快照显示了我5秒钟以上所看到的内容：

Answer 1

您可以尝试preloading某些轻量级的关键CSS，该CSS在浏览器从服务器加载其他较重资源时显示某种动画/启动画面。这将减少“白屏”占用的时间，并给用户留下网页正在加载且正在运行的印象。

此外，您可以在此处阅读有关preload的更多信息。假设您在index.html的<head>标签内使用Angular：

<!-- preload css-->
    <link rel="preload" as="style" onload="this.rel='stylesheet'" href="your-path/assets/preload.css">

然后在您的<body>上，渲染一些微调器，该微调器在浏览器获取其他脚本文件时显示。

<div class="app-loading">
  <svg class="spinner" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
  </svg>
</div>

在显示网站前几秒钟角加载白屏

1 个答案: