Lots of things here: You have to know your target audience for a website to know if you're doing too much on the sight. Targeting the wealthy? They probably have disposable income for good computers and can handle the task. Targetting as broad spectrum as possible? Make your site flex depending on the viewer. If you can't sustain a high frame rate, then fall back to a static image.
Next performance: You can get better performance from webgl, but you have to climb the mountain that is webgl.
Other performance: setInterval is bad practice for redraw loops. Use requestAnimationFrame to properly make changes on the main UI loop. If you need to reduce the frame rate, then skip some frames.
Canvas performance: Canvas is state based, things like fillStyle need not be reapplied if your state didn't change before, so take those out of your loop. You can micro-optimize your loop by not using an evaluated property in your conditional:
for (let i = 0, endi = stars.length; i < endi; ++i)
There's probably more little things you can do...
Next design: If it's truly an element that you believe makes your site stand out, then put in the effort to make the design work for everyone.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
