摘要：網站性能類似于二八定律，其中的優化將帶來網站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。

當能夠扎實的理解并編寫HTML和CSS這門專業知識。隨著網站代碼量和流量的增長，另一種新技能也開始發揮作用，
這對于開發效率和用戶體驗都至關重要。我們在了解網站性能和組織的基礎知識上還要繼續努力。

代碼庫的組織和體系結構不僅極大的影響開發速度，還極大的影響頁面呈現的速度。這兩者對用戶和開發人員來說都是個大問題。
我們需要花時間為代碼庫設計正確的結構，確定所有不同組件如何協同工作，加快開發效率并創造更好的用戶體驗。

此外，一些小技巧也可以改善網站的性能。網站性能類似于二八定律，其中20%的優化將帶來網站80%的性能提升。

改善網站的性能和組織首先圍繞如何構思良好的策略和結構的項目代碼庫結構。具體來說，就是構建良好的目錄體系結構和設計模式，
并找出項目中重用的公共代碼的方法。

什么樣的組織架構才是最有效的呢？ 一般來說，可以遵循以下方法。 這種做法包含集中化的樣式分離，還包括根據公共基本樣式、用戶交互組件、業務邏輯模塊。

# Base              // 基本樣式目錄
  - normalize.css   // 常規的
  - layout.css      // 布局的
  - typography.css  // 排版的

# Components        // 組件樣式目錄
  - alerts.css
  - buttons.css
  - forms.css
  - list.css
  - nav.css
  - tables.css

# Modules          // 模塊樣式目錄
  - aside.css
  - footer.css
  - header.css

上面展示的體系結構包括三個目錄，每個目錄都具有獨立的樣式組。 我們的設計目標就是將網站是為一個系統而不是單個頁面，
代碼架構應該反映出這種形態。請注意這里沒有涉及到任何頁面的特定樣式。

Base目錄包括了整個網站的布局和排版樣式中使用的公共樣式和變量。components目錄包括了特定用戶界面元素的樣式，
這些元素分為不同的組件文件，比如警告提示和按鈕。最后，modules目錄包含頁面不同部分的樣式，這些樣式由具體的業務需求來決定。

組件樣式純粹是接口驅動的，與網站的核心業務邏輯無關。然后，模塊包括特定于業務邏輯的樣式。在HTML中標記模塊時，通常在頁面
使用不同的用戶界面組件。例如，頁面的側邊欄可能具有在組件樣式中定義的列表和按鈕樣式，而側邊欄所需的其他樣式則從模塊樣式繼承。
樣式的分離反映了程序員經過深思熟慮的設計和樣式被共享和重用的能力。

以這種方式組織樣式的策略并不是全新的。并且之前已經在不同的CSS方法中提到過，包括面向對象的CSS,OOCSS以及用于CSS的
可擴展性和模塊化架構(SMACSS)。這些方法對架構以及如何使用樣式來說有著自己獨特的方法。

面向對象的CSS方法是由Nicole Sullivan在為大型網站編寫樣式的工作中開創的。面向對象的CSS（`Object
Oriented CSS`）確定了兩個基本原則，這些原則將有助于構建具有強大架構和合理代碼量的可彈性網站。
這兩個原則包括：

整體結構與皮膚的分離

從容器中分離內容

整體結構與皮膚的分離包括從網站的主題中抽象出元素的布局，模塊的結構應該是透明的，允許繼承和顯示其他樣式而不會發生沖突。
最常見的是這需要實體網格和布局結構，以及精心設計的模塊。

將內容與容器分離涉及移除父元素嵌套子元素的依賴項。無論其父容器是什么，標題應該看起來都是一樣的。為此，元素需要
繼承默認樣式，然后根據需要使用多個類進行擴展。

HTML

  
......

CSS

.alert {....}
.alert-error {...}
.msg {...}

面向對象的CSS提倡構建組件庫，保持靈活性，并使用網格。 這些都是很好的基本規則，它們可以幫你避免每次向網站添加新頁面
和新功能時都需要添加額外的樣式。

與面向對象CSS相同的是Jonathan Snook開發的可伸縮的模塊化CSS方法論體系結構。
CSS的可擴展和模塊化架構促進將樣式分成五個核心類別，包括:

基本

布局

模塊

狀態

主題

