當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

简单网站优化

發(fā)布時間：2025/3/20 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了简单网站优化小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、為什么要網(wǎng)站優(yōu)化

1.1、大型網(wǎng)站的特點

高訪問量
同時在線人數(shù)多
數(shù)據(jù)量龐大
數(shù)據(jù)操作頻繁

1.2、網(wǎng)站性能測試指標（用戶角度）

日訪問量
同時在線人數(shù)
最大并發(fā)連接數(shù)
訪問響應(yīng)時間

1.3、網(wǎng)站性能個體體現(xiàn)

首屏?xí)r間：一個網(wǎng)站被瀏覽器上部，800*600區(qū)域充滿所需要的時間
網(wǎng)頁訪問可用性:用戶訪問網(wǎng)頁的成功率。
DNS時間：瀏覽器將地址發(fā)送給DNS服務(wù)器，DNS服務(wù)器根據(jù)地址返回IP到瀏覽器，瀏覽器得到IP地址，此為DNS時間
建立連接時間：包含DNS時間后，瀏覽器重到IP地址后，再將客戶投訴請求發(fā)送至WEB服務(wù)器，然后建立連接，這時建立連接時間結(jié)束
重定向時間：網(wǎng)頁間跳轉(zhuǎn)時間，如檢查是否是會員，不是就跳轉(zhuǎn)登錄
第一個數(shù)據(jù)包時間：瀏覽器發(fā)送HTTP請求結(jié)束開始，到接收到WEB服務(wù)器返回的第一個數(shù)據(jù)包的消耗時間
總下載時間：頁面所內(nèi)容下載所用的時間，網(wǎng)頁的總耗時
錯誤情況：網(wǎng)站的錯誤情況代表網(wǎng)站的運維質(zhì)量。

1.4、客戶投訴問題

網(wǎng)速慢
個別頁面打開時間過久，或者打不開

二、使用YSlow插件分析網(wǎng)站性能

YSlow插件，是yahoo是運行在FireFox瀏覽器上面的，同時要有FireBug才可以運行

三、網(wǎng)頁內(nèi)容優(yōu)化

3.1、減少HTTP請求

合并文件(js或者css文件)
css Sprites圖片拼合（常用）
圖片地圖

3.2、減少DNS查找次數(shù)

減少主機名的數(shù)量可以減少DNS查找次數(shù)，
減少DNS查找次數(shù)可以節(jié)省響應(yīng)時間
減少主機名會減少頁面當(dāng)時并行下載的數(shù)量，但是這樣又會增加響應(yīng)時間
原則：將這些頁面中的內(nèi)容分割成至少2部分，但不超過4部分。結(jié)果：減少DNS查找次數(shù)與保持并行下載兼顧

3.3、避免跳轉(zhuǎn)

301代碼、302代碼。默認不緩存，須增加Expires或者Cache-Control來指定緩存

開時時注意不要忽略URL本該有的斜杠(/);

3.4、可緩存的AJAX

設(shè)置在客戶端緩存

3.5、減少DOM元素數(shù)量

DOM元素過多，會使遍歷DOM的效率慢。

不用移除內(nèi)容，而是替換，精簡元素標簽

減少DIV元素的嵌套

3.6、盡量避免使用iframe

優(yōu)點：

解決加載緩慢的第三方內(nèi)容
只需要修改一個iframe內(nèi)容，便可以改變所有應(yīng)用該iframe頁面

缺點：

即使內(nèi)容為空，加載也需要時間
?阻止頁面加載
沒有語意

3.7、避免404錯誤

錯誤的加載會破壞并行加載

瀏覽器會把試圖在返回的404響應(yīng)內(nèi)容中找到可能有用的部分當(dāng)作javascript代碼來執(zhí)行

四、圖片優(yōu)化

4.1、使用工具優(yōu)化圖片

檢查你的GIF圖片當(dāng)中圖像顏色的數(shù)量是否和調(diào)色板規(guī)格一致，如只使用到了4種顏色，而調(diào)色板中有256中規(guī)格，說明還有優(yōu)化的空間

嘗試把GIF格式轉(zhuǎn)換成PNG格式，看看是否有節(jié)省空間

在所有有PNG圖片上運行pngcruch或者其它的PNG優(yōu)化工具

在所有JPEG圖片上運行jpegtran，可以對圖片中出現(xiàn)的鋸齒等無損進行操作，同時它還可以優(yōu)化和清除圖當(dāng)中的注釋以及其它的無用信息

最后，把所有的圖片紡一的jpg或者是gif或者png格式，行適當(dāng)?shù)霓D(zhuǎn)，可以達到很好優(yōu)化效果，

盡量避免使用bmp格式，對用戶上傳的格式進行一個格式轉(zhuǎn)換可以達到很好的壓縮效果

Jpegtran

JPEG的壓縮工具有jpegtran和jpegoptim，這兩款工具的壓縮效果幾乎沒有區(qū)別，在這里我們推薦使用jpegtran，相比后者，jpegtran可以進行progressive編碼，使圖片漸進式的展現(xiàn)，先顯示模糊的圖片，再逐步清晰。

