<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Unique Page</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
will-change: contents;
}
* {
box-sizing: border-box;
}
.center {
position: absolute;
/* margin: auto; */
width: 300px;
height: 300px;
/* top: 0px;
left: 0px;
bottom: 0px;
right: 0px; */
outline: orangered 2px solid;
pointer-events: none;
}
.block {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
pointer-events: none;
}
.innerBlock {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
pointer-events: none;
}
@keyframes drawC {
0% {
/* left: 0px;
top: 0px; */
transform: translateX(0px) translateY(0px);
}
25% {
/* left: calc(100% - 100px);
top: 0px; */
transform: translateX(100px) translateY(0px);
}
50% {
/* left: calc(100% - 100px);
top: calc(100% - 100px); */
transform: translateX(100px) translateY(calc(100px));
}
75% {
/* left: 0px;
top: calc(100% - 100px); */
transform: translateX(0px) translateY(100px);
}
100% {
/* left: 0px;
top: 0px; */
transform: translateX(0px) translateY(0px);
}
}
@keyframes drawB {
0% {
/* left: 0px;
top: 0px; */
transform: translateX(0px) translateY(0px);
}
25% {
/* left: calc(100% - 200px);
top: 0px; */
transform: translateX(100px) translateY(0px);
}
50% {
/* left: calc(100% - 200px);
top: calc(100% - 200px); */
transform: translateX(100px) translateY(calc(100px));
}
75% {
/* left: 0px;
top: calc(100% - 200px); */
transform: translateX(0px) translateY(100px);
}
100% {
/* left: 0px;
top: 0px; */
transform: translateX(0px) translateY(0px);
}
}
@keyframes draw {
0% {
/* left: 0px;
top: 0px; */
transform: translateX(0px) translateY(0px);
}
25% {
/* left: calc(100% - 300px);
top: 0px; */
transform: translateX(calc(100vw - 300px)) translateY(0px);
}
50% {
/* left: calc(100% - 300px);
top: calc(100% - 300px); */
transform: translateX(calc(100vw - 300px)) translateY(calc(100vh - 300px));
}
75% {
/* left: 0px;
top: calc(100% - 300px); */
transform: translateX(0px) translateY(calc(100vh - 300px));
}
100% {
/* left: 0px;
top: 0px; */
transform: translateX(0px) translateY(0px);
}
}
</style>
</head>
<body>
</body>
</html>
<script>
const ele = document.body
const draw = (time) => {
const template = document.createElement("template");
template.innerHTML = `<div class="center" style="animation: draw ${time}s linear infinite">
<div class="block " style="animation: drawB ${time/5}s linear infinite">
<div class="innerBlock" style="animation: drawC ${time/10}s linear infinite">contained</div>
</div>
</div>`
return template.content.firstChild;
}
let time = 10;
const fragment = document.createDocumentFragment();
while (++time < 500) {
fragment.appendChild(draw(time));
}
ele.appendChild(fragment);
</script>Hello everyone! I am facing some challenges while trying to optimize a page on my website. Here are the questions that I have:
- Why does Chrome's paint flashing cover all elements at once instead of individually as shown in the image below at the beginning: https://i.sstatic.net/teLpT.png
Eventually, it changes to look like this: a hole in the middle
https://i.sstatic.net/WwOTL.png 2. Mouse events on any element cause a slight decrease in frame rate. How can I optimize this?
Should 'will-change' and 'contain' properties be used in such a circumstance? If yes, how should they be implemented? I do not see any benefit when adding them to div.center. If not, when should these properties be utilized?
Do you have any suggestions for further optimization? I noticed that style recalculations still significantly impact performance.