What is a promise in Javascript?

Question

Alvaro Montoro

Asked: 2020-07-03 13:17:40 +0800 CST 2020-07-03 13:17:40 +0800 CST 2020-07-03 13:17:40 +0800 CST

CSS animation hangs during JavaScript execution

772

I am developing a loading page that will be displayed while the page content itself is rendered. It is a simple text that blinks, while circles move from left to right.

The problem is that during times when JavaScript is rendering intensively, the animation hangs and freezes. A colleague told me that it could be a problem when changing the position and size of elements with CSS (because blinking does seem to work without problems).

How can I avoid this behavior? What could I do to keep the animation flowing rather than jumpy?

This is the code with a forced load to show the crash:

// código para crear bloqueo al generar alta intensidad de JS
setInterval(function() {
  for (let j = 0; j < 10000; j++) {
    let o = new Array(20000);
  }
}, 1500);

@keyframes csLoadingBlink {
  0%, 80% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

@keyframes csLoadingMoveButton {
  0% {
    top: 0;
    width: 2rem;
    height: 2rem;
    left: 0;
  }
  100% {
    top: 1rem;
    width: 0rem;
    height: 0rem;
    left: 100%;
  }
}


.cs-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-brand {
  white-space: nowrap;
  animation: csLoadingBlink 3s linear infinite;
}

.cs-brand span {
  white-space: nowrap;
  display: inline-block;
  color: #000369;
  vertical-align: middle;
}

.cs-name {
  border-right: 1px solid;
  padding-right: 1rem;
  margin-right: 1rem;
  font-size: 2.5rem;
  line-height: 3rem;
}

.cs-name sup {
  font-size: 0.75rem;
}

.cs-slogan {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.cs-animation {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
  position: relative;
}

.cs-animation span,
.cs-animation::before {
  display: block;
  content: "";
  position: absolute;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000369;
}


.cs-animation span {
  animation: csLoadingMoveButton 3s linear infinite;
  animation-fill-mode: backwards;
}

.cs-animation span:nth-of-type(1) {
  animation-delay: 0s;
}

.cs-animation span:nth-of-type(2) {
  animation-delay: 1s;
}

.cs-animation span:nth-of-type(3) {
  animation-delay: 2s;
}

<div class="cs-loading">
  <div class="cs-brand">
    <span class="cs-name">Compa&ntilde;&iacute;a</span>
    <span>Mejor Slogan del Mundo</span>
  </div>
  <div class="cs-animation">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

2 Answers

Voted

alo Malbarez · Answer 1 · 2020-07-03T14:16:36+08:00

Using a worker it seems that it does not get stuck

(inline example taken from https://stackoverflow.com/a/6454685/1423096 )

the if ( 5 > Math.floor(Math.random() * 100) ) {is so that the console.log doesn't affect the render.

// código para crear bloqueo al generar alta intensidad de JS
/*
setInterval(function() {
  for (let j = 0; j < 10000; j++) {
    let o = new Array(20000);
  }
}, 1500);
//*/

var blob = new Blob([document.querySelector('#worker1').textContent], {
  type: "text/javascript"
})

// Note: window.webkitURL.createObjectURL() in Chrome 10+.
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e) {
  console.log("Received: " + e.data);
}
worker.postMessage("hello"); // Start the worker.

@keyframes csLoadingBlink {
  0%,
  80% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

@keyframes csLoadingMoveButton {
  0% {
    top: 0;
    width: 2rem;
    height: 2rem;
    left: 0;
  }
  100% {
    top: 1rem;
    width: 0rem;
    height: 0rem;
    left: 100%;
  }
}

.cs-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-brand {
  white-space: nowrap;
  animation: csLoadingBlink 3s linear infinite;
}

.cs-brand span {
  white-space: nowrap;
  display: inline-block;
  color: #000369;
  vertical-align: middle;
}

.cs-name {
  border-right: 1px solid;
  padding-right: 1rem;
  margin-right: 1rem;
  font-size: 2.5rem;
  line-height: 3rem;
}

.cs-name sup {
  font-size: 0.75rem;
}

.cs-slogan {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.cs-animation {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
  position: relative;
}

.cs-animation span,
.cs-animation::before {
  display: block;
  content: "";
  position: absolute;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000369;
}

.cs-animation span {
  animation: csLoadingMoveButton 3s linear infinite;
  animation-fill-mode: backwards;
}

.cs-animation span:nth-of-type(1) {
  animation-delay: 0s;
}

.cs-animation span:nth-of-type(2) {
  animation-delay: 1s;
}

.cs-animation span:nth-of-type(3) {
  animation-delay: 2s;
}

<div class="cs-loading">
  <div class="cs-brand">
    <span class="cs-name">Compa&ntilde;&iacute;a</span>
    <span>Mejor Slogan del Mundo</span>
  </div>
  <div class="cs-animation">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<script id="worker1" type="javascript/worker">
  self.onmessage = function(e) {
    self.postMessage('msg from worker');
  };
  setInterval(
    function() {
      if ( 5 > Math.floor(Math.random() * 100) ) {
        self.postMessage('setinterval still alive');
      }
      for (let j = 0; j <
        10000; j++) {
        let o = new Array(20000);
      }
    }, 1500);
</script>

Marcos · Answer 2 · 2020-08-08T07:21:55+08:00

How can I avoid this behavior? What could I do to keep the animation flowing rather than jumpy?

Introduction:

There are currently four things that the browser can encourage " low price " : translate, scale, rotateand opacity.

If you animate anything else you will most likely not reach the 60fps.

Problem:

As you point out in your question, the problem is because you are changing the position and size of the elements using:

leftand topto change the position.
widthand heightto change the size.

As we saw before, these rules are not within the rules optimized for animations.

Solution:

To change the position we can replace topy leftwith transform: translate(x, y)and to change the size we can replace heighty widthwithtransform: scale(x, y)

Then:

To animate the change of position from left to right ( coodenada x) we can use translate(x).
To animate proportional resizing we can use scale(n).
To keep the element centered while scaling we can usetransform-origin: center;

Example without modifying the markup:

// código para crear bloqueo al generar alta intensidad de JS
setInterval(function() {
  for (let j = 0; j < 10000; j++) {
    let o = new Array(20000);
  }
}, 1500);

@keyframes csLoadingBlink {
  0%,
  80% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

@keyframes csLoadingMoveButton {
  0% {
    transform: scale(1) translate(0);
  }
  100% {
    transform: scale(.5) translate(42rem);
  }
}

.cs-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-brand {
  white-space: nowrap;
  animation: csLoadingBlink 3s linear infinite;
}

.cs-brand span {
  white-space: nowrap;
  display: inline-block;
  color: #000369;
  vertical-align: middle;
}

.cs-name {
  border-right: 1px solid;
  padding-right: 1rem;
  margin-right: 1rem;
  font-size: 2.5rem;
  line-height: 3rem;
}

.cs-name sup {
  font-size: 0.75rem;
}

.cs-slogan {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.cs-animation {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
}

.cs-animation span,
.cs-animation::before {
  display: block;
  content: "";
  position: absolute;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000369;
}

.cs-animation span {
  transform-origin: center;
  animation: csLoadingMoveButton 3s linear infinite;
  animation-fill-mode: backwards;
}

.cs-animation span:nth-of-type(1) {
  animation-delay: 0s;
}

.cs-animation span:nth-of-type(2) {
  animation-delay: 1s;
}

.cs-animation span:nth-of-type(3) {
  animation-delay: 2s;
}

<div class="cs-loading">
  <div class="cs-brand">
    <span class="cs-name">Compa&ntilde;&iacute;a</span>
    <span>Mejor Slogan del Mundo</span>
  </div>
  <div class="cs-animation">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Example 2 modifying the markup:

// código para crear bloqueo al generar alta intensidad de JS
setInterval(function() {
  for (let j = 0; j < 10000; j++) {
    let o = new Array(20000);
  }
}, 1500);

@keyframes csLoadingBlink {
  0%,
  80% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

.cs-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-brand {
  white-space: nowrap;
  animation: csLoadingBlink 3s linear infinite;
}

.cs-brand span {
  white-space: nowrap;
  display: inline-block;
  color: #000369;
  vertical-align: middle;
}

.cs-name {
  border-right: 1px solid;
  padding-right: 1rem;
  margin-right: 1rem;
  font-size: 2.5rem;
  line-height: 3rem;
}

.cs-name sup {
  font-size: 0.75rem;
}

.cs-slogan {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.cs-animation {
  height: 2rem;
  margin-top: 1rem;
}

@keyframes csLoadingMoveButton {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(22rem);
  }
}

.cs-animation div {
  position: absolute;
  width: 2rem;
  height: 2rem;
  animation: csLoadingMoveButton 3s linear infinite;
}

@keyframes csLoadingScaleButton {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(.1);
  }
}

.cs-animation span,
.cs-animation::before {
  position: absolute;
  display: block;
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000369;
}

.cs-animation span {
  transform-origin: center;
  animation: csLoadingScaleButton 3s linear infinite;
  animation-fill-mode: backwards;
}

.cs-animation div:nth-of-type(1),
.cs-animation div:nth-of-type(1) span {
  animation-delay: 0s;
}

.cs-animation div:nth-of-type(2),
.cs-animation div:nth-of-type(2) span {
  animation-delay: 1s;
}

.cs-animation div:nth-of-type(3),
.cs-animation div:nth-of-type(3) span {
  animation-delay: 2s;
}

<div class="cs-loading">
  <div class="cs-brand">
    <span class="cs-name">Compa&ntilde;&iacute;a</span>
    <span>Mejor Slogan del Mundo</span>
  </div>
  <div class="cs-animation">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
  </div>
</div>

CSS animation hangs during JavaScript execution

Introduction:

Problem:

Solution:

Example without modifying the markup:

Example 2 modifying the markup:

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?