至少需要 2 次刷新才能加载页面

Posted 2023-02-22

【中文标题】至少需要 2 次刷新才能加载页面

【英文标题】：Takes at least 2 refreshes to load a page

【发布时间】：2019-09-29 04:42:24

【问题描述】：

网站托管在 Firebase 上。

但问题是，每当我们访问该网站时，比如说www.website.com，我们需要至少刷新两次才能加载该网站。

---

更新：

不确定可能是什么问题

使用 Firebase 托管来托管我们的网站，我们有一个自定义 URL，它被重新路由到该 URL。 (*1)

npm run build 创建生产版本

通过firebase deploy部署

---

问题：

用户尝试在第一次尝试打开页面，但没有加载任何内容，但可以看到以下错误：

Uncaught SyntaxError: Unexpected token < firebase-app.js:1

在第二次尝试页面加载正确。

正如 Frank 在 cmets 中列出的，这不是 Firebase 的问题，那么它是来自 React（Create-React-App）的问题吗？

---

参考资料：

*1 - 两种路由都试过了，自定义路由和 Firebase 托管提供的路由，都出现了问题。

【问题讨论】：

尝试使用默认的 firebase url 访问它。然后尝试查看是否有任何依赖项加载时间过长。然后联系支持人员。

@cutiko，尝试这样做，在第一次加载时显示空白页。一旦我刷新它就可以了。

有时我们不清楚问题是什么，这就是其中一种情况。通常，我会用非常精确和准确的例子提出问题，然后是提示和我的尝试，但在这种情况下，我完全没有意识到。 @FrankvanPuffelen

你尝试了什么？使用默认 URL 或搜索缓慢的依赖项？ @Dhaval Jardosh

我正在从 firebase 托管的 url 路由到我的自定义 URL。所以我假设你的意思是我应该使用 firebase url 而不是我的自定义 URL 来检查它是否在第一次加载时就加载了，但这也没有发生。我首先尝试使用我的 URL 加载我的页面，它显示一个空白的白色页面，并在刷新时呈现所有内容。

【参考方案1】：

服务工作者

如果您使用的是create-react-app，问题是有一个服务工作者可能会缓存页面以供离线使用。在 CRA v2.0（与 react-scripts 不同的版本控制）之前，服务工作者默认启用。可能需要几次重新加载才能获得新内容，因为在重新加载之间持续存在于浏览器中的服务工作者实际上是在访问您的托管服务以寻找新内容。默认情况下，它总是从缓存中立即加载，直到它有机会访问服务器以检查新内容。默认情况下，一旦您使用New content available! Please reload. 在陈旧的网页上停留几秒钟，浏览器的控制台就会输出。下一次刷新会将新内容拉入浏览器的缓存中。

在特定浏览器上禁用（本地）

如果您只是想在 Chrome 中关闭它以进行开发，一旦您加载了您的网站，您可以进入dev tools>Application>Service Workers。到达那里后，该网站的服务人员有几个复选框。您可以查看Update on reload 和Bypass for network。

全局禁用

但是，如果您想永久禁用 Service Worker，则必须先从所有现有注册用户中注销它们。如果您只是删除名为service-worker.js 的文件，它不会为已经访问过您网站的用户取消注册，这是有问题的。为了从已经访问过您网站的客户中删除服务工作者，您必须取消注册它。在src 文件夹根目录下的index.js 文件中，您需要更改此项

import registerServiceWorker from './registerServiceWorker';
registerServiceWorker();

到

import  unregister  from './registerServiceWorker';
unregister();

您正在做的是阻止它进一步注册服务工作者（通过删除registerServiceWorker 函数）并通过调用unregister 函数取消注册任何现有的服务工作者。 Service Worker 可能在任意数量的浏览器上，因此最好取消注册，而不是仅删除 registerServiceWorker 函数。

您可以在create-react-appdocs site 上阅读有关服务工作者的更多信息。 这是 github 问题的 link，其中 CRA 的作者解释了如何禁用服务工作者。

【参考方案2】：

可能您的问题是某些资源被缓存了。如果您重新加载一次，浏览器只会重新加载主 url。如果您重新加载两次，其他资源将被刷新。所以它可能是由此衍生的一些奇怪的行为。

有一些技巧，例如如果您可以更改 js 文件的 url，将其从 http://yoursite/folder/file.js 更改为 http://yoursite/folder/file.js?_=TIMESTAMP 其中 TIMESTAMP 是时间戳，例如从 new Date().getTime() on php 上的 js 或 time() （每种语言都有获取时间戳的方法）。该 _ 参数将使缓存无效。如果这可行，还有更优雅的方法可以告诉浏览器根据您的需要处理缓存。

【讨论】：

抱歉回复晚了，我不确定需要修改哪个文件名。

通常问题出在 JS 中。但是检查一切：打开浏览器调试面板（F12）并在首次加载之前转到网络选项卡以启用它。第一次加载后，检查网络选项卡资源列表和代码（html 标记 + 右键 + 复制外部）并将其粘贴到文件比较器中，如 winmerge。第二次重新加载（当一切正常时）并重复该过程，将另一个源 html 外部源和网络资源列表粘贴到比较器的另一侧。检查差异。

还请记住，从长远来看，缓存控制标头解决方案比 ?_=NNN 解决方案更好。