Question

So a site that I built for some reason is very slow on the rendering of the actual DOM elements…

By this I mean that as you scroll the page it is VERY slow. Almost
like a game with a low framerate

I was playing around with the CSS and noticed that when I remove elements that have opacity or simply make them 1. The site speeds up dramatically.

So The question is how can I keep this visual styling without hurting the render speed of the page

Here is the link

http://imagedeconstructed.com/

Answer 1

1. You are running your checkVis function onscroll. Depending on the browser, your function might fire several times per mouse-wheel-scroll.

2. Within your checkVis function, you are using the jQuery constructor several times. This means that every single time the scroll event fires, you are traversing the DOM to find those elements.

To maximize performance, it is extremely important that you cache your selectors.

---

Twitter had this very same problem at some point, where the scrolling was so painfully slow, they had to temporarily fall back to an older version of the code.

You can read more about that incident in John Resig’s blog post (John is the creator of jQuery):

John Resig – Learning from Twitter.

---

P.S. You might also consider running your onscroll event handler through a timer (setTimeout/setInterval). John has it all covered there…