对 YouTube 加载页面的新方式感到好奇

Posted 2023-02-24

【中文标题】对 YouTube 加载页面的新方式感到好奇

【英文标题】：Curious about the new way YouTube is loading pages

【发布时间】：2013-03-27 08:04:04

【问题描述】：

我在观看视频时注意到，当我点击徽标或相关视频时，屏幕上会出现一条红色进度条（徽标上方）。同时，有一个轻微的覆盖将内容“变灰”，然后在新页面中淡出。仅供参考，在进度条和转换发生之前，URL 会更改为新的 URL。

该栏的 div ID 是进度。看起来像是某种很酷的 jQuery ajax 加载，但会改变页面。我不知道。

【问题讨论】：

它使用浏览器历史 API 使其 看起来 像页面重新加载，但它实际上是在发送 AJAX 请求。

看看instantclick.io

@Mr.Alien 我已经看到了，看起来还不错。还有其他一些在本文发布时不存在。

他们使用：github.com/youtube/spfjs 这里：这里：youtube.github.io/spfjs

【参考方案1】：

YouTube 正在使用 html5 History API 向历史堆栈添加和删除页面 URL。这会导致地址栏中的 URL 发生变化，并且后退/前进按钮正常工作，同时仍然通过 JS (ajax) 实际加载页面。

此时实现具有向后兼容性的 API 的最简单方法是使用 History.js。向后兼容是指回退到不支持 HTML5 History API 的旧浏览器的哈希标记方法。

Check out the History.js demo!

我认为 Twitter 可能是使用散列 URL 的网站最著名的例子。例如twitter.com/#!/username 多年来一直很常见。这种方法的问题是哈希标签是客户端的，因此您需要 JS 来读取它们并提供正确的内容。任何非 JS 用户点击散列 URL 只会登陆 Twitter 的主页。

Beatport 是最早使用 HTML5 History 技术的主要网站之一。 SoundCloud 最近也实现了它。这两个网站都非常需要 HTML5 History，以确保在访问者浏览页面时播放音频。

【讨论】：

什么是用户手动将url输入地址栏，我认为他们将无法拦截url更改并正常加载页面，对吗？

正确 - 能够拦截手动 URL 更改或其他网站的历史状态，这将导致重大安全问题。您的网站应始终假定用户禁用了 JS 并手动访问 URL。加载 JS 后，您可以劫持任何页面内点击（或历史状态更改）并通过 JS/ajax 加载适当的内容。确保 ajax 页面的内容与直接非 JS 访问者的页面内容完全相同。

@IderAghbal XMLHttpRequest2 支持进度事件（有关示例，请参阅此博客文章：dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5）。所以 YouTube 所做的只是类似于 ...addEventListener("progress", function(e) bar.style.width = (e.loaded / e.total)+"%" 以及 CSS 过渡：#bar transition:all 200ms。

他们使用：github.com/youtube/spfjs 这里：youtube.github.io/spfjs

【参考方案2】：

Youtube 已经开源了他们用于动态导航的库，名为 spfjs。

结构化页面片段（简称 SPF）是一种轻量级 JS 框架，用于从 YouTube 快速导航和页面更新。

使用渐进增强和 HTML5，SPF 与您的网站集成，通过仅更新在导航期间更改的页面部分，而不是整个页面，从而实现更快、更流畅的用户体验。 SPF 提供了用于发送文档片段的响应格式、用于脚本和样式管理的强大系统、内存缓存、动态处理等等。

【参考方案3】：

看看这个demo，也许可以帮助你，看看cmets，有人说很好，有人说太复杂而无法实现

html:

<div>
  <dt></dt>
  <dd></dd>
</div>

css：

#progress 
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: -6px;
    width: 1%;
    height: 2px;
    background: #0088CC;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;



#progress dd, #progress dt 
    position: absolute;
    top: 0;
    height: 2px;
    -moz-box-shadow: #0088CC 1px 0 6px 1px;
    -ms-box-shadow: #0088CC 1px 0 6px 1px;
    -webkit-box-shadow: #0088CC 1px 0 6px 1px;
    box-shadow: #0088CC 1px 0 6px 1px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;


#progress dt 
    opacity: .6;
    width: 180px;
    right: -80px;
    clip: rect(-6px,90px,14px,-6px);


#progress dd 
    opacity: .6;
    width: 20px;
    right: 0;
    clip: rect(-6px,22px,14px,10px);
  

js：

$(document).ajaxStart(function() 
//only add progress bar if added yet.
  if ($("#progress").length === 0) 
    $("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
    $("#progress").width((50 + Math.random() * 30) + "%");
  
);

$(document).ajaxComplete(function() 
//End loading animation
    $("#progress").width("101%").delay(200).fadeOut(400, function() 
      $(this).remove();
    );
);