何时开始删除视频元素以防止浏览器滞后？

Question

我正在尝试创建一个网站，该网站将随着页面向下滚动而继续向该页面添加视频播放器。 尽管我担心页面上的大量视频播放器会导致网站滞后并导致网站速度下降。 我认为在对网站进行某些测试时，我的速度变慢了。 那么是否有可能检测到网站是否由于网络上的元素数量而变慢，因此我可以开始从页面顶部删除视频元素？

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>

Answer 1

我会以一种略有不同的方式来考虑该问题：我应该怎么做才能使该页面尽可能快地工作，下载尽可能少的数据并在需要时仅呈现必要的容器？

我的建议：

1）不要在滚动过程中追加和初始化视频容器。 使用img标签仅渲染缩略图以供将来的视频容器使用。 还应考虑对这些图像进行延迟加载。 在预览容器的中心添加“播放”按钮。 用户单击按钮后，请使用适当的src渲染video标签并播放它。

2）不要使用滚动事件侦听器来检测容器的偏移量和延迟加载。 请改用Intersection API 。

何时开始删除视频元素以防止浏览器滞后？

问题描述

1 个解决方案

解决方案1
6 2019-03-07 23:40:07

何时开始删除视频元素以防止浏览器滞后？

问题描述

1 个解决方案

解决方案1 6 2019-03-07 23:40:07

解决方案1
6 2019-03-07 23:40:07