由于水平有限，針對該網(wǎng)站所作的測試肯定存在不科學(xué)、不合理的地方，不當(dāng)之處請諒解。本文僅供相關(guān)技術(shù)參考之用。
內(nèi)容再豐富的網(wǎng)站，如果慢到無法訪問也是毫無意義的；SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭；UE設(shè)計的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。
Web應(yīng)用性能優(yōu)化黃金法則：先優(yōu)化前端程序(front-end)的性能，因為這是80%或以上的最終用戶響應(yīng)時間的花費所在。（詳情請看：雅虎網(wǎng)站前端網(wǎng)頁優(yōu)化的14條原則）
1.YSlow評級
Chrome瀏覽器的網(wǎng)絡(luò)模塊進行人工觀察與分析，難免會有效率低下、分析不全面的問題。因此應(yīng)當(dāng)使用自動化的工具進行更深入的分析。
YSlow是雅虎公司開發(fā)的一個對網(wǎng)站前端性能進行分析的插件，最初作為Firefox瀏覽器的插件發(fā)布，后來也陸續(xù)有了Chrome等瀏覽器的插件。這里使用Firefox下的YSlow插件對指揮旅游首頁性能進行分析。
在23個評級規(guī)則中，有4條未能達到A或B級（A意味著性能最優(yōu)，F(xiàn)意味著有必要進行深入優(yōu)化），它們應(yīng)作為網(wǎng)站前端性能優(yōu)化的主要入手點，分別是：
① F：減少HTTP請求次數(shù)
② C：使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）
③ F：添加較長的Expires頭
④ F：使用gzip壓縮組件
⑤ E：壓縮javascript和CSS
⑥ F：Use cookie-free domains，使用無cookie的域名
2.采取的前端性能優(yōu)化技術(shù)
1.使用Grunt、gulp、webpack等自動化構(gòu)建工具來壓縮合并組件。
2.服務(wù)器開啟Gzip壓縮。
3.圖片壓縮與拼接、再把圖片拼接：CSS Sprites（把小圖標合并成一張大圖）;
3.頁面體積與加載時間
3.1頁面體積
瀏覽器視口分辨率：1920×746像素。圖片的優(yōu)化只是針對HTTP請求次數(shù)，其前后尺寸變化不大，因此暫不考慮優(yōu)化前后的差別。JavaScript請求數(shù)量“*+4”表示其中4個請求來自其他域（主要是搜狗地圖服務(wù)）。
優(yōu)化前后文件體積壓縮率 = 優(yōu)化后的體積÷優(yōu)化前的體積
文件壓縮之后究竟應(yīng)該多大才算合適？目前也無定論，只能根據(jù)經(jīng)驗來判斷。合并后的文件如果太大，則對單個文件的下載、解析、執(zhí)行的耗時就越長（當(dāng)然，隨著瀏覽器能力的不斷提升，這個時間相比于網(wǎng)絡(luò)傳輸時間仍是小量）。《Web性能權(quán)威指南》里提到：
谷歌PageSpeed團隊的測試表明，30~50KB（壓縮后）是每個JavaScript文件大小的合適范圍：既大道了能夠減少小文件帶來的網(wǎng)絡(luò)延遲，還能確保遞增及分層式的執(zhí)行。
3.2頁面加載時間
10Mb帶寬下，操作系統(tǒng)Windows 8 x64，內(nèi)存8GB，CPU Intel i5，屏幕分辨率1366×768像素，使用Chrome瀏覽器（主版本號38）于2014-12-25 21:08至21:45，每隔1~2分鐘對網(wǎng)站主頁面/main.jsp進行無緩存加載時間測試（每次刷新頁面之前，都先執(zhí)行清空瀏覽器緩存的操作）；同時，也對第二次加載的時間進行了記錄，以作為有無緩存的性能對比。詳細結(jié)果如圖 4所示。由圖可見，經(jīng)過優(yōu)化后，頁面無緩存的情況下完全加載時間為3.31秒，比優(yōu)化之前減少了一個數(shù)量級，加載速度有很明顯的提升。
4.總結(jié)與展望
網(wǎng)站前端性能優(yōu)化中最首要的原則是：優(yōu)先針對瓶頸進行優(yōu)化。所謂瓶頸，乃是制約性能的最關(guān)鍵因素。對于網(wǎng)站，其第一瓶頸為Gzip壓縮未開啟。開啟壓縮之后的瓶頸，則是組件未壓縮。對于中小型網(wǎng)站來說，解決了前幾個瓶頸問題，性能問題也就解決了一大半。
YSlow評級仍為3個方面給出F評分：
① F：減少HTTP請求次數(shù)；
② F：添加較長的Expires頭；
③ F：Use cookie-free domains，使用無cookie的域名。
其中，①是仍需繼續(xù)優(yōu)化的方面；至于②，由于使用的CDN和搜狗地圖服務(wù)對其資源并未添加Expires頭，導(dǎo)致本項評分較低，但本域下的資源的Expires頭都已經(jīng)符號符合其評判標準了；而對于②，由于目前服務(wù)器只申請了一個域名，靜態(tài)資源大都從該域名下獲取，導(dǎo)致評分較低。這些都是未來可以進一步開展優(yōu)化的方面。
瀏覽器執(zhí)行“每個服務(wù)端最大連接數(shù)”的限制是根據(jù)URL上的主機名，而不是解析出來的IP地址。這對那些想把內(nèi)容分配到多個域的人來說是個好消息，他們不必額外部署服務(wù)器，而是為新域建立一條CNAME記錄。CNAME僅僅是域名的一個別名。即使域名都指向同一個服務(wù)器，瀏覽器依舊會為每個主機名開放最大連接數(shù)。——《高性能網(wǎng)站建設(shè)進階指南》
目前很多網(wǎng)站的常見做法是分離圖片，即讓網(wǎng)站的文本資源從域1下載的同時，讓所需的全部圖片資源從域2開始并行下載
[1]. Steve Souders. High Performance Web Sites [M].
[2]. YSlow官網(wǎng)，http://yslow.org/
[3]. Grunt中文網(wǎng)，http://www.gruntjs.net/
[4]. Gulp官網(wǎng)，http://www.gulpjs.com.cn/
[5]. webpack中文網(wǎng)，http://webpackdoc.com/
