DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作學習:reflow的問題
網頁制作學習:reflow的問題
編輯:CSS詳解     

對理論沒興趣的,可以只看紅色標注的結論

mozilla的工程師dbaron發表過一篇演講,提到reflow的問題。概念不難理解

mozilla系列浏覽器構建網頁的過程:

  1. 1、讀取Html文檔,構建網頁文檔樹——就是從body開始到結束,把每個table或者div記錄下來
  2. 2、reflow——通過CSS或者其他因素計算文檔樹中每個對象的大小、布局等
  3. 3、把計算結果顯示在屏幕上

簡單言之浏覽器的運算開銷大多在reflow這一步,就是獲取對象的布局、排版等樣式,如果樣式的定義有誤則浏覽器會重新運算,之後再展現在浏覽器上。 
另外通過JS來覆寫對象的樣式是比較典型的一種銷毀原樣式並重建的過程,這種銷毀和重建,都會增加浏覽器的開銷。其中CSS方面,常用的JS切換display:none和display:block是個最好的例子

而Html文檔中,比較典型的是圖片的寬高未定義,浏覽器會自行計算,所以很多網頁優化的文章都列入了這條,即可能的話,就把圖片的寬度高度寫進Html文檔裡。

從渲染過程上來講,mozilla有過CSS的書寫建議:

1.顯示樣式
display/position/float/clear
2.自身樣式
width/height/margin/padding/border/background
3.內容樣式
line-height/text-align/font系列(font-size/font-weight)/color/text-decoration/vitical-align

猜測這應該和mozilla系列浏覽器本身渲染網頁的優先級順序切合。

我的書寫順序:

select{clear:both;display:block;float:left;margin:100px;padding:100px;width:100px;height:100px;line-height:100px;text-align:center;color:#000;font-size:12px;font-weight:400;background:#FFF;border:1px solid #F00;)

大致符合建議規則,同時因為書寫樣式時修改頻率最高的就是背景和邊框,所以放在最外面,取了規則和工作效率的平衡點。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved