問(wèn)題描述

在剛接觸html的時(shí)候，從某地方看到說(shuō)html的table標(biāo)簽非常重型，會(huì)降低性能，最好不用。(國(guó)內(nèi)某大型在線教育平臺(tái)官推的課程的老師， 絕對(duì)說(shuō)過(guò) 我還記了筆記...)

于是這句話被當(dāng)時(shí)自己深深記在腦海。能用p的地方全用p

現(xiàn)在我特別想知道，html的table到底重在哪里了？ 把table換成p，什么都用p，這難道不是嚴(yán)重違反了html語(yǔ)義化嗎？

感覺(jué)怎么做都是在給自己挖坑啊...

問(wèn)題解答

來(lái)來(lái)；我來(lái)解開(kāi)你這個(gè)心結(jié)；

table；這個(gè)主要是遠(yuǎn)古時(shí)代用來(lái)布局的標(biāo)簽了；對(duì)seo不是很友好；現(xiàn)代html已經(jīng)想對(duì)復(fù)雜多了；拿table布局遠(yuǎn)沒(méi)有p靈活；比如說(shuō)float、position;

但是呢；在展示比較規(guī)范的表格類(lèi)型的數(shù)據(jù)的時(shí)候；table的對(duì)齊是相當(dāng)?shù)姆奖惆。籺able還是有存在的位置的；

結(jié)論來(lái)了；畫(huà)重點(diǎn)；首先；語(yǔ)義化可不是讓你把所有的table換成p就完了的；而是要使用 header 、nav 、footer 這些標(biāo)簽；

其次；在比較重seo的頁(yè)面；比如說(shuō)文章之類(lèi)的；不用table是正確的；

最后；table還是可以用的；一般是用在管理后臺(tái)或者個(gè)人中心這類(lèi)不需要seo、數(shù)據(jù)又比較規(guī)范，結(jié)構(gòu)簡(jiǎn)單的地方；不信；你打開(kāi)你的淘寶京東的個(gè)人中心；看下訂單；是不是都是table？

從<<webkit技術(shù)內(nèi)幕>>這本書(shū)中能看到一個(gè)比較重要的信息

瀏覽器對(duì)于table實(shí)現(xiàn)布局是經(jīng)過(guò)了多次重繪重排最后生成的table

重排非常損耗瀏覽器性能

而瀏覽器的重排是在瀏覽器性能優(yōu)化中是要盡可能的去避免的,所以目前主流的布局都已經(jīng)放棄了table,采用其他的標(biāo)簽進(jìn)行替代,不過(guò)在后臺(tái)管理頁(yè)面中table依然經(jīng)常使用,所以衡量是否該使用主要看場(chǎng)合

PS:如果樓主有比較差的安卓手機(jī)的話可以去試著打開(kāi)一些帶有表格的郵件,樓主就可以親眼看到一個(gè)table表格是在手機(jī)上多次重排重繪的慢動(dòng)作了

https://feclub.cn/post/conten... 這里是 關(guān)于 重排 重繪 和高頻DOME 操作對(duì)性能的 消耗 ， 個(gè)人覺(jué)得 還不錯(cuò)

我也想問(wèn)問(wèn)table到底重哪里了。

我理解其所說(shuō)的“重”， 更多的是指不靈活

這里的“重”應(yīng)該是指標(biāo)簽臃腫吧？畢竟<p>一套標(biāo)簽對(duì)比<table><tr><td>三套，代碼量上去了不說(shuō)看起來(lái)也比較懵逼；但這倆標(biāo)簽終歸有各自的適用場(chǎng)景，完全扔掉table去寫(xiě)p不一定就是最好的，標(biāo)簽語(yǔ)義化才是王道~

標(biāo)簽語(yǔ)義化 該用的時(shí)候還是得用。

如上面大佬所講，table的重，主要是體現(xiàn)在了重繪方面，這一點(diǎn)被大多數(shù)前人所重視，是因?yàn)樵?4年之前用的還都是table布局，04年之后，p+css布局興起，fee也意識(shí)到了table的重，所以這個(gè)才經(jīng)常被吐槽；至于什么時(shí)候用，table在做純表格的時(shí)候比起用p+css模擬表格還是有一定優(yōu)勢(shì)的