打開網頁，用戶最滿意的時間是2-5秒，如果用戶等待超過10秒，99%的用戶會關閉這個網頁。那么，是什么原因會導致網站打開慢？又有什么辦法解決呢？一般來說，http請求過多、網頁過大、服務器性能過差等等都可能導致網站打開慢。從技術層面來分享一些參考解決方法：

原因分析

• 帶寬不足，首先想到的就是自己網速的問題，但是一般網速在1M以上的，打開網頁一般不會是很慢的。網站服務器的帶寬不夠的話，當大量用戶訪問的時候，網頁的加載也是很慢的，這就是網絡的出口端和入口端兩個方面

• 硬件配置低，本機的配置也會是一方面的，但是只要不是老賽揚單核+512M的配置，一般不會是電腦配置的問題。服務器端的配置也是同樣的道理。

• CPU或者是內存被占滿的時候，打開網頁很是會很慢的，因為整個電腦都很慢

• DNS解析慢，域名的解析是需要專門的域名解析服務器來完成的，DNS解析包括往復解析的次數及每次解析所花費的時間，它們兩者的積即是DNS解析所耗費的總時間，在http請求的過程中，域名解析和建立連接占的時間很多。

• JS阻塞請求，寫的js代碼出現問題，解析就會花費很長時間，這兩個js請求之間會出現一個很大的空隙，就會導致這段時間的資源加載都被阻塞住，

• 接受數據時間過長，http請求的大部分時間應該花在后面幾個階段，比如等待響應和接收數據。但是，如果接收數據的時間太長了，長到數百毫秒甚至以秒計算的時候，那也是有問題的。這種情況一般是因為下載的內容太重了，例如大圖片、大腳本等。這類問題可以使用GZIP壓縮、圖片壓縮或者JS/CSS的minify等手段來解決。

• 加載某個資源太慢，如果某個請求比其他的請求多出很多的時間，那么一般情況就是某個資源的加載太慢，導致了整個網頁變慢，原因有可能是：1)資源在第三方站點上，他們很慢；2)這個資源太大了；3)這個資源使用的域名有問題

• 后端代碼問題，主要有代碼冗余、數據庫發生鎖死、動態請求時間過長等，這就需要研發RD(Research and Development)優化一切可以優化的東西了

• 前端頁面請求的資源過多，onload之前如果有幾百行，速度自然會慢的，如果請求的資源不存在，那么速度將會更慢

• 網頁本身中包含了追蹤或者是分析用戶的工具，從而導致網頁的加載時間變的慢，比如之前海盜灣中會給用戶的電腦插入挖礦的js腳本

• 網頁內容的大小(重要)。網頁文件的大小是網站是否能快速打開最重要一個因素，如果說服務器等硬件方面決定不了，強烈建議從這里下手，不管是表格還是DIV+CSS，適當的優化代碼，都能減少網頁大小。盡量優化代碼，用最少的代碼。同時大量錯誤、冗余代碼也是拖慢網站速度之一。

• 大量數據庫操作。小網站在執行大量數據庫操作時，也會影響網站打開速度，這里使asp+access結構的網站尤為明顯，尤其是同時有大量用戶提交評論時，就操作數據庫鎖死，導致網站打不開。

解決方案

一、優化圖片

幾乎沒有哪個網頁上是沒有圖片的。如果你經歷過56K貓的年代，你一定不會很喜歡有大量圖片的網站。因為加載那樣一個網頁會花費大量的時間。

即使在現在，網絡帶寬有了很多的提高，56K貓逐漸淡出，優化圖片以加快網頁速度還是很有必要的。

優化圖片包括減少圖片數、降低圖像質量、使用恰當的格式。

1、減少圖片數：去除不必要的圖片。

2、降低圖像質量：如果不是很必要，嘗試降低圖像的質量，尤其是jpg格式，降低5%的質量看起來變化不是很大，但文件大小的變化是比較大的。

3、使用恰當的格式：請參閱下一點。

因此，在上傳圖片之前，你需要對圖片進行編輯，如果你覺得photoshop太麻煩，可以試試一些在線圖片編輯工具。懶得編輯而又想圖片有特殊的效果？可以試試用過調用javascript來實現圖片特效。

二、圖像格式的選擇

一般在網頁上使用的圖片格式有三種，jpg、png、gif。三種格式的具體技術指標不是這篇文章探討的內容，我們只需要知道在什么時候應該使用什么格式，以減少網頁的加載時間。

1、JPG：一般用于展示風景、人物、藝術照的攝影作品。有時也用在電腦截屏上。

2、GIF：提供的顏色較少，可用在一些對顏色要求不高的地方，比如網站logo、按鈕、表情等等。當然，gif的一個重要的應用是動畫圖片。就像用Lunapic制作的倒映圖片。

