從天貓某活動視訊3次請求說起
本文作者：張鑫旭、踹歪
原創宣告：本文為閱文前端團隊 YFE 成員出品，請尊重原創，轉載請聯絡公眾號 ( id: yuewen_YFE ) 獲取授權，並註明作者、出處和連結。
本文源自閱文前端團隊踹歪面授分享，我只是代筆變成文字版，歡迎關注這位“精通 javascript 單詞拼寫”小夥伴。
一、視訊載入的 3 次請求
在座諸位，請開啟瀏覽器，新開一個標籤頁，開啟開發者工具，切換到 network 面板 → Media 選項，然後 — 複製下面地址（天貓某活動備份地址）到位址列，回車：ali-tmhly.h5.neone.com.cn/ 。此時，你會看到一個名為 video2 的 mp4，前前後後傳送了 3 次請求：
這是糟糕的！應該只有 1 次請求才是最佳的！
更糟糕的是，這種視訊 3 次請求的現象非常普遍！
更更糟糕的是，很多前端開發都沒有意識到有這個問題。
二、3 次請求的原因
一 個MP4 視訊檔案，不單單是視訊內容，還有很多其他資訊，尺寸，時長，字幕，版權資訊等。
這些資訊被放在一個一個的 box 中，換句話說就是，一個 MP4 檔案由很多個 box 組成的，用以儲存媒體資訊。
其中，有個與請求數有關的 box 名叫 MOOV BOX。
MOOV BOX
Moov box 存放的是如何播放視訊的資訊，如尺寸和每秒的幀數，則儲存在叫做 moov 的特殊 box 中。你可以認為 moov box 是某種意義上的 MP4 檔案目錄。
當你播放視訊時，程式會查詢 MP4 檔案，定位 moov box 的位置，然後藉此去查詢視訊和音訊的起始位置來開始播放。
Box 可能以任意順序排列，所以程式一開始並不知道 moov box 哪裡。如果是本地播放，沒有任何問題，因為你已經擁有整個視訊檔案；但如果線上觀看，也就是流傳輸 HTML5 視訊時，就會有問題了。
讀取 MOOV 過程
瀏覽器直接發起 HTTP MP4 請求，讀取響應 body 的開頭，如果發現 moov 在開頭，就接著往下讀 mdat。如果發現開頭沒有，先讀到 mdat，立馬 RESET 這個連線，節省流量，通過 Range 頭讀取檔案末尾資料，因為前面一個 HTTP 請求已經獲取到了 Content-Length ，知道了 MP4 檔案的整個大小，通過 Range 頭讀取部分檔案尾部資料也是可以讀取到的。
也就說，之所以上面天貓某活動 MP4 視訊會發起 3 次請求，就是因為視訊的 moov box 放在了檔案末尾。我畫了個圖示意了下：
三、如何避免視訊的3次請求
很簡單，使用工具把 Moov box 提到視訊的前面就好了。
具體可以：
1. Handbrake
HandBrake 乃 Web MP4 視訊優化工具不二之選，其中就有 moov box 前置優化 web 請求的功能。
HandBrake MAC，Windows 均支援，免費開源，更多能力，如視訊壓縮等，可以參見這篇文章：“HandBrake使用圖文教程”。
2. ffmpeg 指令
如下：
ffmpeg -i 你的視訊.mp4 -movflags faststart -acodec copy -vcodec copy 輸出的視訊.mp4
複製程式碼FFmpeg 官網地址：ffmpeg.org/。
FFmpeg 是一套可以用來記錄、轉換數字音訊、視訊，並能將其轉化為流的開源計算機程式。採用 LGPL 或 GPL 許可證。它提供了錄製、轉換以及流化音視訊的完整解決方案。
總之，很強，大家有興趣可以自行探索一番。
四、優化之後
優化後，可以看到 Moov 資訊前置了：
此時，視訊請求就只有一次了，口說無憑，直接看證據，狠戳這個demo，起點某視訊活動。
可以看到，載入的時候，就只會有 1 個請求：
趕快看看自己專案中的視訊有沒有 3 次請求的問題吧！