北京
“視頻是你能加到網頁上最重的資源之一?！边@句話一點不虛。一個普通的短視頻，體積可能抵得上幾十張高清圖片。如果頁面里一下塞進五六個產品演示視頻，用戶的帶寬和耐心會在打開瞬間被榨干。好消息是，瀏覽器廠商終于開始給 標簽加上“懶加載”了——也就是說，視頻可以等你快看到它的時候再開始下載。
不過先別急著高興。這個功能至今還沒被收進 Web 基線平臺，所以不同瀏覽器的支持參差不齊。目前在 Chrome、Edge 和 Opera 這些 Chromium 內核的瀏覽器里能用，Firefox 和 Safari 還沒有原生跟上。換句話說，你想用這個屬性提速，還得留個心眼，做好兼容準備。
今天我們就像拆一個快遞箱那樣，把“視頻懶加載”拆成四層來看：它到底是怎么一回事，為什么值得你馬上加到項目里，一行代碼怎么用，以及針對那些不支持的情況有什么兜底辦法。別擔心，一條條來。
第一層：懶加載，不是偷懶，是精準加載
所謂懶加載，就是延遲資源的加載，直到真正需要時才去拉取。對于視頻來說，瀏覽器不會在頁面一開始就沖去下載所有視頻文件，而是會等視頻快要進入可視區域（viewport）的時候再動手。這就好比超市結賬，你不再是每拿一樣東西就跑一趟收銀臺，而是把所有東西裝進購物車，到最后再統一結算。只不過這里“最后”的時機，是用戶滾屏將要看到視頻的那一刻。
這樣做直接砍掉了三個消耗大頭：初始網絡請求數量、帶寬占用和頁面完全渲染完的時間。如果一個頁面掛著四個視頻，而用戶從打開頁面到離開只看了第一個，那么后面三個視頻的流量就全白費了。懶加載就是幫你把那些“永遠不會被看到”的視頻的下載請求直接擋在門外。
尤其對于那些內容密集、視頻充當點綴的頁面——比如電商商品詳情頁、新聞長文章里的嵌入式報道——延遲加載給性能帶來的提升會相當明顯。L
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
