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

當(dāng)能夠扎實(shí)的理解并編寫(xiě)HTML和CSS這門(mén)專(zhuān)業(yè)知識(shí)。隨著網(wǎng)站代碼量和流量的增長(zhǎng)，另一種新技能也開(kāi)始發(fā)揮作用，
這對(duì)于開(kāi)發(fā)效率和用戶(hù)體驗(yàn)都至關(guān)重要。我們?cè)诹私饩W(wǎng)站性能和組織的基礎(chǔ)知識(shí)上還要繼續(xù)努力。

代碼庫(kù)的組織和體系結(jié)構(gòu)不僅極大的影響開(kāi)發(fā)速度，還極大的影響頁(yè)面呈現(xiàn)的速度。這兩者對(duì)用戶(hù)和開(kāi)發(fā)人員來(lái)說(shuō)都是個(gè)大問(wèn)題。
我們需要花時(shí)間為代碼庫(kù)設(shè)計(jì)正確的結(jié)構(gòu)，確定所有不同組件如何協(xié)同工作，加快開(kāi)發(fā)效率并創(chuàng)造更好的用戶(hù)體驗(yàn)。

此外，一些小技巧也可以改善網(wǎng)站的性能。網(wǎng)站性能類(lèi)似于二八定律，其中20%的優(yōu)化將帶來(lái)網(wǎng)站80%的性能提升。

改善網(wǎng)站的性能和組織首先圍繞如何構(gòu)思良好的策略和結(jié)構(gòu)的項(xiàng)目代碼庫(kù)結(jié)構(gòu)。具體來(lái)說(shuō)，就是構(gòu)建良好的目錄體系結(jié)構(gòu)和設(shè)計(jì)模式，
并找出項(xiàng)目中重用的公共代碼的方法。

什么樣的組織架構(gòu)才是最有效的呢？ 一般來(lái)說(shuō)，可以遵循以下方法。 這種做法包含集中化的樣式分離，還包括根據(jù)公共基本樣式、用戶(hù)交互組件、業(yè)務(wù)邏輯模塊。

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

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

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

上面展示的體系結(jié)構(gòu)包括三個(gè)目錄，每個(gè)目錄都具有獨(dú)立的樣式組。 我們的設(shè)計(jì)目標(biāo)就是將網(wǎng)站是為一個(gè)系統(tǒng)而不是單個(gè)頁(yè)面，
代碼架構(gòu)應(yīng)該反映出這種形態(tài)。請(qǐng)注意這里沒(méi)有涉及到任何頁(yè)面的特定樣式。

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

組件樣式純粹是接口驅(qū)動(dòng)的，與網(wǎng)站的核心業(yè)務(wù)邏輯無(wú)關(guān)。然后，模塊包括特定于業(yè)務(wù)邏輯的樣式。在HTML中標(biāo)記模塊時(shí)，通常在頁(yè)面
使用不同的用戶(hù)界面組件。例如，頁(yè)面的側(cè)邊欄可能具有在組件樣式中定義的列表和按鈕樣式，而側(cè)邊欄所需的其他樣式則從模塊樣式繼承。
樣式的分離反映了程序員經(jīng)過(guò)深思熟慮的設(shè)計(jì)和樣式被共享和重用的能力。

以這種方式組織樣式的策略并不是全新的。并且之前已經(jīng)在不同的CSS方法中提到過(guò)，包括面向?qū)ο蟮?b>CSS,OOCSS以及用于CSS的
可擴(kuò)展性和模塊化架構(gòu)(SMACSS)。這些方法對(duì)架構(gòu)以及如何使用樣式來(lái)說(shuō)有著自己獨(dú)特的方法。

面向?qū)ο蟮腃SS方法是由Nicole Sullivan在為大型網(wǎng)站編寫(xiě)樣式的工作中開(kāi)創(chuàng)的。面向?qū)ο蟮腃SS（`Object
Oriented CSS`）確定了兩個(gè)基本原則，這些原則將有助于構(gòu)建具有強(qiáng)大架構(gòu)和合理代碼量的可彈性網(wǎng)站。
這兩個(gè)原則包括：

整體結(jié)構(gòu)與皮膚的分離

從容器中分離內(nèi)容

