html5 - html table標(biāo)簽到底重在哪里?該不該用?
問題描述
在剛接觸html的時(shí)候,從某地方看到說html的table標(biāo)簽非常重型,會(huì)降低性能,最好不用。(國內(nèi)某大型在線教育平臺(tái)官推的課程的老師, 絕對(duì)說過 我還記了筆記...)
于是這句話被當(dāng)時(shí)自己深深記在腦海。能用p的地方全用p
現(xiàn)在我特別想知道,html的table到底重在哪里了? 把table換成p,什么都用p,這難道不是嚴(yán)重違反了html語義化嗎?
感覺怎么做都是在給自己挖坑啊...
問題解答
回答1:來來;我來解開你這個(gè)心結(jié);
table;這個(gè)主要是遠(yuǎn)古時(shí)代用來布局的標(biāo)簽了;對(duì)seo不是很友好;現(xiàn)代html已經(jīng)想對(duì)復(fù)雜多了;拿table布局遠(yuǎn)沒有p靈活;比如說float、position;
但是呢;在展示比較規(guī)范的表格類型的數(shù)據(jù)的時(shí)候;table的對(duì)齊是相當(dāng)?shù)姆奖惆。籺able還是有存在的位置的;
結(jié)論來了;畫重點(diǎn);首先;語義化可不是讓你把所有的table換成p就完了的;而是要使用 header 、nav 、footer 這些標(biāo)簽;
其次;在比較重seo的頁面;比如說文章之類的;不用table是正確的;
最后;table還是可以用的;一般是用在管理后臺(tái)或者個(gè)人中心這類不需要seo、數(shù)據(jù)又比較規(guī)范,結(jié)構(gòu)簡單的地方;不信;你打開你的淘寶京東的個(gè)人中心;看下訂單;是不是都是table?
回答2:從<<webkit技術(shù)內(nèi)幕>>這本書中能看到一個(gè)比較重要的信息
瀏覽器對(duì)于table實(shí)現(xiàn)布局是經(jīng)過了多次重繪重排最后生成的table
重排非常損耗瀏覽器性能
而瀏覽器的重排是在瀏覽器性能優(yōu)化中是要盡可能的去避免的,所以目前主流的布局都已經(jīng)放棄了table,采用其他的標(biāo)簽進(jìn)行替代,不過在后臺(tái)管理頁面中table依然經(jīng)常使用,所以衡量是否該使用主要看場合
PS:如果樓主有比較差的安卓手機(jī)的話可以去試著打開一些帶有表格的郵件,樓主就可以親眼看到一個(gè)table表格是在手機(jī)上多次重排重繪的慢動(dòng)作了
回答3:https://feclub.cn/post/conten... 這里是 關(guān)于 重排 重繪 和高頻DOME 操作對(duì)性能的 消耗 , 個(gè)人覺得 還不錯(cuò)
回答4:我也想問問table到底重哪里了。
回答5:我理解其所說的“重”, 更多的是指不靈活
回答6:這里的“重”應(yīng)該是指標(biāo)簽臃腫吧?畢竟<p>一套標(biāo)簽對(duì)比<table><tr><td>三套,代碼量上去了不說看起來也比較懵逼;但這倆標(biāo)簽終歸有各自的適用場景,完全扔掉table去寫p不一定就是最好的,標(biāo)簽語義化才是王道~
回答7:標(biāo)簽語義化 該用的時(shí)候還是得用。
回答8:如上面大佬所講,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)勢的
相關(guān)文章:
1. html5和Flash對(duì)抗是什么情況?2. html5 - datatables 加載不出來數(shù)據(jù)。3. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣?這個(gè)是怎么回事????4. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)!5. node.js - mongodb查找子對(duì)象的名稱為某個(gè)值的對(duì)象的方法6. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤?7. 測試自動(dòng)化html元素選擇器元素ID或DataAttribute [關(guān)閉]8. javascript - QQ第三方登錄的問題9. javascript - 在 model里定義的 引用表模型時(shí),model為undefined。10. spring-mvc - spring-session-redis HttpSessionListener失效

網(wǎng)公網(wǎng)安備