鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ css的重繪成本?

css的重繪成本?

table的重繪重排成本高于div元素,所以現(xiàn)代布局已經(jīng)放棄了table布局,除非需要用到表格。
問(wèn)題:那么這樣的重繪方式成本是與直接使用table布局一樣嗎?

.father{
    display:table;
}
.father children{
    display: table-cell;
    vertical-align: middle;
}

附加問(wèn)題:table的重繪成本高在哪里呢?

回答
編輯回答
孤巷

重繪重排的成本高在于 重新計(jì)算 重新渲染,
之所以說(shuō)table性能不好就在于這里,
因?yàn)槊啃忻苛忻總€(gè)單元格都可能要重新計(jì)算,單元格內(nèi)嵌套復(fù)雜元素后計(jì)算成本更高,
這里說(shuō)的重新計(jì)算是因?yàn)榇蠖鄶?shù)單元格 或者說(shuō) tabel整體寬度長(zhǎng)度不是固定的
都是彈性的
就算是現(xiàn)在具有相同特性的flex
如果頁(yè)面、頁(yè)面元素是固定的 那么table也好flex也好,性能幾乎無(wú)差
如果有flex table 中頻繁隱藏、出現(xiàn)子元素 那么就重復(fù)觸發(fā)整體的重新計(jì)算 重新渲染
所以說(shuō) 性能差就差在于 "它" 影響了 "別人"

2017年4月26日 16:41