整體結(jié)構(gòu)與皮膚的分離包括從網(wǎng)站的主題中抽象出元素的布局，模塊的結(jié)構(gòu)應(yīng)該是透明的，允許繼承和顯示其他樣式而不會(huì)發(fā)生沖突。
最常見(jiàn)的是這需要實(shí)體網(wǎng)格和布局結(jié)構(gòu)，以及精心設(shè)計(jì)的模塊。

將內(nèi)容與容器分離涉及移除父元素嵌套子元素的依賴(lài)項(xiàng)。無(wú)論其父容器是什么，標(biāo)題應(yīng)該看起來(lái)都是一樣的。為此，元素需要
繼承默認(rèn)樣式，然后根據(jù)需要使用多個(gè)類(lèi)進(jìn)行擴(kuò)展。

HTML

  
......

CSS

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

面向?qū)ο蟮?b>CSS提倡構(gòu)建組件庫(kù)，保持靈活性，并使用網(wǎng)格。 這些都是很好的基本規(guī)則，它們可以幫你避免每次向網(wǎng)站添加新頁(yè)面
和新功能時(shí)都需要添加額外的樣式。

與面向?qū)ο驝SS相同的是Jonathan Snook開(kāi)發(fā)的可伸縮的模塊化CSS方法論體系結(jié)構(gòu)。
CSS的可擴(kuò)展和模塊化架構(gòu)促進(jìn)將樣式分成五個(gè)核心類(lèi)別，包括:

基本

布局

模塊

狀態(tài)

主題

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

HTML

  
...

CSS

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

在上面的例子中，alert類(lèi)屬于模塊類(lèi)，而is-error類(lèi)屬于狀態(tài)類(lèi)。然后根據(jù)需要來(lái)繼承這些類(lèi)別中的每個(gè)樣式。

選擇使用那種方法（如果有的話(huà)）完全取決于你自己。對(duì)于一個(gè)給定的網(wǎng)站，你覺(jué)得最好的是什么。
一般來(lái)說(shuō)，OOCSS和SMACSS的可靠組合工作會(huì)很好，你可以根據(jù)自己的喜好從每種方法中借鑒原則。

CSS中的大部分注意力都集中在屬性和值上面，而CSS中的選擇器經(jīng)常被濫用卻沒(méi)有被意識(shí)到。
我們總以為將這些樣式應(yīng)用到正確的元素上就很完美了，但是這是一個(gè)不好的想法。
CSS中元素的選擇也會(huì)影響性能，包括頁(yè)面呈現(xiàn)的速度，以及樣式再整個(gè)站點(diǎn)架構(gòu)中的實(shí)用性和模塊化程度。

保持CSS選擇器盡可能短有幾個(gè)好處。 包括最小化特異性，允許更好的繼承性和可移植性，以及提高效率。
長(zhǎng)的、多度限定的選擇器會(huì)降低性能，因?yàn)樗鼈兤仁篂g覽器從右到左呈現(xiàn)每個(gè)選擇器類(lèi)型。
更具體的說(shuō)，它們還增加了所有其他選擇器的負(fù)擔(dān)。

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

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

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

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

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

第二個(gè)示例包含比第一個(gè)示例更短的選擇器，但是可以通過(guò)為每個(gè)選擇器提供相同級(jí)別的特異性來(lái)改進(jìn)它。
避免使用過(guò)于特定的選擇器，作為回報(bào)，如果元素的順序發(fā)生變化，
它們不太可能中斷。去掉一些多帶帶的選擇器單元，并賦予所有選擇器相同的強(qiáng)度，使它們能夠更好地協(xié)作。

使用短選擇器的總體目標(biāo)是降低特異性，創(chuàng)建更干凈、更寬松的代碼。

類(lèi)非常棒，它們呈現(xiàn)速度很快，允許重用樣式，并且已經(jīng)廣泛用于構(gòu)建網(wǎng)站。但是，在使用類(lèi)時(shí)，要觀察一些常見(jiàn)的實(shí)踐，
以確保它們得到了適當(dāng)?shù)睦谩?/p>

