简单网站优化
一、為什么要網站優化
1.1、大型網站的特點
- 高訪問量
- 同時在線人數多
- 數據量龐大
- 數據操作頻繁
1.2、網站性能測試指標（用戶角度）
- 日訪問量
- 同時在線人數
- 最大并發連接數
- 訪問響應時間
1.3、網站性能個體體現
- 首屏時間：一個網站被瀏覽器上部，800*600區域充滿所需要的時間
- 網頁訪問可用性:用戶訪問網頁的成功率。
- DNS時間：瀏覽器將地址發送給DNS服務器，DNS服務器根據地址返回IP到瀏覽器，瀏覽器得到IP地址，此為DNS時間
- 建立連接時間：包含DNS時間后，瀏覽器重到IP地址后，再將客戶投訴請求發送至WEB服務器，然后建立連接，這時建立連接時間結束
- 重定向時間：網頁間跳轉時間，如檢查是否是會員，不是就跳轉登錄
- 第一個數據包時間：瀏覽器發送HTTP請求結束開始，到接收到WEB服務器返回的第一個數據包的消耗時間
- 總下載時間：頁面所內容下載所用的時間，網頁的總耗時
- 錯誤情況：網站的錯誤情況代表網站的運維質量。
1.4、客戶投訴問題
- 網速慢
- 個別頁面打開時間過久，或者打不開
二、使用YSlow插件分析網站性能
YSlow插件，是yahoo是運行在FireFox瀏覽器上面的，同時要有FireBug才可以運行
三、網頁內容優化
3.1、減少HTTP請求
- 合并文件(js或者css文件)
- css Sprites圖片拼合（常 用）
- 圖片地圖
3.2、減少DNS查找次數
- 減少主機名的數量可以減少DNS查找次數，
- 減少DNS查找次數可以節省響應時間
- 減少主機名會減少頁面當時并行下載的數量，但是這樣又會增加響應時間
- 原則：將這些頁面中的內容分割成至少2部分，但不超過4部分。結果：減少DNS查找次數與保持并行下載兼顧
3.3、避免跳轉
301代碼、302代碼。默認不緩存，須增加Expires或者Cache-Control來指定緩存
開時時注意不要忽略URL本該有的斜杠(/);
3.4、可緩存的AJAX
設置在客戶端緩存
3.5、減少DOM元素數量
DOM元素過多，會使遍歷DOM的效率慢。
不用移除內容，而是替換，精簡元素標簽
減少DIV元素的嵌套
3.6、盡量避免使用iframe
優點：
- 解決加載緩慢的第三方內容
- 只需要修改一個iframe內容，便可以改變所有應用該iframe頁面
缺點：
- 即使內容為空，加載也需要時間
- ?阻止頁面加載
- 沒有語意
3.7、避免404錯誤
錯誤的加載會破壞并行加載
瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當作javascript代碼來執行
四、圖片優化
4.1、使用工具優化圖片
檢查你的GIF圖片當中圖像顏色的數量是否和調色板規格一致，如只使用到了4種顏色，而調色板中有256中規格，說明還有優化的空間
嘗試把GIF格式轉換成PNG格式，看看是否有節省空間
在所有有PNG圖片上運行pngcruch或者其它的PNG優化工具
在所有JPEG圖片上運行jpegtran，可以對圖片中出現的鋸齒等無損進行操作，同時它還可以優化和清除圖當中的注釋以及其它的無用信息
最后，把所有的圖片紡一的jpg或者是gif或者png格式，行適當的轉，可以達到很好優化效果，
盡量避免使用bmp格式，對用戶上傳的格式進行一個格式轉換可以達到很好的壓縮效果
Jpegtran
JPEG的壓縮工具有jpegtran和jpegoptim，這兩款工具的壓縮效果幾乎沒有區別，在這里我們推薦使用jpegtran，相比后者，jpegtran可以進行progressive編碼，使圖片漸進式的展現，先顯示模糊的圖片，再逐步清晰。
推薦命令行參數：
jpegtran –copy none –optimize -progressive -outfile out.jpg in.jpg
想知道這些參數的具體作用，可使用命令“jpegtran –h”了解，
4.2、使用合理的圖片尺寸
不要使用一個比實際需要大得多的圖片，不要在網頁中縮放圖片
4.3、favicon.ico要小而且要可緩存
favicon.ico位為網店的根目錄
favicon.ico文件不要缺少，而文件要盡量小，可以緩存
4.4、使用css Sprites優化頁面小圖片
CSS Sprites技術中，水平排列圖片會比垂直排列效果更好
顏色相近的圖片組合在一起,可以降低顏色數
合理的應用CSS Sprites技術，不要在Spirite的圖像中間留有較大空隙
五、優化CSS和JavaScript
5.1、把樣式表置于頂部
開發階段將樣式和代碼分離，開發完畢后再將樣式放在頁面的<head>頭部中
5.2、使用<link>代替@import
<link type="text/css"" rel="stylesheet" href="style.css" />用<link>代替@import來實現外部樣式表的導入
5.3、避免使用濾鏡
避免使用濾鏡，使用PNG格式的圖片來代替，主流瀏覽器一般都支持這種格式，必要時使用CSS Hack來處理IE6瀏覽器下的效果
5.4、精簡CSS和JavaScript
精簡工具:
JSMin:javascript
YUI Compressor: javascript也可以用來精簡CSS
<script>和<style>代碼塊也可以并且應該進行消減
精簡代碼，采用縮寫
5.5、把JavaScript放在HTML的底部
把腳本放在HTML頁面底部
(document.write()輸出語句例外)
六、優化Cookie
6.1、縮小Cookies大小
- 去除不必要的Cookie
- 設置合理的過期時間
6.2、避免使用全局域名的Cookie
應該以圖片等頁面元素使用沒有Cookie的域名
七、服務器端優化
7.1、使用內容分發網絡
Content Delivery Network簡稱為CDN
使用CDN(內容分發網絡)，但成本高
7.2、為文件頭指定Expires或者Cache-Control
靜態內容設置：Expires的值為"Never expire"(永不過期)
動態內容設置：Cache-Control設置合適的值如"no-cache"
Expires文件頭經常用于圖像文件，但是應該在所有的內容當中使用，包括腳本、樣式表和Flash等
7.3、使用Gzip壓縮文件內容
開啟應用服務器端的Gzip壓縮設置
在Tomcat中啟用Gzip壓縮：
修改%TOMCAT_HOME%/conf/server.xml，修訂節點如下：
<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"/> 從上面節點的屬性可以看出，要使用gzip壓縮功能，你需要在Connector節點中加上如下屬性compression="on" 打開壓縮功能 compressionMinSize="50" 啟用壓縮的輸出內容大小，默認為2KB noCompressionUserAgents="gozilla, traviata" 對于以下的瀏覽器，不啟用壓縮 compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 哪些資源類型需要壓縮7.4、使用GET來完成AJAX請求
- POST:先發送文件頭，然后才發送數據
- GET:一個TCP包
獲取數據時建議使用GET,相反，發送并在服務端保存數據時才使用POST
IE中URL最大長度為2K,如果獲取的數據大于2K，就不能使用GET，
八、開發角度看優化
動態頁面的弊端：
- 服務器壓力大
- 頁面響應時間長
- 安全問題
實施靜態化的原因：
- 提高訪問速度
- 減輕服務器壓力
- 加強安全性
- 利于搜索引擎收錄
九、如何靜態化網站
目前絕大多數網站都是采用：模板技術 來對網站靜態化
9.1、網站靜態化的好處
效率方面：
- 純靜態化HTML頁面：以HTM/HTML結尾，效率最高，消耗最小，速度最快
- 減輕服務器的壓力：相比動態頁面要執行腳本，數據庫操作，靜態頁面只需要將相應的靜態頁面返回給客戶端
- 利于搜索引擎收錄：動態頁面的生成是采用數據庫內容，所以網頁內容主題的永恒性并不能保證，這樣就造成了搜索引擎的閱讀困難，也就是搜索引擎抓不住一個永恒的主題，因此不能輸入到搜索引擎的緩存當中。別外，動態連接，存在一個信任問題，用記以及搜索引擎無法確定這個頁面會一直存在。搜索引擎對于靜態鏈接就更加友好，所以把動太網址進行URL重寫使其靜態化，是一個非常重要的優化技巧
- 提高服務器的性能：動態頁面要經常讀取數據庫，而靜態頁面只需要將相應的靜態頁面返回給客戶端
安全方面：
- 防SQL注入：靜態頁面根本就不存在數據庫操作，杜絕了SQL注入的可能性
- 網站出錯時，不影響網站正常訪問。動態頁面：如果發生錯誤或者是數據庫出現了問題，那么從數據庫讀取數據的頁面就必然無法正常的訪問了。而靜態頁面只會在生成靜態頁面時調用數據庫操作，生成之后就不會對數據庫進行任何操作了，因此媽便是數據庫崩潰了，用戶仍然可以訪問到已經存在的靜態頁面
9.2、靜態化實現方式-模板技術
對網站必要的部分實行靜態化操作,同一個網站下的不同網頁，風格一般都要保持一致，不同的只是內容，
讓靜態化的時候能夠重用頁面的整體框架，風格等這些就是模板
9.3、JAVA中靜態化操作
Velocity或者FreeMarker等模板框架來實現。
它允許任何人僅簡單的使用模板語言，來引用由JAVA代碼定義的對象。
當Velocity應用于web開發時，界面設計人員可以和java程序開發人員，同步開發一個遵循MVC架構的WEB站點，也就是說，頁面設計人員可以只關注頁面的顯示效果，而java程序開發人員只關注業務邏輯編碼的實現。
Velocity將java代碼從web頁面中分離出來，為web站點的長期維護提供了便利
十、初識MVC
MVC:mode view ?controller
十一、優化數據庫查詢
11.1、在查詢頻繁的列上添加合適的索引
- 判斷并建立必要的索引：使所創建的索引對數據的工作效率提高有所幫助
- 對索引使用一些規則：創建索引時，應該與實際的查詢相結合
- 合登理的索引對SQL語句的意義：確保其得到了真正的使用，能發揮作用
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會導致建立的索引效，降低查詢效率
十二、性能監測
12.1、為什么需要監測網站的性能
網站的性能是隨著瀏覽量以及硬件設施的不同而發生變化的，網站在運營前或者運營期間有必要對網站整體性能進行監測
12.2、監測階段
- 網站開發期間
- 網站運營期間
12.3、監測軟件
- 網站開發期間：使用LoadRunner等專業的負載測試工具
使用LoadRunner等專業的負載測試工具優點：
- 輕松創建虛擬用戶：Virtual User Generator輕松創建虛擬用戶，以虛擬用戶的方式模擬真實用戶的業務操作行為
- 創建真實的負載：Controller,來設置業務流程組合與虛擬用戶數量，很快的組織起多用戶的測試方案
- 定位性能的問題：LoadRunner內含集成的實時監測器，在負載測試任何時間，都可以觀測到應用系統的運行性能
- 分析結果以精確定位問題所在：測試完畢合，會收集匯總所有數據并生成高級的測試報告。
- 重復測試保證系統發布的高性能：Controller，允許重復執行與出錯修改前的相同測試方案
- 網站運營期間：監控寶，美圖的Service Uptime,Uptime Robot等
?
總結
- 上一篇： 在翻译群里看到的一个句子的翻译
- 下一篇： C专家编程 总结