javascript - Youtube 有趣的页面加载方法

Question

首先对不起我的英语不好。我会尽量让这个问题可以理解。这仅适用于教育机构:)

当您在 youtube 中观看视频并更改为相关视频中的另一个视频时。页面的很多部分没有更改。因此，如果您更改本地文件(服务器发送给您时下载到您的电脑的页面)，您可以看到修改仍然存在。所以如果您删除 de youtube Logo 并访问另一个视频(通过单击相关视频)您会看到视频、标题、说明和相关视频发生变化，但没有标题。您可以在开发者控制台中看到(例如在 Opera 中)，您可以查看它. 当我们点击新的相关视频时，它不会加载新页面。让我们解释一下图像



1:您选择标题的一个图标

2:您从中删除代码

3:点击另一个视频，标题还在修改中

我的观察:这可能是一个 ajax 重新加载方法，但是(据我所知)您不能更改浏览器栏的 url(出于安全原因)。那么 youtube 是如何实现这一点的呢？

PD:也许有一种新技术，这非常普遍。但我想知道如何做到这一点:)

Answer 1

这对于单页应用程序 (SPA) 来说非常典型。使用 HTML5 History API，页面脚本拦截 URL 的更改(只要它们在同一个域中)，并使用 View Router 使用新的详细信息重新呈现页面，包括请求新数据。

因此，当您从一个视频开始并导航到另一个视频时，浏览器实际上并没有真正“导航”——正如您所说，它从 URL 获取新的视频 ID，从某些后端服务加载视频的元数据并呈现适当的页面。

YouTube 似乎是使用某些版本的 AngularJS 构建的(这很有意义，因为 Google 编写了 Angular 框架)所以如果您想了解更多信息，可以阅读如何构建 Angular 应用程序，但大多数现代 Web 应用程序都是基于类似的基础。这通常是一个好主意，因为与仅更新需要更改的位相比，重新加载整个页面既昂贵又缓慢。