TikTok 如何传输短视频内容？-技术圈

来源：Youtube
主讲人：Hussein Nasser
内容整理：贾荣立
在本视频中，Hussein Nasser 使用开发工具来探索 TikTok 网站是如何工作，以推送短视频内容，其中框架流程的设计对于网站开发者具有一定的启发意义。

引言
TikTok 连接概览
静态内容
第一个视频
其他视频

引言

根据 Cloudflare Raider 的调查，tiktok.com 是 2021 年最受网民欢迎的网站，也是被访问次数最多的网站。尽管大部分的用户都是选择移动端观看 TikTok 的短视频，但是探索 PC 端的 TikTok 网站是如何构建的，以及后端是如何对应的，是一件值得探索的事情。在这里，使用 dev tools 并以博主 Therock 的主页作为例子，进行短视频内容传输的观察。

TikTok 连接概览

进入到博主 Therock 的主页后，我们首先看到的是经过渲染的 HTML 页面，然后才是第一个短视频的内容。在这里，我们主要观察建立的连接个数和时延等内容。

根据这个图显示，可以看到图上有颜色不同的线条，如蓝色、绿色等，这些线条代表着不同的 TCP 或 UDP 连接。我们可以根据这张图清楚地看出有多少正确的连接被打开了，这通常表示在短视频内容传递过程中使用了多少个域。

打开 Therock 的主页后，可以看到请求了一个页面，这个页面包含了大部分的数据，包括粉丝数，点赞数以及博主的基本信息，以及 TikTok 页面的基本布局。

然后观察在传输过程中的各部分时间。首先，DNS Lookup 花费了 86.28ms，通常没有这么慢，但是由于我们这里使用了 VPN，所以任何 ip 数据包都会有额外的延迟。然后就是 initial connection，这里的初始连接时间为 231.34ms，这个时间包括了 tcp 的三次握手以及握手过程中任何可能的重试，也包含 fast open，tls 连接等。然后是 waiting（TTFB time to first byte）时间是 1.66s，实际上这个 html 页面是通过正确请求处理数据库的内容才构建出来的。然后是 content download 时间是 141.08ms，这指的是第一个短视频的下载时间。打开网站到渲染结束，开始播放第一个短视频的总时间是 2.16s。

静态内容

TikTok 使用 http/2 协议，一旦我们访问网站，大量的请求就发起了。这些请求是并行发起的，每一个请求都建立了 tcp 连接。每一个请求的内容都会根据其独特的 streaming ID 进行传送。

第一个视频

直到全部静态内容传输完成后，第一个视频才开始下载。TikTok 发起一个视频下载的请求，然后把内容从后端展示到前端。第一个视频实际上是下载的。可能是 html 页面只下载第一个视频。当有人访问网站时，立即播放最新的视频。

当我们想要观看其他视频时，TikTok 会请求访问移动端的网站 m.tiktok.com，这显然会导致，当我们使用 pc 端浏览 TikTok 的短视频内容时，会造成额外的浪费。网站设计者可能考虑到，大部分用户是在移动端观看短视频，从而牺牲了 PC 端的一部分性能。

其他视频

当我们滚动页面，并把光标放在视频封面上方时，视频会立即播放，这是因为指向了视频实际的 URL 链接。当我们观察视频的一些元数据，包括视频的描述，视频的内容，音频的内容，以及有多少人看过或赞过的数据，这些视频的元数据都是正常的。当然，这些视频的元数据也包括作者的信息，比如基本情况和粉丝数量等等，这在我们看来是没有必要的，因为对于同一个博主下的所有视频，它的作者信息都应该是一致的，因此无需对每个视频对象都保存这些内容，可以在这部分做出一定的优化。

附上演讲视频：

最后欢迎大家加入音视频开发进阶知识星球，这里有知识干货、编程答疑、开发教程，还有很多精彩分享。

更多内容可以在星球菜单中找到，随着时间推移，干货也会越来越多！！！