轉: Div與table的區別

1:速度和加載方式方面的區別

div 和 table 的差異不是速度,而是加載方式,速度只能是指網絡速度,如果速度足夠快,是沒有差異的:

div 的加載方式是即讀即加載,遇到 <div> 沒有遇到 </div> 的時候一樣加載 div 中的內容,讀多少加載多少;table 的加載方式是完成后加載,遇到 <table> 后,在讀到 </table> 之前,table 中的內容不加載,或者傳輸中斷了(document.onload()事件)的時候加載,這是因為TABLE牽涉到多行多列問題,所以只有當TABLE所有內容加載完畢,IE才知道該怎么顯示

2:在網頁應用中的差別

如果頁面首尾加 table ,那么必須等整個頁面讀完了才加載

如果頁面首尾加 div ,無任何影響

?

3:DIV與Table布局在大型網站的可用性比較

DIV與TABLE本身并不存在什么優缺點,所謂web標準只是推薦的是正確的使用標簽,好比說:DIV用于布局,而TABLE則本來就是轉二維數據的。讓TABLE做該做的事,并不是說頁面里不出現TABLE就是多么多么牛。

用DIV進行排版的優勢就是我不說,大家應該都比較清楚。DIV是標準,是大勢所趨,但并不意味著所有的頁面都適合用它來做。

中國的門戶和國外的有很大的區別,中國網民并不喜歡信息量少的頁面,YAHOO到了中國頁面上的內容就多了不少,而上次改為簡潔的頁面后訪問量下降的厲害以至于沒過幾天就又改了回來。正式由于中國的國情造就了搜狐、新浪這樣門戶。

為什么DIV不適合他們?下面我從幾個方面來逐一說明:

精簡代碼:

大家都說DIV的布局精簡代碼,但是用DIV替代TABLE所節約的代碼又被CSS(樣式)所占用,而這些樣式大多用于控制DIV的排版布局。那你會說了,CSS可以放在外部重用啊,要想得到這個問題的答案請往下看。

重用性與下載量:

統一使用一個.css的樣式表文件,可以實現修改一次,全站修改的效果,這樣使得維護的成本更低。但是請大家換一個角度想,如果所有頁面在加載時都要訪問一個文件,那這個文件每天的下載量,特別時在搜狐、新浪的網站平臺上將達到幾億次,這就需要后面有很多臺前端web服務器在做支撐,那后臺的成本無形中也提高了很多。如果后臺支撐沒有做好,那么頁面就會出現花屏,之前所作的工作也是白費。很多人會問,這樣的幾率太小了。我們所作的工作就是為了避 免這一兩次意外的發生,如果意外發生了,對于門戶后果將是不堪設想的。

HTTP通訊:

統一的樣式表文件采用外部調用的形式,這樣每次加載單個頁面都會多一次對服務器的http請求服務器都會增加一次響應,這樣對前端web服務器 會是很大的消耗。而原來很長時間都是將css和js寫在頁面前端(大家可以看看sohu和sina的頁面,大多都是采用這樣的形式),而不是作為外部調用 的形式,也是為了盡量避免給服務器增加消耗。

頁面緩存:

每次用戶訪問的頁面,都會在瀏覽器緩存中保存一定時間,以保證用戶下次再訪問該頁面時能夠大大提高頁面顯示速度。而每次修改都會使頁面重新下載,對于每個外部導入的樣式文件也是如此,如果CSS文件修改,那么訪問網站的每一個頁面都會重新下載,而以往的將樣式寫在頁面中的方式,只是修改的頁面需要重新下載。

兼容性:

對于CSS(樣式表)并不是所有瀏覽器的所有版本都支持的很好,比如IE5以前的瀏覽器對于CSS的支持就不是很好。而現在使用IE5以前版本 瀏覽器的用戶不在少數,這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試,以保證兼容性,無形中也增加很多工作量(至少我接觸的開發人員制作 div頁面比table頁面的標準時間要長一些)。

橫切與延展性:

橫切——傳統的布局方式為了使頁面下載的更快,把頁面自上而下分成若干個塊,但是往往采用DIV進行布局的頁面都會出現這樣的情況,由于每塊中間欄或者其他欄內容條數不固定導致兩邊欄目沒有同時自適應,而出現留白。

以上我們只是討論某一技術在某一領域的可用性,而非技術本身。

說了這么多并不是說DIV這種布局方式不好,而是說我們應該正確的看待Table在以內容為基礎的大型門戶中的作用,而不是人云亦云。之所以 DIV的布局方式沒有在大型網站應用,不是說門戶沒有用DIV是技術落后,是里面的人沒有前瞻性,而是多種原因決定的。網易之所以全部采用DIV的方式是因為內容并不是他們主攻方向。而對于其他門戶來說,這樣的決策是要靠時間來驗證的。只是現在這個時機還不成熟而已。