因?yàn)檫x擇器是從右到左呈現(xiàn)的，所以一定要注意鍵選擇器。鍵選擇器是最后最右邊的選擇器單元。鍵選擇器非常重要，因?yàn)樗鼧?biāo)識(shí)了瀏覽器要查找的第一個(gè)元素。
如果鍵選擇器不好，瀏覽器就會(huì)陷入徒勞。不要害怕僅僅為了性能的好處而使用一個(gè)類(lèi)來(lái)變得更加獨(dú)特。

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

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

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

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

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

同樣值得注意的是，盡可能遠(yuǎn)離ID選擇器，因?yàn)樗鼈冞^(guò)于具體，不允許任何重復(fù)。說(shuō)到底，使用ID和使用!important沒(méi)什么不同。

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

重用代碼也不需要以語(yǔ)義為代價(jià)。一種技術(shù)是將選擇器組合在一起用逗號(hào)分隔他們，允許在兩個(gè)選擇器之間繼承相同的樣式。
在前面提到的OOCSS和SMACSS方法中經(jīng)?？吹降牧硪粋€(gè)方法包括將樣式綁定到一個(gè)類(lèi)，然后在同一個(gè)元素上使用多個(gè)類(lèi)。

/* 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);
}

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

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

一種比較流行的文件壓縮類(lèi)型稱(chēng)為gzip。gzip壓縮采用常見(jiàn)文件，包括HTML、CSS、JavaScript等，并標(biāo)識(shí)要壓縮的類(lèi)似字符串。識(shí)別的匹配字符串越多，
可以壓縮的文件就越小，這樣就可以將較小的文件從服務(wù)器發(fā)送到瀏覽器。

設(shè)置gzip相當(dāng)簡(jiǎn)單的，HTML5模版團(tuán)隊(duì)已經(jīng)做了很多工作來(lái)實(shí)現(xiàn)這一目標(biāo)。要想壓縮gzip文件，需要將.htaccess文件添加到web服務(wù)器的根目錄中，并標(biāo)記要壓縮的特定文件。
文件名開(kāi)頭的點(diǎn)是正確的，因?yàn)?htaccess文件是一個(gè)隱藏文件。

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

mod_setenvif.c

mod_headers.c

mod_deflate.c

mod_filter.c

mod_expires.c

mod_rewrite.c

一般來(lái)說(shuō)，這不是問(wèn)題，有些Web服務(wù)器甚至可能為您設(shè)置壓縮。畢竟，壓縮文件也是Web服務(wù)器的最大利益所在。

在谷歌Chrome web瀏覽器中，web inspector提供了大量關(guān)于性能的數(shù)據(jù)，特別是在Network選項(xiàng)卡中。此外，還有一些網(wǎng)站可以幫助識(shí)別是否啟用了gzip壓縮。

“網(wǎng)絡(luò)”選項(xiàng)卡標(biāo)識(shí)瀏覽器中加載的每個(gè)文件，并顯示文件大小和加載時(shí)間。請(qǐng)注意gzipping如何將文件大小減少了大約60％。
查看一個(gè)文件的請(qǐng)求頭可以明確地確定瀏覽器支持哪種類(lèi)型的壓縮編碼。在本例中，gzip、deflate和sdch都支持，如請(qǐng)求頭中所述。

減少文本文件的大小是有幫助的，但是通過(guò)壓縮圖像的文件大小可以得到更好的結(jié)果。
一個(gè)網(wǎng)站上所有圖片的總文件大小可以快速地加起來(lái)，壓縮圖片將大大有助于控制文件大小。

許多人害怕壓縮會(huì)降低圖像本身的質(zhì)量，所以避免壓縮圖像。在大多數(shù)情況下，這是不正確的，圖像可以以無(wú)損的方式壓縮，允許從圖像中刪除不必要的顏色配置文件和注釋?zhuān)桓淖儓D像的質(zhì)量。

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

還應(yīng)該注意，通過(guò)高度和寬度屬性在HTML中設(shè)置圖像的尺寸確實(shí)有助于更快地呈現(xiàn)頁(yè)面，為圖像留出適當(dāng)?shù)目臻g。請(qǐng)理解，這些屬性只用于確定圖像的精確尺寸，而不是縮小圖像。使用較大的圖像，然后使用高度和寬度屬性將其縮小，這是一種不好的做法，因?yàn)樗虞d的數(shù)據(jù)比需要的多。

除了文件大小之外，網(wǎng)站發(fā)出的HTTP請(qǐng)求數(shù)量是最大的性能陷阱之一。每次向服務(wù)器發(fā)出請(qǐng)求，頁(yè)面加載時(shí)間都會(huì)增加。有些請(qǐng)求必須在其他請(qǐng)求啟動(dòng)之前完成，太多的請(qǐng)求會(huì)使服務(wù)器膨脹。

減少HTTP請(qǐng)求數(shù)量的一種方法(可能也是最簡(jiǎn)單的方法)是像組合文件一樣組合。具體地說(shuō)，將所有CSS文件合并到一個(gè)中，并將所有JavaScript文件合并到一個(gè)中。組合這些文件，
然后對(duì)它們進(jìn)行壓縮，就會(huì)創(chuàng)建一個(gè)很小的HTTP請(qǐng)求。

一般來(lái)說(shuō)，網(wǎng)頁(yè)的CSS應(yīng)該加載在頭文檔的header開(kāi)始處，而網(wǎng)頁(yè)的javascript應(yīng)該加載在結(jié)束處，就在結(jié)束body標(biāo)記之前。
這些獨(dú)特的位置的原因是，CSS可以在加載網(wǎng)站的其余部分時(shí)加載。另一方面，JavaScript一次只能呈現(xiàn)一個(gè)文件，
因此禁止加載任何其他文件。這里的一個(gè)要注意的是，在頁(yè)面本身呈現(xiàn)完成之后，
JavaScript文件是異步加載的。另一個(gè)注意是，當(dāng)需要JavaScript來(lái)幫助呈現(xiàn)頁(yè)面時(shí)，比如HTML5 SHIV。

在CSS中拼接圖像的做飯包括在多個(gè)元素之間使用一個(gè)背景圖像。這里的目標(biāo)是減少使用多個(gè)背景圖像所做的HTTP請(qǐng)求的數(shù)量。

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

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

比如，我們的文本編輯器菜單的精靈，我們可以將多個(gè)圖標(biāo)通過(guò)ps進(jìn)行拼接在一起使用。

想使用上面的圖像精靈，可以使用圖像精靈作為span元素的背景來(lái)創(chuàng)建菜單。
然后，使用類(lèi)來(lái)更改圖像精靈的背景位置，可以相應(yīng)地顯示不同的圖標(biāo)。

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;
}

此外，可以通過(guò)數(shù)據(jù)URI直接將圖像的編碼數(shù)據(jù)包含在HTML和CSS中，而不需要使用spriting圖像，
從而完全不需要HTTP請(qǐng)求。使用圖像數(shù)據(jù)URI可以很好地處理小圖像，這些圖像可能永遠(yuǎn)不會(huì)改變，
并且HTML和CSS可以被大量緩存。然而，數(shù)據(jù)uri存在一些問(wèn)題。它們很難更改和維護(hù)，因此必須生成另一種編碼。
而且，它們?cè)谳^老的瀏覽器中無(wú)法工作，特別是在Internet Explorer 7及以下的瀏覽器中。

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

HTML

CSS

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

另一種幫助減少HTTP請(qǐng)求和更快地提供頁(yè)面的方法是緩存常見(jiàn)文件。當(dāng)頁(yè)面第一次加載時(shí)，
可以緩存特定文件?，F(xiàn)在瀏覽器在重復(fù)訪問(wèn)一段時(shí)間后不必再次請(qǐng)求相同的文件。
一段時(shí)間取決于您，這取決于您希望用戶(hù)保留特定文件類(lèi)型的時(shí)間長(zhǎng)度。

與gzipping文件一樣，可以在.htaccess文件中設(shè)置緩存文件的expires頭。再次，HTML5 Boilerplate團(tuán)隊(duì)領(lǐng)先于我們。在他們的Apache Server Configs中，有一個(gè)專(zhuān)門(mén)用于設(shè)置expires頭文件的文件。

圖像，視頻，Web字體和常見(jiàn)媒體類(lèi)型通常緩存一個(gè)月，而CSS和JavaScript文件通常緩存一年。如果CSS或任何其他文件每年更改頻率超過(guò)一次，則需要更改文件名，最好是版本化，以便加載?；蛘?，可以將到期標(biāo)題更改為更短的時(shí)間段。

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

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

W3C標(biāo)準(zhǔn)