TikTok 如何傳輸短視頻內(nèi)容？
來源：Youtube
主講人：Hussein Nasser
內(nèi)容整理：賈榮立
在本視頻中，Hussein Nasser 使用開發(fā)工具來探索 TikTok 網(wǎng)站是如何工作，以推送短視頻內(nèi)容，其中框架流程的設(shè)計對于網(wǎng)站開發(fā)者具有一定的啟發(fā)意義。
目錄
引言
TikTok 連接概覽
靜態(tài)內(nèi)容
第一個視頻
其他視頻
引言
根據(jù) Cloudflare Raider 的調(diào)查，tiktok.com 是 2021 年最受網(wǎng)民歡迎的網(wǎng)站，也是被訪問次數(shù)最多的網(wǎng)站。盡管大部分的用戶都是選擇移動端觀看 TikTok 的短視頻，但是探索 PC 端的 TikTok 網(wǎng)站是如何構(gòu)建的，以及后端是如何對應(yīng)的，是一件值得探索的事情。在這里，使用 dev tools 并以博主 Therock 的主頁作為例子，進行短視頻內(nèi)容傳輸?shù)挠^察。
TikTok 連接概覽
進入到博主 Therock 的主頁后，我們首先看到的是經(jīng)過渲染的 HTML 頁面，然后才是第一個短視頻的內(nèi)容。在這里，我們主要觀察建立的連接個數(shù)和時延等內(nèi)容。
根據(jù)這個圖顯示，可以看到圖上有顏色不同的線條，如藍色、綠色等，這些線條代表著不同的 TCP 或 UDP 連接。我們可以根據(jù)這張圖清楚地看出有多少正確的連接被打開了，這通常表示在短視頻內(nèi)容傳遞過程中使用了多少個域。
打開 Therock 的主頁后，可以看到請求了一個頁面，這個頁面包含了大部分的數(shù)據(jù)，包括粉絲數(shù)，點贊數(shù)以及博主的基本信息，以及 TikTok 頁面的基本布局。
然后觀察在傳輸過程中的各部分時間。首先，DNS Lookup 花費了 86.28ms，通常沒有這么慢，但是由于我們這里使用了 VPN，所以任何 ip 數(shù)據(jù)包都會有額外的延遲。然后就是 initial connection，這里的初始連接時間為 231.34ms，這個時間包括了 tcp 的三次握手以及握手過程中任何可能的重試，也包含 fast open，tls 連接等。然后是 waiting（TTFB time to first byte）時間是 1.66s，實際上這個 html 頁面是通過正確請求處理數(shù)據(jù)庫的內(nèi)容才構(gòu)建出來的。然后是 content download 時間是 141.08ms，這指的是第一個短視頻的下載時間。打開網(wǎng)站到渲染結(jié)束，開始播放第一個短視頻的總時間是 2.16s。
靜態(tài)內(nèi)容
TikTok 使用 http/2 協(xié)議，一旦我們訪問網(wǎng)站，大量的請求就發(fā)起了。這些請求是并行發(fā)起的，每一個請求都建立了 tcp 連接。每一個請求的內(nèi)容都會根據(jù)其獨特的 streaming ID 進行傳送。
第一個視頻
直到全部靜態(tài)內(nèi)容傳輸完成后，第一個視頻才開始下載。TikTok 發(fā)起一個視頻下載的請求，然后把內(nèi)容從后端展示到前端。第一個視頻實際上是下載的。可能是 html 頁面只下載第一個視頻。當有人訪問網(wǎng)站時，立即播放最新的視頻。
當我們想要觀看其他視頻時，TikTok 會請求訪問移動端的網(wǎng)站 m.tiktok.com，這顯然會導(dǎo)致，當我們使用 pc 端瀏覽 TikTok 的短視頻內(nèi)容時，會造成額外的浪費。網(wǎng)站設(shè)計者可能考慮到，大部分用戶是在移動端觀看短視頻，從而犧牲了 PC 端的一部分性能。
其他視頻
當我們滾動頁面，并把光標放在視頻封面上方時，視頻會立即播放，這是因為指向了視頻實際的 URL 鏈接。當我們觀察視頻的一些元數(shù)據(jù)，包括視頻的描述，視頻的內(nèi)容，音頻的內(nèi)容，以及有多少人看過或贊過的數(shù)據(jù)，這些視頻的元數(shù)據(jù)都是正常的。當然，這些視頻的元數(shù)據(jù)也包括作者的信息，比如基本情況和粉絲數(shù)量等等，這在我們看來是沒有必要的，因為對于同一個博主下的所有視頻，它的作者信息都應(yīng)該是一致的，因此無需對每個視頻對象都保存這些內(nèi)容，可以在這部分做出一定的優(yōu)化。
附上演講視頻：
最后歡迎大家加入 音視頻開發(fā)進階 知識星球 ，這里有知識干貨、編程答疑、開發(fā)教程，還有很多精彩分享。
更多內(nèi)容可以在星球菜單中找到，隨著時間推移，干貨也會越來越多！??！
給出 10元 優(yōu)惠券，漲價在即，目前還是白菜價，基本上提幾個問題就回本，投資自己就是最好的投資！?。?/p>
加我微信 ezglumes ，拉你進技術(shù)交流群
推薦閱讀：
開通專輯 | 細數(shù)那些年寫過的技術(shù)文章專輯
Android NDK 免費視頻在線學(xué)習(xí)！??！
覺得不錯，點個在看唄~