?

4:DIV+CSS

而現在我認為DIV +CSS并不是字面上的含義那么簡單,而有兩重內在含義:

1、結構與表現分離,用DIV完成結構,用CSS控制表現,這樣帶來的好處非常多,DIV精簡了頁面,提高了靈活性。而精通CSS的設計師能避免DIV的重復嵌套,從而大大提高頁面加載速度,以及站點的可以維護性。

2、選用DIV 來配合CSS的原因,CSS 的核心是?“盒子模型”,而沒有哪個標簽能比DIV更好的詮釋“盒子模型”的精髓,TABLE的結構過于復雜,并不能很好的做到這一點,雖然TABLE+CSS也是一種選擇,但別忘了DIV還有另外一個優勢,浮動層疊,而且用TABLE進行布局的網站是不能通過W3C驗證的。

其實DIV的好處還遠遠不止這些,例如彈性布局,用戶自定義布局,DIV都展現出不可思議的靈活性,而富有語義的結構對搜索引擎的友好度也比TABLE要來的高,更不用說跨平臺的應用。DIV+CSS為我們提供了一個優雅而規范的技術框架,讓我們能用最少的重復勞動,完成更多更美觀的頁面,從而提升整個團隊的效率,甚至改變長期以來網頁設計師與網頁程序員無法同步工作的問題。

在我親身經驗中,使用DIV+CSS的團隊,與使用TABLE+CSS的團隊相比,工期縮短30%-50%。

轉載于:https://www.cnblogs.com/shadowduke/p/4943958.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/272763.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/272763.shtml
英文地址,請注明出處:http://en.pswp.cn/news/272763.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

你的工作是為了你自己!

1、無論為誰打工&#xff0c;要為自己學東西&#xff0c;客觀為公司創造價值。我自己當年&#xff0c;無論我在方正給國內企業工作&#xff0c;還是我在雅虎給外國人工作&#xff0c;我都跟別人最大的不一樣&#xff0c;我從來不覺得我在給他們打工&#xff0c;我真的可能是很有…

java 無法注入service_SpringBoot集成shiro,MyRealm中無法@Autowired注入Service的問題

網上說了很多諸如是Spring加載順序&#xff0c;shiroFilter在Spring自動裝配bean之前的問題&#xff0c;其實也有可能忽略如下低級錯誤。在ShiroConfiguration中要使用Bean在ApplicationContext注入MyRealm&#xff0c;不能直接new對象。道理和Controller中調用Service一樣&…

python之函數用法startswith()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函數用法startswith() #http://www.runoob.com/python/att-string-startswith.html#startswith() #說明&#xff1a;返回布爾值,用于檢查字符串是否是以指定子字符串開頭&#xff0c;如果是則返回 True&#xff0c;否則…

別去取悅,心里沒你的人

鞋子不合適不必硬塞&#xff0c;否則磨了自己的腳&#xff1b;不必討好心里沒你的人&#xff0c;不在乎你的人&#xff0c;你付出再多&#xff0c;也打動不了他。討好心里沒你的人&#xff0c;會讓自己很累很累&#xff1b;總是遷就他&#xff0c;總是圍著他轉&#xff0c;最后…

tensorflow java 加速_Tensorflow使用GPU加速

測試faster-rcnn時&#xff0c;cpu計算速度較慢&#xff0c;調整代碼改為gpu加速運算將 with tf.Session() as sess: 替換為1 gpu_options tf.GPUOptions(per_process_gpu_memory_fraction0.9)2 with tf.Session(configtf.ConfigProto(gpu_optionsgpu_options,log_device_plac…

Install OpenStack Kilo Dashboard wiht Nginx + uWSGI On RHEL7.1

一、安裝Horizon、Nginx、uWSGI yum install -y uwsgi-plugin-python openstack-dashboard uwsgi nginx 二、配置uWSGI cat >/etc/uwsgi.ini <<EOF [uwsgi] plugins python master true processes 10 threads 2 chmod-socket 666socket 127.0.0.1:9000 pidfile …

C#枚舉類型的筆記

一、枚舉類型的概念枚舉類型聲明為一組相關的符號常數定義了一個類型名稱。枚舉用于"多項選擇"場合&#xff0c;就是程序運行時從編譯時已經設定的固定數目的“選擇”中做出決定。枚舉類型&#xff08;也稱為枚舉&#xff09;為定義一組可以賦給變量的命名整數常量提…

java動態打印_JFreeChart學習(三)——動態打印java內存使用情況

JFreeChart動態打印java內存使用情況import java.awt.BasicStroke;import java.awt.BorderLayout;import java.awt.Color;import java.awt.Font;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt…