推薦命令行參數(shù)：

jpegtran –copy none –optimize -progressive -outfile out.jpg in.jpg

想知道這些參數(shù)的具體作用，可使用命令“jpegtran –h”了解，

4.2、使用合理的圖片尺寸

不要使用一個比實際需要大得多的圖片，不要在網(wǎng)頁中縮放圖片

4.3、favicon.ico要小而且要可緩存

favicon.ico位為網(wǎng)店的根目錄

favicon.ico文件不要缺少，而文件要盡量小，可以緩存

4.4、使用css Sprites優(yōu)化頁面小圖片

CSS Sprites技術(shù)中，水平排列圖片會比垂直排列效果更好

顏色相近的圖片組合在一起,可以降低顏色數(shù)

合理的應(yīng)用CSS Sprites技術(shù)，不要在Spirite的圖像中間留有較大空隙

五、優(yōu)化CSS和JavaScript

5.1、把樣式表置于頂部

開發(fā)階段將樣式和代碼分離，開發(fā)完畢后再將樣式放在頁面的<head>頭部中

5.2、使用<link>代替@import

用<link>代替@import來實現(xiàn)外部樣式表的導(dǎo)入

5.3、避免使用濾鏡

避免使用濾鏡，使用PNG格式的圖片來代替，主流瀏覽器一般都支持這種格式，必要時使用CSS Hack來處理IE6瀏覽器下的效果

5.4、精簡CSS和JavaScript

精簡工具:

JSMin:javascript

YUI Compressor: javascript也可以用來精簡CSS

精簡代碼，采用縮寫

5.5、把JavaScript放在HTML的底部

把腳本放在HTML頁面底部

(document.write()輸出語句例外)

六、優(yōu)化Cookie

6.1、縮小Cookies大小

去除不必要的Cookie
設(shè)置合理的過期時間

6.2、避免使用全局域名的Cookie

應(yīng)該以圖片等頁面元素使用沒有Cookie的域名

七、服務(wù)器端優(yōu)化

7.1、使用內(nèi)容分發(fā)網(wǎng)絡(luò)

Content Delivery Network簡稱為CDN

使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))，但成本高

7.2、為文件頭指定Expires或者Cache-Control

靜態(tài)內(nèi)容設(shè)置：Expires的值為"Never expire"(永不過期)

動態(tài)內(nèi)容設(shè)置：Cache-Control設(shè)置合適的值如"no-cache"

Expires文件頭經(jīng)常用于圖像文件，但是應(yīng)該在所有的內(nèi)容當(dāng)中使用，包括腳本、樣式表和Flash等

7.3、使用Gzip壓縮文件內(nèi)容

開啟應(yīng)用服務(wù)器端的Gzip壓縮設(shè)置

在Tomcat中啟用Gzip壓縮：

修改%TOMCAT_HOME%/conf/server.xml，修訂節(jié)點如下：

<Connector port="8080" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443"compression="on"compressionMinSize="2048"noCompressionUserAgents="gozilla,traviata" compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/> 從上面節(jié)點的屬性可以看出，要使用gzip壓縮功能，你需要在Connector節(jié)點中加上如下屬性compression="on" 打開壓縮功能 compressionMinSize="50" 啟用壓縮的輸出內(nèi)容大小，默認為2KB noCompressionUserAgents="gozilla, traviata" 對于以下的瀏覽器，不啟用壓縮 compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain"　哪些資源類型需要壓縮

7.4、使用GET來完成AJAX請求

POST:先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)
GET:一個TCP包

獲取數(shù)據(jù)時建議使用GET,相反，發(fā)送并在服務(wù)端保存數(shù)據(jù)時才使用POST

IE中URL最大長度為2K,如果獲取的數(shù)據(jù)大于2K，就不能使用GET，

八、開發(fā)角度看優(yōu)化

動態(tài)頁面的弊端：

服務(wù)器壓力大
頁面響應(yīng)時間長
安全問題

實施靜態(tài)化的原因：

提高訪問速度
減輕服務(wù)器壓力
加強安全性
利于搜索引擎收錄

九、如何靜態(tài)化網(wǎng)站

目前絕大多數(shù)網(wǎng)站都是采用：模板技術(shù) 來對網(wǎng)站靜態(tài)化

9.1、網(wǎng)站靜態(tài)化的好處

效率方面：

純靜態(tài)化HTML頁面：以HTM/HTML結(jié)尾，效率最高，消耗最小，速度最快
減輕服務(wù)器的壓力：相比動態(tài)頁面要執(zhí)行腳本，數(shù)據(jù)庫操作，靜態(tài)頁面只需要將相應(yīng)的靜態(tài)頁面返回給客戶端
利于搜索引擎收錄：動態(tài)頁面的生成是采用數(shù)據(jù)庫內(nèi)容，所以網(wǎng)頁內(nèi)容主題的永恒性并不能保證，這樣就造成了搜索引擎的閱讀困難，也就是搜索引擎抓不住一個永恒的主題，因此不能輸入到搜索引擎的緩存當(dāng)中。別外，動態(tài)連接，存在一個信任問題，用記以及搜索引擎無法確定這個頁面會一直存在。搜索引擎對于靜態(tài)鏈接就更加友好，所以把動太網(wǎng)址進行URL重寫使其靜態(tài)化，是一個非常重要的優(yōu)化技巧
提高服務(wù)器的性能：動態(tài)頁面要經(jīng)常讀取數(shù)據(jù)庫，而靜態(tài)頁面只需要將相應(yīng)的靜態(tài)頁面返回給客戶端

