Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to start deleting video elements to prevent browser lag?

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>
like image 415
aman Avatar asked Jan 17 '19 04:01

aman


1 Answers

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.

like image 160
Vlad Marchuk Avatar answered Oct 11 '22 12:10

Vlad Marchuk