High CPU utilization - 80%+ about shine.js HOT 1 CLOSED

Shine uses CSS drop shadows, whereas the demo you referenced uses WebGL particles. Drop shadows are rendered entirely by the browser and there's not much more to be done to optimize them. Shine creates multiple drop shadows and merely changes their offset. Most browsers render drop shadows on the CPU, but if you're using Chrome (or better yet, Chrome Canary), you can force it to rasterize everything on the GPU. Copy/paste the following URL chrome://flags/#enable-gpu-rasterization and set the value for the Enable GPU Rasterization drop down to Force-enabled for all layers.

What this will do is offload the rendering to the GPU and thus free CPU resources. On my Mac Pro, that reduces the CPU load from 85% to 15%. As you can see, there won't be much to optimize on the JS side since the majority of computation is browser internal rendering.

from shine.js.