• 開(kāi)啟GZIP

以tomcat為例 在路徑\apache-tomcat-7.0.77\conf\下找到server.xml文件 找到下圖位置

找到這里.png

compression="on"
compressionMinSize="50"
noCompressionUserAgents="gozilla,traviata"
compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"

變成這樣

更改后.png

然后重啟tomcat

打開(kāi)項(xiàng)目 然后開(kāi)啟調(diào)試 觀察

請(qǐng)求資源出現(xiàn)如下字樣為GZIP開(kāi)啟成功

GZIP開(kāi)啟成功.png

開(kāi)啟前性能

開(kāi)啟前.png

開(kāi)啟后性能

開(kāi)啟后.png

compression="on" //打開(kāi)壓縮功能 
compressionMinSize="50" //啟用壓縮的輸出內(nèi)容大小 默認(rèn)為2KB 
noCompressionUserAgents="gozilla, traviata" //對(duì)于以下的瀏覽器 不啟用壓縮 
compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" //哪些資源類型需要壓縮

注意：如果發(fā)現(xiàn)內(nèi)容沒(méi)有被壓縮 可以考慮調(diào)整compressionMinSize大小 如果請(qǐng)求資源小于這個(gè)數(shù)值 則不會(huì)啟用壓縮
注意：測(cè)試效果前需清除瀏覽器緩存

• 優(yōu)化圖像

懶加載

懶加載可以延遲加載長(zhǎng)頁(yè)面中的圖片 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入 直到滾動(dòng)到所在位置才請(qǐng)求加載 這一點(diǎn)和預(yù)加載剛好相反 預(yù)加載是將圖片全部請(qǐng)求然后存在本地緩存中 這犧牲了服務(wù)器的性能 提高了用戶體驗(yàn)

懶加載的原理是在img標(biāo)簽中將真正的圖片地址存儲(chǔ)在自定義屬性data-ori中 進(jìn)入到可視區(qū)域后將data-ori的值賦給src

這里可以使用基于jquery的插件lazyload 具體實(shí)現(xiàn)方法可以參考我的這篇文章

CSS SPRITE
即CSS精靈 將多個(gè)零散的小圖片（多為圖標(biāo)）整合到一張背景圖中 通過(guò)減少個(gè)數(shù)即減少請(qǐng)求來(lái)達(dá)到加速的目的 有很多在線生成css sprit的網(wǎng)站可以作為輔助

• 去掉不必要的插件

有些插件很炫酷 但是是不必要的功能

• 減少DNS查詢

直接的方式是減少網(wǎng)站請(qǐng)求的域 即可減少DNS查詢的次數(shù) 但同時(shí)會(huì)造成并行下載數(shù)減少 因此建議將內(nèi)容發(fā)布到至少2個(gè) 至多4個(gè)不同的主機(jī)名上

• 使用CDN

CDN是高性能網(wǎng)絡(luò)服務(wù) 國(guó)內(nèi)沒(méi)有特別穩(wěn)定的 使用過(guò)百度的CDN 很多靜態(tài)資源都沒(méi)有 并且更新也不及時(shí) 目前使用的是BootCDN

• 按需加載

避免把所有js全都寫(xiě)在公共的模板中 有的頁(yè)面并不需要它

• 壓縮CSS和JavaScript

上線的CSS/JS需要壓縮以減少尺寸 通常會(huì)使用YUI Compressor和UglifyJS 如果使用了webpack 那么可以直接使用集成的插件進(jìn)行壓縮 最后還可以使用一些在線工具
YUI Compressor 使用方法
YUI Compressor 官網(wǎng)
UglifyJS 使用方法
UglifyJS 官網(wǎng)
在線工具
在線工具

• 參考

可以參考比較古老的一本書(shū)《高性能網(wǎng)站建設(shè)指南》