06.css優化與盒子模型

時間 2019-11-30

標籤 06.css css 優化盒子模型欄目 CSS 简体版

原文原文鏈接

寫了過久的css，歷來沒有總結過，全部有必要總結一下css的代碼優化方式。javascript

第一：在css外聯文件上傳到服務器前，壓縮css文件，可使用網上的一些css壓縮工具。這樣作的好處是，當咱們在css的時候，爲了代碼的可讀性跟可維護性，多出來了不少空格。這樣的話，瀏覽器解析css時候，會多一部分精力來去除這些空格，形成時間上的浪費，因此有必要用壓縮工具把這些空格去掉，最小化css文件。css

第二：使用簡寫方式。若是要同時改變字體大小，行高，粗體。各自的屬性有，font-size,font-weight,line-height.咱們可能爲每一個屬性去賦值，可是咱們能夠這樣作html

font:bold 12px/20px "微軟雅黑"；這樣寫是最好，由於大大的減小了代碼量。一樣有margin、padding、border、background等...java

第三：儘可能使用css外聯文件，少使用內聯和內嵌樣式。若是使用內聯樣式的話，一方面有相一樣式的標籤都要加等量代碼的樣式，另一方面權重比較大，外聯樣式要覆蓋的話須要在屬性後面加important。內嵌樣式的話，我以爲對性能沒有什麼大礙，主要提到外聯文件裏是由於便於維護，若是有須要修改的地方，能夠去分類好的相應樣式表裏面修改，沒必要要總是在html文件裏面修改，另外多是由於html文件是最早加載的，提出去html代碼量減小了。（值得注意的是：不要把帶有style的內嵌樣式加在body標籤中，由於這樣的話style會被解析兩次，第一次是在構建dom時，第二次是渲染樣式時）。css3

第四：少使用hack。從網上看到，爲了避免同的瀏覽器寫不一樣的樣式，會添加更多的代碼量，讓css文件變得更加冗餘。有更好的解決方法就是，使用條件註釋方式，如：git

<!–[if IE 8]> 
       <link rel=」stylesheet」 type=」text/css」 href=」ie8.css」> 
<![endif]–>
複製代碼

這樣寫的話，若是打開的瀏覽器不是ie或者不是ie8，由於不是識別註釋條件，因此會忽略這段代碼，從而不加載ie8.css。這樣就能夠正對ie8寫專屬代碼了。不過對於ie8來講，它須要犧牲的就是多了一個http請求。github

第五：使用雪碧圖。這個優化其實屬於圖片的優化，可是它也更css有關，把不少小圖標合併到一張圖片裏面，這樣減小了不少http請求，而後經過css來控制這張雪碧圖的哪一個座標定位在頁面上本身想要的位置。不過使用的是小圖標，也即頁面中裝飾的圖片。web

第六：css文件中代碼多註釋。爲了可讀性，可維護性，更之後能看的懂文件的組織邏輯，就要在代碼中多註釋。面試

第七：class跟id的合理使用。important > 內聯 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承，class的權重爲10，id的權重爲100，因此想要用class覆蓋id的話須要寫10個，並且還要放在id選擇器下面。當有共一樣式佈局的標籤時，儘量使用class，當要標誌一個標籤的獨一無二的時候，使用id。express

第八：避免使用 expression 和 behavior。在頁面渲染的過程當中， expression 和 behavior 須要大量的計算，會大量地耗費客戶端資源。因此不到無可奈何，請不要使用 expression 和 behavior 。能夠式javascript代替處理相應的問題。

優化CSS重排重繪與瀏覽器性能

關於CSS重排和重繪的概念，最近看到很多這方面的文章，以爲挺有用，在製做中考慮瀏覽器的性能，減小重排可以節省瀏覽器對其子元素及父類元素的從新渲染；避免過度的重繪也能節省瀏覽器性能；優化動畫，使用3D啓用GPU硬件加速；慎重選擇高消耗的樣式，如box-shadow、border-radius、transform、css filters等。

瀏覽器的渲染機制

瀏覽器渲染展現網頁的過程，大體分爲如下幾個步驟：

1.解析HTML(HTML Parser) 2.構建DOM樹(DOM Tree) 3.渲染樹構建(Render Tree) 4.繪製渲染樹(Painting)

慎重選擇高消耗的樣式

什麼 CSS 屬性是高消耗的？就是那些繪製前須要瀏覽器進行大量計算的屬性。

box-shadows
border-radius
transparency
transforms
CSS filters（性能殺手）

什麼是reflow

瀏覽器爲了從新渲染部分或整個頁面，從新計算頁面元素位置和幾何結構的進程叫作reflow.

通俗點說就是當開發人員定義好了樣式後(也包括瀏覽器的默認樣式),瀏覽器根據這些來計算並根據結果將元素放到它應該出現的位置上，這個過程叫作reflow.

因爲reflow是一種瀏覽器中的用戶攔截操做，因此咱們瞭解如何減小reflow次數，及DOM的層級，css效率對refolw次數的影響是十分有必要的。

reflow(迴流)是致使DOM腳本執行效率低的關鍵因素之一，頁面上任何一個節點觸發了reflow，會致使它的子節點及祖先節點從新渲染。

簡單解釋一下 Reflow：當元素改變的時候，將會影響文檔內容或結構，或元素位置，此過程稱爲 Reflow。

