987
如何提高網頁加載速度
1、減少頁麵請求：
從WEB運行原理上講，IIS請求是無狀態的，在服務器端一直是連接和關閉的不斷進行著，如果能減少服務器請求，總的時間將會減少。
之前我下載163郵箱的登陸頁麵的圖片時發現，它們的隻用到了一個圖片來完成整個頁麵的所有圖片，當時我就納悶了，這跟平時做的網站不一樣呀。然來這樣做減少瀏覽器的請求次數，用httpwatch你會發現請求的總時間大大減少了。同樣的想法，在做css樣式，JavaScript代碼的時候也要做到盡可能的放在一個文件下來減少WEB請求。
2、頁麵壓縮技術，給我們js，HTML代碼進行瘦身。
jQuery 作為JS最輕量級的類庫，它的原類庫是242KB，壓縮後的它竟隻有91.6KB。 常見的壓縮工具有Google Closure Compiler、YUI Compressor、JsPacker、gzip。我常用的是gzip，因為它的壓縮率是最高的。用jdk壓縮後它會把一些空格去掉，把我們很長的變量名換成換成很短的字母來代替。
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.目錄地址後加上斜杠（/）
如訪客點擊訪問這樣一個目錄地址：https://www.zhen.com/dajiaguifan，去打開這個目錄下的index.html文檔。當服務器收到請求後它需要消耗一些時間來分析這是一個文件還是一個目錄。但是如果我們在最後加上一個斜杠（/），服務器就知道你是在訪問一個目錄地址，然後就直接加載默認文檔index.html或index.PHP就行了。這樣服務器就不用花時間來分析這個地址，也起到了一定加速的作用。
最後更新：2017-06-10 14:32:04