Alternative to Gradient Border (Resource Optimization)

[CooKachoo]

I recently added a decorative gradient border to my project, and I absolutely love the visual effect it creates. However, I’ve noticed that the current implementation is quite resource-intensive, leading to performance issues. You can check out my work here.

The issue seems especially prevalent on tablets, where it appears to break the experience entirely. I’m curious if there’s a more effective way to achieve this. Please let me know your thoughts.

Thank you!

[SamA74]

Do you mean the gradient on the header or the main?
Those on the main could probably be done with box shadows.

[PaulOB]

@SamA74

Those on the main could probably be done with box shadows.

Something like this perhaps.

#grid-container{
box-shadow:
 20px 5px 40px #CF77F3,
   0px 5px 40px #009BFF,
  -20px 5px 40px #2AC9DB;
}

Although I think the main problem is the 4000 odd divs you use to create the weeks. In Chrome devtools it takes almost 10 seconds for the element to show its code!!!

have you thought about using a simple gradient to draw those thousands of boxes using one div only?

e.g.

You’d have to work the math with JS and then draw the last row with a pseudo element at the correct width as it won’t be a full row.

I’m sure it’s feasible

Maybe like this:

https://codepen.io/paulobrien/pen/RweZYdz

[Archibald]

@PaulOB

have you thought about using a simple gradient to draw those thousands of boxes using one div only?

Have you thought about using an HTML table?

[CooKachoo]

@Archibald would that perform substantially better?

@PaulOB that’s certainly a solution, let me see if I can get it working with the existing script.

[Archibald]

@CooKachoo

@Archibald would that perform substantially better?

Before posting my suggestion of using an HTML table I found your web page became unresponsive for several seconds. However a factor may have been the other windows and browser tabs I had open at the time. As I remember, I had been switching between windows. I have not been able to replicate unresponsiveness but by changing the date during the animation I have been able to get this . … .

(screenshot has been resized)

If I enter in a date in 1948 it takes my PC about 105 seconds to complete the animation. Meanwhile I can hear the fan on my PC revving up to high speed . I see there is a timeout delay in your code of 5ms but it’s taking about 27ms per cell on my PC. I guess the CSS transition is the main thing loading my processor but the rounded corners of the cells and nearly transparent cell borders could be a factor. In my view the transitions, rounded corners and cell borders are virtually invisible.

I note this CSS for a cell:
border: 1px solid rgb(255, 255, 255, 0.1);
should be:
border: 1px solid rgba(255, 255, 255, 0.1);
but I think my browser is accepting the alpha value.

If I edit my HTML table CodePen from post #4 so cells are coloured dark grey one-by-one (without any timeout delay) it takes my PC 13ms to colour 75 rows.

I do not know whether using an HTML table is any better than using <div> elements.