<body>
  <div class="hello">
    <h4>hello</h4>
    <p><strong>Name:</strong>BDing</p>
    <h5>male</h5>
    <ol>
      <li>coding</li>
      <li>loving</li>
    </ol>
  </div>
</body>
複製代碼

當p節點上發生reflow時，hello和body也會從新渲染，甚至h5和ol都會收到影響。

何時會致使reflow發生呢？

改變窗口大小
改變文字大小
添加/刪除樣式表
內容的改變，(用戶在輸入框中寫入內容也會)
激活僞類，如:hover
操做class屬性
腳本操做DOM
計算offsetWidth和offsetHeight
設置style屬性

常見的重排元素
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

減小reflow對性能的影響的建議

不要一條一條地修改 DOM 的樣式，預先定義好 class，而後修改 DOM 的 className 把 DOM 離線後修改，好比：先把 DOM 給 display:none (有一次 Reflow)，而後你修改100次，而後再把它顯示出來
不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量 3.儘量不要修改影響範圍比較大的 DOM
爲動畫的元素使用絕對定位 absolute / fixed
不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局
儘量限制reflow的影響範圍，儘量在低層級的DOM節點上，上述例子中，若是你要改變p的樣式，class就不要加在div上，經過父元素去影響子元素很差。
避免設置大量的style屬性，由於經過設置style屬性改變結點樣式的話，每一次設置都會觸發一次reflow，因此最好是使用class屬性
實現元素的動畫，它的position屬性，最好是設爲absoulte或fixed，這樣不會影響其餘元素的佈局
動畫實現的速度的選擇。好比實現一個動畫，以1個像素爲單位移動這樣最平滑，可是reflow就會過於頻繁，大量消耗CPU資源，若是以3個像素爲單位移動則會好不少。
不要使用table佈局，由於table中某個元素旦觸發了reflow，那麼整個table的元素都會觸發reflow。那麼在不得已使用table的場合，能夠設置table-layout:auto;或者是table-layout:fixed這樣可讓table一行一行的渲染，這種作法也是爲了限制reflow的影響範圍
若是CSS裏面有計算表達式，每次都會從新計算一遍，出發一次reflow

什麼是repaint

repaint是在一個元素的外觀被改變，但沒有改變佈局的狀況下發生的，如改變了visibility、outline、background等。當repaint發生時，瀏覽器會驗證DOM樹上全部其餘節點的visibility屬性。

通俗來講，就是當各類盒子的位置、大小以及其餘屬性，例如顏色、字體都肯定下來後，瀏覽器便把這些元素都按照各自的特性繪製一遍，因而頁面的內容出現了，這個過程叫作repaint

避免過度重繪(Repaints)

當元素改變的時候，將不會影響元素在頁面當中的位置（好比 background-color, border-color, visibility），瀏覽器僅僅會應用新的樣式重繪此元素，此過程稱爲 Repaint。

常見的重繪元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

優化動畫

css3 動畫是優化的重中之重。除了作到上面兩點，減小 Reflow 和 Repaints 以外，還須要注意如下方面。

啓用 GPU 硬件加速

GPU（Graphics Processing Unit）是圖像處理器。GPU 硬件加速是指應用 GPU 的圖形性能對瀏覽器中的一些圖形操做交給 GPU 來完成，由於 GPU 是專門爲處理圖形而設計，因此它在速度和能耗上更有效率。 GPU 加速能夠不只應用於3D，並且也能夠應用於2D。這裏， GPU 加速一般包括如下幾個部分：Canvas2D，佈局合成（Layout Compositing）, CSS3轉換（transitions），CSS3 3D變換（transforms），WebGL和視頻(video)。

/*
 * 根據上面的結論
 * 將 2d transform 換成 3d
 * 就能夠強制開啓 GPU 加速
 * 提升動畫性能
 */
div {
  transform: translate(10px, 10px);
}
div {
  transform: translate3d(10px, 10px, 0);
}
複製代碼

須要注意的是，開啓硬件加速相應的也會有額外的開銷，參見這篇文章 CSS 硬件加速的好與壞

CSS盒模型詳解

CSS的盒模型是CSS的基礎，同時也是難點，這個問題常常在面試中會被問到，屬於經典問題了。不少博客裏講得也很模糊不清，因而，我在這裏從新整理一下。

能夠認爲每一個html標籤都是一個方塊，而後這個方塊又包着幾個小方塊，如同盒子一層層的包裹着，這就是所謂的盒模型。

盒模型分爲IE盒模型和W3C標準盒模型。 IE盒模型和W3C標準盒模型的區別是什麼？

W3C 標準盒模型：

屬性width,height只包含內容content，不包含border和padding。

IE 盒模型：

屬性width,height包含border和padding，指的是content+padding+border。

在ie8+瀏覽器中使用哪一個盒模型能夠由box-sizing(CSS新增的屬性)控制，默認值爲content-box，即標準盒模型；若是將box-sizing設爲border-box則用的是IE盒模型。若是在ie6,7,8中DOCTYPE缺失會觸發IE模式。在當前W3C標準中盒模型是能夠經過box-sizing自由的進行切換的。

content-box（標準盒模型）
width = 內容的寬度
height = 內容的高度
複製代碼

border-box（IE盒模型）
width = border + padding + 內容的寬度
height = border + padding + 內容的高度
複製代碼

谷歌瀏覽器，按下F12，而後把右邊欄的滾動條拉到最下面你就會看到一個東西：

資料來源：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。