3、PNG：PNG格式能提供透明背景，是一種專為網頁展示而發明的圖片格式。一般用于需要背景透明顯示或對圖像質量要求較高的網頁上。

三、優化CSS

CSS疊層樣式表讓網頁加載起來更高效，瀏覽體驗也得到提高。有了CSS，表格布局的方式可以退休了。

但有時我們在寫CSS的時候會使用了一些比較羅嗦的語句，比如這句：

以下為引用的內容： margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;

你可以將它簡化為：

margin: 10px 20px 10px 20px;

又或者這句：

以下為引用的內容： A paragraph of decorated text Second paragraph Third paragraph Forth paragraph

可以用div來包含：

以下為引用的內容： A paragraph of decorated text Second paragraph Third paragraph Forth paragraph

簡化CSS能去除冗余的屬性，提高運行效率。如果你寫好CSS后懶得去做簡化，你可以使用一些在線的簡化CSS工具，比如CleanCSS。

四、網址后加斜杠

有些網址，比如"www.kenengba.com/220"，當服務器收到這樣一個地址請求的時候，它需要花費時間去確定這個地址的文件類型。如果220是一個目錄，不妨在網址后多加一個斜杠，讓其變成www.kenengba.com/220/，這樣服務器就能一目了然地知道要訪問該目錄下的index或default文件，從而節省了加載時間。

五、標明高度和寬度

這點很重要，但很多人由于懶惰或其它原因，總是將其忽視。當你在網頁上添加圖片或表格時，你應該指定它們的高度和寬度，也就是height和width參數。如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。

下面是一個比較友好的圖片代碼：

當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容。從而加載時間快了，瀏覽體驗也更好了。

六、減少HTTP請求數

打開一個網頁的時候，后臺程序的響應并不所需太多時間，等待的時間主要花費在下載網頁元素上了，即HTML、CSS、JavaScript、Flash、圖片等。據統計，每增加一個元素，網頁載入的時間就會增加25-40毫秒(具體取決于用戶的帶寬情況)。

所以，想要提高網頁打開速度，可以降低HTTP請求數，這里提供以下3種方法：

(1)例如用CSS代碼代替一些圖片(比如圓角圖片)，盡可能的減少圖片使用。

(2)合并文件，對于文本文件，可以直接合并內容。如將多個JavaScript文件合并成一個，將多個CSS文件合并成一個。

(3)優化緩存，對于沒有變化的網頁元素(如頁頭、頁尾等)，用戶再次訪問的時候沒有必要重新下載，可以直接從瀏覽器緩存里讀取。

七、樣式表放在網頁Head部分，把JS文件放到網頁底部

經過實際測試，把樣式表(CSS文件)移到網頁的Head部分，可以提高有效頁面的加載速度，讓頁面元素順序顯示。

網頁打開時，所有元素是順序顯示的。但是由于JS具有特殊性，相對其他元素而言，會加載的較慢，在JS文件下載完成之前，其他后面元素的順序顯示將被阻塞，因此把JS文件盡量放在底部，意味著內容能被快速顯示。

八、使用CDN(ContentDeliveryNetwork，內容分發網絡)

CDN由一系列分散到各個不同地理位置上的Web服務器組成，它根據和用戶在網絡上的靠近程度來指定某臺服務器響應用戶的請求。當你的網站圖片很多事，就一樣要使用CDN了，比如現在的電商網站，幾乎都在使用CDN。很多CSS樣式框架以及js框架都提供了CDN服務，比如bootstrap等等。

九、壓縮網頁元素

顯然，網頁中的元素越小，下載所需的時間就越少。現在比較成熟和流程的壓縮網頁的方式是通過Gzip壓縮，一般可以將網頁文本內容減少60%以上。

十、把樣式表和JS腳本放到外部文件中

雖然我們可以將樣式表和JS腳本直接寫入網頁HTML中，能夠減少外部文件調用數量，但是這樣做會增加頁面的文件大小。將樣式表和JS腳本放到外部文件中，用戶首次訪問時也許會有點慢，但是后續在訪問網站時，用戶直接通過瀏覽器緩存就可以用，從而達到減少HTTP請求數的目的，為最優的做法。

此外，在選擇服務器空間的時候，要注意服務器空間的性能，有時候，慢，并不是網站程序的問題，有可能是服務器空間太差勁了，不足以承擔高并發。

其它小技巧

1、去除不必要加載項。

2、如果在網頁上嵌入了其它網站的widget，如果有選擇余地，一定要選擇速度快的。

3、盡量用圖片代替flash，這對SEO也有好處。

4、有些內容可以靜態化就將其靜態化，以減少服務器的負擔。

5、統計代碼放在頁尾。

6、盡量不要用一個很小的圖片當背景，這樣做會加大客戶端CPU處理時間

總結

以上是生活随笔為你收集整理的thymeleaf加载不了js引用_网站首页加载慢解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。