纯静态HTML文件和通过JS和NoSQL加载内容的静态HTML文件之间的性能差异

3
在以下这些设置中,哪个可以为前端用户提供最快的页面加载速度?我只关心前端用户的速度表现,而不关心后端开发人员的维护需求。
  1. 一个网站只使用静态 .html 文件,没有 JavaScript、PHP、服务器端编程语言来渲染 HTML。基本上就是互联网的起源,每次在内部链接上单击会加载一个静态 .html 文件。每个页面都是服务器上预创建的物理 .html 文件。
  2. 一个网站有一个物理预创建的 .html 文件,但是每个页面上的主要内容(文章)通过 Javascript 从 NoSQL 服务器(Google Cloud Firestore 或 Fauna DB)获取。每次在内部链接上单击只能通过数据库调用替换页面的主要内容。网站的其余部分(菜单、标志、侧边栏、页脚)都是静态的,永远不需要重新加载。
  3. 一个网站有一个物理预创建的 .html 文件,但是每个页面上的主要内容(文章)本身是通过 JavaScript 从本地 JSON 文件获取的,没有数据库,只是与同一服务器上的 .html 文件位于相同目录下的常规 .json 文件。每次在内部链接上单击只能使用 JavaScript 替换页面的主要内容(可能是使用 fetch 的原始 JavaScript,除非 react 某种方式更快,我怀疑)。网站的其余部分(菜单、标志、侧边栏、页脚)都是静态的,永远不需要重新加载。
当然,服务器性能和用户位置在速度测试中始终发挥作用,但为了论证起见,我们假设是同一用户访问同一Web服务器。此外,在关于 NoSQL 的问题上,假设它是快速可靠的第三方服务器,例如 Google Cloud Firestore。 这些设置中哪一个最快?有人测试过吗?我听说有些人认为基本的静态 .html 文件总是最快的,而其他人则认为在初始页面加载完成后,通过 JavaScript 加载内容的静态 HTML 文件在浏览内部链接时更快。这两种争论都有道理。 这些设置之一是否具有主要优点或缺点,或者过去的基准测试结果?

这个问题不适合在Stack Overflow上讨论,该网站旨在帮助解决特定的调试问题,而非一般的架构问题。这个问题或许更适合在软件工程交流论坛讨论。 - Jayce444
2个回答

阿里云服务器只需要99元/年,新老用户同享,点击查看详情
2
网页速度包含两个主要组成部分: A. 服务器响应速度/响应的大小 B. 浏览器渲染所获取内容所需的时间 因此,不包含JS的静态文件是速度最快的,因为服务器没有延迟,而且浏览器在渲染静态资源方面非常高效。 第三个选项仍然很快,但比前两个选项略慢,因为浏览器需要转换JSON到HTML通过JS。 第二个选项是最慢的,因为这是唯一一个在服务器没有立即响应文件的情况下,需要连接数据库、获取结果、转换后再发送回客户端的选项。 上述都只在我们讨论同样内容但不同形式时才有意义。

如果这个回答对你有帮助,请标记为已接受的答案 :) - IvanD

1
这个问题略有缺陷,但是为了回答:
  1. 静态内容最快,浏览器会呈现并缓存内容。
  2. 从数据库获取内容会增加调用和检索的开销,主页面将被下载一次并缓存在客户端上,内容的调用无法被缓存,因为浏览器需要进行调用以查看内容。优点是调用仅返回需要显示的内容,并且大型云服务提供商的数据库搜索非常快速。
  3. 这种选择可能比选项2慢,因为JavaScript需要从所有内容中挑选出一个文章的内容,因此整个JSON文件都需要下载。
从可维护性与速度的角度来看,我建议选择选项2,因为它只会将所需数据发送到网络,并且其余部分已经被缓存。 如果您喜欢选项3,请查看使用浏览器缓存 https://web.dev/cache-api-quick-guide/ 缓存您的JSON文件,这样用户只需要在更改内容时下载更新版本。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,