Speeding up the rendering of the DOM tree

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/

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...

From what I see you're using javascript to load the images and you have attached the function that adds the images to the page to the onscroll event. So every time a user scrolls the page, that function - checkVis() - gets called and it doesn't seem much optimized...

A different approach would be to insert the images in the markup and use a script like lazyload (although it uses a similar approach it's much more optimized) to load them only when they're in the viewport.

EDIT: It seems that lazyload it's not a usable solution (as it says on their website). My mistake.