頁面加載性能之HTTP請求

文本內容、圖片內容的優化都是基於自己大小的，但有一個更基礎的方案能夠實施，就是減小這些資源的下載頻率。

減小資源個數，就能夠減小HTTP請求個數。

合併文本資源

每一個文件都須要發起一個HTTP請求，每一個請求會消耗必定的時間，合併這些文件就能提高頁面的加載速度。

CSS比較特殊，是層疊樣式，同一個選擇器不會報錯和拋出異常，而是能正常運行，後者覆蓋前者。但有時候這個會跟咱們預期不一致，因此建議給一些特別的樣式加特定的類名。以下：

h2 { font-size: 1em; color: #000080; } /* master stylesheet */
 
h2 { font-size: 2em; color: #ff0000; } /* Marketing stylesheet（避免使用） */
 
section.product h2 { font-size: 2em; color: #ff0000; } /* Marketing stylesheet（推薦） */

合併文本資源對於減小HTTP請求數頗有效，不過這樣作的時候也要當心，後面會介紹一些注意事項。

合併圖片資源

圖片和文本同樣，也能夠經過合併的方式來減小HTTP請求數。

雖然這個方法能夠適用於任意圖片，但咱們最經常使用的仍是合併小圖標，爲這些小圖標發起多個HTTP請求實在是一種浪費。

咱們能夠用CSS的background-position屬性來展現相應的圖片——俗稱"精靈圖"。CSS重定位很是快速、無縫，不用擔憂抖動問題。

你可能會有一系列的社交網站圖標，比起下載3個單獨的圖片，合併成一張圖片會更合適，以下：

如下是CSS的示例：

a.facebook {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url("socialmediaicons.png");
  background-position: 0px 0px;
}
a.twitter {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url("socialmediaicons.png");
  background-position: -64px 0px;
}
a.pinterest {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url("socialmediaicons.png");
  background-position: -128px 0px;
}

"facebook"的類裏的"background-position"屬性其實是能夠省略的，但此處爲了保持一致性，因此保留。

注意事項

• 上面提到的合併文本和圖片資源，在HTTP/2協議下，可能效果沒有預期的那樣，由於HTTP/2的請求更快，若是想了解更詳細的，能夠參考 https://developers.google.com...
• 若是合併的資源裏面包含一個頻繁改動的動態資源，好比node_modules打包成的vendor.js，若是包含了一個首頁的js文件，而首頁改動頻繁，會致使緩存失效，每次都要從新下載一遍整個vendor.js

JavaScript的位置和內聯腳本（Inline Push）

咱們假設全部的CSS和JavaScript資源都是存在於單獨的文件，這也是最優的作法。腳本的加載是個巨大複雜的流程，詳情能夠參考這篇文章 Deep Dive Into the Murky Waters of Script Loading。有如下兩個點值得注意：

腳本的位置

• 儘量地把腳本放在body的結束標籤上方，比起放head標籤，這樣不會阻塞頁面渲染。
• 若是腳本須要操縱初始dom，或者在渲染期間提供一些函數，這類腳本能夠單獨放在head標籤內引入，常見的有：window.onerror的事件綁定、反爬蟲、性能監控等
• 最高效的資源加載順序，也被稱爲關鍵渲染路徑（Critical Rendering Path），詳情能夠參考：Bits of Code。

代碼的位置

• 儘量的避免將一個JavaScript拆成2個文件，最好的作法是把這部分拆分的代碼直接內嵌在HTML文件中，成爲內聯腳本（Inline Push）.
• 當你想在渲染的時候展現一些已有的數據（例如：時間等），能夠經過內聯腳本，這樣不用等待整個頁面加載完就能顯示出來。

• 內聯腳本主要是解決兩個問題：

  • 爲了加載一小段代碼，而發起一個HTTP請求的浪費
  • 讓一些代碼在渲染初期就能執行

<h1>Our Site</h1>
 
<h2 id="greethead">, and welcome to Our Site!</h2>
 
<script>
//insert time of day greeting from computer time
var hr = new Date().getHours();
var greeting = "Good morning";
if (hr > 11) {
    greeting = "Good afternoon";
}
if (hr > 17) {
    greeting = "Good evening";
}
h2 = document.getElementById("greethead");
h2.innerHTML = greeting + h2.innerHTML;
</script>
 
<p>Blah blah blah</p>

總結

本文主要介紹了下降HTTP請求次數的一些方法，考慮了文本和圖片兩種資源。減小與服務器的交互次數，能夠幫咱們節省時間，加速頁面的加載，讓用戶能夠更快的看到內容。

參考

https://developers.google.com...