【網站加速】網站如何提高網頁打開速度？

問題：網站如何提高網頁打開速度？

 

一、減小頁面請求： 
從WEB運行原理上講，IIS請求是無狀態的，在服務器端一直是鏈接和關閉的不斷進行着，若是能減小服務器請求，總的時間將會減小。 
以前我下載163郵箱的登錄頁面的圖片時發現，它們的只用到了一個圖片來完成整個頁面的全部圖片，當時我就納悶了，這跟平時作的網站不同呀。然來這樣作減小瀏覽器的請求次數，用httpwatch你會發現請求的總時間大大減小了。一樣的想法，在作css樣式，JavaScript代碼的時候也要作到儘量的放在一個文件下來減小WEB請求。

二、頁面壓縮技術，給咱們JS，HTML代碼進行瘦身。 
jQuery 做爲JS最輕量級的類庫，它的原類庫是242KB，壓縮後的它竟只有91.6KB。 常見的壓縮工具備Google Closure Compiler、YUI Compressor、JsPacker、gzip。我經常使用的是gzip，由於它的壓縮率是最高的。用jdk壓縮後它會把一些空格去掉，把咱們很長的變量名換成換成很短的字母來代替。

三、樣式、行爲、結構分離。 
當第一次訪問頁面的時候，用戶就能夠把CSS,JS代碼下載下來，這樣作雖然第一次使網頁加載的速度變慢了，但後面的頁面將快不少。當用戶訪問這個網站的其它的頁面時，因爲其它頁面也引用了這個CSS樣式和JS代碼。瀏覽器發現它已經下載好了，下一次就能夠不用下載了。這樣就作到了一次下載，後續速度的效果。

四、使用存儲過程 
在運行存儲過程前，數據庫已對其進行了語法和句法分析，並給出了優化執行方案。這種已經編譯好的過程可極大地改善SQL語句的性能。因爲執行SQL語句的大部分工做已經完成，因此存儲過程能以極快的速度執行。這種預編譯的sql語句就能夠直接執行而節省了很大一部分查詢的時間。

五、一些細節： 
把CSS樣式放在頭部，若是JS不少的話，把js代碼放在尾部。這樣作能夠儘量的先加載頁面的DOM結構，而後才能夠級用戶體驗。若是JS不少的大的話，頁面都沒加載完，何來用戶體驗之說呢。

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

七、儘可能少使用樣式工具爲咱們生成的頁面樣式代碼，本身動手把樣式寫在樣式文件裏。儘可能寫得通用些。

八、頁面緩存 
在大型的門戶網站都用到了緩存技術，它是以空間換時間的技術。 
緩存主要是爲了提升數據的讀取速度。由於服務器和應用客戶端之間存在着流量的瓶頸，因此讀取大容量數據時，使用緩存來直接爲客戶端服務，能夠減小客戶端與服務器端的數據交互，從而大大提升二次頁面的訪問速度的程序的效率。

九、配置網站的實體標籤: 
這個Etag不是給用戶用的，而是給瀏覽器緩存用的。Etag是服務器告訴瀏覽器緩存，緩存中的內容是否已經發生變化的一種機制。經過Etag，瀏覽器就能夠知道如今的緩存中的內容是否是最新的，需不須要從新從服務器上從新下載。

十、使用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