如何度量替换HTML执行新请求的大部分的好处？

Question

我正在寻找一种方法来测量之间的time差异：

1. 在加载example.com/page-A的情况下，加载并完全到达example.com/page-B所需的时间。
2. 获取example.com/page-B的“主要内容”并通过Javascript替换example.com/page-A并再次达到"TTI状态“所需的时间。

为什么？

问题是，我正在考虑一个将服务器端呈现和客户端呈现相结合的想法，但我想收集数据，以了解这是一个好主意还是坏主意。

请注意，我不是在寻找意见(这是非主题在这里)。我正在寻找一种特定的方法来完成一项特定的任务。

下面的文字解释了我正在做什么，为什么我要做，以便它可能有助于了解情况和什么方法可以适合的情况。

概述

我将引用具有以下标签的通用HTML页面中的常见元素：

• html-head：和之间的一切
• page-header：嗯，人们通常理解的是页面标题。可能是一个元素，里面有一个，一些徽标等等。HTML的第一部分，通常在每个网页中都能找到。
• main-content：使web中的每个页面不同的内容。内容本身，无论是联系形式和它的周围环境，一个画廊，一个帖子，当前页面的主要内容，这本身是有意义的。
• footer：页脚以及关闭的和标记。

思想(简化)

<#>A.对服务器的第一个请求

服务器发出一个简单的HTML页面，包括所有内容。

B.以下请求(通过JS完成)

B.1。服务器只在纯HTML中释放main-content。没有JSON编码，没有属性，只有普通的HTML。

B.2。原来已经加载的页面中的main-content将被替换为新的main-content。

(解释)

对网页的第一个请求将包含服务器端以传统方式呈现的内容，使用PHP作为后端。

以下请求将获取仅为main-content呈现的服务器端。没有html-head，没有page-header，没有footer。

因此，一旦用我的网页通用加载页面并设置了导航，我就可以删除

子元素并将其替换为新获取的main-content。

但我不知道这样做的实际好处，我不想陷入可能导致浪费时间和无用结果的随机想法中。

• Intuition 1：不必重新下载style.css (可能还有bootstrap.css、fontawesome.css.)对于每个页面请求，将节省时间。但是浏览器无论如何都会缓存它。所以，这是一种好处，还是没有什么区别？
• Intuition 2：不必从头开始呈现页面(读取元标记，设置一个新的HTML，呈现页眉，页脚.)会节省时间。但是，既然“很大一部分”实际上是main-content，而且我计划替换它，那么这样做有什么真正的好处吗？我的意思是，很明显，只替换一小部分内容会产生不同，但是如果我替换了整个main-content，同样的情况是否适用呢？这是否会使情况变得更糟(撕毁DOM并将新东西扔进其中几次)？

为什么？

嗯，这好像是重新发明了方向盘。角质反应Vue..。所有这些都提供了实现类似或更好效果的方法。

这个想法的出现是因为我为自己“打破”了WordPress (实际上是露天矿)。我意识到有很多代码我从未使用过。很多。当然，除了可湿性粉剂，还有许多替代方案。但是我喜欢它的工作方式，“事件驱动”架构(动作和过滤器)，post类型的概念.这是一个很好的工作，我建立了几个东西，我想重用，因为它们是坚实的，并需要时间来构建。

我可以使用一个无头版本的WP，并构建一个前端完全使用一些API等，但我想出了这个想法，我喜欢它，我想进一步的一点，看看它是否符合我的期望，然后决定使用其他东西，而不是目前的“臃肿”(不讨厌！)WP CMS.

注：

如果你能提供一些关于这是一个好主意或坏主意的观点，我也会很感激。我知道这属于意见范围，这不是问题的范围。但是，如果你在解释这个问题时有一些侧面的想法(S)，我会很感激的。

Answer 1

IMHO您所描述的方法听起来类似于任何使用SSR实现的前端技术(svelte、vue、react)生成的SPA应用程序。如果我们能学到任何东西，如果操作正确的话，肯定比加载网页更快。您在这里试图实现的是组件和路由的延迟加载的组合。

我认为这种方法几乎没有什么好处。

• 不再下载资产(图像、js、css)，从而减少了这些资产的下载和解析时间(网络延迟明显最小化)。
• Dom树的构建显然更快，而且对用户的交互性也更强。
• 最小化呈现阻塞资源(js/css/img/ the )，并向不同资源添加延迟加载，以最小化dom中的开销

然而，我发现这种方法有许多潜在的缺点。

• Js多玛会被不想要的状态(对象/变量)膨胀。
• 运行在单个页面上的Js可能会影响另一个页面，如果您不小心的话，只需要一个承诺/setTimeout/setInterval，这些类型的代码就会扰乱另一个页面的位置
• 此实现为代码增加了开销，因为您将返回两种类型的数据。
• 更改与js/css代码有冲突。这可能会导致您的网站响应问题。这意味着新的开发人员很难在单个页面上执行任何更改。这可能会导致更多的开发时间。
• 对于这些类型的归档来说，调试和缓存都是非常困难的。因此，许多spa使用基于css/js操作的组件。

在前端框架中，有什么比您的方法更好呢？

• 文件和清理良好的档案结构，以解决上述许多问题。这意味着代码分裂/延迟加载是以深思熟虑的方式实现的。
• 经过测试和更可靠的缓存/回忆录支持。与其他路径发生冲突的机会基本上是零的，因为它们从来不会给jquery这样的库提供更改dom的能力，而且您也被劝阻自己改变dom。

从我所看到的情况来看，这种方法将为代码增加更多的开销和开发时间，以获得其他外部框架已经更好地处理和实现的一些好处。

Answer 2

您假设站点替换了DOM的一部分，因为它更快。不是真的。相反：

• 替换DOM通常被认为更快
• 替换DOM允许我们跨页面维护状态

通过维护旧的布局，可能会显示一个加载动画，然后一次更换页面内容，网站可以避免显示半加载页面。实际的内容更新应该只使用一个动画帧。

在某些情况下，这也会导致真正的速度提高，例如，当前端只需修补DOM的一小部分时，浏览器就不必重新布局整个页面。另一个潜在的速度可以通过在用户执行导航之前预取下一个页面的内容来实现。然而，大多数浏览器对预取/预加载有一定程度的支持，独立于前端JavaScript。

替换前端页面内容的一个更有用的原因是维护状态。替换DOM时，JavaScript对象将保持活动状态。对于水疗中心来说，这是非常重要的。如果没有DOM替换，我们要么使用REST方法(状态传输)，要么使用cookie/LocalStorage/IndexedDB/…持久化状态