有一種常見(jiàn)的情況，同樣的服務(wù)器，網(wǎng)站與網(wǎng)站之間的打開(kāi)速度也千差萬(wàn)別，這就和網(wǎng)站的制作工藝有相當大的關(guān)系；本節重點(diǎn)講一下網(wǎng)站制作工藝優(yōu)化。
我們可以大致將影響網(wǎng)絡(luò )速度的因素分為五個(gè)來(lái)進(jìn)行分別優(yōu)化：
一、服務(wù)器硬件配置和設置；
二、服務(wù)器的線(xiàn)路及帶寬；
三、用戶(hù)電腦的配置和設置；
四、用戶(hù)的線(xiàn)路及帶寬；
五、網(wǎng)站制作工藝。
我們看到，影響網(wǎng)速的因素大概是這五個(gè)部分，而往往很多時(shí)候，服務(wù)器、用戶(hù)的電腦配置和線(xiàn)路屬性是無(wú)法選擇的，所以我們這篇文章不細談帶寬和服務(wù)器硬件方面的問(wèn)題。重點(diǎn)談一下通過(guò)網(wǎng)站制作工藝的優(yōu)化來(lái)達到網(wǎng)站極限提速的方法和思路，這其中是很多站長(cháng)平時(shí)完全忽略的。
當然，程序設計不當也會(huì )造成網(wǎng)頁(yè)速度變慢。但是程序設計的種類(lèi)和運行環(huán)境千差萬(wàn)別，造成的原因也十分復雜，本章也無(wú)法一一敘述。
一 瀏覽器的渲染速度優(yōu)化：
首先要說(shuō)的是，瀏覽器的渲染很多無(wú)法通過(guò)直觀(guān)的試驗來(lái)證明，只能推斷和觀(guān)察結果來(lái)糾正和解決，所以，我總結的方法，未必全部符合實(shí)際原理。
我們學(xué)習CSS，一開(kāi)始只講究實(shí)現結果，從未注意過(guò)CSS的渲染過(guò)程，這就造成了很多不必要的渲染浪費。在沒(méi)有任何程序影響下的頁(yè)面，如果出現網(wǎng)站打開(kāi)卡、打開(kāi)后機器變慢、打開(kāi)過(guò)程中顯示了內容卻又變白屏再讀一遍、點(diǎn)擊不順暢、上下左右拖動(dòng)花屏，重渲染的主要原因。
1.CSS，一定要寫(xiě)在之間，讓瀏覽器先緩存到所有CSS，也便于瀏覽器讀取HTML結構時(shí)可以順利渲染，如果在之間出現了CSS樣式定義，瀏覽器會(huì )重新渲染一遍網(wǎng)頁(yè)。影響到網(wǎng)頁(yè)打開(kāi)速度;
至于是內出現了重定義樣式才重新渲染，還是一旦出現樣式定義就重新渲染，目前我也沒(méi)有辦法證實(shí)。但應盡量避免這種情況。
2．當頁(yè)面文檔中大量出現需要展開(kāi)、收起的樹(shù)形結構（樹(shù)形目錄）的時(shí)候，最容易出現CSS渲染問(wèn)題。我們所說(shuō)的展開(kāi)、收起，其實(shí)是網(wǎng)頁(yè)元素的顯示和隱藏，由于某些瀏覽器設計缺陷，展開(kāi)一個(gè)隱藏的元素，實(shí)際上消耗很大，原因可能是display:none并沒(méi)有真正隱藏元素，很可能即使是隱藏層，但該元素屬性仍然需要逐一渲染。
這種情況，一般多見(jiàn)于樹(shù)形目錄過(guò)多過(guò)于復雜的時(shí)候出現，點(diǎn)擊一次半天不展開(kāi)，機器出現緩慢。
3．和同上的情況一樣，border:0這種屬性，仍然會(huì )渲染邊框樣式。所以正確的寫(xiě)法應該是：border:none，避免無(wú)意義的渲染；
4．JS也可能會(huì )造成重渲染，所以我們應盡量整合JS，并將所有JS放置到頁(yè)末之前。如果我沒(méi)記錯，即使JS在頁(yè)頭，現代瀏覽器大多都會(huì )默認最后加載JS；
5．所有圖片必須指定高寬屬性，否則瀏覽器也會(huì )重新渲染網(wǎng)頁(yè)。試想，瀏覽器在不知道圖片高寬的情況下，瀏覽器無(wú)法為圖片在頁(yè)面上預留具體位置，而此時(shí)HTML和CSS樣式也在同時(shí)下載。瀏覽器顯然無(wú)法有效組織顯示結果，只有當圖片完全下載后才能確定圖片的高寬，勢必造成瀏覽器的重新渲染；
6．背景圖過(guò)小也會(huì )造成渲染困難。我們設想一下，將一個(gè)1px高寬的背景圖作為背景填充滿(mǎn)整個(gè)屏幕，需要進(jìn)行多少次計算處理。所以，我們以前學(xué)的“圖片盡量小”，其實(shí)是有誤區存在的；
7．盡量少用幀數過(guò)多過(guò)快的FLASH，GIF動(dòng)畫(huà)來(lái)裝飾網(wǎng)頁(yè)。這對網(wǎng)頁(yè)打開(kāi)速度幾乎是致命的；
8．少用濾鏡，濾鏡會(huì )占用更多的機器資源，也可能存在很多兼容性問(wèn)題。應謹慎使用；
9．盡量少用TABLE結構來(lái)布局。因為用FW\PS可以很方便的直接導出一個(gè)網(wǎng)頁(yè)文件，所以老式網(wǎng)站都是采用TABLE布局。TABLE有一個(gè)廣受詬病的問(wèn)題：之后要遇到才會(huì )完整顯示內容。如果表格中內容過(guò)多，網(wǎng)頁(yè)會(huì )半天不顯示。這也是TABLE布局被淘汰的原因之一；
10．CSS子選擇符。CSS子選擇符會(huì )造成一次瀏覽器的篩選和定位計算，所以很多文章上都不推薦使用子選擇符定位樣式。
咨詢(xún)電話(huà)：0731-88571521 13637482004