安全方面：

防SQL注入：靜態(tài)頁面根本就不存在數(shù)據(jù)庫操作，杜絕了SQL注入的可能性
網(wǎng)站出錯時，不影響網(wǎng)站正常訪問。動態(tài)頁面：如果發(fā)生錯誤或者是數(shù)據(jù)庫出現(xiàn)了問題，那么從數(shù)據(jù)庫讀取數(shù)據(jù)的頁面就必然無法正常的訪問了。而靜態(tài)頁面只會在生成靜態(tài)頁面時調(diào)用數(shù)據(jù)庫操作，生成之后就不會對數(shù)據(jù)庫進行任何操作了，因此媽便是數(shù)據(jù)庫崩潰了，用戶仍然可以訪問到已經(jīng)存在的靜態(tài)頁面

9.2、靜態(tài)化實現(xiàn)方式-模板技術(shù)

對網(wǎng)站必要的部分實行靜態(tài)化操作,同一個網(wǎng)站下的不同網(wǎng)頁，風(fēng)格一般都要保持一致，不同的只是內(nèi)容，

讓靜態(tài)化的時候能夠重用頁面的整體框架，風(fēng)格等這些就是模板

9.3、JAVA中靜態(tài)化操作

Velocity或者FreeMarker等模板框架來實現(xiàn)。

它允許任何人僅簡單的使用模板語言，來引用由JAVA代碼定義的對象。

當(dāng)Velocity應(yīng)用于web開發(fā)時，界面設(shè)計人員可以和java程序開發(fā)人員，同步開發(fā)一個遵循MVC架構(gòu)的WEB站點，也就是說，頁面設(shè)計人員可以只關(guān)注頁面的顯示效果，而java程序開發(fā)人員只關(guān)注業(yè)務(wù)邏輯編碼的實現(xiàn)。

Velocity將java代碼從web頁面中分離出來，為web站點的長期維護提供了便利

十、初識MVC

MVC:mode view ?controller

十一、優(yōu)化數(shù)據(jù)庫查詢

11.1、在查詢頻繁的列上添加合適的索引

判斷并建立必要的索引：使所創(chuàng)建的索引對數(shù)據(jù)的工作效率提高有所幫助
對索引使用一些規(guī)則：創(chuàng)建索引時，應(yīng)該與實際的查詢相結(jié)合
合登理的索引對SQL語句的意義：確保其得到了真正的使用，能發(fā)揮作用

11.2、盡量少用IN或者NOT IN

在where子句中盡量少使用IN 或者NOT IN?

可以使用EXIST 或者NOT EXIST來代替IN或者NOT IN

11.3、盡量少用通配符*

查詢語句寫上字段名，盡量不使用*如：select top 50 col1 from table1

11.4、盡量少用LIKE

使用LIKE會導(dǎo)致建立的索引效，降低查詢效率

十二、性能監(jiān)測

12.1、為什么需要監(jiān)測網(wǎng)站的性能

網(wǎng)站的性能是隨著瀏覽量以及硬件設(shè)施的不同而發(fā)生變化的，網(wǎng)站在運營前或者運營期間有必要對網(wǎng)站整體性能進行監(jiān)測

12.2、監(jiān)測階段

網(wǎng)站開發(fā)期間
網(wǎng)站運營期間

12.3、監(jiān)測軟件

網(wǎng)站開發(fā)期間：使用LoadRunner等專業(yè)的負載測試工具

使用LoadRunner等專業(yè)的負載測試工具優(yōu)點：

輕松創(chuàng)建虛擬用戶：Virtual User Generator輕松創(chuàng)建虛擬用戶，以虛擬用戶的方式模擬真實用戶的業(yè)務(wù)操作行為
創(chuàng)建真實的負載：Controller,來設(shè)置業(yè)務(wù)流程組合與虛擬用戶數(shù)量，很快的組織起多用戶的測試方案
定位性能的問題：LoadRunner內(nèi)含集成的實時監(jiān)測器，在負載測試任何時間，都可以觀測到應(yīng)用系統(tǒng)的運行性能
分析結(jié)果以精確定位問題所在：測試完畢合，會收集匯總所有數(shù)據(jù)并生成高級的測試報告。
重復(fù)測試保證系統(tǒng)發(fā)布的高性能：Controller，允許重復(fù)執(zhí)行與出錯修改前的相同測試方案

網(wǎng)站運營期間：監(jiān)控寶，美圖的Service Uptime,Uptime Robot等

總結(jié)

以上是生活随笔為你收集整理的简单网站优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。