基本類別包括核心元素樣式，涵蓋了一般的默認值。
然后，布局類別確定不同元素的大小和網格樣式，確定它們的布局。
模塊樣式是針對頁面各個部分的更具體的樣式，例如導航或特性樣式。
然后，狀態樣式用于在模塊包含備用狀態(例如活動選項卡)的情況下增強或覆蓋其他樣式。
最后，可以添加主題類別，其中可以包括基于皮膚的樣式，或者不同模塊的外觀和感覺。

HTML

  
...

CSS

.alert {...}
.alert.is-error {...}
.alert p {...}
.alert.is-error p {}

在上面的例子中，alert類屬于模塊類，而is-error類屬于狀態類。然后根據需要來繼承這些類別中的每個樣式。

選擇使用那種方法（如果有的話）完全取決于你自己。對于一個給定的網站，你覺得最好的是什么。
一般來說，OOCSS和SMACSS的可靠組合工作會很好，你可以根據自己的喜好從每種方法中借鑒原則。

CSS中的大部分注意力都集中在屬性和值上面，而CSS中的選擇器經常被濫用卻沒有被意識到。
我們總以為將這些樣式應用到正確的元素上就很完美了，但是這是一個不好的想法。
CSS中元素的選擇也會影響性能，包括頁面呈現的速度，以及樣式再整個站點架構中的實用性和模塊化程度。

保持CSS選擇器盡可能短有幾個好處。 包括最小化特異性，允許更好的繼承性和可移植性，以及提高效率。
長的、多度限定的選擇器會降低性能，因為它們迫使瀏覽器從右到左呈現每個選擇器類型。
更具體的說，它們還增加了所有其他選擇器的負擔。

/* Bad */
header nav ul li a {...}

/* Good */
.primary-link {...}

/* Bad */
button strong span {...}
button strong span .callout {....}

/* Good */
button span {...}
button .callout {...}

在上面的代碼中，第一個選擇器是非常具體的，不過我們可以通過使用類更快地識別和呈現。此外，
在這種情況下使用類大大減少了識別元素父元素的需要，允許元素位置隨時間變化而不破壞任何樣式。

第二個示例包含比第一個示例更短的選擇器，但是可以通過為每個選擇器提供相同級別的特異性來改進它。
避免使用過于特定的選擇器，作為回報，如果元素的順序發生變化，
它們不太可能中斷。去掉一些多帶帶的選擇器單元，并賦予所有選擇器相同的強度，使它們能夠更好地協作。

使用短選擇器的總體目標是降低特異性，創建更干凈、更寬松的代碼。

類非常棒，它們呈現速度很快，允許重用樣式，并且已經廣泛用于構建網站。但是，在使用類時，要觀察一些常見的實踐，
以確保它們得到了適當的利用。

因為選擇器是從右到左呈現的，所以一定要注意鍵選擇器。鍵選擇器是最后最右邊的選擇器單元。鍵選擇器非常重要，因為它標識了瀏覽器要查找的第一個元素。
如果鍵選擇器不好，瀏覽器就會陷入徒勞。不要害怕僅僅為了性能的好處而使用一個類來變得更加獨特。

此外，不要在類選擇器前面加上元素前綴。這樣做會阻礙將這些樣式輕松應用于不同的元素，并增加選擇器的總體特異性。

/* Bad */
#container header nav {...}

/* Good */
.primary-nav {...}

/* Bad */
article.feat-post {...}

/* Good */
.feat-post {...}

同樣值得注意的是，盡可能遠離ID選擇器，因為它們過于具體，不允許任何重復。說到底，使用ID和使用!important沒什么不同。

最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現。最大程度上減少CSS文件大小的快速方法就是盡可能多地重用樣式。
應該組合任何重復的樣式或接口模式，以允許共享代碼。如果兩個模塊共享一個背景、圓角和一個方框陰影，則沒有理由兩次顯式地聲明相同的樣式。
相反，它們可以組合在一個類中，允許只編寫一次樣式，然后共享。

重用代碼也不需要以語義為代價。一種技術是將選擇器組合在一起用逗號分隔他們，允許在兩個選擇器之間繼承相同的樣式。
在前面提到的OOCSS和SMACSS方法中經常看到的另一個方法包括將樣式綁定到一個類，然后在同一個元素上使用多個類。

