頁面優化與模塊化

頁面優化與模塊化

這些關於前端優化、模塊化的內容，我向來是不會去記的，由於在實際項目中碰到須要性能優化，很天然就會去查找這方面的解決方案。或者說要在編寫程序的過程當中就要考慮到這些準則。就好像學校裏的行爲準則歷來不去記，也不影響平常生活，主要是原本就有很好的生活習慣，很天然地契合了準則要求。也就是說，在平時的開發過程當中養成良好的編碼習慣，也可以比準則作得更好。

儘管如此，仍是把這些關於準則的內容寫下來，等到須要用的時候，拿出來看兩眼，熟能生巧是良訓啊。

頁面優化

頁面優化能夠提高頁面的訪問速度從而提升用戶體驗，優化的頁面能夠更好的提高 SEO 的效果同時也能夠提升代碼的可讀性和維護性。

從下面的幾個方面能夠進行頁面的優化：

• 減小請求數

  1. 圖片合併
  2. CSS 文件合併
  3. 減小內聯樣式
  4. 避免在 CSS 中使用 import

• 減小文件大小

  1. 選擇適合的圖片格式
  2. 圖片壓縮
  3. CSS 值縮寫（Shorthand Property)
  4. 文件壓縮

• 頁面性能

  1. 調整文件加載順序
  2. 減小標籤數量
  3. 調整選擇器長度
  4. 儘可能使用 CSS 表現樣式

• 加強代碼可讀性與可維護性

  1. 規範化
  2. 語義化
  3. 模塊化

減小請求

請求數與網頁加載時長有直接的關係。因此對於圖標可使用 Sprite 來減小小圖標的請求數，對於文本則能夠經過合併縮小。（避免使用 import 引入 CSS 文件，而且請求是同步請求）

減小文件大小

頁面上最大的流量產生於多媒體（視頻或圖片），因此爲了減小文件大小，開發者須要使用合適的媒體格式並對文件進行壓縮。

頁面性能

頁面文件的加載順序自上而下，樣式則須要放置於最頂部，腳本則放置於底部（由於 JavaScript 的加載會阻塞頁面的繪製）。

減小標籤的數量也能夠起到提高性能的做用，縮短 CSS 選擇器的層級來提升性能。減小使用消耗性能的樣式屬性例以下面的這些：

• expression.class{width:expression(this.width>100?'100px':'auto')}
• filter .class{filter:alpha(opacity=50)}
• border-radius
• box-shadow
• gradients

頁面中所使用的圖片尺寸應該與現實尺寸相符，不然在圖標下載後須要重繪致使性能降低。

能使用樣式（使用 CSS 的類名）實現的交互就不使用腳本（須要重繪致使屢次頁面渲染）來實現。

可讀性與可維護性

開發以前須要明確規範，尤爲是與人協做時。使用 HTML5 語義化的標籤來製做頁面，一樣也適用於樣式選擇器的 ID 與類名。在使用開發中的奇技淫巧的適合須要深思是否須要使用。模塊化的製做頁面和樣式，提升可複用性並減小文件大小。

在代碼中添加註釋，利人利己。

規範與模塊化

規範

規範的制訂應從下面的幾個方面來開始考慮：

• 文件規範
• 註釋規範
• 命名規範
• 書寫規範
• 其餘規範

文件規範

文件規範又能夠從三個方面入手，分類，引入，以及文本自己的內容。

• 分類（分類可分爲通用類和業務類。通用類有第三方的庫，團隊開發的通用模塊或者通用樣式。業務類則有不一樣業務所對應的特定模塊。）

• 引入

  1. CSS（引入文件則需盡少的使用行內樣式）
  2. JavaScript（文件名的約束，以及編碼設置一般使用 utf-8）

註釋規範

註釋可以使用塊狀，單行註釋和行內註釋，須要統一縮進等細節要求。

命名規範

例如 CSS 選擇器的命名規範:

• 分類命名（例如 g-header 來給佈局類的樣式設置命名空間來防止樣式污染，m-header 來制定模塊類的樣式）
• 命名格式（大小寫的規定，建議使用小寫並使用 - 分隔，也許控制選擇器的長度，避免過長的樣式選擇器名稱,但不可失去選擇器語義）
• 語義化命名（之內容的語義來給選擇器命名）

書寫規範

這裏使用 CSS 的書寫規範來作示例，能夠參考下面的約束：

• 單行與多行（單行與多行的 CSS 書寫格式，使用多行！）
• 空格與分號（使用空格進行縮進並保留最後一個屬性的分號）
• 書寫順序（根據顯示的重要性來安排可參照下表）
• Hack 方式（三思然後行）
• 值格式（例如顏色值的格式以及引用中是否使用引號）

其餘規範

這裏包括有 HTML 以及圖片的規範：

• HTML

  1. 文檔聲明
  2. 閉合
  3. 屬性
  4. 層級
  5. 註釋
  6. 大小寫

• 圖片

  1. 文件名稱（語言以及長度的規範）
  2. 保留源文件
  3. 圖片合併

模塊化

模塊化是一系列相關的結果組成的總體，這部分具有獨立存在的意義，不單純只是表現。

在開發模塊化時須要注意的一些步驟（以 CSS 模塊化爲例）：

• 爲模塊分類命名（m-module-name）
• 以一個主選擇器做爲開頭（模塊跟節點）
• 使用以主選擇器開頭的後代選擇器（模塊子節點）

模塊化有利於多人開發，便於擴展，固然也能夠提升代碼的可讀性與可維護性。