影響網頁載入速度的因素有哪些及優化方案
硬體因素包括：伺服器端、客戶端和網速。伺服器端主要包括：伺服器的地 域，是否雙線，處理能力等等；客戶端的因素主要包括：使用者的硬體配置、使用者使用的瀏覽器、是否有惡意外掛病毒等等；網速當然也是一個制約網頁開啟速度的重 要因素。
硬體因素的改進有其先天的障礙，比如：我們不能強制使用者使用多大的帶 寬，或者要求使用者使用某種瀏覽器等。相對於網站的所有者或者開發者來說，可以選擇雙線、高處理能力、近地域的伺服器。
軟體因素是指：製作網站採用的不同技術。主要包括：
第一：頁面是動態還是靜態。動態頁面.jsp或者.asp等等ASP、PHP、JSP等程式實現了網頁資訊的動態互動，執行起來的確非 常方便，因為它們的資料互動性好，能很方便地存取、更改資料庫的內容，使網站“動”起 來，如：論壇、留言板等。但是這類程式必須先由伺服器執行處理後，生成HTML頁面，然後再“送”往 客戶端瀏覽，這就不得不耗費一定的伺服器資源。如果在虛擬主機上過多地使用這類程式，網頁顯示速度肯定會慢。
第二：頁面的HTML代 碼量。瀏覽網頁實際上是將虛擬主機中的網頁內容下載到本地硬碟，再用瀏覽器解釋檢視的。下載網頁的快慢在顯示速度上佔了很大比 重，所以，網頁本身所佔的空間越小，那麼瀏覽速度就會越快。
第三：對圖片的處理。包括圖片採用的格式、圖片的數量、圖片的大小等。根 據圖片的清晰度要求、大小透明度等等分別設定不同的圖片格式如jpg、gif、png，可以適當的減少圖片的大小；圖片的大小和程式碼量 一樣，因為loading量 的不同會影響網頁的開啟速度；圖片的數量是影響頁面開啟速度關鍵因素，首先：圖片數量多了，需要的的loading量必然增大；其次：最重要的是，瀏覽器每次下載圖片都要去伺服器提 交一次請求，伺服器響應後找到相應的圖片地址，才會把圖片下載到本地硬碟。圖片數量越多，需要伺服器請求的連結也就越多，會給伺服器造成較大的壓力，速度 會明顯變慢。
第四：CSS/JS的 程式碼量和引入方式。CSS（控制頁面的顯 示，JS用於製作頁面的動態 效果，同樣需要使用者下載到機器上後再被瀏覽器解析執行。CSS/JS程式碼量也會影響網頁的開啟速度。而一直被大家忽視的引入方式，也是影響網速重要原因，引入方式的不同關係到解析程式碼中的無用程式碼比 例，無用程式碼引入越多，解析越慢。不同的引入方式也關係到整站的程式碼量、後期優化工作量等。
第五：HTML製作採用的技術。用Table佈局和用Div佈局的同一頁面，使用Table佈局的頁面比使用Div佈局的頁面開啟速度要慢很多，並且使用者體驗差。原因是，Table佈局的頁面只有在整個Table裡的內容都loading完成時才一下顯示出來，而用Div佈局的頁面會逐塊顯示。因此用Div佈局的同一頁面能留住更多的使用者。
解決方案：
1.採用背景圖合併。背景圖合併技術是一門DIV+CSS的熟練使用和PS合圖相結合的技術。通過精確到1px的CSS設定，使用PS合成背景圖片，特別是小圖合併，在完全不改變原來效果的情況下，大量減少頁面需loading圖片數量，從而大幅降低了伺服器的壓力，提高頁面的開啟速度。
2.外部引入CSS樣式。採用這種方法，最能體現DIV+CSS中的內容與顯示分離的思想。我們可以通過一個CSS檔案控制多個不同的頁面，對於整站而言，減少了大量的程式碼；同時，修改一個CSS檔案就可以改變多個頁面的顯示效果，因此這種方式也是最易 改版維護的方法；最後，因為直接寫在頁面的樣式控制CSS最少， 所以這種方法也是頁面程式碼最簡潔的方法，有利於前後端人員之間的配合。
3.用div+css佈局，不要用table佈局.
Div+Css佈局方法相對於前兩種來 說已經比較普及，優勢也是對比使用Table佈局而言。主要有以下的特點：
（1）大大縮減頁面程式碼，提高頁面瀏覽速度,縮減頻寬成本;（2.）結構清晰，容易被搜尋引擎搜尋到。是 做SEO的基礎技術。
（3.）縮短改版時間。只要簡單的修改幾個CSS檔案就可以重新設計一個有成百上千頁面的站點。
（4）強大的字型控制和排版能力。CSS控制字型的能力比糟糕的FONT標籤好多了，有了CSS，我們不再需要用FONT標籤或者透明的1 px GIF圖片來控制標題，改變字型顏色，字型樣 式等等。
（5）CSS非常容易編寫。你可以象寫html程式碼一樣輕鬆地編寫CSS。
（6）提高易用性。使用CSS可以結構化HTML，例如：<p>標籤只用來控制段落，heading標籤只用來控制標題，table標籤只用來表現格式化的資料等等。你可以增 加更多的使用者而不需要建立獨立的版本。
（7）可以一次設計，隨處釋出。你的設計不僅僅用於web瀏覽器，也可以釋出在其他裝置上，比如PowerPoint。
（8）更好的控制頁面佈局。
（9）表現和內容相分離。將設計部分剝離出來放在一個獨立樣式檔案中，你可以減少未 來網頁無效的可能。
（10）更方便搜尋引擎的搜尋。用只包含結構化內容的HTML代替巢狀的標籤，搜尋引擎將更有效地搜尋到你的 內容，並可能給你一個較高的評價(ranking)。
（11）Table 佈局靈活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 還可以 ul li ……但標準語法最好有序的寫。
（12）Table佈局中， 垃圾程式碼會很多，一些修飾的樣式及佈局的程式碼混合一起，很不利於直觀。而Div更能體現樣式和結構相分離，結構的重構性強。
（13）以前一些非得通過圖 片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。
（14）使頁面的字型變得更 漂亮，更容易編排，使頁面真正賞心悅目。
（15）你可以輕鬆地控制頁 面的佈局 。
（16）你可以將許多網頁的風格格式同時更新，不用再一頁一頁 地更新了。你可以將站點上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的行，那麼整個站點的所有頁面都會隨之發生變動。
4.根據需求的不同使用不同的圖片格式。
圖片影響網頁開啟速度主要從三個方面：圖片的數量、圖片的大小、圖片的顏色種類。常見格式有.jpg,.gif,.png。Png格式支援半透明，我們在需要半透明的情況下使 用，並且同時要注意ie6裡 不相容的情況。Jpg的顏色 值較多，一般是照片、廣告圖等較大效果較突出的圖片使用的格式。Gif顏色值較少，最多支援256種顏色，一般是小圖、邊角、背景燈圖片採用的格式。另外我們可以通過設定圖片的質量來改變圖片的大小，同樣影響頁面的開啟速度。
5.刪除冗餘程式碼。
手寫程式碼和用工具生成的程式碼又很大的不同，用工具生成的程式碼往往有好多的冗餘無用的程式碼，用table佈局實現同一效果 的程式碼量也比DIV+CSS實 現的程式碼量大很多。所以最好手寫程式碼。
6.優化精簡程式碼。例：CSS程式碼精簡寫法：把background-color，background-position，background-image等合成一個background來設定。把padding-top，padding-right，padding-bottom，padding-left合成一個padding來使用
7.動態效果儘量使用js而不用flash。
8.使用對系統壓力較小的演算法。