/* Bad */
.news {
  background:#eee;
  border-radius: 5px;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, .25);
}
.social {
  background:#eee;
  border-radius: 5px;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, .25);
}
.news,.social {
  background:#eee;
  border-radius:5px;
  box-shadow:inset 0 1px 2px rgba(0, 0, 0,.25);
}

/* Even Better */
.model {
  background: #eee;
  border-radius:5px;
  box-shawdow:inset 0 1px 2px rgba(0, 0, 0, .25);
}

只要代碼是共享和重用的，并且總體文件大小減少了，那么采用哪種方法并沒有太大的區別。

簡單的刪除重復和不必要的代碼是減少文件大小的最佳方法，但是還有其他方法。一種方法包括縮小和壓縮文件，如HTML、CSS、JavaScript文件。
此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。

一種比較流行的文件壓縮類型稱為gzip。gzip壓縮采用常見文件，包括HTML、CSS、JavaScript等，并標識要壓縮的類似字符串。識別的匹配字符串越多，
可以壓縮的文件就越小，這樣就可以將較小的文件從服務器發送到瀏覽器。

設置gzip相當簡單的，HTML5模版團隊已經做了很多工作來實現這一目標。要想壓縮gzip文件，需要將.htaccess文件添加到web服務器的根目錄中，并標記要壓縮的特定文件。
文件名開頭的點是正確的，因為.htaccess文件是一個隱藏文件。

在HTML5樣板Apache服務器配置中，它們指示應該對哪些文件應用gzip壓縮。請記住，此壓縮的代碼應該位于Web服務器根目錄下的.htaccess文件中。
另外，值得注意的是.htaccess文件只在ApacheWeb服務器上工作，這些服務器需要啟用以下模塊。

mod_setenvif.c

mod_headers.c

mod_deflate.c

mod_filter.c

mod_expires.c

mod_rewrite.c

一般來說，這不是問題，有些Web服務器甚至可能為您設置壓縮。畢竟，壓縮文件也是Web服務器的最大利益所在。

在谷歌Chrome web瀏覽器中，web inspector提供了大量關于性能的數據，特別是在Network選項卡中。此外，還有一些網站可以幫助識別是否啟用了gzip壓縮。

“網絡”選項卡標識瀏覽器中加載的每個文件，并顯示文件大小和加載時間。請注意gzipping如何將文件大小減少了大約60％。
查看一個文件的請求頭可以明確地確定瀏覽器支持哪種類型的壓縮編碼。在本例中，gzip、deflate和sdch都支持，如請求頭中所述。

減少文本文件的大小是有幫助的，但是通過壓縮圖像的文件大小可以得到更好的結果。
一個網站上所有圖片的總文件大小可以快速地加起來，壓縮圖片將大大有助于控制文件大小。

許多人害怕壓縮會降低圖像本身的質量，所以避免壓縮圖像。在大多數情況下，這是不正確的，圖像可以以無損的方式壓縮，允許從圖像中刪除不必要的顏色配置文件和注釋，而不改變圖像的質量。

有一些工具可以幫助壓縮圖像，其中最好的兩個是ImageOptim for Mac和PNGGauntlet for Windows。這兩種服務都壓縮最常用的圖像格式，特別是JPG和PNG文件。

還應該注意，通過高度和寬度屬性在HTML中設置圖像的尺寸確實有助于更快地呈現頁面，為圖像留出適當的空間。請理解，這些屬性只用于確定圖像的精確尺寸，而不是縮小圖像。使用較大的圖像，然后使用高度和寬度屬性將其縮小，這是一種不好的做法，因為它加載的數據比需要的多。

除了文件大小之外，網站發出的HTTP請求數量是最大的性能陷阱之一。每次向服務器發出請求，頁面加載時間都會增加。有些請求必須在其他請求啟動之前完成，太多的請求會使服務器膨脹。

減少HTTP請求數量的一種方法(可能也是最簡單的方法)是像組合文件一樣組合。具體地說，將所有CSS文件合并到一個中，并將所有JavaScript文件合并到一個中。組合這些文件，
然后對它們進行壓縮，就會創建一個很小的HTTP請求。