WPF中StringToImage和BoolToImage簡單用法

在WPF的綁定控件操作中&#xff0c;經常會通過bool值或者某些特定的string值做出相應動作。但UI層控件的很多屬性對應的都不是Bool值或者對應的只是固定的String值。 這個時候有兩方法解決該問題。 1.是在后臺cs中做出比較判斷&#xff0c;然后根據相應結果傳達UI層做出相應動作…

【必備】jQuery性能優化的38個建議

一、注意定義jQuery變量的時候添加var關鍵字這個不僅僅是jQuery&#xff0c;所有javascript開發過程中&#xff0c;都需要注意&#xff0c;請一定不要定義成如下&#xff1a;$loading $(#loading); //這個是全局定義&#xff0c;不知道哪里位置倒霉引用了相同的變量名&#xf…

java中策略設計模式_Java中的設計模式(五):策略模式

策略設計模式是行為設計模式之一。當我們為特定任務使用多個算法時&#xff0c;使用策略模式&#xff0c;客戶端決定在運行時使用的實際實現。策略模式的最佳示例之一是Collections.sort()采用Comparator參數的方法。基于Comparator接口的不同實現&#xff0c;對象將以不同的方…

isset函數

isset (PHP 4, PHP 5) isset — 檢測變量是否設置 檢測變量是否設置&#xff0c;并且不是 NULL。 如果 var 存在并且值不是 NULL 則返回 TRUE&#xff0c;否則返回 FALSE。 $a "test"; $b "anothertest";var_dump(isset($a)); // TRUE var_dump(i…

SQLl中的left join、right join、inner join詳解

left join(左聯接) 返回包括左表中的所有記錄和右表中聯結字段相等的記錄right join(右聯接) 返回包括右表中的所有記錄和左表中聯結字段相等的記錄inner join(等值連接) 只返回兩個表中聯結字段相等的行舉例如下&#xff1a;--------------------------------------------表A記…

afudos備份bios不動_bios刷壞后的兩種解決方法

通常主板新的BIOS可以修正舊版中BIOS的一些BUG&#xff0c;糾正對某些硬件和軟件的兼容問題&#xff0c;添加新硬件的支持等等&#xff0c;所以有時我們需要刷新BIOS。但刷新主板BIOS實際上是存在一定風險的&#xff0c;雖然現在各主板廠商都推出了在Windows下刷新BIOS的軟件&a…

光學基礎知識:白光、顏色混合、RGB、色彩空間

1665年&#xff0c;牛頓(Isaac Newton)進行了太陽光實驗&#xff0c;讓太陽光通過窗板的小圓孔照射在玻璃三角棱鏡上&#xff0c;光束在棱鏡中折射后&#xff0c;擴散為一個連續的彩虹顏色帶&#xff0c;牛頓稱之為光譜&#xff0c;表示連續的可見光譜。而可見光譜只是所有電磁…

SQL Server各個版本功能比較

微軟的SQlserver主要經歷了從sql server 2000 到最新的sql server 2017&#xff0c;現把各個版本的更新特性介紹如下&#xff1a;SQL SERVER 2000日志傳送索引視圖SQL SERVER 2005數據庫鏡像&#xff08;只有 SQL Server 2005 Enterprise Edition SP1 和更高版本支持異步數據庫…

java hibernate的使用_《Hibernate快速開始 – 4 – 使用JAVA持久層 API (JPA)教程》

章節目標使用JPA EntityManagerFactory使用注解提供映射信息使用 JPA 接口本教程可在 entitymanger/ 路徑下下載4.1. persistence.xml之前的章節使用了hibernate原生的配置文件hibernate.cfg.xml。然而&#xff0c;JPA中定義了不同的的自助配置文件persistence.xml。這個啟動過…

HTTP消息中Header頭部信息整理

1、HTTP請求方式GET向Web服務器請求一個文件POST向Web服務器發送數據讓Web服務器進行處理PUT向Web服務器發送數據并存儲在Web服務器內部HEAD檢查一個對象是否存在DELETE從Web服務器上刪除一個文件CONNECT對通道提供支持TRACE跟蹤到服務器的路徑OPTIONS查詢Web服務器的性能說明&…

gdb命令中attach使用

[測試程序] 我們先看看我們的測試程序: /* in eg1.c */ int wib(int no1, int no2) { int result, diff; diff no1 - no2; result no1 / diff; return result; } int main() { pid_t pid; pid fork(); if (pid &…

java%4d_java積累

數組的使用package javaDemo;import java.util.*;/**** author Administrator* version 1.0***/public class test {public static void main(String[] args){String[] greeting new String[3];greeting[0] "Welcome to Core Java";greeting[1] "by Cay Hors…