facebook、twitter 如何在不刷新的情况下重新加载他们的页面？答案

【问题标题】：How facebook, twitter reload their page without any refresh?facebook、twitter 如何在不刷新的情况下重新加载他们的页面？
【发布时间】：2020-07-23 04:33:36
【问题描述】：

我对这项技术非常好奇，我想知道 Facebook、Twitter 和许多网站如何在点击链接后重新加载页面而不刷新？

我在谷歌上搜索了这个，但没有找到任何有用的信息，在这个 Quora article。有人说他们使用 WebSocket API 或 AJAX 来请求类似的东西。

那么，这个技术/技术名称是什么？

【问题讨论】：

“但我的问题是，如果他们使用 ajax 技术，那么它应该出现在开发人员工具网络区域，但我没有看到这部分的 ajax 请求。” 对我来说应该而且确实如此。他们都使用 XHR 和 fetch 和其他东西。也许你在过滤？大多数网络面板中有很多过滤器选项。
@T.J Crowder，所以你确定他们没有使用 ajax 吗？
@WebDesigner 请查看我在回答中与您分享的链接。您将在幕后看到模仿您所说的“页面重新加载”的代码:-)
他们使用 ajax 来加载内容。他们使用 DOM 操作来显示它。这是一个基本的 DOM 操作示例：jsfiddle.net/tjcrowder/u3hnxb87
@T.J.Crowder，你说得对，我的网络面板有问题实际上不是问题，我停止了一些功能。当我重新加载页面时，它按预期需要很多请求。感谢您的代码。

标签： javascript websocket refresh reload web-technologies

【解决方案1】：

大多数现代网站都使用 FE 框架，如 React、Angular、Vue 和许多其他框架，其主要特点是动态构建 DOM 以响应用户操作，而无需重新加载页面。

这些特定框架的强大工具之一是路由器。这几乎是从存储在 FE 端的蓝图重建页面

请看一下 React Router 的工作演示： https://codesandbox.io/s/nn8x24vm60

PS：当用户使用特定的路由器链接进行导航时，几乎 JS 会隐藏/删除 DOM 中的特定元素并用预期的元素替换它们（对于其他开发人员检查 DOM 来说，这可能看起来像普通链接，除非你真的检查附加的事件监听器)

【讨论】：

一位智者曾经说过。每当一位开发人员决定实施新的解决方案时，就会产生新的框架:-)
有一个部分路由器，当哈希改变时实现。因此 window.onhashchange 将是侦听更改并相应地重新渲染 DOM 的简单方法。您还可以了解更多有关 Virtual DOM 和 Shadow DOM 的信息，以更好地了解 UI 的存储位置。
这篇文章可能会回答你的问题krasimirtsonev.com/blog/article/…
感谢您的帮助，我需要越来越多地学习。它可能会解决我的问题！
欢迎，我也觉得有必要了解更多我正在使用的东西（外部代码）并且仍然有......所以我理解你:-)