頁(yè)面優(yōu)化

頁(yè)面優(yōu)化可以提升頁(yè)面的訪問(wèn)速度從而提高用戶體驗(yàn)，優(yōu)化的頁(yè)面可以更好的提升 SEO 的效果同時(shí)也可以提高代碼的可讀性和維護(hù)性。

從下面的幾個(gè)方面可以進(jìn)行頁(yè)面的優(yōu)化：

• 減少請(qǐng)求數(shù)
  • 圖片合并
  • CSS 文件合并
  • 減少內(nèi)聯(lián)樣式
  • 避免在 CSS 中使用 import
• 減少文件大小
  • 選擇適合的圖片格式
  • 圖片壓縮
  • CSS 值縮寫(xiě)（Shorthand Property)
  • 文件壓縮
• 頁(yè)面性能
  • 調(diào)整文件加載順序
  • 減少標(biāo)簽數(shù)量
  • 調(diào)整選擇器長(zhǎng)度
  • 盡量使用 CSS 制作顯示表現(xiàn)
• 增強(qiáng)代碼可讀性與可維護(hù)性
  • 規(guī)范化
  • 語(yǔ)義化
  • 模塊化

減少請(qǐng)求

請(qǐng)求數(shù)與網(wǎng)頁(yè)加載時(shí)長(zhǎng)有直接的關(guān)系。所以對(duì)于圖標(biāo)可以使用 Sprite 來(lái)減少小圖標(biāo)的請(qǐng)求數(shù)，對(duì)于文本則可以通過(guò)合并縮小。（避免使用 import 引入 CSS 文件，并且請(qǐng)求是同步請(qǐng)求）

減少文件大小

頁(yè)面上最大的流量產(chǎn)生與多媒體（視頻或圖片）所以為了減少文件大小，開(kāi)發(fā)者需要使用合適的媒體格式并對(duì)文件進(jìn)行壓縮。

頁(yè)面性能

頁(yè)面文件的加載順序自上而下，樣式則需要放置于最頂部，腳本則放置于底部（因?yàn)?JavaScript 的加載會(huì)阻塞頁(yè)面的繪制）。

減少標(biāo)簽的數(shù)量也可以起到提升性能的作用，縮短 CSS 選擇器的層級(jí)來(lái)提高性能。減少使用消耗性能的樣式屬性例如下面的這些：

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

頁(yè)面中所使用的圖片尺子應(yīng)該與現(xiàn)實(shí)尺寸相符否則在圖標(biāo)下載后需要重繪導(dǎo)致性能下降。

能使用樣式（使用 CSS 的類(lèi)名）實(shí)現(xiàn)的交互就不使用腳本（需要重繪導(dǎo)致多次頁(yè)面渲染）來(lái)實(shí)現(xiàn)。

可讀性與可維護(hù)性

開(kāi)發(fā)之前需要明確規(guī)范，尤其是對(duì)人協(xié)作時(shí)。使用 HTML5 語(yǔ)義化的標(biāo)簽來(lái)制作頁(yè)面，同樣也適用于樣式選擇器的 ID 與類(lèi)名。在使用開(kāi)發(fā)中的奇技淫巧的適合需要深思是否需要使用。模塊化的制作頁(yè)面和樣式，提高可復(fù)用性并減少文件大小。

注釋注釋注釋?zhuān)诖a中添加注釋?zhuān)死骸?/p>