一般來說，網頁的CSS應該加載在頭文檔的header開始處，而網頁的javascript應該加載在結束處，就在結束body標記之前。
這些獨特的位置的原因是，CSS可以在加載網站的其余部分時加載。另一方面，JavaScript一次只能呈現一個文件，
因此禁止加載任何其他文件。這里的一個要注意的是，在頁面本身呈現完成之后，
JavaScript文件是異步加載的。另一個注意是，當需要JavaScript來幫助呈現頁面時，比如HTML5 SHIV。

在CSS中拼接圖像的做飯包括在多個元素之間使用一個背景圖像。這里的目標是減少使用多個背景圖像所做的HTTP請求的數量。

要創建一個精靈，可以將一些常用的背景圖片排列成一張圖片。然后使用CSS將sprite作為背景圖像添加到元素中，
并使用background-position屬性顯示正確的背景圖像。

想象一下背景圖像在元素后面滑動，只是為了在給定的元素上顯示正確的背景圖像。例如，如果一個元素的寬度是16像素乘16像素高，
那么它只能暴露一個16像素乘16像素的背景圖像，而其余的背景圖像則被隱藏。

比如，我們的文本編輯器菜單的精靈，我們可以將多個圖標通過ps進行拼接在一起使用。

想使用上面的圖像精靈，可以使用圖像精靈作為span元素的背景來創建菜單。
然后，使用類來更改圖像精靈的背景位置，可以相應地顯示不同的圖標。

HTML

  
Bold Text
  
Italicize Text
  
Underline Text
  
Size Text
  
Bullet Text
  
Number Text
  
Quote Text
  
Left Align Text
  
Center Align Text
  
Right Align Text

CSS

ul {
  margin: 0;
  padding: 0;
}
li {
  float: left;
  list-style: none;
  margin: 2px;
}
li a {
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  padding: 3px;
}
li a:hover {
  border-color: #999;
}
li span {
  background: url("sprite.png") 0 0 no-repeat;
  color: transparent;
  display: block;
  font: 0/0 a;
  height: 16px;
  width: 16px;
}
.italic {
  background-position: -16px 0;
}
.underline {
  background-position: -32px 0;
}
.size {
  background-position: -48px 0;
}
.bullet {
  background-position: -64px 0;
}
.number {
  background-position: -80px 0;
}
.quote {
  background-position: -96px 0;
}
.left {
  background-position: -112px 0;
}
.center {
  background-position: -128px 0;
}
.right {
  background-position: -144px 0;
}

此外，可以通過數據URI直接將圖像的編碼數據包含在HTML和CSS中，而不需要使用spriting圖像，
從而完全不需要HTTP請求。使用圖像數據URI可以很好地處理小圖像，這些圖像可能永遠不會改變，
并且HTML和CSS可以被大量緩存。然而，數據uri存在一些問題。它們很難更改和維護，因此必須生成另一種編碼。
而且，它們在較老的瀏覽器中無法工作，特別是在Internet Explorer 7及以下的瀏覽器中。

如果使用數據uri有助于減少一些HTTP請求，并且HTML或CSS可以被大量緩存，那么好處往往大于風險。一些幫助生成數據uri的工具包括轉換器和模式生成器。
但是要小心，一定要反復檢查，以確保實際數據URI的權重小于實際圖像。

HTML

CSS

div {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==") repeat;
}

另一種幫助減少HTTP請求和更快地提供頁面的方法是緩存常見文件。當頁面第一次加載時，
可以緩存特定文件。現在瀏覽器在重復訪問一段時間后不必再次請求相同的文件。
一段時間取決于您，這取決于您希望用戶保留特定文件類型的時間長度。

與gzipping文件一樣，可以在.htaccess文件中設置緩存文件的expires頭。再次，HTML5 Boilerplate團隊領先于我們。在他們的Apache Server Configs中，有一個專門用于設置expires頭文件的文件。

圖像，視頻，Web字體和常見媒體類型通常緩存一個月，而CSS和JavaScript文件通常緩存一年。如果CSS或任何其他文件每年更改頻率超過一次，則需要更改文件名，最好是版本化，以便加載。或者，可以將到期標題更改為更短的時間段。

ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

將“access plus 1 year”的值更改為“access plus 1 week”更適合于每周更改但沒有使用多帶帶文件名控制版本的CSS和JavaScript文件。對于接受的expires頭值，請參考mod_expires語法。

W3C標準