Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Anonymous table cells - do they affect reflow/repaint performance?

The good old micro clearfix hack is based on using a blank table element to prevent margin-collapse and clear floats. It mentions that this behavior creates anonymous table elements as each HTML table needs those to exist by design, so to my understanding the repaint cycle has 6 new blank elements for each clearfixed element to deal with (table + anon row + anon cell * 2). Does this have any drawbacks relevant to performance during the reflow/repaint cycle? How would you test this?

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
like image 630
mystrdat Avatar asked Nov 01 '22 17:11

mystrdat


1 Answers

It doesn't pollute the DOM, but the objects may be computed for rendering purposes. Implementations may be able to optimise them out.

But all kinds of boxes are computed during the rendering process. There's no specific need to be concerned about these.

like image 110
Alohci Avatar answered Nov 11 '22 14:11

Alohci