Question 378741 in Html Question posted in
Some basic documentation can be found here.

Html – Live-server, animations and dev-tools (animation starts before FP arrives)

I have preloader (this is an animation) on page that hide important content until it’s ready. Preloader must do animation 1.5s, but there is a problem, animation starts before the browser output an any pixel at screen. And if something will delay FP (First Paint – term from dev-tools), then I’ll see part of declared animation, for example 978ms, not 1.5s and it’s not what I want to expect.

Additional question touches the live-server, the extension for VSCode.
If I run my page that has very same preloader, I will see the following:
enter image description here
These short purple strings are Pre-paints and Layerise. I tryed to find any answer what is Pre-paints, but it was unsuccessful, nothing find.

If I run the same without live-server, I see the following:
enter image description here

You can notice, that live-server spoil expected animation 1.5s unlike when it’s not running, but when live-server is offline, animation starts before FP. And it also problem, I can’t count on time that I set for an any animation, because it depends on things that delay FP.

Here, shown more precisely when I run page without live-server
enter image description here

Time between when begins stripe animations and FP is ~6ms (almost immediately), but compare with live-server it is about 500ms.

In total:

  1. How to solve this, I mean how to control FP and eliminate delays between time of first animation on page and FP
  2. Why do Pre-paints and Layerise appear (in big amount), when I work with live-server? What causes them to appear (can we control them)?
Tags:

2

Answers


  1. 0

    When dealing with factors like First Paint (FP) delays and differences in behavior between local development environments like live-server and regular browser rendering thedre can be inherent lag in the tools themselves.To ensure that your animation starts after the First Paint, you should the start of the animation until the browser has painted the first frame of content.
    One common approach is to use the DOMContentLoaded event.
    You may also consider using CSS animations with animation-delay to ensure the animation starts after the desired time. Though you’ll need to account for the time it takes for the First Paint to occur.

    document.addEventListener("DOMContentLoaded", function() {
  // Delay the start of the animation
  setTimeout(function() {
    // Trigger the animation by adding a class
    document.getElementById("content").classList.add("fadeIn");
  }, 1000); // Adjust the delay time as needed
});
    Login or Signup to reply.
  2. 0

    Use JavaScript to trigger animations after the page has fully loaded (DOMContentLoaded event). Optimize code and assets to reduce load times.

    document.addEventListener("DOMContentLoaded", function() {
    // Get reference to your preloader element
    var preloader = document.getElementById("preloader");

    // Add a CSS class to start the animation
    preloader.classList.add("animate");
});

    Live Server may introduce processing overhead, causing more Pre-paints and Layerize events. Optimize code and assets to reduce these events. Follow best practices for optimization, such as minimizing HTTP requests, compressing assets, using CSS for styling, avoiding complex selectors. Disable unnecessary browser extensions to improve performance.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search