由于水平有限，針對該網(wǎng)站所作的測試肯定存在不科學(xué)跷睦、不合理的地方，不當(dāng)之處請諒解肋演。本文僅供相關(guān)技術(shù)參考之用抑诸。
內(nèi)容再豐富的網(wǎng)站，如果慢到無法訪問也是毫無意義的爹殊；SEO做的再好的網(wǎng)站蜕乡，如果搜索蜘蛛抓不到也是白搭；UE設(shè)計(jì)的再人性化的網(wǎng)站梗夸，如果用戶連看都看不到也是空談层玲。
Web應(yīng)用性能優(yōu)化黃金法則：先優(yōu)化前端程序(front-end)的性能，因?yàn)檫@是80%或以上的最終用戶響應(yīng)時間的花費(fèi)所在。（詳情請看：雅虎網(wǎng)站前端網(wǎng)頁優(yōu)化的14條原則）
1.YSlow評級
Chrome瀏覽器的網(wǎng)絡(luò)模塊進(jìn)行人工觀察與分析辛块，難免會有效率低下畔派、分析不全面的問題。因此應(yīng)當(dāng)使用自動化的工具進(jìn)行更深入的分析润绵。
YSlow是雅虎公司開發(fā)的一個對網(wǎng)站前端性能進(jìn)行分析的插件线椰，最初作為Firefox瀏覽器的插件發(fā)布，后來也陸續(xù)有了Chrome等瀏覽器的插件尘盼。這里使用Firefox下的YSlow插件對指揮旅游首頁性能進(jìn)行分析士嚎。
在23個評級規(guī)則中，有4條未能達(dá)到A或B級（A意味著性能最優(yōu)悔叽，F(xiàn)意味著有必要進(jìn)行深入優(yōu)化），它們應(yīng)作為網(wǎng)站前端性能優(yōu)化的主要入手點(diǎn)爵嗅，分別是：
① 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（把小圖標(biāo)合并成一張大圖）;
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)驗(yàn)來判斷。合并后的文件如果太大应又，則對單個文件的下載宙项、解析、執(zhí)行的耗時就越長（當(dāng)然株扛，隨著瀏覽器能力的不斷提升尤筐，這個時間相比于網(wǎng)絡(luò)傳輸時間仍是小量）。《Web性能權(quán)威指南》里提到：
谷歌PageSpeed團(tuán)隊(duì)的測試表明洞就，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進(jìn)行無緩存加載時間測試（每次刷新頁面之前，都先執(zhí)行清空瀏覽器緩存的操作）鸣哀；同時架忌，也對第二次加載的時間進(jìn)行了記錄，以作為有無緩存的性能對比我衬。詳細(xì)結(jié)果如圖 4所示叹放。由圖可見，經(jīng)過優(yōu)化后挠羔，頁面無緩存的情況下完全加載時間為3.31秒井仰，比優(yōu)化之前減少了一個數(shù)量級，加載速度有很明顯的提升破加。
4.總結(jié)與展望
網(wǎng)站前端性能優(yōu)化中最首要的原則是：優(yōu)先針對瓶頸進(jìn)行優(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)致本項(xiàng)評分較低吧寺，但本域下的資源的Expires頭都已經(jīng)符號符合其評判標(biāo)準(zhǔn)了；而對于②散劫，由于目前服務(wù)器只申請了一個域名稚机，靜態(tài)資源大都從該域名下獲取，導(dǎo)致評分較低获搏。這些都是未來可以進(jìn)一步開展優(yōu)化的方面赖条。
瀏覽器執(zhí)行“每個服務(wù)端最大連接數(shù)”的限制是根據(jù)URL上的主機(jī)名，而不是解析出來的IP地址。這對那些想把內(nèi)容分配到多個域的人來說是個好消息纬乍，他們不必額外部署服務(wù)器碱茁，而是為新域建立一條CNAME記錄。CNAME僅僅是域名的一個別名仿贬。即使域名都指向同一個服務(wù)器纽竣，瀏覽器依舊會為每個主機(jī)名開放最大連接數(shù)〖肜幔——《高性能網(wǎng)站建設(shè)進(jìn)階指南》
目前很多網(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/
