I have a slow down problem with my single page website: basically it uses a LOT of memory (around 120MB) and, when scrolling, it can easily reach 40-90% of CPU usage! I am wondering what the problem might be so I will try to explain what resources I am using.
- 50 20kb sized images (stretched to around 200x200px)
- medium jQuery usage (some effects, a lot of AJAX)
- jQuery isotope plugin
- using hash change events to have sort of PiP (page in page) effects - like open a profile or a comment view -
- around 20 jQuery event listeners
- saving to localStorage every 10 seconds
Could this even be enough to slow it down that much, especially when scrolling? I am pretty sure there are much heavier pages like facebook, g docs, etc.
I have absolutely no problem with safari (I am on mac) but chrome gets really laggy. I cannot seem to find a profiler that can help me isolate the problem.
I have also removed all the effets regarding box-shadow or transparencies.
Any help? Thanks in advance.