網站優化加速的一些方法

HTML優化

---

避免內聯式/嵌入式代碼

你能夠經過三種方式在HTML頁面中引入CSS或Javascript代碼.

1. 內聯式: 在HTML標籤的style屬性中定義樣式，在onclick這樣的屬性中定義Javascript代碼.
2. 嵌入式: 在頁面中使用style標籤訂義樣式，使用script標籤訂義Javascript代碼.
3. 引用外部文件: 在link標籤中定義href屬性引用CSS文件，在script標籤中定義src屬性引入Javascript文件.

儘管前兩種方式減小了HTTP請求數，但是實際上卻增長了HTML文檔的體積。不過，當你的頁面中的CSS或者Javascript代碼足夠少，反而是開啓一個HTTP請求的花費要更大時，採用這兩種方式倒是最有用的。所以，你須要測試評估這種方式是否真的提高了速度。同時也要考慮到你的頁面的目標和它的受衆：若是你指望人們只會訪問它一次，例如對一些臨時活動來講，你決不會指望有回訪客出現，那麼使用內聯式/嵌入式代碼可以幫助減小HTTP請求數。第三種方式不只使你的代碼更有序，並且使得瀏覽器可以緩存它。這種方式在大多數的狀況下都是首選，特別是一些大文件和多頁面的狀況。

樣式在上，腳本在下

當咱們把樣式放在標籤中時，瀏覽器在渲染頁面時就能儘早的知道每一個標籤的樣式，咱們的用戶就會感受這個頁面加載的很快。可是若是咱們將樣式放在頁面的結尾，瀏覽器在渲染頁面時就沒法知道每一個標籤的樣式，直到CSS被下載執行後。
另外一方面，對於Javascript來講，由於它在執行過程當中會阻塞頁面的渲染，因此大多數狀況下把它放在頁面的結尾。

使用async

爲了解釋這個屬性對於性能優化是多麼有用，咱們應該先明白，當不使用它時會發生什麼。
<script src="example.js"></script>
使用上面這種方式時，頁面會在這個腳本文件被徹底下載、解析、執行完後纔去渲染以後的HTML，在這以前會一直處於阻塞狀態。這就意味着會增長你的頁面的加載時間。有時這種行爲是咱們但願的，而大多數時候則不想要。
<script async src="example.js"></script>
使用上面這種方式時，腳本的加載是異步的，不會影響到這以後的頁面解析。腳本會在下載完以後當即執行。須要注意的是，若是有多個使用這種方式異步加載的腳本，他們是沒有特定的執行順序的。

CSS優化

---

壓縮樣式表

爲了保持代碼的可讀性，最好的方法是在代碼中添加註釋和使用縮進。

.center {
  width: 960px;
  margin: 0 auto;
}

/* --- Structure --- */

.intro {
  margin: 100px;
  position: relative;
}

可是對於瀏覽器來講，這些都是不重要的。正由於如此，經過自動化工具壓縮你的CSS是很是有用的。
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
這樣作可以減少文件的大小，從而獲得更快的下載、解析和執行。
而對於使用預處理器例如 Sass, Less, and Stylus, 你能夠經過配置縮小編譯輸出的CSS代碼。

合併css文件

合併你的CSS文件。文件數量的減小就會帶來請求數量的減小和更快的頁面加載速度。

使用link而不是@import

有兩種方式能夠引入一個外部的樣式表：經過 link 標籤，或者經過 @import 指令 (使用在一個外部樣式表中或者頁面內嵌的 style 標籤中)，當你在一個外部樣式表中使用第二種方式時，瀏覽器沒法經過並行下載的方式下載這個資源，這樣就會致使其餘資源的下載被阻塞。

JAVASCRIPT優化

---

異步加載第三方內容

爲了不這些在頁面加載時成爲問題，或者阻塞了所有頁面的加載，應該異步加載這些代碼

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

不過這是老辦法了。

避免使用document.write

最小化重繪和迴流

當有任何屬性或元素髮生改變時，都會引發DOM元素的重繪和迴流。
當一個元素的佈局不變，外觀發生改變時，就會引發重繪。Nicole Sullivan描述這個就像是樣式的改變，例如改變background-color。
迴流的代價是最高的，當改變一個頁面的佈局時就會發生迴流，例如改變一個元素的寬。
毫無疑問，應當避免過多的重繪和迴流，因此，對於下面的代碼：

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = div.offsetWidth + 'px';
}

應當變爲：

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth,
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = widthToSet + 'px';
}

當你設置style.width時，瀏覽器須要從新計算佈局。一般，瀏覽器暫時是不須要知道改變了元素的樣式的，直到它須要更新屏幕時，正由於如此，改變多個元素的樣式只會產生一次迴流。然而，在第一個例子中，咱們每次請求offsetWidth時，都會使瀏覽器從新計算佈局。
若是須要獲得頁面中的佈局數據，那麼請參照第二個例子，將這些操做放在任何會改變佈局的設置前.。

避免沒必要要的dom操做

當你得到DOM而又什麼都不作時，這簡直就是在殺死寶貴的生命。
說真的，瀏覽器遍歷DOM元素的代價是昂貴的。雖然Javascript引擎變得愈來愈強大，愈來愈快速，可是仍是應該最大化的優化查詢DOM樹的操做。
最簡單的替代方案就是，當一個元素會出現屢次時，將它保存在一個變量中，這樣的話你就不必每次都去查詢DOM樹了。

