browser repaints and performance

I have a single-page app that uses a lot of CSS3 shadows. The app consists of 8 panels that represent pages. Only 1 panel is visible at a time, while the other 7 are hidden (style display:none;). The user clicks on the menu to move from panel to panel.

Google's Speed Tracer that about 75% of resources is spent on repaints. My question is this: do browser repaints affect A) only visible elements of the page or B) every element, whether visible or not?

If it's B then there's not much I can do. If it's A then I could clear the html of the hidden panels and have inner DOM elements for only the visible panel with the goal of reducing repaint time.

Let me know.

Answers


The way to answer performance questions is to perform benchmarks. If you want to know how much performance overhead there is to display:none elements, do the following:

Test 1: Load the page with all the display:none elements, measure the repaint speed.

Test 2: Modify the page so that the display:none elements are removed completely, load this page, and measure the repaint speed.

The difference between the two tests is the repaint overhead of display:none elements. Hopefully it will be minimal.


Need Your Help

Can we use same column in SQL as Primary Key and Foreign Key?

sql ms-access

Can a single column used as a primary and a foreign key at a time and kindly check the code as well!

Apache rewrite rule with proxy flag fail to work for mediawiki service

apache mod-rewrite mediawiki

I have a local apache httpd hosting a mediawiki service that listen to port 3300. The service may access in my LAN via

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.