Best practice is to pre-write HTML in a display document: none or create using JS?

Question

I am developing a large scale HTML5 application and I am really wondering about this problem. I will have many dialog boxes and tabs that open when interacting with the user.

Interestingly, the best thing is to write all the dialog boxes and tabs in the HTML document with the display: none of them, or create these HTML sections on the fly using JS or jQuery every time the user makes the appropriate interaction.

Which is better in terms of performance, ease of development, readability, etc.?

Any help would be appreciated.

Answer 1

I will try to resolve this issue as well as I can.

1 - As I said in the comments, avoid the inline style. This is primarily due to the fact that the built-in styling veils DRY. Repeat the same thing over and over again, because it is very bad for maintenance and development, because instead of changing the code, you should change it to ~ 100 places.

2 - Avoiding the inline style is also useful for accessibility, some screen readers and crawlers do the indexing and reading work based on css selectors and thus, using the inline style, make them either ignore or misunderstand things.

3 - When working as developers, it’s easy to make an inline style “just for fun,” but what you are actually doing is a mixture of problems. HTML is content and CSS is design. Mixing the two usually leads to headaches and makes my work a developer who comes after you into pain in the effin ass, because I have no idea what the style is and how.

Now, on performance.

When you use inline styles, what you say in the browser is basically "hey, for every page view of the page, these styles apply to all of these elements." Now it has become really obvious why this is bad. You have no way to cache and store your css and basically forces the browser to replay your styles every time. Using an external CSS file will really help you speed up your site, as the browser caches it.

This was for the css part.

The javascript you were asking about.

As I said, hide css and show using javascript. Now, why do you want to do this and not pull everything? Well, you can do both. If you only experience a web browser, you can do it; it does not matter. I myself prefer to have the material in the DOM, because it refers to the content, and if you are a large application that has dozens of dozens of ajax calls, it will only complicate the service. I believe that if you need to use ajax, make sure that it is considered and logical, and not just for strokes (I think this is applicable if only you have jQuery and simple javascript at your disposal).

If you work with backbone.js, for example, it is based on views and introduces some form of "MVC" into its interface, allowing you to have views with subzones that can pull content from the server.

Hope this helps in making a decision! :)

Answer 2

I would say that it depends on the number of tabs of your application and how large they are.

• The large content inside the tabs means that it takes a long time to load the application and it consumes a lot of bar. If so, I suggest downloading them as needed.
• Small content inside tabs will load quickly, so download all at once to improve performance when you click on tabs.

Remember to run some tests on older computers with a slow internet connection to see how your application behaves. Not everyone has the latest and fastest equipment.