問題：網站如何提升網頁開啟速度？

1、減少頁面請求： 
從WEB執行原理上講，IIS請求是無狀態的，在伺服器端一直是連線和關閉的不斷進行著，如果能減少伺服器請求，總的時間將會減少。 
之前我下載163郵箱的登陸頁面的圖片時發現，它們的只用到了一個圖片來完成整個頁面的所有圖片，當時我就納悶了，這跟平時做的網站不一樣呀。然來這樣做減少瀏覽器的請求次數，用httpwatch你會發現請求的總時間大大減少了。同樣的想法，在做css樣式，JavaScript程式碼的時候也要做到儘可能的放在一個檔案下來減少WEB請求。

2、頁面壓縮技術，給我們JS，HTML程式碼進行瘦身。 

3、樣式、行為、結構分離。 
當第一次訪問頁面的時候，使用者就可以把CSS,JS程式碼下載下來，這樣做雖然第一次使網頁載入的速度變慢了，但後面的頁面將快很多。當用戶訪問這個網站的其它的頁面時，由於其它頁面也引用了這個CSS樣式和JS程式碼。瀏覽器發現它已經下載好了，下一次就可以不用下載了。這樣就做到了一次下載，後續速度的效果。

4、使用儲存過程 
在執行儲存過程前，資料庫已對其進行了語法和句法分析，並給出了優化執行方案。這種已經編譯好的過程可極大地改善SQL語句的效能。由於執行SQL語句的大部分工作已經完成，所以儲存過程能以極快的速度執行。這種預編譯的sql語句就可以直接執行而節省了很大一部分查詢的時間。

5、一些細節： 
把CSS樣式放在頭部，如果JS很多的話，把js程式碼放在尾部。這樣做可以儘可能的先載入頁面的DOM結構，然後才可以級使用者體驗。如果JS很多的大的話，頁面都沒載入完，何來使用者體驗之說呢。

6、適當的使用AJAX 
現在的Ajax好像有點被神話了，好像網頁只要Ajax了，那麼就不存在效率問題了。其實這是一種誤解。拙劣的使用Ajax不會讓你的網頁效率更高，反而會降低你的網頁效率。Ajax的確是個好東西，但是請不要過分的神話它。使用Ajax的時候也要考慮上面的那些準則。

7、儘量少使用樣式工具為我們生成的頁面樣式程式碼，自己動手把樣式寫在樣式檔案裡。儘量寫得通用些。

8、頁面快取 
在大型的入口網站都用到了快取技術，它是以空間換時間的技術。 
快取主要是為了提高資料的讀取速度。因為伺服器和應用客戶端之間存在著流量的瓶頸，所以讀取大容量資料時，使用快取來直接為客戶端服務，可以減少客戶端與伺服器端的資料互動，從而大大提高二次頁面的訪問速度的程式的效率。

9、配置網站的實體標籤: 
這個Etag不是給使用者用的，而是給瀏覽器快取用的。Etag是伺服器告訴瀏覽器快取，快取中的內容是否已經發生變化的一種機制。通過Etag，瀏覽器就可以知道現在的快取中的內容是不是最新的，需不需要重新從伺服器上重新下載。

10、使用CDN技術。 
我們上網下載東西的時候經常會看見什麼“南方伺服器”、“北方伺服器”的就是用到了CDN技術來提高下載速度與穩定性。 
CDN的全稱是Content Delivery Network，即內容分發網路。其基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的網際網路基礎之上的一層智慧虛擬網路，CDN系統能夠實時地根據網路流量和各節點的連線、負載狀況以及到使用者的距離和響應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度（來自百度百科）。

11.使用Gzip壓縮文件： 
GZIP編碼是用來改進網頁效能的方法，不僅可以減小儲存空間，還可以減少傳輸所需的時間。將網站中的檔案使用Gzip壓縮後，可以顯著的增加網頁載入速度，同時也可以降低網站的頻寬流量消耗。

12.樣式表文件放在外部呼叫： 
把頁面中需要用到的JavaScript和CSS樣式表文件放在另外的資料夾中，這樣一來在開啟網站其它頁面時就會快取這些呼叫的檔案，從而加快網站頁面的載入速度。

13.給JavaScript檔案減肥： 
這個方法不同於gzip壓縮功能，縮小JavaScript文件有很多方法，比如去除不必要的空格等其他標籤等。減少指令碼檔案後可以顯著的提高網頁的訪問速度。

14.圖片使用height和width屬性 
每個圖片的height和width屬性可以讓瀏覽器在載入圖片之前就知道圖片的長和寬，並預留出指定的長寬待圖片載入後顯示。如果沒有這兩個屬性，瀏覽器還需要在讀取圖片成功後再處理一次頁面佈局樣式，這無疑減慢了網頁載入速度。所以在固定圖片大小的情況下最好都使用上長和寬屬性。

15.CSS檔案壓縮瘦身 
DIV+CSS是現在流利的網頁佈局方式，DIV定義了元素，CSS控制顯示效果。所以往往我們會把CSS寫到另外一個或多個外部連結CSS檔案中，並且CSS檔案程式碼也有很多行。我們可以使用一些CSS壓縮工具來刪除CSS檔案中不必要的多餘內容，如重複定義樣式、空格等來瘦身。可以嘗試使用一下CleanCSS工具來壓縮你的CSS檔案。

16.整合CSS、JS檔案減少HTTP請求次數 
現在的網頁都有多個圖片、CSS外部檔案連結、Javascript外部指令碼連結。所以當訪問一個網頁時瀏覽器需要多次向伺服器請求這些檔案。在請求和載入之間會產生不少的時間差。特別是一些網頁上有多個小圖片、圖示按鈕的網頁，有多少圖片，瀏覽器就需要請求多少將這些小檔案，多將請求這些小圖片檔案將明顯影響網頁的載入速度。所以我們應該儘可能將小圖片拼合一個PNG大圖片上，然後通過座標來顯示圖示。一次請求一個大圖片比多次請求小圖片速度要快不少。同樣，最好將CSS和Javascript儘可能地整合到一個檔案中都有助於加快網頁載入速度。

17.目錄地址後加上斜槓（/） 
如訪客點選訪問這樣一個目錄地址：a.abc.cn/aa，去開啟這個目錄下的index.html文件。當伺服器收到請求後它需要消耗一些時間來分析這是一個檔案還是一個目錄。但是如果我們在最後加上一個斜槓（/），伺服器就知道你是在訪問一個目錄地址，然後就直接載入預設文件index.html或index.PHP就行了。這樣伺服器就不用花時間來分析這個地址，也起到了一定加速的作用。

作者：賴忠標

日期：2018.12.3