使网页加载速度快

Posted 2023-03-25

【中文标题】使网页加载速度快

【英文标题】：Make webpages load fast

【发布时间】：2021-10-01 00:27:48

【问题描述】：

我看到 YouTube 和 Gmail 等网站的加载速度很快。我知道 Gmail 是单页应用程序，但 YouTube 不是，有没有办法制作一个可以快速加载的非 SPA 网站？

注意：我使用的是静态网站

【问题讨论】：

我觉得你想要的叫做“单页应用”，比如vue/angular:vuejs.org&angular.io-en.wikipedia.org/wiki/Single-page_application

我确实使用了它，但我也看到地址栏上的 URL 发生了变化......使用 javascript 很容易做到这一点......

这就是 SPA 的用途。网址更改称为“路由”。它如此快速的原因是，它已经加载但未显示。如果 url 显示 /page 或 /page.html 正是你喜欢的。

想一想...你能给我举个例子，让我看看它是否是我需要的吗？

我用很棒的文档链接了你两个框架。 Vue.js 的文档中有现场演示：jsfiddle.net/yyx990803/L7hscd8h & jsfiddle.net/yyx990803/xgrjzsup 在 iframe 上单击鼠标右键，然后单击“在新选项卡中打开”以查看 url 的变化情况。 Vue 有很好的文档记录，并通过复制和粘贴示例进行自我解释。

【参考方案1】：

这里的预取是这样完成的：

<link rel="prefetch" href="/your/webpage/link.html">

将上述内容放在要预取的每个页面的页眉中。

【讨论】：

可能相差2-5毫秒。当您使用看起来非常快的网站时，这通常是由于网站本身速度很快，例如，如果您的网站速度很慢，那么预取可能不是您的解决方案。创建快速网站本身就是一门艺术。正确设计的网站可以明显更快。几乎是瞬间的。它们是可用于使站点中的链接/页面在几毫秒内出现的各种技术。一个不错的起点是 Google Lighthouse，速度测试工具。

developers.google.com/speed/pagespeed/insights

我宁愿需要一些东西，比如当你点击链接时，标题会改变，正文会改变，地址会立即改变......不需要一秒钟就可以加载，它不会'根本不显示“加载图标”

这种效果是通过构建所谓的单页应用程序或 AMP developers.google.com/amp 来创建的。这是两个不同的概念。您可以通过使用 JavaScript 将网站构建为单页应用程序来使网站即时化。

我会检查放大器...我试过一次，但我不确定它是否有效

【参考方案2】：

你的问题不清楚。你是必须专注于你的问题是什么？或者你有什么顾虑？等等......因为谈论页面加载速度更快，并不意味着SPA比其他技术更快。它取决于您的技术、系统、应用程序、网络、数据库等......参考页面性能的大量问题。也许安全性是对性能的影响，服务器的硬盘服务速度慢，框架的工作负载等等......