When to start deleting video elements to prevent browser lag?
Question
I'm trying to make a website which will keep on adding video players to the page as the page is being scrolled down. Though I have some concerns that large amount of video players on a page can cause lag on the website and cause the website to slow down. I think I have experienced slow down during some tests of my website. So is it possible to detect whether the website is being slowed down due of the amount of elements on the web and so I can start deleting the video elements from the top of the page?
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 answers
solution1
6 2019-03-07 23:40:07
I would think about the issue in a slightly different way: What should I do to make that page work as fast as possible, downloading as little data as possible and render only necessary containers when needed?
My recommendations:
1) Don't append and init video containers on during scroll. Render only thumbnails for future video containers using img tags. Making lazy loading for these images should be considered as well. Add "play" button to the center of preview container. Once user clicks on the button - render video tag with a proper src and play it.
2) Don't use a scroll event listener to detect containers offsets and lazy loading. Use Intersection API instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.