0
Below is a simplified version of the HTML markup of a menu I use:
<ul>
<li><a href="#" title="Teste X">Teste X</a></li>
<li><a href="#" title="Teste Y">Teste Y</a></li>
<li><a href="#" title="Teste Z">Teste Z</a>
<ul>
<li><a href="#" title="Teste ZA">Teste ZA</a></li>
<li><a href="#" title="Teste ZB">Teste ZB</a></li>
<li><a href="#" title="Teste ZC">Teste ZC</a></li>
</ul>
</li>
</ul>
I’m thinking of removing the text of tags a and use the CSS content to render the text of tags a based on the attribute title.
In this second tag, it should be included in the CSS:
a:after{ content: attr(title); }
And HTML would look like this:
<ul>
<li><a href="#" title="Teste X"></a></li>
<li><a href="#" title="Teste Y"></a></li>
<li><a href="#" title="Teste Z"></a>
<ul>
<li><a href="#" title="Teste ZA"></a></li>
<li><a href="#" title="Teste ZB"></a></li>
<li><a href="#" title="Teste ZC"></a></li>
</ul>
</li>
</ul>
The second version has significantly smaller HTML, but I don’t know if it consumes more or less browser resources.
The application I am working on is very large, with a lot of Javascript, and I need to optimize as much as possible in order to improve performance and reduce processing and memory costs in the browser.
What I need to know is:
Disregarding download time, what are the pros and cons of each of the above two implementations in terms of processing, RAM or other performance variables?
Sincerely.... the resources are minute.... Understand that...
CSSandHTMLare only markup languages, the browser will just read them and "paint" on the screen. If you own anyjavaScriptembedded, there are other five hundred...– MarceloBoni
The application I am working on is very large and I need to optimize as much as possible in order to improve the performance and costs of processing and memory in the browser.
– Allan Andrade
A complex rendering with HTML and CSS can be absurdly more costly than a JS. I think this case makes no noticeable difference and is micro-optimization which by definition is unnecessary. But I am not an expert on this subject. Something tells me that the second will delay the presentation, but I may be outdated.
– Maniero
This might help: http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-optimizacao-de-sites
– MarceloBoni
@Marcelobonifazio, thank you for the intention, but I know a little about good practices and in the question I am disregarding the download time. I’m really interested in how to measure performance, processing and memory.
– Allan Andrade
"The application I am working on is very large, with a lot of Javascript, and I need to optimize as much as possible..." In the part of Javascript I believe it is easier to analyze the consumption of resources, because it is a Programming Language. I recommend to read Algorithmic Analysis. Questions like Asymptotic Order and Big O can be applied to Javascript, with the results you can study better implementations.
– wdarking
I’m not an expert either, but I would tend to agree with @bigown, it doesn’t seem very relevant.
– Jorge B.