在公司做了好多網(wǎng)頁項(xiàng)目，這里合并下一些網(wǎng)頁性能優(yōu)化的帖子，作為知識目錄
減少網(wǎng)站加載時(shí)間的最有效方式如下：
- 減少網(wǎng)站的HTTP請求數(shù)。
- 優(yōu)化圖片
- 合并壓縮腳本
1.減少HTTP請求數(shù)：可通過CSS Sprite（又稱CSS雪碧）—將多個(gè)圖片整合到一個(gè)圖片中，使用CSS來進(jìn)行定位顯示。頁面加載時(shí)，一次性加載整圖，有效減輕服務(wù)器壓力。同時(shí)，縮短了懸停加載圖片所需的時(shí)間延遲，使得用戶瀏覽行為更加流暢，不會停頓。
2.優(yōu)化圖片：推薦使用PNG8格式，PNG8格式在一般情況下，無論是體積壓縮比還是對各瀏覽器透明度兼容都很不錯(cuò)。
圖片優(yōu)化還可以從另外兩方面進(jìn)行，色盤范圍和壓縮算法，先通過輸出時(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)行存儲：
1、圖像上顏色較少，并且主要以純色或者平滑的漸變色進(jìn)行填充。
2、具備較大亮度差異以及強(qiáng)烈對比的簡單圖像（如“立刻購買”按鈕中的背景和文字）。
根據(jù)經(jīng)驗(yàn)具備上述條件的圖像一般是使用photoshop或其他軟件中的矢量工具進(jìn)行繪制然后再保存成位圖的圖像。
對于寫實(shí)的攝影圖像或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達(dá)到最佳的壓縮效果。
在存儲圖像時(shí)采用JPG還是PNG主要依據(jù)圖像上的色彩層次和顏色數(shù)量進(jìn)行選擇。一般層次豐富顏色較多的圖像采用JPG存儲，而顏色簡單對比強(qiáng)烈的則需要采用PNG。但也會有一些特殊情況，例如有些圖像盡管色彩層次豐富，但由于圖片尺寸較小，上面包含的顏色數(shù)量有限時(shí)，也可以嘗試用PNG進(jìn)行存儲。而有些矢量工具繪制的圖像由于采用較多的濾鏡特效也會形成豐富的色彩層次，這個(gè)時(shí)候就需要采用JPG進(jìn)行存儲了。
另外還有一個(gè)原則就是用于頁面結(jié)構(gòu)的基本視覺元素，如容器的背景、按鈕、導(dǎo)航的背景等應(yīng)該盡量用PNG格式進(jìn)行存儲，這樣才能更好的保證設(shè)計(jì)品質(zhì)。而其他一些內(nèi)容元素，如廣告Banner、商品圖片等對質(zhì)量要求不是特別苛刻的，則可以用JPG去進(jìn)行存儲從而降低文件大小。
對于圖片的壓縮，最常見的分有損，無損壓縮。無損壓縮譬如去除exif信息，重新排列像素存儲方式等，有損壓縮譬如合并相似像素，減少可見像素點(diǎn)等?，F(xiàn)在這些壓縮算法都可以用現(xiàn)成的成熟的庫實(shí)現(xiàn)，以PHP為例子，可以使用pngcrush做PNG 的無損壓縮，pngquant做PNG 的有損壓縮。JPEG可使用imageMagick和jpegtran。這里推薦下imageMagick，相對于其他圖片處理的庫，這個(gè)庫可控制的功能更多，并且支持多種編程語言。
可使用類似智圖這類的壓縮應(yīng)用進(jìn)行壓縮。
3.合并&壓縮腳本：對CSS和JavaScript進(jìn)行合并和壓縮。
腳本拆分可以讓維護(hù)人員更容易找到對應(yīng)內(nèi)容，但同時(shí)增加了頁面鏈接數(shù)，因此可適當(dāng)合并腳本。
使用Minify壓縮JS和CSS
Minify把CSS和JS壓縮和削減(Minify：去掉空格回車符等)，以及把多個(gè)CSS，JS文件整合到一個(gè)文件里。不要以為你的大帶寬沒有必要進(jìn) 行這類優(yōu)化。使用它的理由更重要的是文件合并，而不是壓縮，文件整合可以減少瀏覽器端不斷發(fā)出新的連接請求，就像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)化代碼，格式化代碼功能，目前國內(nèi)能提供UglifyJS壓縮的都還處在1.0版本，本站率先升級到 2.0 時(shí)代。YUI compressor
YUI compressor 是Java編寫的壓縮工具，由雅虎發(fā)布，壓縮是 100％ 的安全，比大多數(shù)其他工具有更高的壓縮比， 一般代碼的壓縮率達(dá)到 40％ 至 60％，YUI compressor 也能夠壓縮CSS文件，國內(nèi)互聯(lián)網(wǎng)公司，阿里、淘寶、百度等都是采用 YUI compressor 內(nèi)核壓縮后發(fā)布代碼。JSPacker
JSPacker 由PHP編寫的壓縮工具，可以混淆代碼保護(hù)知識產(chǎn)權(quán)，產(chǎn)生的代碼兼容IE、FireFox等常用瀏覽器，國內(nèi)大部分在線工具網(wǎng)站都采用這種算法壓縮，只因?yàn)榇怂惴ú捎肞HP編寫，正則表達(dá)式替換語句，沒有語法分析內(nèi)核，環(huán)境搭建成本低，壓縮率上遠(yuǎn)不如以上兩種內(nèi)核，并且混淆代碼頁不符合開源精神。JsMin
JsMin 是用C語言編寫的一個(gè)輕量級JS壓縮器，去除JavaScript文件中的注釋和不必要的空格。它通常減少了一半的文件大小，從而導(dǎo)致更快的下載速度。
另外一些不是屬于提升性能方法，而是通過別的加載手段使得用戶感受度提升的方式：
· 緩存
使用緩存可以減少向服務(wù)器的請求數(shù)，節(jié)省加載時(shí)間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時(shí)間戳）
a) 緩存一切可緩存的資源
b) 使用長Cache（使用時(shí)間戳更新Cache）
c) 使用外聯(lián)式引用CSS、JavaScript
· 按需加載
將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時(shí)才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會導(dǎo)致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過Media Query加載
· 預(yù)加載
大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面。但Loading時(shí)間過長，會造成用戶流失
對用戶行為分析，可以在當(dāng)前頁加載下一頁資源，提升速度
a) 可感知Loading(如進(jìn)入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁）
· 減少Cookie
Cookie會影響加載速度，所以靜態(tài)資源域名不使用Cookie
· 避免重定向
重定向會影響加載速度，所以在服務(wù)器正確設(shè)置避免重定向
· 異步加載第三方資源
第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源
參考：