// really bad!
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

// much better :)
var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;

// much *much* better :)
var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) {
  myListHTML += "<span>" + i + "</span>";
}

壓縮你的腳本

和CSS同樣，爲了保持代碼的可讀性，最好的方法是在代碼中添加註釋和使用縮進：

BrowserDiet.app = function() {
  var foo = true;
  return {
    bar: function() {
      // do something
    }
  };

};

可是對於瀏覽器來講，這些都是不重要的。正由於如此，請記住用自動化工具壓縮你的Javascript代碼。
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
這樣作可以減少文件的大小，從而獲得更快的下載、解析和執行。

將多個js文件合併

對於腳本的組織和維護，另外一個好方法是將他們模塊化。

<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>

然而，這樣每一個文件就是一個HTTP請求（咱們都知道，瀏覽器的並行下載數是有限的）
<script src="main.js"></script>
合併你的JS文件，文件數量的減小就會帶來請求數量的減小和更快的頁面加載速度。
想要一箭雙鵰？經過構建工具自動化這個過程吧。

圖片

---

使用css-sprites

這個技術就是將各類圖片整合到一個文件中去，俗稱雪碧圖，而後經過CSS去定位它們。
在使用sprite時，應當避免在每一個圖片之間的空隙過大。這個雖然不會影響到文件的大小，可是會影響到內存的消耗。

Data-URI

這種技術是CSS Sprites的替代方法。是指使用圖片的數據代替一般使用的圖片URI，在下面的例子中，咱們就使用它減小了HTTP請求數。
使用前:

.icon-foo {
  background-image: url('foo.png');
}

使用後:

.icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

全部的現代瀏覽器和IE8及以上版本的IE都支持這個方法，圖片須要使用base64方法編碼。
這種技術和CSS Sprites技術都是可使用構建工具獲得的。使用構建工具的好處是不用手工去進行圖片的拼合替換，在開發時使用單獨的文件就能夠。
然而壞處是，隨着你的HTML/CSS文件的增大增多，你必須考慮你可能會有一個很是大的圖片。若是你在HTTP請求中沒有使用gzip技術壓縮你的HTML/CSS，那麼咱們不推薦使用這種方法，由於減小HTTP請求數獲得的大文件對於速度來講可能帶來相反的結果。

不要在 標籤中調整圖像

老是在img標籤中設置width和height屬性。這樣能夠防止渲染過程當中的重繪和迴流。
<img width="100" height="100" src="logo.jpg" alt="Logo">
知道這個以後，一個開發者將一個700x700px的圖像設置爲50x50px來顯示。
可是這個開發者不知道的是，大量的沒有用的數據也發送到了客戶端。
因此請記住：你能夠在標籤中定義一個圖片的寬高，但不意味着你應該經過這麼作來(等比)縮放大圖。

優化圖片

圖片文件中包含許多對於Web來講沒有用的東西。舉例來講，一個JPEG圖片中可能包含一些Exif元數據（數據，相機型號，座標等等）。一個PNG圖片會包含有關顏色，元數據的信息，有時甚至還包含一個縮略圖。這些只會增長文件的大小，而對於瀏覽器來講卻毫無用處。
有不少工具可以幫你從圖片中去除這些信息，而且不會下降圖片的質量。咱們把這個稱作無損壓縮。
另外一種優化圖片的方式是，以圖片質量爲代價進行壓縮。咱們稱之爲有損壓縮。舉例來講，當你導出一個JPEG圖片時，你能夠選擇導出的圖片質量（從0到100）。考慮到性能，老是選擇可接受範圍內的最低值。在PNG圖片中，另外一個常見的有損技術是減小顏色數量，或者將PNG-24格式轉換爲PNG-8格式。
爲了提高用戶的體驗，你還應該將你的JPEG文件轉換爲漸進式的。如今大多數的瀏覽器都支持漸進式JPEG文件，而且這種格式的文件建立簡單，沒有明顯的性能損失問題。頁面中的這種格式的圖片可以更快的展示。

其餘

---

合理設置 HTTP緩存

緩存的力量是強大的，恰當的緩存設置能夠大大的減小 HTTP請求。以有啊首頁爲例，當瀏覽器沒有緩存的時候訪問一共會發出 78個請求，共 600多 K數據 (如圖 1.1)，而當第二次訪問即瀏覽器已緩存以後訪問則僅有 10個請求，共 20多 K數據 (如圖 1.2)。 (這裏須要說明的是，若是直接 F5刷新頁面的話效果是不同的，這種狀況下請求數仍是同樣，不過被緩存資源的請求服務器是 304響應，只有 Header沒有Body ，能夠節省帶寬 )　　怎樣纔算合理設置 ?原則很簡單，能緩存越多越好，能緩存越久越好。例如，不多變化的圖片資源能夠直接經過 HTTP Header中的Expires設置一個很長的過時頭 ;變化不頻繁而又可能會變的資源可使用 Last-Modifed來作請求驗證。儘量的讓資源可以在緩存中待得更久。

---

總結

以上就是網站優化的一些技巧，主要參考點擊這裏