html5 - html table標(biāo)簽到底重在哪里?該不該用?
問題描述
在剛接觸html的時候,從某地方看到說html的table標(biāo)簽非常重型,會降低性能,最好不用。(國內(nèi)某大型在線教育平臺官推的課程的老師, 絕對說過 我還記了筆記...)
于是這句話被當(dāng)時自己深深記在腦海。能用p的地方全用p
現(xiàn)在我特別想知道,html的table到底重在哪里了? 把table換成p,什么都用p,這難道不是嚴(yán)重違反了html語義化嗎?
感覺怎么做都是在給自己挖坑啊...
問題解答
回答1:來來;我來解開你這個心結(jié);
table;這個主要是遠古時代用來布局的標(biāo)簽了;對seo不是很友好;現(xiàn)代html已經(jīng)想對復(fù)雜多了;拿table布局遠沒有p靈活;比如說float、position;
但是呢;在展示比較規(guī)范的表格類型的數(shù)據(jù)的時候;table的對齊是相當(dāng)?shù)姆奖惆。籺able還是有存在的位置的;
結(jié)論來了;畫重點;首先;語義化可不是讓你把所有的table換成p就完了的;而是要使用 header 、nav 、footer 這些標(biāo)簽;
其次;在比較重seo的頁面;比如說文章之類的;不用table是正確的;
最后;table還是可以用的;一般是用在管理后臺或者個人中心這類不需要seo、數(shù)據(jù)又比較規(guī)范,結(jié)構(gòu)簡單的地方;不信;你打開你的淘寶京東的個人中心;看下訂單;是不是都是table?
回答2:從<<webkit技術(shù)內(nèi)幕>>這本書中能看到一個比較重要的信息
瀏覽器對于table實現(xiàn)布局是經(jīng)過了多次重繪重排最后生成的table
重排非常損耗瀏覽器性能
而瀏覽器的重排是在瀏覽器性能優(yōu)化中是要盡可能的去避免的,所以目前主流的布局都已經(jīng)放棄了table,采用其他的標(biāo)簽進行替代,不過在后臺管理頁面中table依然經(jīng)常使用,所以衡量是否該使用主要看場合
PS:如果樓主有比較差的安卓手機的話可以去試著打開一些帶有表格的郵件,樓主就可以親眼看到一個table表格是在手機上多次重排重繪的慢動作了
回答3:https://feclub.cn/post/conten... 這里是 關(guān)于 重排 重繪 和高頻DOME 操作對性能的 消耗 , 個人覺得 還不錯
回答4:我也想問問table到底重哪里了。
回答5:我理解其所說的“重”, 更多的是指不靈活
回答6:這里的“重”應(yīng)該是指標(biāo)簽臃腫吧?畢竟<p>一套標(biāo)簽對比<table><tr><td>三套,代碼量上去了不說看起來也比較懵逼;但這倆標(biāo)簽終歸有各自的適用場景,完全扔掉table去寫p不一定就是最好的,標(biāo)簽語義化才是王道~
回答7:標(biāo)簽語義化 該用的時候還是得用。
回答8:如上面大佬所講,table的重,主要是體現(xiàn)在了重繪方面,這一點被大多數(shù)前人所重視,是因為在04年之前用的還都是table布局,04年之后,p+css布局興起,fee也意識到了table的重,所以這個才經(jīng)常被吐槽;至于什么時候用,table在做純表格的時候比起用p+css模擬表格還是有一定優(yōu)勢的
相關(guān)文章:
1. angular.js - 輸入郵箱地址之后, 如何使其自動在末尾添加分號?2. 如何解決docker宿主機無法訪問容器中的服務(wù)?3. javascript - 如何使用nodejs 將.html 文件轉(zhuǎn)化成canvas4. javascript - Web微信聊天輸入框解決方案5. angular.js - $stateChangeSuccess事件在狀態(tài)跳轉(zhuǎn)的時候不執(zhí)行?6. javascript - 后臺管理系統(tǒng)左側(cè)折疊導(dǎo)航欄數(shù)據(jù)較多,怎么樣直接通過搜索去定位到具體某一個菜單項位置,并展開當(dāng)前菜單7. python - Scrapy存在內(nèi)存泄漏的問題。8. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器9. java如何生成token?10. CSS3 畫如下圖形
