[英]When to start deleting video elements to prevent browser lag?
我正在嘗試創建一個網站，該網站將隨着頁面向下滾動而繼續向該頁面添加視頻播放器。 盡管我擔心頁面上的大量視頻播放器會導致網站滯后並導致網站速度下降。 我認為在對網站進行某些測試時，我的速度變慢了。 那么是否有可能檢測到網站是否由於網絡上的元素數量而變慢，因此我可以開始從頁面頂部刪除視頻元素？
index.html:
window.onbeforeunload = function () { this.scrollTo(0, 0); } var content = document.getElementById("content"), timeout = undefined; for (var x=0;x<50;x++) { var video = document.createElement("video"); video.style.backgroundColor = "orange"; video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg"; video.src = "https://dash.akamaized.net/akamai/bbb/bbb_3840x2160_60fps_18000k.mp4"; video.controls = true; content.appendChild(video); } window.addEventListener("scroll", function () { var $this = this; window.clearTimeout(timeout); timeout = setTimeout(function() { var content_margin_top = $this.innerHeight * 0.11; var last_player = content.children[content.querySelectorAll("video").length - 1]; if (last_player.offsetTop - content_margin_top <= $this.scrollY) { for (var x=0;x<10;x++) { var video = document.createElement("video"); video.style.backgroundColor = "orange"; video.poster = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg"; video.src = "https://dash.akamaized.net/akamai/bbb/bbb_3840x2160_60fps_18000k.mp4"; video.controls = true; content.appendChild(video); } } }, 250); });
body { margin: 0; } #nav { width: 100%; height: 10%; position: absolute; top: 0; background-color: rgb(108, 171, 247); } #content { height: 100%; width: 98%; position: absolute; top: 11%; left: 1%; } video { width: 100%; height: 75%; border: 1px solid black; }
<html> <head> <title></title> </head> <body> <div id="nav"></div> <div id="content"></div> </body> </html>
我會以一種略有不同的方式來考慮該問題：我應該怎么做才能使該頁面盡可能快地工作，下載盡可能少的數據並在需要時僅呈現必要的容器？
我的建議：
1）不要在滾動過程中追加和初始化視頻容器。 使用img標簽僅渲染縮略圖以供將來的視頻容器使用。 還應考慮對這些圖像進行延遲加載。 在預覽容器的中心添加“播放”按鈕。 用戶單擊按鈕后，請使用適當的src渲染video標簽並播放它。
2）不要使用滾動事件偵聽器來檢測容器的偏移量和延遲加載。 請改用Intersection API 。
為什么在canvas上繪制很多元素時頁面開始卡頓？
[英]Why does the page start to lag when drawing many elements on the canvas?
如何在刪除contenteditable div中的元素時防止插入錯位
[英]How to prevent caret misplacement when deleting elements in a contenteditable div
如何在垂直添加元素時防止背景圖像在移動瀏覽器上放大？
[英]How to prevent background-image from zooming on mobile browser when adding elements vertically?
滾動瀏覽器時，可拖動的jQuery UI元素使用錯誤的起始位置？
[英]Draggable jQuery UI elements using wrong start position when browser is scrolled?
如何在移動時將html元素放置在鼠標位置而沒有滯后？
[英]How to place html elements at the mouse position when it moves, without lag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.