html與css知識點總結（二）

1.dom結構及其優化：dom是document object model（文件物件模型）的縮寫，dom是中立與平台和語言的介面，它允許程式或指令碼動態地訪問更新文件的內容、樣式以及結構。dom包含核心dom、xml dom和html dom，html dom是關於如何獲取、新增、修改和刪除html元素的標準

在html dom中html文件中所有內容都被視為節點，dom被視為節點樹的html：（1）整個文件視為乙個文件節點（2）每個html元素視為元素節點（3）html元素中的文字視為文字節點（4）每個html屬性為屬性節點（5）注釋為注釋節點

html dom將html視為文件視為樹結構，這種結構稱為節點樹，樹中元素的關係可以總結為父、子和同胞：（1）在節點樹中，頂端節點稱為根節點（2）除了根節點，每個節點都有父節點（parent）（3）乙個節點可以擁有任意多個子節點（4）擁有相同父節點為同胞（兄弟或姐妹）節點

優化：（1）在對html元素集合進行操作時，盡可能的減少訪問dom的次數，如：

for(var t=0;t<100;t++){

document.getelementbyid("here").innerhtml+='a';

優化之後：

var t="";

for(var t=0;t<100;t++){

t+="a";

document.getelementbyid("here").innerhtml+='t';

（2）innerhtml比dom快：遍歷陣列比遍歷集合快，因此如果將集合元素拷貝到陣列中，那麼訪問它的屬性更快，但是也會有額外步驟的消耗，而且會有很多次的遍歷一次集合，因此應該評估在特定條件下，使用陣列拷貝是否有效：

集合操作快取到區域性變數：

var adiv=document.getelementsbytagname("div"),

div_len=adiv.length

for(var i=0,a=,div_len=adiv.length;i多使用innerhtml

因此，當遍歷乙個集合時，首要優化原則是把集合儲存在區域性變數中，並把length快取在迴圈外部，然後使用區域性變數訪問這些需要多次訪問的元素。

遍歷dom時：使用children代替childnodes更快，因為集合項更少，html原始碼中的空白實際上是文字節點，而且它並不包含在children集合中，在所有瀏覽器中，children都比childnodes要更快；

dom樹：表示頁面結構

渲染樹：表示dom節點如何顯示。

一旦dom和渲染樹構建完成，瀏覽器就開始顯示頁面元素。

當dom的變化影響了元素的幾何屬性，瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響。

重排：是引起dom樹重新計算的行為

重繪：乙個元素外觀的改變（如color）所觸發的瀏覽器行為

重排和重繪操作都是代價昂貴的操作，會導致web應用程式ui反應遲鈍。所以，應該盡可能的減少這類操作的發生。

重排何時發生：（1）新增和刪除可見的dom元素（2）元素位置的改變（3）元素尺寸改變（外邊距，內邊距，邊框厚度，寬度，高度）（4）內容的改變（文字改變或被另乙個不同尺寸的代替）（5）頁面渲染器初始化（6）瀏覽器視窗尺寸的改變

減少重排和重繪的方法：（1）分離讀寫操作（2）樣式集中改變，如：新增乙個類來集中改變樣式（3）脫離文件流：使用absolute或者fixed，使其脫離文件流，不影響其他元素（4）使用display：none，先把他移除文件後再恢復，不使用 visibility（可見元素，也佔據空間，display不可見元素也不佔據空間），也不要改變它的 z-index

2.布局：三欄布局：（1）浮動布局：浮動元素脫離文件流（左右中結構）

（2）絕對定位布局：使用absolute使兩邊脫離文件流，用margin屬性流出左右兩邊的寬度，中間自適應寬度

（3）聖杯布局：左中右三欄都進行浮動，把乙個的浮動到最上面，然後通過設定左邊的margin-left:-100%，右邊的margin-left：-100px;把左右兩欄放在兩側，之後給整體的mian加乙個左右的外邊距為左右兩欄的寬度，最後給左右兩欄加上相對定位，使其向兩側移動兩欄的寬度大小

我們我們我們我們我們我們我們我們我們

（4）雙飛翼布局：雙飛翼布局和聖杯布局類似，給三欄都加了浮動，只是在處理後面覆蓋的地方有所不同，雙飛翼布局是給中間一欄設定了margin-left和margin-right，捨棄了與兩欄重合的地方

我們我們我們我們我們我們我們我們我們我們我們

html與css知識點總結（二）

HTML知識點總結

html知識點總結

html知識點總結

html與css知識點總結（二）

HTML知識點總結

html知識點總結

html知識點總結

相關推薦