在公司做了好多網(wǎng)頁(yè)項(xiàng)目，這里合并下一些網(wǎng)頁(yè)性能優(yōu)化的帖子，作為知識(shí)目錄
減少網(wǎng)站加載時(shí)間的最有效方式如下：
- 減少網(wǎng)站的HTTP請(qǐng)求數(shù)腰奋。
- 優(yōu)化圖片
- 合并壓縮腳本
1.減少HTTP請(qǐng)求數(shù)：可通過(guò)CSS Sprite（又稱CSS雪碧）—將多個(gè)圖片整合到一個(gè)圖片中，使用CSS來(lái)進(jìn)行定位顯示。頁(yè)面加載時(shí)浴麻，一次性加載整圖，有效減輕服務(wù)器壓力囤攀。同時(shí)软免，縮短了懸停加載圖片所需的時(shí)間延遲，使得用戶瀏覽行為更加流暢焚挠，不會(huì)停頓膏萧。
2.優(yōu)化圖片：推薦使用PNG8格式，PNG8格式在一般情況下蝌衔，無(wú)論是體積壓縮比還是對(duì)各瀏覽器透明度兼容都很不錯(cuò)榛泛。
圖片優(yōu)化還可以從另外兩方面進(jìn)行，色盤范圍和壓縮算法噩斟，先通過(guò)輸出時(shí)精準(zhǔn)的色數(shù)設(shè)定曹锨，再加上輸出后的二次優(yōu)化，可以使得圖片質(zhì)量和大小達(dá)到一個(gè)極優(yōu)點(diǎn)剃允，二次優(yōu)化工具有：
當(dāng)然最新的一種格式是Google強(qiáng)推的WebP格式沛简，關(guān)于WebP更多內(nèi)容可參看36Kr此篇報(bào)道
具備以下條件的圖像更適合用PNG8格式進(jìn)行存儲(chǔ)：
1、圖像上顏色較少斥废，并且主要以純色或者平滑的漸變色進(jìn)行填充椒楣。
2、具備較大亮度差異以及強(qiáng)烈對(duì)比的簡(jiǎn)單圖像（如“立刻購(gòu)買”按鈕中的背景和文字）营袜。
根據(jù)經(jīng)驗(yàn)具備上述條件的圖像一般是使用photoshop或其他軟件中的矢量工具進(jìn)行繪制然后再保存成位圖的圖像。
對(duì)于寫實(shí)的攝影圖像或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達(dá)到最佳的壓縮效果丑罪。
在存儲(chǔ)圖像時(shí)采用JPG還是PNG主要依據(jù)圖像上的色彩層次和顏色數(shù)量進(jìn)行選擇荚板。一般層次豐富顏色較多的圖像采用JPG存儲(chǔ)凤壁，而顏色簡(jiǎn)單對(duì)比強(qiáng)烈的則需要采用PNG。但也會(huì)有一些特殊情況跪另，例如有些圖像盡管色彩層次豐富拧抖，但由于圖片尺寸較小，上面包含的顏色數(shù)量有限時(shí)免绿，也可以嘗試用PNG進(jìn)行存儲(chǔ)唧席。而有些矢量工具繪制的圖像由于采用較多的濾鏡特效也會(huì)形成豐富的色彩層次，這個(gè)時(shí)候就需要采用JPG進(jìn)行存儲(chǔ)了嘲驾。
另外還有一個(gè)原則就是用于頁(yè)面結(jié)構(gòu)的基本視覺(jué)元素淌哟，如容器的背景、按鈕辽故、導(dǎo)航的背景等應(yīng)該盡量用PNG格式進(jìn)行存儲(chǔ)徒仓，這樣才能更好的保證設(shè)計(jì)品質(zhì)。而其他一些內(nèi)容元素誊垢，如廣告Banner掉弛、商品圖片等對(duì)質(zhì)量要求不是特別苛刻的，則可以用JPG去進(jìn)行存儲(chǔ)從而降低文件大小喂走。
對(duì)于圖片的壓縮殃饿，最常見(jiàn)的分有損，無(wú)損壓縮芋肠。無(wú)損壓縮譬如去除exif信息乎芳，重新排列像素存儲(chǔ)方式等，有損壓縮譬如合并相似像素业栅，減少可見(jiàn)像素點(diǎn)等∶敫溃現(xiàn)在這些壓縮算法都可以用現(xiàn)成的成熟的庫(kù)實(shí)現(xiàn)，以PHP為例子碘裕，可以使用pngcrush做PNG 的無(wú)損壓縮携取，pngquant做PNG 的有損壓縮。JPEG可使用imageMagick和jpegtran帮孔。這里推薦下imageMagick雷滋，相對(duì)于其他圖片處理的庫(kù)，這個(gè)庫(kù)可控制的功能更多文兢，并且支持多種編程語(yǔ)言晤斩。
可使用類似智圖這類的壓縮應(yīng)用進(jìn)行壓縮。
3.合并&壓縮腳本：對(duì)CSS和JavaScript進(jìn)行合并和壓縮姆坚。
腳本拆分可以讓維護(hù)人員更容易找到對(duì)應(yīng)內(nèi)容澳泵，但同時(shí)增加了頁(yè)面鏈接數(shù)，因此可適當(dāng)合并腳本兼呵。
使用Minify壓縮JS和CSS
Minify把CSS和JS壓縮和削減(Minify：去掉空格回車符等)兔辅，以及把多個(gè)CSS腊敲，JS文件整合到一個(gè)文件里。不要以為你的大帶寬沒(méi)有必要進(jìn) 行這類優(yōu)化维苔。使用它的理由更重要的是文件合并碰辅，而不是壓縮，文件整合可以減少瀏覽器端不斷發(fā)出新的連接請(qǐng)求介时，就像FTP服務(wù)器一樣没宾，多個(gè)小文件 和一個(gè)大文件耗時(shí)是不一樣的。
Minify使用PHP編寫沸柔，項(xiàng)目地址
CSS 在線壓縮：
Cleancss.com
功能最強(qiáng)大循衰，設(shè)置項(xiàng)最多Css_compressor
可壓縮代碼片段、URL勉失、文件CSS Drive:CSS Compressor
直觀易用
JS壓縮工具：
UglifyJS
UglifyJS 是用 NodeJS 編寫的 JavaScript 壓縮工具羹蚣，是目前最流行的JS壓縮工具，JQuery 就是使用此工具壓縮乱凿，UglifyJS 壓縮率高顽素，壓縮選項(xiàng)多，并且具有優(yōu)化代碼徒蟆，格式化代碼功能胁出，目前國(guó)內(nèi)能提供UglifyJS壓縮的都還處在1.0版本，本站率先升級(jí)到 2.0 時(shí)代段审。YUI compressor
YUI compressor 是Java編寫的壓縮工具全蝶，由雅虎發(fā)布，壓縮是 100％ 的安全寺枉，比大多數(shù)其他工具有更高的壓縮比抑淫， 一般代碼的壓縮率達(dá)到 40％ 至 60％，YUI compressor 也能夠壓縮CSS文件姥闪，國(guó)內(nèi)互聯(lián)網(wǎng)公司始苇，阿里、淘寶筐喳、百度等都是采用 YUI compressor 內(nèi)核壓縮后發(fā)布代碼催式。JSPacker
JSPacker 由PHP編寫的壓縮工具，可以混淆代碼保護(hù)知識(shí)產(chǎn)權(quán)避归，產(chǎn)生的代碼兼容IE荣月、FireFox等常用瀏覽器，國(guó)內(nèi)大部分在線工具網(wǎng)站都采用這種算法壓縮梳毙，只因?yàn)榇怂惴ú捎肞HP編寫哺窄，正則表達(dá)式替換語(yǔ)句，沒(méi)有語(yǔ)法分析內(nèi)核，環(huán)境搭建成本低萌业，壓縮率上遠(yuǎn)不如以上兩種內(nèi)核蔑担，并且混淆代碼頁(yè)不符合開源精神。JsMin
JsMin 是用C語(yǔ)言編寫的一個(gè)輕量級(jí)JS壓縮器咽白，去除JavaScript文件中的注釋和不必要的空格。它通常減少了一半的文件大小鸟缕，從而導(dǎo)致更快的下載速度晶框。
另外一些不是屬于提升性能方法，而是通過(guò)別的加載手段使得用戶感受度提升的方式：
· 緩存
使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)懂从，節(jié)省加載時(shí)間授段，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長(zhǎng)Cache（長(zhǎng)Cache資源的更新可使用時(shí)間戳）
a) 緩存一切可緩存的資源
b) 使用長(zhǎng)Cache（使用時(shí)間戳更新Cache）
c) 使用外聯(lián)式引用CSS番甩、JavaScript
· 按需加載
將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時(shí)才加載侵贵，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過(guò)Media Query加載
· 預(yù)加載
大型重資源頁(yè)面（如游戲）可使用增加Loading的方法缘薛，資源加載完成后再顯示頁(yè)面窍育。但Loading時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶流失
對(duì)用戶行為分析宴胧，可以在當(dāng)前頁(yè)加載下一頁(yè)資源漱抓，提升速度
a) 可感知Loading(如進(jìn)入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁(yè)）
· 減少Cookie
Cookie會(huì)影響加載速度，所以靜態(tài)資源域名不使用Cookie
· 避免重定向
重定向會(huì)影響加載速度恕齐，所以在服務(wù)器正確設(shè)置避免重定向
· 異步加載第三方資源
第三方資源不可控會(huì)影響頁(yè)面的加載和顯示乞娄，因此要異步加載第三方資源
參考：
